From 83697d5cd7063796fe019249b230edc1befb9170 Mon Sep 17 00:00:00 2001 From: Manuel Tancoigne Date: Sun, 18 Nov 2018 22:54:50 +0100 Subject: [PATCH] WIP - Move variables in respective their components --- sass/_config/_variables.scss | 130 --------------------------------- sass/_library/_base.scss | 69 +++++++++++++++++ sass/_library/_responsive.scss | 8 ++ sass/components/_arrows.scss | 2 + sass/components/_buttons.scss | 7 ++ sass/components/_checkbox.scss | 15 +++- sass/components/_forms.scss | 2 + sass/components/_tables.scss | 8 ++ sass/components/_tabs.scss | 8 ++ 9 files changed, 118 insertions(+), 131 deletions(-) diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index e98fc39..71137cc 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -1,80 +1,5 @@ // Config file and project variables -// ---------------- -// Breakpoints zone -// ---------------- - -// Warning: you should use your own values, regardless of the devices -// Best practice is Mobile First: (min-width: $breakpoint) -$tiny : 480px !default; // or 'em' if you prefer, of course -$small : 576px !default; -$medium : 768px !default; -$large : 992px !default; -$extra-large : 1200px !default; - -// ---------- -// Fonts zone -// ---------- - -// Font families -$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack -$font-family-headings : sans-serif !default; // font for h1, h2.. h6 -$font-family-monospace : consolas, courier, monospace !default; // font for code and samples - -// Font sizes (1.6rem value is "16px" equivalent) -$font-size-base : 1.6rem !default; - -$font-sizes: ( - base: ( - mobile : 1.4rem, - desktop : $font-size-base - ), - h1: ( - mobile : 2.8rem, - desktop : 3.2rem - ), - h2: ( - mobile : 2.4rem, - desktop : 2.8rem - ), - h3: ( - mobile : 2.0rem, - desktop : 2.4rem - ), - h4: ( - mobile : 1.8rem, - desktop : 2.0rem - ), - h5: ( - mobile : 1.6rem, - desktop : 1.8rem - ), - h6: ( - mobile : 1.4rem, - desktop : 1.6rem - ) -) !default; - -// Line heights -$line-height-s : 1.3 !default; -$line-height-base : 1.5 !default; -$line-height-l : 1.7 !default; - -// Default margin-bottom -$margin-bottom-base : 1rem !default; -$headings-margin-bottom : $margin-bottom-base /2 !default; -$paragraph-margin-bottom: $margin-bottom-base !default; - -// Font weights -$weight-light : 200 !default; -$weight-book : 300 !default; -$weight-regular : 400 !default; -$weight-medium : 500 !default; -$weight-bold : 700 !default; - -// Activate hyphenation on small screens -$hyphens: false !default; - // ------------ // Spacing zone // ------------ @@ -146,51 +71,13 @@ $color-inverse : $gray-800 !default; $color-ghost : transparent !default; $color-muted : $gray-200 !default; -$color-base : $gray-900 !default; -$background-base : $white !default; - -$forms-color : $gray-800 !default; - // --------------- // Components zone // --------------- -// Component: links -$link-color : $gray-800 !default; -$link-color-hover : darken($link-color, 15%) !default; -$link-decoration : underline !default; -$link-decoration-hover : underline !default; - // Global border-radius $border-radius: 0 !default; -// Component: quotes -$quote-color : $gray-200 !default; - -// Component: arrows -$arrow-color : $black !default; - -// Components: checkboxes, radios, switches -$checkbox-color: $white !default; -$checkbox-background: $gray-800 !default; -$checkbox-size: 2rem !default; -$checkbox-border-radius: 4px !default; -$radio-color: $gray-800 !default; -$radio-background: $white !default; -$switch-color: $white !default; -$switch-background: $gray-800 !default; -$switch-size: 2rem !default; -$switch-border-radius: 3em !default; - -// Component: tables -$table-border : $gray-500 !default; -$table-caption-color : $gray-800 !default; -$table-background : transparent !default; -$table-head-color : $color-base !default; -$table-head-background : transparent !default; -$table-footer-color : $color-base !default; -$table-footer-background : transparent !default; - // Components: buttons, badges, alerts color variants list // Convention is: name - background-color - color - border $variants-list: ( @@ -202,20 +89,3 @@ $variants-list: ( (inverse, $color-inverse, $white, none), (ghost, $color-ghost, $white, 0 0 0 1px $white inset) ) !default; - -// Component: tabs -$tabs-border : $gray-200 !default; -$tabs-active-border : $gray-800 !default; -$tabs-color : $color-base !default; -$tabs-active-color : $gray-800 !default; -$tabs-background : transparent !default; -$tabs-active-background : transparent !default; -$tabs-border-radius : 0 !default; - -// Component: nav burger button -$burger-color : $gray-800 !default; -$burger-background : transparent !default; -$burger-hover-background : transparent !default; -$burger-size : 2.6rem !default; -$burger-weight : 5px !default; // size of stripes -$burger-padding : 0 !default; diff --git a/sass/_library/_base.scss b/sass/_library/_base.scss index e183585..cd4609d 100644 --- a/sass/_library/_base.scss +++ b/sass/_library/_base.scss @@ -2,6 +2,75 @@ /* ==Base (basic styles) */ /* ----------------------------- */ +$color-base : $gray-900 !default; +$background-base : $white !default; + +$link-color : $gray-800 !default; +$link-color-hover : darken($link-color, 15%) !default; +$link-decoration : underline !default; +$link-decoration-hover : underline !default; + +$quote-color : $gray-200 !default; + +// Default margin-bottom +$margin-bottom-base : 1rem !default; +$headings-margin-bottom : $margin-bottom-base /2 !default; +$paragraph-margin-bottom: $margin-bottom-base !default; + +// Line heights +$line-height-s : 1.3 !default; +$line-height-base : 1.5 !default; +$line-height-l : 1.7 !default; + +// Font weights +$weight-light : 200 !default; +$weight-book : 300 !default; +$weight-regular : 400 !default; +$weight-medium : 500 !default; +$weight-bold : 700 !default; + +// Activate hyphenation on small screens +$hyphens: false !default; + +// Font families +$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack +$font-family-headings : sans-serif !default; // font for h1, h2.. h6 +$font-family-monospace : consolas, courier, monospace !default; // font for code and samples + +// Font sizes (1.6rem value is "16px" equivalent) +$font-size-base : 1.6rem !default; + +$font-sizes: ( + base: ( + mobile : 1.4rem, + desktop : $font-size-base + ), + h1: ( + mobile : 2.8rem, + desktop : 3.2rem + ), + h2: ( + mobile : 2.4rem, + desktop : 2.8rem + ), + h3: ( + mobile : 2.0rem, + desktop : 2.4rem + ), + h4: ( + mobile : 1.8rem, + desktop : 2.0rem + ), + h5: ( + mobile : 1.6rem, + desktop : 1.8rem + ), + h6: ( + mobile : 1.4rem, + desktop : 1.6rem + ) +) !default; + /* switching to border-box model for all elements */ html { box-sizing: border-box; diff --git a/sass/_library/_responsive.scss b/sass/_library/_responsive.scss index 58de0d5..3c27c9e 100644 --- a/sass/_library/_responsive.scss +++ b/sass/_library/_responsive.scss @@ -2,6 +2,14 @@ /* ==Responsive helpers */ /* -------------------------- */ +// Warning: you should use your own values, regardless of the devices +// Best practice is Mobile First: (min-width: $breakpoint) +$tiny : 480px !default; // or 'em' if you prefer, of course +$small : 576px !default; +$medium : 768px !default; +$large : 992px !default; +$extra-large : 1200px !default; + /* large screens */ /* ------------- */ diff --git a/sass/components/_arrows.scss b/sass/components/_arrows.scss index 5dde53a..2df0562 100644 --- a/sass/components/_arrows.scss +++ b/sass/components/_arrows.scss @@ -3,6 +3,8 @@ /* ----------------------------- */ /* see https://knacss.com/styleguide.html#arrows */ +$arrow-color : $black !default; + [class*="icon-arrow--"] { vertical-align: middle; diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index cd1f6c6..c02c3e3 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -4,6 +4,13 @@ /* preferably use