You've already forked AstralRinth
forked from didirus/AstralRinth
Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)
This commit is contained in:
venashial
213
src/package/styles/variables/spacing.postcss
Normal file
213
src/package/styles/variables/spacing.postcss
Normal file
@@ -0,0 +1,213 @@
|
||||
: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);
|
||||
Reference in New Issue
Block a user