172 lines
2.8 KiB
SCSS
172 lines
2.8 KiB
SCSS
/* Grid system */
|
|
$container-padding: 1rem;
|
|
$grid-columns: 12;
|
|
|
|
/* Breakpoints */
|
|
$breakpoints: (
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px,
|
|
xxxl: 1600px
|
|
);
|
|
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px,
|
|
xxl: 1320px,
|
|
xxxl: 1520px
|
|
);
|
|
|
|
/* Display types */
|
|
$display-types: block, flex, inline, inline-block, inline-flex, grid, none;
|
|
|
|
/* Color palette */
|
|
$colors: (
|
|
primary: #aa0b3d,
|
|
primary-alt: #aa0b3da8,
|
|
alt: #b5451896,
|
|
secondary: #333,
|
|
success: #34b97b,
|
|
warning: #ffc107,
|
|
danger: #dc3545,
|
|
info: #0dcaf0,
|
|
light: #e5e5e5,
|
|
dark: #242627,
|
|
white: #ffffff,
|
|
black: #000000,
|
|
muted: #C7C7C7,
|
|
accent-white: #f7f7f7,
|
|
accent: #08bbbb,
|
|
transparent: transparent,
|
|
|
|
// Other colors
|
|
purple:#540f89,
|
|
dark-red: #1e1717,
|
|
dark-red-alt: #1e17179f,
|
|
dark-purple: #0F172A,
|
|
dark-purple-alt: #0F172A9f,
|
|
);
|
|
|
|
/* Spacing scale */
|
|
$spacing-scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem;
|
|
|
|
/* Shadows (soft shadows) */
|
|
$shadows: (
|
|
1: 0 1px 3px rgba(0, 0, 0, 0.12),
|
|
2: 0 2px 6px rgba(0, 0, 0, 0.16),
|
|
3: 0 4px 10px rgba(0, 0, 0, 0.18),
|
|
4: 0 6px 15px rgba(0, 0, 0, 0.20),
|
|
5: 0 10px 24px rgba(0, 0, 0, 0.22)
|
|
);
|
|
|
|
$drop-shadows: (
|
|
1: 0 2px 4px rgba(0, 0, 0, 0.14),
|
|
2: 0 4px 8px rgba(0, 0, 0, 0.18),
|
|
3: 0 8px 16px rgba(0, 0, 0, 0.20),
|
|
4: 0 12px 24px rgba(0, 0, 0, 0.22),
|
|
5: 0 20px 40px rgba(0, 0, 0, 0.24)
|
|
);
|
|
|
|
|
|
|
|
|
|
/* Flex utilities */
|
|
$flex-directions: (
|
|
row: row,
|
|
row-reverse: row-reverse,
|
|
column: column,
|
|
column-reverse: column-reverse
|
|
);
|
|
|
|
$justify-content-values: (
|
|
start: flex-start,
|
|
end: flex-end,
|
|
center: center,
|
|
between: space-between,
|
|
around: space-around,
|
|
evenly: space-evenly
|
|
);
|
|
|
|
$align-items-values: (
|
|
start: flex-start,
|
|
end: flex-end,
|
|
center: center,
|
|
baseline: baseline,
|
|
stretch: stretch
|
|
);
|
|
|
|
/* Button component variables */
|
|
$btn-padding-y: 0.375rem;
|
|
$btn-padding-x: 0.75rem;
|
|
$btn-font-size: 1rem;
|
|
$btn-border-radius: 0.25rem;
|
|
$btn-border-width: 1px;
|
|
$btn-hover-brightness: 0.9;
|
|
|
|
/* Typography */
|
|
$font-family-base: "Nunito", sans-serif;
|
|
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
|
|
$font-sizes: (
|
|
xs: 0.75rem,
|
|
sm: 0.875rem,
|
|
base: 1.1rem,
|
|
lg: 1.35rem,
|
|
xl: 1.8rem,
|
|
xxl: 2.2rem
|
|
);
|
|
|
|
$font-weights: (
|
|
light: 300,
|
|
normal: 400,
|
|
medium: 500,
|
|
semibold: 600,
|
|
bold: 700
|
|
);
|
|
|
|
$line-heights: (
|
|
tight: 1,
|
|
normal: 1.3,
|
|
heading: 1.5
|
|
|
|
);
|
|
|
|
|
|
$border-widths: (
|
|
0: 0,
|
|
1: 1px,
|
|
2: 2px,
|
|
3: 3px
|
|
);
|
|
|
|
$border-radius-sizes: (
|
|
none: 0,
|
|
sm: 0.125rem,
|
|
md: 0.25rem,
|
|
lg: 0.5rem,
|
|
xl: 1rem,
|
|
full: 9999px
|
|
);
|
|
|
|
$spacer: 1rem;
|
|
$spacing: (
|
|
"0": 0,
|
|
"1": $spacer * 0.25,
|
|
"2": $spacer * 0.5,
|
|
"3": $spacer,
|
|
"4": $spacer * 1.5,
|
|
"5": $spacer * 3
|
|
);
|
|
|
|
$gutters: (
|
|
0: 0,
|
|
1: map-get($spacing, "1"),
|
|
2: map-get($spacing, "2"),
|
|
3: map-get($spacing, "3"),
|
|
4: map-get($spacing, "4"),
|
|
5: map-get($spacing, "5")
|
|
); |