dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reordering variables

Browse source
This commit is contained in:
Raphael Goetter 2017-10-31 12:01:39 +01:00
parent e5f4647542
commit d5bb107788
1 changed files with 33 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
sass/_config/_variables.scss
View file

@ -1,6 +1,9 @@
// Config file and project variables // Config file and project variables
// breakpoints values // ----------------
// breakpoints zone
// ----------------
// warning: you should use your own values, regardless of the devices // warning: you should use your own values, regardless of the devices
// best practise is Mobile First: (min-width: $breakpoint) // best practise is Mobile First: (min-width: $breakpoint)
$tiny : 480px !default; // or 'em' if you prefer, of course $tiny : 480px !default; // or 'em' if you prefer, of course
@ -9,13 +12,17 @@ $medium : 768px !default;
$large : 992px !default; $large : 992px !default;
$extra-large : 1200px !default; $extra-large : 1200px !default;
// ----------
// fonts zone
// ----------
// font families // font families
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // system font stack $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; // font for h1, h2.. h6 $font-family-headings : sans-serif !default; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace; // font for code and samples $font-family-monospace : consolas, courier, monospace !default; // font for code and samples
// font sizes (1.6rem value is "16px" equivalent) // font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem; $font-size-base : 1.6rem !default;
$font-sizes: ( $font-sizes: (
base: ( base: (
@ -54,9 +61,9 @@ $line-height-base : 1.5 !default;
$line-height-l : 1.7 !default; $line-height-l : 1.7 !default;
// default margin-bottom // default margin-bottom
$margin-bottom-base : 1rem !default; $margin-bottom-base : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default; $headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default; $paragraph-margin-bottom: $margin-bottom-base !default;
// font weights // font weights
$weight-light : 200 !default; $weight-light : 200 !default;
@ -65,17 +72,18 @@ $weight-regular : 400 !default;
$weight-medium : 500 !default; $weight-medium : 500 !default;
$weight-bold : 700 !default; $weight-bold : 700 !default;
// ------------
// spacing zone
// ------------
// grid gutters (for .has-gutter-* classes) // grid gutters (for .has-gutter-* classes)
$grid-gutters: ( $grid-gutters: (
'': 1rem, '': 1rem,
'-l': 2rem, '-l': 2rem,
'-xl': 4rem ) '-xl': 4rem
!default; ) !default;
// global border-radius // spacings
$border-radius: 0 !default;
// spacings (choose unit you prefer)
$tiny-value : .5rem !default; $tiny-value : .5rem !default;
$tiny-plus-value : .7rem !default; $tiny-plus-value : .7rem !default;
$small-value : 1rem !default; $small-value : 1rem !default;
@ -98,6 +106,10 @@ $zindex-modal: 5000 !default;
$zindex-notification: 6000 !default; $zindex-notification: 6000 !default;
$zindex-debug: 7000 !default; $zindex-debug: 7000 !default;
// ----------
// color zone
// ----------
// color names // color names
$white : #fff !default; $white : #fff !default;
$gray-100 : #f8f9fa !default; $gray-100 : #f8f9fa !default;
@ -138,6 +150,13 @@ $link-decoration-hover : underline;
$forms-color : $gray-800; $forms-color : $gray-800;
// ---------------
// components zone
// ---------------
// global border-radius
$border-radius: 0 !default;
// component: quotes // component: quotes
$quote-color : $gray-200; $quote-color : $gray-200;
@ -171,7 +190,7 @@ $variants-list: (
(danger, $color-danger, $white, none), (danger, $color-danger, $white, none),
(inverse, $color-inverse, $white, none), (inverse, $color-inverse, $white, none),
(ghost, $color-ghost, $white, 0 0 0 1px $white inset) (ghost, $color-ghost, $white, 0 0 0 1px $white inset)
); ) !default;
// component: tabs // component: tabs
$tabs-border : $gray-200; $tabs-border : $gray-200;