make scss variables changeable

all variables should only provide a default

this would allow us to include the screen.scss and simply set the variables we want to change before that.
This commit is contained in:
Michael Schramm 2016-03-25 16:49:43 +01:00 committed by Robert Lord
parent 5712ebe2ae
commit d1c3989a8d

View file

@ -23,46 +23,46 @@ under the License.
// BACKGROUND COLORS // BACKGROUND COLORS
//////////////////// ////////////////////
$nav-bg: #393939; $nav-bg: #393939 !default;
$examples-bg: #393939; $examples-bg: #393939 !default;
$code-bg: #292929; $code-bg: #292929 !default;
$code-annotation-bg: #1c1c1c; $code-annotation-bg: #1c1c1c !default;
$nav-subitem-bg: #262626; $nav-subitem-bg: #262626 !default;
$nav-active-bg: #2467af; $nav-active-bg: #2467af !default;
$lang-select-border: #000; $lang-select-border: #000 !default;
$lang-select-bg: #222; $lang-select-bg: #222 !default;
$lang-select-active-bg: $examples-bg; // feel free to change this to blue or something $lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
$lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed $lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
$main-bg: #eaf2f6; $main-bg: #eaf2f6 !default;
$aside-notice-bg: #8fbcd4; $aside-notice-bg: #8fbcd4 !default;
$aside-warning-bg: #c97a7e; $aside-warning-bg: #c97a7e !default;
$aside-success-bg: #6ac174; $aside-success-bg: #6ac174 !default;
$search-notice-bg: #c97a7e; $search-notice-bg: #c97a7e !default;
// TEXT COLORS // TEXT COLORS
//////////////////// ////////////////////
$main-text: #333; // main content text color $main-text: #333 !default; // main content text color
$nav-text: #fff; $nav-text: #fff !default;
$nav-active-text: #fff; $nav-active-text: #fff !default;
$lang-select-text: #fff; // color of unselected language tab text $lang-select-text: #fff !default; // color of unselected language tab text
$lang-select-active-text: #fff; // color of selected language tab text $lang-select-active-text: #fff !default; // color of selected language tab text
$lang-select-pressed-text: #fff; // color of language tab text when mouse is pressed $lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed
// SIZES // SIZES
//////////////////// ////////////////////
$nav-width: 230px; // width of the navbar $nav-width: 230px !default; // width of the navbar
$examples-width: 50%; // portion of the screen taken up by code examples $examples-width: 50% !default; // portion of the screen taken up by code examples
$logo-margin: 20px; // margin between nav items and logo, ignored if search is active $logo-margin: 20px !default; // margin between nav items and logo, ignored if search is active
$main-padding: 28px; // padding to left and right of content & examples $main-padding: 28px !default; // padding to left and right of content & examples
$nav-padding: 15px; // padding to left and right of navbar $nav-padding: 15px !default; // padding to left and right of navbar
$nav-v-padding: 10px; // padding used vertically around search boxes and results $nav-v-padding: 10px !default; // padding used vertically around search boxes and results
$nav-indent: 10px; // extra padding for ToC subitems $nav-indent: 10px !default; // extra padding for ToC subitems
$code-annotation-padding: 13px; // padding inside code annotations $code-annotation-padding: 13px !default; // padding inside code annotations
$h1-margin-bottom: 21px; // padding under the largest header tags $h1-margin-bottom: 21px !default; // padding under the largest header tags
$tablet-width: 930px; // min width before reverting to tablet size $tablet-width: 930px !default; // min width before reverting to tablet size
$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size $phone-width: $tablet-width - $nav-width !default; // min width before reverting to mobile size
// FONTS // FONTS
@ -86,12 +86,12 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
// OTHER // OTHER
//////////////////// ////////////////////
$nav-active-shadow: #000; $nav-active-shadow: #000 !default;
$nav-footer-border-color: #666; $nav-footer-border-color: #666 !default;
$nav-embossed-border-top: #000; $nav-embossed-border-top: #000 !default;
$nav-embossed-border-bottom: #939393; $nav-embossed-border-bottom: #939393 !default;
$main-embossed-text-shadow: 0px 1px 0px #fff; $main-embossed-text-shadow: 0px 1px 0px #fff !default;
$search-box-border-color: #666; $search-box-border-color: #666 !default;
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////