diff options
Diffstat (limited to '_sass/common/_variables.scss')
| -rw-r--r-- | _sass/common/_variables.scss | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss new file mode 100644 index 0000000..faf4e98 --- /dev/null +++ b/_sass/common/_variables.scss @@ -0,0 +1,150 @@ +$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)) / 2, + padding-x-xl: $button-height-xl / 3, + padding-y-lg: ($button-height-lg - map-get($base, font-size-lg)) / 2, + padding-x-lg: $button-height-lg / 3, + padding-y: ($button-height - map-get($base, font-size)) / 2, + padding-x: $button-height / 3, + padding-y-sm: ($button-height-sm - map-get($base, font-size-sm)) / 2, + padding-x-sm: $button-height-sm / 3, + padding-y-xs: ($button-height-xs - map-get($base, font-size-xs)) / 2, + padding-x-xs: $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 +); |