152 lines
4.1 KiB
SCSS
152 lines
4.1 KiB
SCSS
|
@use "sass:math";
|
||
|
|
|
||
|
|
$base: (
|
||
|
|
font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
|
||
|
|
font-family-code: (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
|
||
|
|
|
||
|
|
font-size-root: 16px,
|
||
|
|
font-size-root-sm: 14px,
|
||
|
|
|
||
|
|
font-size-xl: 1.5rem,
|
||
|
|
font-size-lg: 1.25rem,
|
||
|
|
font-size: 1rem,
|
||
|
|
font-size-sm: .85rem,
|
||
|
|
font-size-xs: .7rem,
|
||
|
|
|
||
|
|
font-size-h1-xl: 3.5rem,
|
||
|
|
font-size-h2-xl: 2.5rem,
|
||
|
|
font-size-h3-xl: 2rem,
|
||
|
|
font-size-h4-xl: 1.75rem,
|
||
|
|
font-size-h5-xl: 1.5rem,
|
||
|
|
font-size-h6-xl: 1.5rem,
|
||
|
|
|
||
|
|
font-size-h1-lg: 3rem,
|
||
|
|
font-size-h2-lg: 2rem,
|
||
|
|
font-size-h3-lg: 1.75rem,
|
||
|
|
font-size-h4-lg: 1.5rem,
|
||
|
|
font-size-h5-lg: 1.25rem,
|
||
|
|
font-size-h6-lg: 1.25rem,
|
||
|
|
|
||
|
|
font-size-h1: 2.5rem,
|
||
|
|
font-size-h2: 1.9rem,
|
||
|
|
font-size-h3: 1.5rem,
|
||
|
|
font-size-h4: 1.2rem,
|
||
|
|
font-size-h5: 1rem,
|
||
|
|
font-size-h6: 1rem,
|
||
|
|
|
||
|
|
font-size-h1-sm: 2rem,
|
||
|
|
font-size-h2-sm: 1.5rem,
|
||
|
|
font-size-h3-sm: 1.35rem,
|
||
|
|
font-size-h4-sm: 1.15rem,
|
||
|
|
font-size-h5-sm: 1rem,
|
||
|
|
font-size-h6-sm: 1rem,
|
||
|
|
|
||
|
|
font-size-h1-xs: 1.05rem,
|
||
|
|
font-size-h2-xs: 1rem,
|
||
|
|
font-size-h3-xs: .95rem,
|
||
|
|
font-size-h4-xs: .9rem,
|
||
|
|
font-size-h5-xs: .85rem,
|
||
|
|
font-size-h6-xs: .85rem,
|
||
|
|
|
||
|
|
font-weight: 400,
|
||
|
|
font-weight-bold: 700,
|
||
|
|
|
||
|
|
line-height-xl: 2,
|
||
|
|
line-height-lg: 1.8,
|
||
|
|
line-height: 1.6,
|
||
|
|
line-height-sm: 1.4,
|
||
|
|
line-height-xs: 1.2,
|
||
|
|
|
||
|
|
spacer: 1rem,
|
||
|
|
|
||
|
|
border-radius-lg: .8rem,
|
||
|
|
border-radius: .4rem,
|
||
|
|
border-radius-sm: .2rem
|
||
|
|
);
|
||
|
|
|
||
|
|
$spacers: (
|
||
|
|
0: 0,
|
||
|
|
1: map-get($base, spacer) * .25,
|
||
|
|
2: map-get($base, spacer) * .5,
|
||
|
|
3: map-get($base, spacer),
|
||
|
|
4: map-get($base, spacer) * 1.5,
|
||
|
|
5: map-get($base, spacer) * 3
|
||
|
|
);
|
||
|
|
|
||
|
|
$z-indexes: (
|
||
|
|
actions: 996,
|
||
|
|
mask: 997,
|
||
|
|
sidebar: 998,
|
||
|
|
modal: 999
|
||
|
|
);
|
||
|
|
|
||
|
|
$layout: (
|
||
|
|
header-height: 5rem,
|
||
|
|
header-height-sm: 3rem,
|
||
|
|
content-max-width: 950px,
|
||
|
|
sidebar-width: 250px,
|
||
|
|
sidebar-header-height: 3rem,
|
||
|
|
aside-width: 220px
|
||
|
|
);
|
||
|
|
|
||
|
|
// sm md lg
|
||
|
|
// | ------ | ------ | ------ |
|
||
|
|
// 0 500 1024 -
|
||
|
|
|
||
|
|
$responsive: (
|
||
|
|
sm: 0,
|
||
|
|
md: 500px,
|
||
|
|
lg: 1024px
|
||
|
|
);
|
||
|
|
|
||
|
|
$animation: (
|
||
|
|
duration: .4s,
|
||
|
|
duration-sm: .2s,
|
||
|
|
timing-function: ease-in-out
|
||
|
|
);
|
||
|
|
|
||
|
|
$clickable: (
|
||
|
|
transition: all .2s ease-in-out
|
||
|
|
);
|
||
|
|
|
||
|
|
$button-height-xl: 2.8rem;
|
||
|
|
$button-height-lg: 2.3rem;
|
||
|
|
$button-height: 1.9rem;
|
||
|
|
$button-height-sm: 1.5rem;
|
||
|
|
$button-height-xs: 1.2rem;
|
||
|
|
|
||
|
|
$button: (
|
||
|
|
padding-y-xl: ($button-height-xl - map-get($base, font-size-xl)) * 0.5,
|
||
|
|
padding-x-xl: math.div($button-height-xl, 3),
|
||
|
|
padding-y-lg: ($button-height-lg - map-get($base, font-size-lg)) * 0.5,
|
||
|
|
padding-x-lg: math.div($button-height-lg, 3),
|
||
|
|
padding-y: ($button-height - map-get($base, font-size)) * 0.5,
|
||
|
|
padding-x: math.div($button-height, 3),
|
||
|
|
padding-y-sm: ($button-height-sm - map-get($base, font-size-sm)) * 0.5,
|
||
|
|
padding-x-sm: math.div($button-height-sm, 3),
|
||
|
|
padding-y-xs: ($button-height-xs - map-get($base, font-size-xs)) * 0.5,
|
||
|
|
padding-x-xs: math.div($button-height-xs, 3),
|
||
|
|
|
||
|
|
pill-radius: 6rem,
|
||
|
|
|
||
|
|
circle-diameter-xl: $button-height-xl,
|
||
|
|
circle-diameter-lg: $button-height-lg,
|
||
|
|
circle-diameter: $button-height,
|
||
|
|
circle-diameter-sm: $button-height-sm,
|
||
|
|
circle-diameter-xs: $button-height-xs,
|
||
|
|
|
||
|
|
font-weight: map-get($base, font-weight-bold)
|
||
|
|
);
|
||
|
|
|
||
|
|
$image: (
|
||
|
|
width-xl: 20em,
|
||
|
|
width-lg: 16rem,
|
||
|
|
width: 12rem,
|
||
|
|
width-sm: 8rem,
|
||
|
|
width-xs: 4rem
|
||
|
|
);
|
||
|
|
|
||
|
|
$menu: (
|
||
|
|
horizontal-spacer: 1,
|
||
|
|
horizontal-item-vertical-spacer: 1
|
||
|
|
);
|