/sass/bootswatch/spruce/_variables.scss

  1// Variables to customize the look and feel of Bootstrap
  2// Swatch: Spruce
  3// Version: 2.0.2
  4// -----------------------------------------------------
  5
  6
  7
  8// GLOBAL VALUES
  9// --------------------------------------------------
 10
 11
 12// Grays
 13// -------------------------
 14$black:                 #000;
 15$grayDarker:            #222;
 16$grayDark:              #333;
 17$gray:                  #555;
 18$grayLight:             #999;
 19$grayLighter:           #eee;
 20$white:                 #fff;
 21
 22
 23// Accent colors
 24// -------------------------
 25$blue:                  #01584C;
 26$blueDark:              #013435;
 27$green:                 #015B4E;
 28$red:                   #D14432;
 29$yellow:                #EBD90B;
 30$orange:                #FCB46B;
 31$pink:                  #A15B66;
 32$purple:                #7073CF;
 33
 34
 35// Scaffolding
 36// -------------------------
 37$bodyBackground:        #AEAD8E;
 38$textColor:             $blueDark;
 39
 40
 41// Links
 42// -------------------------
 43$linkColor:             #F5F3DC;
 44$linkColorHover:        $yellow;
 45
 46
 47// Typography
 48// -------------------------
 49$baseFontSize:          14px;
 50$baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 51$baseLineHeight:        21px;
 52$altFontFamily:         Georgia, "Times New Roman", Times, serif;
 53
 54$headingsFontFamily:    'Josefin Slab', serif; // empty to use BS default, $baseFontFamily
 55$headingsFontWeight:    700;    // instead of browser default, bold
 56$headingsColor:         inherit; // empty to use BS default, $textColor
 57
 58
 59// Tables
 60// -------------------------
 61$tableBackground:                   #C3C7AE; // overall background-color
 62$tableBackgroundAccent:             darken(#C3C7AE, 5%); // for striping
 63$tableBackgroundHover:              darken(#C3C7AE, 10%); // for hover
 64$tableBorder:                       $linkColor; // table and cell border
 65
 66
 67// Buttons
 68// -------------------------
 69$btnBackground:                     $white;
 70$btnBackgroundHighlight:            darken($white, 10%);
 71$btnBorder:                         darken($white, 20%);
 72
 73$btnPrimaryBackground:              $linkColor;
 74$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%);
 75
 76$btnInfoBackground:                 #5bc0de;
 77$btnInfoBackgroundHighlight:        #2f96b4;
 78
 79$btnSuccessBackground:              #62c462;
 80$btnSuccessBackgroundHighlight:     #51a351;
 81
 82$btnWarningBackground:              lighten($orange, 15%);
 83$btnWarningBackgroundHighlight:     $orange;
 84
 85$btnDangerBackground:               #ee5f5b;
 86$btnDangerBackgroundHighlight:      #bd362f;
 87
 88$btnInverseBackground:              $gray;
 89$btnInverseBackgroundHighlight:     $grayDarker;
 90
 91
 92// Forms
 93// -------------------------
 94$inputBackground:               $white;
 95$inputBorder:                   #ccc;
 96$inputDisabledBackground:       $grayLighter;
 97
 98
 99// Dropdowns
100// -------------------------
101$dropdownBackground:            $white;
102$dropdownBorder:                rgba(0,0,0,.2);
103$dropdownLinkColor:             $grayDark;
104$dropdownLinkColorHover:        $white;
105$dropdownLinkBackgroundHover:   $linkColor;
106
107
108
109
110// COMPONENT VARIABLES
111// --------------------------------------------------
112
113// Z-index master list
114// -------------------------
115// Used for a bird's eye view of components dependent on the z-axis
116// Try to avoid customizing these :)
117$zindexDropdown:          1000;
118$zindexPopover:           1010;
119$zindexTooltip:           1020;
120$zindexFixedNavbar:       1030;
121$zindexModalBackdrop:     1040;
122$zindexModal:             1050;
123
124
125// Input placeholder text color
126// -------------------------
127$placeholderText:         $grayLight;
128
129
130// Hr border color
131// -------------------------
132$hrBorder:                $linkColor;
133
134
135// Navbar
136// -------------------------
137$navbarHeight:                    40px;
138$navbarBackground:                $blueDark;
139$navbarBackgroundHighlight:       $navbarBackground;
140
141$navbarText:                      $grayLight;
142$navbarLinkColor:                 $grayLight;
143$navbarLinkColorHover:            $white;
144$navbarLinkColorActive:           $navbarLinkColorHover;
145$navbarLinkBackgroundHover:       transparent;
146$navbarLinkBackgroundActive:      $navbarBackground;
147
148$navbarSearchBackground:          lighten($navbarBackground, 25%);
149$navbarSearchBackgroundFocus:     $white;
150$navbarSearchBorder:              darken($navbarSearchBackground, 30%);
151$navbarSearchPlaceholderColor:    #ccc;
152
153
154// Hero unit
155// -------------------------
156$heroUnitBackground:              $grayLighter;
157$heroUnitHeadingColor:            inherit;
158$heroUnitLeadColor:               inherit;
159
160
161// Form states and alerts
162// -------------------------
163$warningText:             $orange;
164$warningBackground:       darken(#90A38F, 10%);
165$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
166
167$errorText:               lighten($red, 25%);
168$errorBackground:         darken(#90A38F, 10%);
169$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
170
171$successText:             #9ED99C;
172$successBackground:       darken(#90A38F, 10%);
173$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
174
175$infoText:                #9BCACD;
176$infoBackground:          darken(#90A38F, 10%);
177$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
178
179
180
181
182// GRID
183// --------------------------------------------------
184
185// Default 940px grid
186// -------------------------
187$gridColumns:             12;
188$gridColumnWidth:         60px;
189$gridGutterWidth:         20px;
190$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
191
192
193// Fluid grid
194// -------------------------
195$fluidGridColumnWidth:    6.382978723%;
196$fluidGridGutterWidth:    2.127659574%;