forked from didirus/AstralRinth
213 lines
5.9 KiB
Plaintext
213 lines
5.9 KiB
Plaintext
:root {
|
|
/* these are values for the display CSS property */
|
|
/*
|
|
--display-values: (
|
|
block,
|
|
flex,
|
|
inline,
|
|
inline-block,
|
|
inline-flex,
|
|
none,
|
|
table,
|
|
table-cell
|
|
);
|
|
|
|
// maps edges to respective corners for border-radius
|
|
--edges: (
|
|
top: (top-left, top-right),
|
|
right: (top-right, bottom-right),
|
|
bottom: (bottom-right, bottom-left),
|
|
left: (bottom-left, top-left)
|
|
);
|
|
*/
|
|
|
|
/*
|
|
These are our margin and padding utility spacers. The default step size we
|
|
use is 8px. This gives us a key of:
|
|
0 => 0px
|
|
1 => 4px
|
|
2 => 8px
|
|
3 => 16px
|
|
4 => 24px
|
|
5 => 32px
|
|
6 => 40px */
|
|
--spacer: 8px;
|
|
|
|
/* Our spacing scale */
|
|
--spacer-0: 0; /* 0 */
|
|
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
|
|
--spacer-2: --spacer; /* 8px */
|
|
--spacer-3: calc(var(--spacer) * 2); /* 16px */
|
|
--spacer-4: calc(var(--spacer) * 3); /* 24px */
|
|
--spacer-5: calc(var(--spacer) * 4); /* 32px */
|
|
--spacer-6: calc(var(--spacer) * 5); /* 40px */
|
|
|
|
/*
|
|
/* The list of spacer values
|
|
--spacers: (
|
|
--spacer-0,
|
|
--spacer-1,
|
|
--spacer-2,
|
|
--spacer-3,
|
|
--spacer-4,
|
|
--spacer-5,
|
|
--spacer-6,
|
|
);
|
|
|
|
/* And the map of spacers, for easier looping:
|
|
/* @each --scale, --length in --spacer-map { ... }
|
|
--spacer-map: (
|
|
0: --spacer-0,
|
|
1: --spacer-1,
|
|
2: --spacer-2,
|
|
3: --spacer-3,
|
|
4: --spacer-4,
|
|
5: --spacer-5,
|
|
6: --spacer-6,
|
|
);
|
|
|
|
/* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
|
|
/* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
|
|
/* 80, 96, etc.
|
|
--spacer-7: --spacer * 6; /* 48px
|
|
--spacer-8: --spacer * 8; /* 64px
|
|
--spacer-9: --spacer * 10; /* 80px
|
|
--spacer-10: --spacer * 12; /* 96px
|
|
--spacer-11: --spacer * 14; /* 112px
|
|
--spacer-12: --spacer * 16; /* 128px
|
|
|
|
--spacers-large: (
|
|
7: --spacer-7,
|
|
8: --spacer-8,
|
|
9: --spacer-9,
|
|
10: --spacer-10,
|
|
11: --spacer-11,
|
|
12: --spacer-12,
|
|
);
|
|
|
|
--spacer-map-extended: map-merge(
|
|
(
|
|
0: 0,
|
|
1: --spacer-1,
|
|
2: --spacer-2,
|
|
3: --spacer-3,
|
|
4: --spacer-4,
|
|
5: --spacer-5,
|
|
6: --spacer-6,
|
|
),
|
|
--spacers-large,
|
|
);
|
|
|
|
/* Em spacer variables
|
|
--em-spacer-1: 0.0625em; /* 1/16
|
|
--em-spacer-2: 0.125em; /* 1/8
|
|
--em-spacer-3: 0.25em; /* 1/4
|
|
--em-spacer-4: 0.375em; /* 3/8
|
|
--em-spacer-5: 0.5em; /* 1/2
|
|
--em-spacer-6: 0.75em; /* 3/4
|
|
|
|
/* Size scale
|
|
/* Used for buttons, inputs, labels, avatars etc.
|
|
--size: 16px;
|
|
|
|
--size-0: 0;
|
|
--size-1: --size; /* 16px
|
|
--size-2: --size-1 + 4px; /* 20px
|
|
--size-3: --size-2 + 4px; /* 24px
|
|
--size-4: --size-3 + 4px; /* 28px
|
|
--size-5: --size-4 + 4px; /* 32px
|
|
--size-6: --size-5 + 8px; /* 40px
|
|
--size-7: --size-6 + 8px; /* 48px
|
|
--size-8: --size-7 + 16px; /* 64px
|
|
|
|
/* Fixed-width container variables
|
|
--container-width: 980px;
|
|
--grid-gutter: 10px;
|
|
|
|
// Breakpoint widths
|
|
--width-xs: 0;
|
|
// Small screen / phone
|
|
--width-sm: 544px;
|
|
// Medium screen / tablet
|
|
--width-md: 768px;
|
|
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
|
--width-lg: 1012px;
|
|
// Extra large screen / wide desktop
|
|
--width-xl: 1280px;
|
|
|
|
// Responsive container widths
|
|
--container-sm: --width-sm;
|
|
--container-md: --width-md;
|
|
--container-lg: --width-lg;
|
|
--container-xl: --width-xl;
|
|
|
|
// Breakpoints in the form (name: length)
|
|
--breakpoints: (
|
|
sm: --width-sm,
|
|
md: --width-md,
|
|
lg: --width-lg,
|
|
xl: --width-xl
|
|
);
|
|
|
|
// This map in the form (breakpoint: variant) is used to iterate over
|
|
// breakpoints and create both responsive and non-responsive classes in one
|
|
// loop:
|
|
--responsive-variants: (
|
|
'': '',
|
|
sm: '-sm',
|
|
md: '-md',
|
|
lg: '-lg',
|
|
xl: '-xl',
|
|
);
|
|
|
|
// responsive utility position values
|
|
--responsive-positions: (
|
|
static,
|
|
relative,
|
|
absolute,
|
|
fixed,
|
|
sticky
|
|
);
|
|
|
|
--sidebar-width: (
|
|
sm: 220px,
|
|
md: 256px,
|
|
lg: 296px
|
|
);
|
|
|
|
--sidebar-narrow-width: (
|
|
md: 240px,
|
|
lg: 256px
|
|
);
|
|
|
|
--sidebar-wide-width: (
|
|
lg: 320px,
|
|
xl: 336px
|
|
);
|
|
|
|
--gutter: (
|
|
md: --spacer-3,
|
|
lg: --spacer-4,
|
|
xl: --spacer-5
|
|
);
|
|
|
|
--gutter-condensed: (
|
|
md: --spacer-3,
|
|
lg: --spacer-3,
|
|
xl: --spacer-4
|
|
);
|
|
|
|
--gutter-spacious: (
|
|
md: --spacer-4,
|
|
lg: --spacer-5,
|
|
xl: --spacer-6
|
|
);
|
|
*/
|
|
}
|
|
|
|
/* Breakpoints */
|
|
@custom-media --sm (min-width: 544px);
|
|
@custom-media --md (min-width: 768px);
|
|
@custom-media --lg (min-width: 1012px);
|
|
@custom-media --xl (min-width: 544px);
|