/sass/bootswatch/spruce/_variables.scss
Sass | 196 lines | 95 code | 55 blank | 46 comment | 0 complexity | a172e60ed90e3f2cf682aa34e375efaa MD5 | raw file
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%;