@transferwise/neptune-css 0.0.0-experimental-6feacb5 → 0.0.0-experimental-a07a4fd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/buttons.css +9 -9
- package/dist/css/neptune-social-media.css +18 -18
- package/dist/css/neptune.css +33 -33
- package/dist/css/panels.css +24 -24
- package/dist/less/legacy-variables.less +606 -575
- package/package.json +1 -1
- package/src/variables/legacy-variables.less +606 -575
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
@brand-white: #fff;
|
|
13
13
|
|
|
14
|
+
|
|
14
15
|
@brand-pale-blue-minus-20: #77d9f7;
|
|
15
16
|
@brand-pale-blue-minus-10: #a7e2f9;
|
|
16
17
|
@brand-pale-blue: #dbf0fd;
|
|
@@ -53,37 +54,37 @@
|
|
|
53
54
|
@brand-light-blue-minus-10: #00a4df;
|
|
54
55
|
@brand-light-blue: #00b9ff;
|
|
55
56
|
|
|
56
|
-
@brand-light-blue-wash: #
|
|
57
|
+
@brand-light-blue-wash: #D8F1fA;
|
|
57
58
|
|
|
58
59
|
//=== Reds
|
|
59
60
|
//
|
|
60
61
|
//
|
|
61
|
-
@brand-red-minus-20: #
|
|
62
|
-
@brand-red-minus-10: #
|
|
63
|
-
@brand-red: #
|
|
62
|
+
@brand-red-minus-20: #B62A18;
|
|
63
|
+
@brand-red-minus-10: #C22E2E;
|
|
64
|
+
@brand-red: #F53636;
|
|
64
65
|
|
|
65
|
-
@brand-red-wash: #
|
|
66
|
-
@brand-red-alert: #
|
|
66
|
+
@brand-red-wash: #FFDFDF;
|
|
67
|
+
@brand-red-alert: #C22E2E;
|
|
67
68
|
|
|
68
69
|
//=== Greens
|
|
69
70
|
//
|
|
70
71
|
//
|
|
71
|
-
@brand-green-minus-20: #
|
|
72
|
-
@brand-green-minus-10: #
|
|
73
|
-
@brand-green: #
|
|
72
|
+
@brand-green-minus-20: #1B7940;
|
|
73
|
+
@brand-green-minus-10: #28B862;
|
|
74
|
+
@brand-green: #2ED06E;
|
|
74
75
|
|
|
75
|
-
@brand-green-wash: #
|
|
76
|
-
@brand-green-alert: #
|
|
76
|
+
@brand-green-wash: #D6F5E2;
|
|
77
|
+
@brand-green-alert: #1B7940;
|
|
77
78
|
|
|
78
79
|
//=== Oranges
|
|
79
80
|
//
|
|
80
81
|
//
|
|
81
|
-
@brand-orange-minus-20: #
|
|
82
|
-
@brand-orange-minus-10: #
|
|
83
|
-
@brand-orange: #
|
|
82
|
+
@brand-orange-minus-20: #9E5F00;
|
|
83
|
+
@brand-orange-minus-10: #DF8700;
|
|
84
|
+
@brand-orange: #FFA600;
|
|
84
85
|
|
|
85
|
-
@brand-orange-wash: #
|
|
86
|
-
@brand-orange-alert: #
|
|
86
|
+
@brand-orange-wash: #FFF3DD;
|
|
87
|
+
@brand-orange-alert: #9E5F00;
|
|
87
88
|
|
|
88
89
|
//=== Yellows
|
|
89
90
|
//
|
|
@@ -92,93 +93,94 @@
|
|
|
92
93
|
@brand-yellow-minus-10: #dfc912;
|
|
93
94
|
@brand-yellow: #ffe714;
|
|
94
95
|
|
|
96
|
+
|
|
95
97
|
//== Bootstrap Color Mapping
|
|
96
98
|
//
|
|
97
99
|
//## Gray and brand colors for use across Bootstrap.
|
|
98
100
|
|
|
99
|
-
@gray-base:
|
|
100
|
-
@gray-darker:
|
|
101
|
-
@gray-dark:
|
|
102
|
-
@gray:
|
|
103
|
-
@gray-light:
|
|
104
|
-
@gray-lighter:
|
|
101
|
+
@gray-base: @brand-smoke-plus-20;
|
|
102
|
+
@gray-darker: @brand-grey-minus-20;
|
|
103
|
+
@gray-dark: @brand-grey-minus-10;
|
|
104
|
+
@gray: @brand-grey;
|
|
105
|
+
@gray-light: @brand-grey-plus-20;
|
|
106
|
+
@gray-lighter: @brand-smoke;
|
|
105
107
|
|
|
106
|
-
@brand-primary:
|
|
107
|
-
@brand-success:
|
|
108
|
-
@brand-info:
|
|
109
|
-
@brand-warning:
|
|
110
|
-
@brand-danger:
|
|
108
|
+
@brand-primary: @brand-navy;
|
|
109
|
+
@brand-success: @brand-green;
|
|
110
|
+
@brand-info: @brand-light-blue;
|
|
111
|
+
@brand-warning: @brand-orange;
|
|
112
|
+
@brand-danger: @brand-red;
|
|
111
113
|
|
|
112
114
|
//== Scaffolding
|
|
113
115
|
//
|
|
114
116
|
//## Settings for some of the most global styles.
|
|
115
117
|
|
|
116
118
|
//** Background color for `<body>`.
|
|
117
|
-
@body-bg:
|
|
119
|
+
@body-bg: @brand-white;
|
|
118
120
|
//** Global text color on `<body>`.
|
|
119
|
-
@text-color:
|
|
121
|
+
@text-color: @brand-grey;
|
|
120
122
|
//** Bold text color on `<body>`.
|
|
121
|
-
@text-bold-color:
|
|
123
|
+
@text-bold-color: @brand-navy-minus-10;
|
|
122
124
|
|
|
123
|
-
@text-secondary-color:
|
|
125
|
+
@text-secondary-color: @brand-grey;
|
|
124
126
|
|
|
125
127
|
//== Typography
|
|
126
128
|
//
|
|
127
129
|
//## Font, line-height, and color for body text, headings, and more.
|
|
128
130
|
|
|
129
|
-
@font-family-sans-serif:
|
|
130
|
-
@font-family-serif:
|
|
131
|
+
@font-family-sans-serif: var(--font-family-regular);
|
|
132
|
+
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
131
133
|
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
|
132
|
-
@font-family-monospace:
|
|
133
|
-
@font-family-base:
|
|
134
|
-
|
|
135
|
-
@font-size-base:
|
|
136
|
-
@font-size-large:
|
|
137
|
-
@font-size-medium:
|
|
138
|
-
@font-size-small:
|
|
139
|
-
@font-size-xsmall:
|
|
140
|
-
|
|
141
|
-
@font-size-h1:
|
|
142
|
-
@font-size-h2:
|
|
143
|
-
@font-size-h3:
|
|
144
|
-
@font-size-h4:
|
|
145
|
-
@font-size-h5:
|
|
146
|
-
@font-size-h6:
|
|
147
|
-
|
|
148
|
-
@line-height-h1:
|
|
149
|
-
@line-height-h2:
|
|
150
|
-
@line-height-h3:
|
|
151
|
-
@line-height-h4:
|
|
152
|
-
@line-height-h5:
|
|
153
|
-
@line-height-h6:
|
|
154
|
-
|
|
155
|
-
@font-spacing-base:
|
|
156
|
-
@font-spacing-semi-bold:
|
|
157
|
-
|
|
158
|
-
@font-weight-normal:
|
|
159
|
-
@font-weight-semi-bold:
|
|
160
|
-
@font-weight-bold:
|
|
134
|
+
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
135
|
+
@font-family-base: @font-family-sans-serif;
|
|
136
|
+
|
|
137
|
+
@font-size-base: 16px;
|
|
138
|
+
@font-size-large: 18px;
|
|
139
|
+
@font-size-medium: 16px;
|
|
140
|
+
@font-size-small: 14px;
|
|
141
|
+
@font-size-xsmall: 12px;
|
|
142
|
+
|
|
143
|
+
@font-size-h1: 42px;
|
|
144
|
+
@font-size-h2: 28px;
|
|
145
|
+
@font-size-h3: 22px;
|
|
146
|
+
@font-size-h4: 18px;
|
|
147
|
+
@font-size-h5: 16px;
|
|
148
|
+
@font-size-h6: 14px;
|
|
149
|
+
|
|
150
|
+
@line-height-h1: 48px;
|
|
151
|
+
@line-height-h2: 32px;
|
|
152
|
+
@line-height-h3: 30px;
|
|
153
|
+
@line-height-h4: 24px;
|
|
154
|
+
@line-height-h5: 24px;
|
|
155
|
+
@line-height-h6: 24px;
|
|
156
|
+
|
|
157
|
+
@font-spacing-base: 0.016em;
|
|
158
|
+
@font-spacing-semi-bold: 0;
|
|
159
|
+
|
|
160
|
+
@font-weight-normal: 500;
|
|
161
|
+
@font-weight-semi-bold: 600;
|
|
162
|
+
@font-weight-bold: 800;
|
|
161
163
|
|
|
162
164
|
//** Unit-less `line-height` for use in components like buttons.
|
|
163
|
-
@line-height-base:
|
|
165
|
+
@line-height-base: 24px; // 24/16
|
|
164
166
|
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
|
165
|
-
@line-height-computed:
|
|
167
|
+
@line-height-computed: 24px; // ~24px
|
|
166
168
|
|
|
167
169
|
//** By default, this inherits from the `<body>`.
|
|
168
|
-
@headings-font-family:
|
|
169
|
-
@headings-font-weight:
|
|
170
|
-
@headings-line-height:
|
|
171
|
-
@headings-color:
|
|
170
|
+
@headings-font-family: var(--font-family-regular);
|
|
171
|
+
@headings-font-weight: @font-weight-semi-bold;
|
|
172
|
+
@headings-line-height: 1.2; //1.1;
|
|
173
|
+
@headings-color: @brand-navy-minus-10;
|
|
172
174
|
|
|
173
|
-
@display1-size:
|
|
174
|
-
@display2-size:
|
|
175
|
-
@display3-size:
|
|
176
|
-
@display4-size:
|
|
175
|
+
@display1-size: 104px;
|
|
176
|
+
@display2-size: 88px;
|
|
177
|
+
@display3-size: 72px;
|
|
178
|
+
@display4-size: 56px;
|
|
177
179
|
|
|
178
|
-
@display1-weight:
|
|
179
|
-
@display2-weight:
|
|
180
|
-
@display3-weight:
|
|
181
|
-
@display4-weight:
|
|
180
|
+
@display1-weight: @font-weight-bold;
|
|
181
|
+
@display2-weight: @font-weight-bold;
|
|
182
|
+
@display3-weight: @font-weight-bold;
|
|
183
|
+
@display4-weight: @font-weight-bold;
|
|
182
184
|
|
|
183
185
|
@display1-margin-bottom: 8px;
|
|
184
186
|
@display2-margin-bottom: 16px;
|
|
@@ -190,75 +192,76 @@
|
|
|
190
192
|
@display3-line-height: 88px;
|
|
191
193
|
@display4-line-height: 72px;
|
|
192
194
|
|
|
193
|
-
@buttons-font-family:
|
|
195
|
+
@buttons-font-family: var(--font-family-regular);
|
|
194
196
|
|
|
195
197
|
//** Global textual link color.
|
|
196
|
-
@link-color:
|
|
198
|
+
@link-color: @brand-light-blue;
|
|
197
199
|
//** Global textual link color.
|
|
198
|
-
@link-decoration:
|
|
200
|
+
@link-decoration: underline;
|
|
199
201
|
//** Link hover color
|
|
200
|
-
@link-hover-color:
|
|
202
|
+
@link-hover-color: @brand-light-blue-minus-10;
|
|
201
203
|
//** Link hover decoration.
|
|
202
204
|
@link-hover-decoration: underline;
|
|
203
205
|
//** Link active color
|
|
204
|
-
@link-active-color:
|
|
206
|
+
@link-active-color: @brand-light-blue-minus-20;
|
|
205
207
|
//** Link disabled color
|
|
206
|
-
@link-disabled-color:
|
|
208
|
+
@link-disabled-color: @brand-smoke-minus-10;
|
|
207
209
|
//** Link font weight
|
|
208
|
-
@link-font-weight:
|
|
210
|
+
@link-font-weight: @font-weight-semi-bold;
|
|
209
211
|
|
|
210
|
-
@link-secondary-color:
|
|
211
|
-
@link-secondary-hover-color:
|
|
212
|
+
@link-secondary-color: @brand-navy;
|
|
213
|
+
@link-secondary-hover-color: @link-color;
|
|
212
214
|
@link-secondary-active-color: @link-hover-color;
|
|
213
|
-
@link-secondary-font-weight:
|
|
215
|
+
@link-secondary-font-weight: @font-weight-normal;
|
|
214
216
|
|
|
215
217
|
//== Iconography
|
|
216
218
|
//
|
|
217
219
|
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
|
218
220
|
|
|
219
221
|
//** Load fonts from this directory.
|
|
220
|
-
@icon-font-path:
|
|
222
|
+
@icon-font-path: "../fonts/";
|
|
221
223
|
//** File name for all font files.
|
|
222
|
-
@icon-font-name:
|
|
224
|
+
@icon-font-name: "glyphicons-halflings-regular";
|
|
223
225
|
//** Element ID within SVG icon file.
|
|
224
|
-
@icon-font-svg-id:
|
|
226
|
+
@icon-font-svg-id: "glyphicons_halflingsregular";
|
|
225
227
|
|
|
226
228
|
//== Components
|
|
227
229
|
//
|
|
228
230
|
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
|
229
231
|
|
|
230
|
-
@padding-base-vertical:
|
|
231
|
-
@padding-base-horizontal:
|
|
232
|
+
@padding-base-vertical: 8px;
|
|
233
|
+
@padding-base-horizontal: 16px;
|
|
232
234
|
|
|
233
|
-
@padding-large-vertical:
|
|
234
|
-
@padding-large-horizontal:
|
|
235
|
+
@padding-large-vertical: 12px;
|
|
236
|
+
@padding-large-horizontal: 16px;
|
|
235
237
|
|
|
236
|
-
@padding-small-vertical:
|
|
237
|
-
@padding-small-horizontal:
|
|
238
|
+
@padding-small-vertical: 4px;
|
|
239
|
+
@padding-small-horizontal: 12px;
|
|
238
240
|
|
|
239
|
-
@padding-xs-vertical:
|
|
240
|
-
@padding-xs-horizontal:
|
|
241
|
+
@padding-xs-vertical: 2px;
|
|
242
|
+
@padding-xs-horizontal: 8px;
|
|
241
243
|
|
|
242
|
-
@line-height-large:
|
|
243
|
-
@line-height-small:
|
|
244
|
+
@line-height-large: 32px; // 18*1.555 = 28
|
|
245
|
+
@line-height-small: 24px; // 12*1.5=18
|
|
244
246
|
|
|
245
|
-
@border-radius-base:
|
|
246
|
-
@border-radius-large:
|
|
247
|
-
@border-radius-small:
|
|
247
|
+
@border-radius-base: 3px;
|
|
248
|
+
@border-radius-large: 3px;
|
|
249
|
+
@border-radius-small: 2px;
|
|
248
250
|
|
|
249
251
|
@spacer: @padding-base-vertical;
|
|
250
252
|
@spacer-y: @spacer;
|
|
251
253
|
@spacer-x: @spacer;
|
|
252
254
|
|
|
253
255
|
//** Global color for active items (e.g., navs or dropdowns).
|
|
254
|
-
@component-active-color:
|
|
256
|
+
@component-active-color: #fff;
|
|
255
257
|
//** Global background color for active items (e.g., navs or dropdowns).
|
|
256
|
-
@component-active-bg:
|
|
258
|
+
@component-active-bg: @brand-navy-minus-10;
|
|
257
259
|
|
|
258
260
|
//** Width of the `border` for generating carets that indicator dropdowns.
|
|
259
|
-
@caret-width-base:
|
|
261
|
+
@caret-width-base: 4px;
|
|
260
262
|
//** Carets increase slightly in size for larger components.
|
|
261
|
-
@caret-width-large:
|
|
263
|
+
@caret-width-large: 5px;
|
|
264
|
+
|
|
262
265
|
|
|
263
266
|
@spacing-1-mobile: 16px;
|
|
264
267
|
@spacing-1-tablet: 24px;
|
|
@@ -280,288 +283,294 @@
|
|
|
280
283
|
@spacing-7-tablet: 168px;
|
|
281
284
|
@spacing-7-desktop: 224px;
|
|
282
285
|
|
|
286
|
+
|
|
287
|
+
|
|
283
288
|
//== Tables
|
|
284
289
|
//
|
|
285
290
|
//## Customizes the `.table` component with basic values, each used across all table variations.
|
|
286
291
|
|
|
287
292
|
//** Padding for `<th>`s and `<td>`s.
|
|
288
|
-
@table-cell-padding:
|
|
293
|
+
@table-cell-padding: 16px;
|
|
289
294
|
//** Padding for cells in `.table-condensed`.
|
|
290
|
-
@table-condensed-cell-padding:
|
|
295
|
+
@table-condensed-cell-padding: 8px;
|
|
291
296
|
|
|
292
297
|
//** Default background color used for all tables.
|
|
293
|
-
@table-bg:
|
|
298
|
+
@table-bg: @brand-white;
|
|
294
299
|
//** Background color used for `.table-striped`.
|
|
295
|
-
@table-bg-accent:
|
|
300
|
+
@table-bg-accent: @gray-base; //#f9f9f9;
|
|
296
301
|
//** Background color used for `.table-hover`.
|
|
297
|
-
@table-bg-hover:
|
|
298
|
-
@table-bg-active:
|
|
302
|
+
@table-bg-hover: @state-info-bg;
|
|
303
|
+
@table-bg-active: @table-bg-hover;
|
|
299
304
|
|
|
300
305
|
//** Border color for table and cell borders.
|
|
301
|
-
@table-border-color:
|
|
306
|
+
@table-border-color: @brand-smoke-plus-20;
|
|
302
307
|
|
|
303
308
|
//== Panels
|
|
304
309
|
//
|
|
305
310
|
//##
|
|
306
311
|
|
|
307
|
-
@panel-border-radius:
|
|
308
|
-
@panel-focus-transtion:
|
|
312
|
+
@panel-border-radius: @border-radius-base;
|
|
313
|
+
@panel-focus-transtion: @transition-duration;
|
|
309
314
|
|
|
310
315
|
//== Buttons
|
|
311
316
|
//
|
|
312
317
|
//## For each of Bootstrap's buttons, define text, background and border color.
|
|
313
318
|
|
|
314
|
-
@btn-font-weight:
|
|
315
|
-
|
|
316
|
-
@btn-height:
|
|
317
|
-
@btn-font-size:
|
|
318
|
-
@btn-line-height:
|
|
319
|
-
@btn-border-width:
|
|
320
|
-
@btn-padding-horizontal:
|
|
321
|
-
@btn-padding-vertical:
|
|
322
|
-
@btn-padding:
|
|
323
|
-
|
|
324
|
-
@btn-xs-height:
|
|
325
|
-
@btn-xs-font-size:
|
|
326
|
-
@btn-xs-line-height:
|
|
327
|
-
@btn-xs-padding-horizontal:
|
|
328
|
-
@btn-xs-padding-vertical:
|
|
329
|
-
@btn-xs-padding:
|
|
330
|
-
|
|
331
|
-
@btn-sm-height:
|
|
332
|
-
@btn-sm-font-size:
|
|
333
|
-
@btn-sm-line-height:
|
|
334
|
-
@btn-sm-padding-horizontal:
|
|
335
|
-
@btn-sm-padding-vertical:
|
|
336
|
-
@btn-sm-padding:
|
|
337
|
-
|
|
338
|
-
@btn-lg-height:
|
|
339
|
-
@btn-lg-font-size:
|
|
340
|
-
@btn-lg-line-height:
|
|
341
|
-
@btn-lg-padding-horizontal:
|
|
342
|
-
@btn-lg-padding-vertical:
|
|
343
|
-
@btn-lg-padding:
|
|
344
|
-
|
|
345
|
-
@btn-disabled-bg:
|
|
346
|
-
@btn-disabled-color:
|
|
319
|
+
@btn-font-weight: @font-weight-semi-bold; //normal;
|
|
320
|
+
|
|
321
|
+
@btn-height: @input-height-base;
|
|
322
|
+
@btn-font-size: 16px;
|
|
323
|
+
@btn-line-height: 24px;
|
|
324
|
+
@btn-border-width: 1px;
|
|
325
|
+
@btn-padding-horizontal: 24px;
|
|
326
|
+
@btn-padding-vertical: @padding-large-vertical;
|
|
327
|
+
@btn-padding: @btn-padding-vertical @btn-padding-horizontal;
|
|
328
|
+
|
|
329
|
+
@btn-xs-height: 22px; // TODO 24?
|
|
330
|
+
@btn-xs-font-size: 12px;
|
|
331
|
+
@btn-xs-line-height: 18px;
|
|
332
|
+
@btn-xs-padding-horizontal: 8px;
|
|
333
|
+
@btn-xs-padding-vertical: @padding-xs-vertical;
|
|
334
|
+
@btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal;
|
|
335
|
+
|
|
336
|
+
@btn-sm-height: @input-height-small;
|
|
337
|
+
@btn-sm-font-size: 14px;
|
|
338
|
+
@btn-sm-line-height: 24px;
|
|
339
|
+
@btn-sm-padding-horizontal: 16px;
|
|
340
|
+
@btn-sm-padding-vertical: @padding-small-vertical;
|
|
341
|
+
@btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal;
|
|
342
|
+
|
|
343
|
+
@btn-lg-height: @input-height-large;
|
|
344
|
+
@btn-lg-font-size: 20px;
|
|
345
|
+
@btn-lg-line-height: 32px;
|
|
346
|
+
@btn-lg-padding-horizontal: 24px;
|
|
347
|
+
@btn-lg-padding-vertical: ((@input-height-large - @btn-lg-line-height) / 2);
|
|
348
|
+
@btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal @btn-lg-padding-vertical;
|
|
349
|
+
|
|
350
|
+
@btn-disabled-bg: @brand-smoke-plus-10;
|
|
351
|
+
@btn-disabled-color: @brand-smoke-minus-10;
|
|
352
|
+
|
|
347
353
|
|
|
348
354
|
//=== Button Default
|
|
349
355
|
//
|
|
350
356
|
//
|
|
351
|
-
@btn-default-color:
|
|
352
|
-
@btn-default-bg:
|
|
353
|
-
@btn-default-border:
|
|
354
|
-
@btn-default-bg-hover:
|
|
355
|
-
@btn-default-border-hover:
|
|
356
|
-
@btn-default-bg-active:
|
|
357
|
-
@btn-default-border-active:
|
|
357
|
+
@btn-default-color: @brand-light-blue;
|
|
358
|
+
@btn-default-bg: transparent;
|
|
359
|
+
@btn-default-border: @brand-light-blue;
|
|
360
|
+
@btn-default-bg-hover: @brand-light-blue;
|
|
361
|
+
@btn-default-border-hover: @brand-light-blue;
|
|
362
|
+
@btn-default-bg-active: @brand-light-blue-minus-20;
|
|
363
|
+
@btn-default-border-active: @brand-light-blue-minus-20;
|
|
358
364
|
|
|
359
365
|
//=== Button Primary
|
|
360
366
|
//
|
|
361
367
|
//
|
|
362
|
-
@btn-primary-color:
|
|
363
|
-
@btn-primary-bg:
|
|
364
|
-
@btn-primary-border:
|
|
365
|
-
@btn-primary-bg-hover:
|
|
366
|
-
@btn-primary-border-hover:
|
|
367
|
-
@btn-primary-bg-active:
|
|
368
|
-
@btn-primary-border-active:
|
|
368
|
+
@btn-primary-color: #fff;
|
|
369
|
+
@btn-primary-bg: @brand-light-blue;
|
|
370
|
+
@btn-primary-border: @brand-light-blue;
|
|
371
|
+
@btn-primary-bg-hover: @brand-light-blue-minus-10;
|
|
372
|
+
@btn-primary-border-hover: @brand-light-blue-minus-10;
|
|
373
|
+
@btn-primary-bg-active: @brand-light-blue-minus-20;
|
|
374
|
+
@btn-primary-border-active: @brand-light-blue-minus-20;
|
|
369
375
|
|
|
370
376
|
//=== Button Success
|
|
371
377
|
//
|
|
372
378
|
//
|
|
373
|
-
@btn-success-color:
|
|
374
|
-
@btn-success-bg:
|
|
375
|
-
@btn-success-border:
|
|
376
|
-
@btn-success-bg-hover:
|
|
377
|
-
@btn-success-border-hover:
|
|
378
|
-
@btn-success-bg-active:
|
|
379
|
-
@btn-success-border-active:
|
|
379
|
+
@btn-success-color: #fff;
|
|
380
|
+
@btn-success-bg: @brand-green;
|
|
381
|
+
@btn-success-border: @brand-green;
|
|
382
|
+
@btn-success-bg-hover: @brand-green-minus-10;
|
|
383
|
+
@btn-success-border-hover: @brand-green-minus-10;
|
|
384
|
+
@btn-success-bg-active: @brand-green-minus-20;
|
|
385
|
+
@btn-success-border-active: @brand-green-minus-20;
|
|
380
386
|
|
|
381
387
|
//=== Button Info
|
|
382
388
|
//
|
|
383
389
|
//
|
|
384
|
-
@btn-info-color:
|
|
385
|
-
@btn-info-bg:
|
|
386
|
-
@btn-info-border:
|
|
387
|
-
@btn-info-bg-hover:
|
|
388
|
-
@btn-info-border-hover:
|
|
389
|
-
@btn-info-bg-active:
|
|
390
|
-
@btn-info-border-active:
|
|
390
|
+
@btn-info-color: @brand-grey-plus-10;
|
|
391
|
+
@btn-info-bg: transparent;
|
|
392
|
+
@btn-info-border: @brand-grey-plus-10;
|
|
393
|
+
@btn-info-bg-hover: @brand-light-blue;
|
|
394
|
+
@btn-info-border-hover: @brand-light-blue;
|
|
395
|
+
@btn-info-bg-active: @brand-light-blue-minus-20;
|
|
396
|
+
@btn-info-border-active: @brand-light-blue-minus-20;
|
|
391
397
|
|
|
392
398
|
//=== Button Warning
|
|
393
399
|
//
|
|
394
400
|
//
|
|
395
|
-
@btn-warning-color:
|
|
396
|
-
@btn-warning-bg:
|
|
397
|
-
@btn-warning-border:
|
|
398
|
-
@btn-warning-bg-hover:
|
|
399
|
-
@btn-warning-border-hover:
|
|
400
|
-
@btn-warning-bg-active:
|
|
401
|
-
@btn-warning-border-active:
|
|
401
|
+
@btn-warning-color: @brand-orange;
|
|
402
|
+
@btn-warning-bg: transparent;
|
|
403
|
+
@btn-warning-border: @brand-orange;
|
|
404
|
+
@btn-warning-bg-hover: @brand-orange-minus-10;
|
|
405
|
+
@btn-warning-border-hover: @brand-orange-minus-10;
|
|
406
|
+
@btn-warning-bg-active: @brand-orange-minus-20;
|
|
407
|
+
@btn-warning-border-active: @brand-orange-minus-20;
|
|
402
408
|
|
|
403
409
|
//=== Button Danger
|
|
404
410
|
//
|
|
405
411
|
//
|
|
406
|
-
@btn-danger-color:
|
|
407
|
-
@btn-danger-bg:
|
|
408
|
-
@btn-danger-border:
|
|
409
|
-
@btn-danger-bg-hover:
|
|
410
|
-
@btn-danger-border-hover:
|
|
411
|
-
@btn-danger-bg-active:
|
|
412
|
-
@btn-danger-border-active:
|
|
412
|
+
@btn-danger-color: @brand-grey-plus-10;
|
|
413
|
+
@btn-danger-bg: transparent;
|
|
414
|
+
@btn-danger-border: @brand-grey-plus-10;
|
|
415
|
+
@btn-danger-bg-hover: @brand-red;
|
|
416
|
+
@btn-danger-border-hover: @brand-red;
|
|
417
|
+
@btn-danger-bg-active: @brand-red-minus-20;
|
|
418
|
+
@btn-danger-border-active: @brand-red-minus-20;
|
|
413
419
|
|
|
414
420
|
//=== Button Download
|
|
415
421
|
//
|
|
416
422
|
//
|
|
417
|
-
@btn-download-color:
|
|
418
|
-
@btn-download-bg:
|
|
419
|
-
@btn-download-border:
|
|
420
|
-
@btn-download-bg-hover:
|
|
421
|
-
@btn-download-border-hover:
|
|
422
|
-
@btn-download-bg-active:
|
|
423
|
-
@btn-download-border-active:
|
|
423
|
+
@btn-download-color: #fff;
|
|
424
|
+
@btn-download-bg: #000;
|
|
425
|
+
@btn-download-border: #bbb;
|
|
426
|
+
@btn-download-bg-hover: #333;
|
|
427
|
+
@btn-download-border-hover: #999;
|
|
428
|
+
@btn-download-bg-active: #666;
|
|
429
|
+
@btn-download-border-active: #666;
|
|
424
430
|
|
|
425
|
-
@btn-facebook:
|
|
426
|
-
@btn-facebook-active:
|
|
427
|
-
@btn-google:
|
|
428
|
-
@btn-google-active:
|
|
431
|
+
@btn-facebook: #3B5998;
|
|
432
|
+
@btn-facebook-active: #344F88;
|
|
433
|
+
@btn-google: #4285F4;
|
|
434
|
+
@btn-google-active: #3B77DB;
|
|
429
435
|
|
|
430
436
|
//== Forms
|
|
431
437
|
//
|
|
432
438
|
//##
|
|
433
439
|
|
|
434
440
|
//** `<input>` background color
|
|
435
|
-
@input-bg:
|
|
441
|
+
@input-bg: #fff;
|
|
436
442
|
//** `<input disabled>` background color
|
|
437
|
-
@input-bg-disabled:
|
|
443
|
+
@input-bg-disabled: @brand-smoke-plus-20;
|
|
438
444
|
//** Text color for `<input>`s
|
|
439
|
-
@input-color:
|
|
445
|
+
@input-color: @brand-navy-minus-10;
|
|
440
446
|
//** `<input disabled>` color
|
|
441
|
-
@input-color-disabled:
|
|
447
|
+
@input-color-disabled: @brand-smoke;
|
|
442
448
|
|
|
443
449
|
//** `<input>` border color
|
|
444
|
-
@input-border:
|
|
450
|
+
@input-border: @brand-smoke;
|
|
445
451
|
//** `<input>` border hover
|
|
446
|
-
@input-border-hover:
|
|
452
|
+
@input-border-hover: @brand-grey-plus-20;
|
|
447
453
|
//** `<input disabled>` border color
|
|
448
|
-
@input-border-disabled:
|
|
454
|
+
@input-border-disabled: @brand-smoke-plus-10;
|
|
449
455
|
|
|
450
|
-
@input-font-size:
|
|
451
|
-
@input-line-height:
|
|
452
|
-
@input-padding:
|
|
456
|
+
@input-font-size: 16px;
|
|
457
|
+
@input-line-height: @btn-line-height;
|
|
458
|
+
@input-padding: @padding-large-vertical @padding-base-horizontal;
|
|
453
459
|
|
|
454
|
-
@input-font-size-small:
|
|
455
|
-
@input-line-height-small:
|
|
456
|
-
@input-padding-small:
|
|
460
|
+
@input-font-size-small: 14px;
|
|
461
|
+
@input-line-height-small: @btn-sm-line-height;
|
|
462
|
+
@input-padding-small: @padding-small-vertical @padding-small-horizontal;
|
|
457
463
|
|
|
458
|
-
@input-font-size-large:
|
|
459
|
-
@input-line-height-large:
|
|
460
|
-
@input-padding-large:
|
|
464
|
+
@input-font-size-large: 22px;
|
|
465
|
+
@input-line-height-large: @btn-lg-line-height;
|
|
466
|
+
@input-padding-large: @padding-large-vertical @padding-large-horizontal;
|
|
461
467
|
|
|
462
468
|
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
|
|
463
469
|
//** Default `.form-control` border radius
|
|
464
470
|
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
|
465
|
-
@input-border-radius:
|
|
471
|
+
@input-border-radius: @border-radius-base; //@border-radius-base;
|
|
466
472
|
//** Large `.form-control` border radius
|
|
467
|
-
@input-border-radius-large:
|
|
473
|
+
@input-border-radius-large: @border-radius-base; //@border-radius-large;
|
|
468
474
|
//** Small `.form-control` border radius
|
|
469
|
-
@input-border-radius-small:
|
|
475
|
+
@input-border-radius-small: @border-radius-base;
|
|
470
476
|
|
|
471
477
|
//** Border color for inputs on focus
|
|
472
|
-
@input-border-focus:
|
|
478
|
+
@input-border-focus: @brand-light-blue;
|
|
473
479
|
|
|
474
480
|
//** Placeholder text color
|
|
475
|
-
@input-color-placeholder:
|
|
481
|
+
@input-color-placeholder: @brand-smoke-minus-10;
|
|
476
482
|
|
|
477
483
|
//** Default `.form-control` height
|
|
478
|
-
@input-height-base:
|
|
484
|
+
@input-height-base: 48px; //(@line-height-computed + (@padding-base-vertical * 2) + 2);
|
|
479
485
|
//** Large `.form-control` height
|
|
480
|
-
@input-height-large:
|
|
486
|
+
@input-height-large: 72px; //(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
|
481
487
|
//** Small `.form-control` height
|
|
482
|
-
@input-height-small:
|
|
488
|
+
@input-height-small: 32px; //(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
|
483
489
|
|
|
484
490
|
//** `.form-group` margin
|
|
485
|
-
@form-group-margin-bottom:
|
|
491
|
+
@form-group-margin-bottom: 24px; // Visible space is 24px but line height(20) is 6px bigger than font size(14)
|
|
486
492
|
|
|
487
|
-
@legend-color:
|
|
488
|
-
@legend-border-color:
|
|
493
|
+
@legend-color: @headings-color;
|
|
494
|
+
@legend-border-color: @input-border;
|
|
489
495
|
|
|
490
|
-
@control-label-color:
|
|
491
|
-
@control-label-focus:
|
|
492
|
-
@control-label-font-size:
|
|
496
|
+
@control-label-color: @text-color;
|
|
497
|
+
@control-label-focus: @brand-light-blue-minus-20;
|
|
498
|
+
@control-label-font-size: @font-size-small;
|
|
493
499
|
|
|
494
500
|
//** Color for textual input addons
|
|
495
|
-
@input-group-color:
|
|
496
|
-
@input-group-addon-font-size:
|
|
497
|
-
@input-group-addon-bg:
|
|
501
|
+
@input-group-color: @brand-smoke-minus-10;
|
|
502
|
+
@input-group-addon-font-size: @input-font-size;
|
|
503
|
+
@input-group-addon-bg: @input-bg;
|
|
498
504
|
@input-group-addon-border-color: @input-border;
|
|
499
|
-
@input-group-addon-padding:
|
|
505
|
+
@input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
|
|
500
506
|
|
|
501
|
-
@input-group-addon-sm-padding:
|
|
502
|
-
@input-group-addon-lg-padding:
|
|
507
|
+
@input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
|
|
508
|
+
@input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
|
|
503
509
|
|
|
504
510
|
//** Disabled cursor for form controls and buttons.
|
|
505
|
-
@cursor-disabled:
|
|
506
|
-
@cursor-default:
|
|
511
|
+
@cursor-disabled: not-allowed;
|
|
512
|
+
@cursor-default: default;
|
|
507
513
|
|
|
508
514
|
//=== Button Download
|
|
509
515
|
//
|
|
510
516
|
//
|
|
511
|
-
@btn-download-color:
|
|
512
|
-
@btn-download-bg:
|
|
513
|
-
@btn-download-border:
|
|
514
|
-
@btn-download-bg-hover:
|
|
515
|
-
@btn-download-border-hover:
|
|
516
|
-
@btn-download-bg-active:
|
|
517
|
-
@btn-download-border-active:
|
|
517
|
+
@btn-download-color: #fff;
|
|
518
|
+
@btn-download-bg: #000;
|
|
519
|
+
@btn-download-border: #bbb;
|
|
520
|
+
@btn-download-bg-hover: #333;
|
|
521
|
+
@btn-download-border-hover: #999;
|
|
522
|
+
@btn-download-bg-active: #666;
|
|
523
|
+
@btn-download-border-active: #666;
|
|
524
|
+
|
|
525
|
+
@btn-facebook: #3B5998;
|
|
526
|
+
@btn-facebook-active: #344F88;
|
|
527
|
+
@btn-google: #4285F4;
|
|
528
|
+
@btn-google-active: #3B77DB;
|
|
529
|
+
|
|
518
530
|
|
|
519
|
-
@btn-facebook: #3b5998;
|
|
520
|
-
@btn-facebook-active: #344f88;
|
|
521
|
-
@btn-google: #4285f4;
|
|
522
|
-
@btn-google-active: #3b77db;
|
|
523
531
|
|
|
524
532
|
//== Dropdowns
|
|
525
533
|
//
|
|
526
534
|
//## Dropdown menu container and contents.
|
|
527
535
|
|
|
528
536
|
//** Background for the dropdown menu.
|
|
529
|
-
@dropdown-bg:
|
|
537
|
+
@dropdown-bg: #fff;
|
|
530
538
|
//** Dropdown menu `border-color`.
|
|
531
|
-
@dropdown-border:
|
|
539
|
+
@dropdown-border: @brand-smoke-plus-10;
|
|
532
540
|
//** Dropdown menu `border-color` **for IE8**.
|
|
533
|
-
@dropdown-fallback-border:
|
|
541
|
+
@dropdown-fallback-border: @brand-white;
|
|
534
542
|
//** Divider color for between dropdown items.
|
|
535
|
-
@dropdown-divider-bg:
|
|
543
|
+
@dropdown-divider-bg: @brand-smoke-plus-20;
|
|
536
544
|
|
|
537
545
|
//** Dropdown link text color.
|
|
538
|
-
@dropdown-link-color:
|
|
546
|
+
@dropdown-link-color: @brand-navy-minus-10;
|
|
539
547
|
//** Dropdown link padding.
|
|
540
|
-
@dropdown-link-padding:
|
|
548
|
+
@dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
|
|
541
549
|
|
|
542
550
|
//** Hover color for dropdown links.
|
|
543
|
-
@dropdown-link-hover-color:
|
|
551
|
+
@dropdown-link-hover-color: @brand-navy-minus-10;
|
|
544
552
|
//** Hover background for dropdown links.
|
|
545
|
-
@dropdown-link-hover-bg:
|
|
553
|
+
@dropdown-link-hover-bg: @brand-smoke-plus-20;
|
|
546
554
|
|
|
547
555
|
//** Active dropdown menu item text color.
|
|
548
|
-
@dropdown-link-active-color:
|
|
556
|
+
@dropdown-link-active-color: @component-active-color;
|
|
549
557
|
//** Active dropdown menu item background color.
|
|
550
|
-
@dropdown-link-active-bg:
|
|
558
|
+
@dropdown-link-active-bg: @component-active-bg;
|
|
551
559
|
|
|
552
560
|
//** Disabled dropdown menu item background color.
|
|
553
|
-
@dropdown-link-disabled-color:
|
|
561
|
+
@dropdown-link-disabled-color: @link-disabled-color;
|
|
554
562
|
|
|
555
563
|
//** Text color for headers within dropdown menus.
|
|
556
|
-
@dropdown-header-color:
|
|
564
|
+
@dropdown-header-color: @control-label-color;
|
|
557
565
|
|
|
558
566
|
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
|
559
|
-
@dropdown-caret-color:
|
|
567
|
+
@dropdown-caret-color: #000;
|
|
560
568
|
|
|
561
|
-
@transition-duration:
|
|
569
|
+
@transition-duration: 0.15s;
|
|
562
570
|
|
|
563
571
|
@dropdown-arrow-width: 8px;
|
|
564
572
|
|
|
573
|
+
|
|
565
574
|
//-- Z-index master list
|
|
566
575
|
//
|
|
567
576
|
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
|
@@ -569,598 +578,619 @@
|
|
|
569
578
|
//
|
|
570
579
|
// Note: These variables are not generated into the Customizer.
|
|
571
580
|
|
|
572
|
-
@zindex-navbar:
|
|
573
|
-
@zindex-dropdown:
|
|
574
|
-
@zindex-popover:
|
|
575
|
-
@zindex-tooltip:
|
|
576
|
-
@zindex-navbar-fixed:
|
|
577
|
-
@zindex-modal-background:
|
|
578
|
-
@zindex-modal:
|
|
581
|
+
@zindex-navbar: 1000;
|
|
582
|
+
@zindex-dropdown: 1000;
|
|
583
|
+
@zindex-popover: 1060;
|
|
584
|
+
@zindex-tooltip: 1070;
|
|
585
|
+
@zindex-navbar-fixed: 1030;
|
|
586
|
+
@zindex-modal-background: 1040;
|
|
587
|
+
@zindex-modal: 1050;
|
|
588
|
+
|
|
579
589
|
|
|
580
590
|
@zindex-mobile-nav-background: 1055;
|
|
581
591
|
@zindex-mobile-nav: 1060;
|
|
582
592
|
|
|
593
|
+
|
|
583
594
|
//== Grid system
|
|
584
595
|
//
|
|
585
596
|
//## Define your custom responsive grid.
|
|
586
597
|
|
|
587
598
|
//** Number of columns in the grid.
|
|
588
|
-
@grid-columns:
|
|
599
|
+
@grid-columns: 12;
|
|
589
600
|
//** Padding between columns. Gets divided in half for the left and right.
|
|
590
|
-
@grid-gutter-width:
|
|
601
|
+
@grid-gutter-width: 24px;
|
|
591
602
|
// Navbar collapse
|
|
592
603
|
//** Point at which the navbar becomes uncollapsed.
|
|
593
|
-
@grid-float-breakpoint:
|
|
604
|
+
@grid-float-breakpoint: @screen-md-min;
|
|
594
605
|
//** Point at which the navbar begins collapsing.
|
|
595
606
|
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
|
596
607
|
|
|
608
|
+
|
|
597
609
|
//== Container sizes
|
|
598
610
|
//
|
|
599
611
|
//## Define the maximum width of `.container` for different screen sizes.
|
|
600
612
|
|
|
601
613
|
// Small screen / tablet
|
|
602
|
-
@container-tablet:
|
|
614
|
+
@container-tablet: (544px + @grid-gutter-width);
|
|
603
615
|
//** For `@screen-sm-min` and up.
|
|
604
|
-
@container-sm:
|
|
616
|
+
@container-sm: @container-tablet;
|
|
605
617
|
|
|
606
618
|
// Medium screen / desktop
|
|
607
|
-
@container-desktop:
|
|
619
|
+
@container-desktop: (720px + @grid-gutter-width);
|
|
608
620
|
//** For `@screen-md-min` and up.
|
|
609
|
-
@container-md:
|
|
621
|
+
@container-md: @container-desktop;
|
|
610
622
|
|
|
611
623
|
// Large screen / wide desktop
|
|
612
|
-
@container-large-desktop:
|
|
624
|
+
@container-large-desktop: (940px + @grid-gutter-width);
|
|
613
625
|
//** For `@screen-lg-min` and up.
|
|
614
|
-
@container-lg:
|
|
626
|
+
@container-lg: @container-large-desktop;
|
|
615
627
|
|
|
616
628
|
// Large screen / wide desktop
|
|
617
|
-
@container-xlarge-desktop:
|
|
629
|
+
@container-xlarge-desktop: (1140px + @grid-gutter-width);
|
|
618
630
|
//** For `@screen-xl-min` and up.
|
|
619
|
-
@container-xl:
|
|
631
|
+
@container-xl: @container-xlarge-desktop;
|
|
620
632
|
|
|
621
|
-
@nav-link-color:
|
|
622
|
-
@nav-link-hover-color:
|
|
623
|
-
@nav-link-active-color:
|
|
633
|
+
@nav-link-color: @link-secondary-color;
|
|
634
|
+
@nav-link-hover-color: @link-secondary-hover-color;
|
|
635
|
+
@nav-link-active-color: @link-secondary-active-color;
|
|
624
636
|
|
|
625
|
-
@nav-active-link-color:
|
|
626
|
-
@nav-active-link-hover-color:
|
|
627
|
-
@nav-active-link-active-color:
|
|
637
|
+
@nav-active-link-color: @link-color;
|
|
638
|
+
@nav-active-link-hover-color: @link-hover-color;
|
|
639
|
+
@nav-active-link-active-color: @link-active-color;
|
|
628
640
|
|
|
629
|
-
@nav-inverse-link-color:
|
|
630
|
-
@nav-inverse-link-hover-color:
|
|
631
|
-
@nav-inverse-link-active-color:
|
|
632
|
-
@nav-inverse-link-active-bg:
|
|
641
|
+
@nav-inverse-link-color: @brand-pale-blue;
|
|
642
|
+
@nav-inverse-link-hover-color: @brand-light-blue;
|
|
643
|
+
@nav-inverse-link-active-color: @brand-light-blue-minus-10;
|
|
644
|
+
@nav-inverse-link-active-bg: @brand-navy-minus-10;
|
|
633
645
|
|
|
634
646
|
//== Navbar
|
|
635
647
|
//
|
|
636
648
|
//##
|
|
637
649
|
|
|
638
650
|
// Basics of a navbar
|
|
639
|
-
@navbar-font-size:
|
|
640
|
-
@navbar-font-size-mobile:
|
|
641
|
-
@navbar-line-height:
|
|
642
|
-
@navbar-height:
|
|
643
|
-
@navbar-margin-bottom:
|
|
644
|
-
@navbar-border-radius:
|
|
645
|
-
@navbar-padding-horizontal:
|
|
646
|
-
@navbar-padding-vertical:
|
|
647
|
-
@navbar-padding:
|
|
648
|
-
(@navbar-padding-vertical - 1px);
|
|
651
|
+
@navbar-font-size: 14px;
|
|
652
|
+
@navbar-font-size-mobile: 16px;
|
|
653
|
+
@navbar-line-height: 40px;
|
|
654
|
+
@navbar-height: 56px;
|
|
655
|
+
@navbar-margin-bottom: 40px;
|
|
656
|
+
@navbar-border-radius: 0;
|
|
657
|
+
@navbar-padding-horizontal: 16px;
|
|
658
|
+
@navbar-padding-vertical: 8px;
|
|
659
|
+
@navbar-padding: (@navbar-padding-vertical + 1px) @navbar-padding-horizontal (@navbar-padding-vertical - 1px);
|
|
649
660
|
@navbar-padding-horizontal-mobile: (@spacer * 2);
|
|
650
|
-
@navbar-padding-mobile:
|
|
651
|
-
|
|
661
|
+
@navbar-padding-mobile: (@navbar-padding-vertical + 1px) @navbar-padding-horizontal-mobile (@navbar-padding-vertical - 1px);
|
|
662
|
+
|
|
652
663
|
|
|
653
|
-
@navbar-collapse-max-height:
|
|
654
|
-
@navbar-collapse-max-width:
|
|
655
|
-
@navbar-collapse-bg:
|
|
664
|
+
@navbar-collapse-max-height: 340px;
|
|
665
|
+
@navbar-collapse-max-width: (320px - 56px);
|
|
666
|
+
@navbar-collapse-bg: @brand-navy;
|
|
656
667
|
|
|
657
668
|
//=== Standard navbar
|
|
658
669
|
// Navbar basics
|
|
659
|
-
@navbar-default-color:
|
|
660
|
-
@navbar-default-bg:
|
|
661
|
-
@navbar-default-border:
|
|
670
|
+
@navbar-default-color: @brand-navy-minus-10;
|
|
671
|
+
@navbar-default-bg: transparent;
|
|
672
|
+
@navbar-default-border: @brand-grey-minus-10;
|
|
662
673
|
|
|
663
674
|
// Navbar links
|
|
664
|
-
@navbar-default-link-color:
|
|
665
|
-
@navbar-default-link-hover-color:
|
|
666
|
-
@navbar-default-link-hover-bg:
|
|
667
|
-
@navbar-default-link-active-color:
|
|
668
|
-
@navbar-default-link-active-bg:
|
|
669
|
-
@navbar-default-link-disabled-color:
|
|
670
|
-
@navbar-default-link-disabled-bg:
|
|
675
|
+
@navbar-default-link-color: @nav-link-color;
|
|
676
|
+
@navbar-default-link-hover-color: @nav-link-hover-color;
|
|
677
|
+
@navbar-default-link-hover-bg: transparent;
|
|
678
|
+
@navbar-default-link-active-color: @nav-active-link-color;
|
|
679
|
+
@navbar-default-link-active-bg: transparent;
|
|
680
|
+
@navbar-default-link-disabled-color: @brand-smoke;
|
|
681
|
+
@navbar-default-link-disabled-bg: transparent;
|
|
671
682
|
|
|
672
683
|
// Navbar brand label
|
|
673
|
-
@navbar-default-brand-color:
|
|
674
|
-
@navbar-default-brand-hover-color:
|
|
675
|
-
@navbar-default-brand-hover-bg:
|
|
684
|
+
@navbar-default-brand-color: @navbar-inverse-link-color;
|
|
685
|
+
@navbar-default-brand-hover-color: #fff;
|
|
686
|
+
@navbar-default-brand-hover-bg: transparent;
|
|
676
687
|
|
|
677
688
|
// Navbar toggle
|
|
678
|
-
@navbar-default-toggle-hover-bg:
|
|
679
|
-
@navbar-default-toggle-icon-bar-bg:
|
|
680
|
-
@navbar-default-toggle-border-color:
|
|
681
|
-
@navbar-default-toggle-hover-border-color:
|
|
689
|
+
@navbar-default-toggle-hover-bg: transparent;
|
|
690
|
+
@navbar-default-toggle-icon-bar-bg: @brand-light-blue;
|
|
691
|
+
@navbar-default-toggle-border-color: transparent;
|
|
692
|
+
@navbar-default-toggle-hover-border-color: @brand-light-blue;
|
|
682
693
|
|
|
683
694
|
// Navbar sercondary
|
|
684
|
-
@navbar-secondary-bg:
|
|
685
|
-
@navbar-secondary-height:
|
|
686
|
-
@navbar-secondary-padding-vertical:
|
|
695
|
+
@navbar-secondary-bg: transparent;
|
|
696
|
+
@navbar-secondary-height: 64px;
|
|
697
|
+
@navbar-secondary-padding-vertical: 12px;
|
|
698
|
+
|
|
687
699
|
|
|
688
700
|
//=== Inverted navbar
|
|
689
701
|
// Reset inverted navbar basics
|
|
690
|
-
@navbar-inverse-color:
|
|
691
|
-
@navbar-inverse-bg:
|
|
692
|
-
@navbar-inverse-border:
|
|
702
|
+
@navbar-inverse-color: #FFF;
|
|
703
|
+
@navbar-inverse-bg: transparent;
|
|
704
|
+
@navbar-inverse-border: @brand-grey-minus-10;
|
|
693
705
|
|
|
694
706
|
// Inverted navbar links
|
|
695
|
-
@navbar-inverse-link-color:
|
|
696
|
-
@navbar-inverse-link-hover-color:
|
|
697
|
-
@navbar-inverse-link-hover-bg:
|
|
698
|
-
@navbar-inverse-link-active-color:
|
|
699
|
-
@navbar-inverse-link-active-bg:
|
|
700
|
-
@navbar-inverse-link-disabled-color:
|
|
701
|
-
@navbar-inverse-link-disabled-bg:
|
|
707
|
+
@navbar-inverse-link-color: #FFF; // @nav-inverse-link-color;
|
|
708
|
+
@navbar-inverse-link-hover-color: @nav-inverse-link-hover-color;
|
|
709
|
+
@navbar-inverse-link-hover-bg: transparent;
|
|
710
|
+
@navbar-inverse-link-active-color: @nav-active-link-color;
|
|
711
|
+
@navbar-inverse-link-active-bg: transparent;
|
|
712
|
+
@navbar-inverse-link-disabled-color: #444;
|
|
713
|
+
@navbar-inverse-link-disabled-bg: transparent;
|
|
702
714
|
|
|
703
715
|
// Inverted navbar brand label
|
|
704
|
-
@navbar-inverse-brand-color:
|
|
705
|
-
@navbar-inverse-brand-hover-color:
|
|
706
|
-
@navbar-inverse-brand-hover-bg:
|
|
716
|
+
@navbar-inverse-brand-color: @navbar-default-link-color;
|
|
717
|
+
@navbar-inverse-brand-hover-color: darken(@navbar-default-brand-color, 10%);
|
|
718
|
+
@navbar-inverse-brand-hover-bg: transparent;
|
|
707
719
|
|
|
708
720
|
// Inverted navbar toggle
|
|
709
|
-
@navbar-inverse-toggle-hover-bg:
|
|
710
|
-
@navbar-inverse-toggle-icon-bar-bg:
|
|
711
|
-
@navbar-inverse-toggle-border-color:
|
|
712
|
-
@navbar-inverse-toggle-hover-border-color:
|
|
721
|
+
@navbar-inverse-toggle-hover-bg: transparent;
|
|
722
|
+
@navbar-inverse-toggle-icon-bar-bg: @brand-light-blue;
|
|
723
|
+
@navbar-inverse-toggle-border-color: transparent;
|
|
724
|
+
@navbar-inverse-toggle-hover-border-color: @brand-light-blue;
|
|
713
725
|
|
|
714
726
|
// Navbar sercondary
|
|
715
|
-
@navbar-inverse-secondary-bg:
|
|
727
|
+
@navbar-inverse-secondary-bg: @brand-navy-minus-10;
|
|
716
728
|
|
|
717
729
|
//== Navs
|
|
718
730
|
//
|
|
719
731
|
//##
|
|
720
732
|
|
|
721
733
|
//=== Shared nav styles
|
|
722
|
-
@nav-link-padding:
|
|
723
|
-
@nav-link-hover-bg:
|
|
734
|
+
@nav-link-padding: 9px 24px 7px;
|
|
735
|
+
@nav-link-hover-bg: @brand-smoke-plus-20;
|
|
724
736
|
|
|
725
|
-
@nav-disabled-link-color:
|
|
726
|
-
@nav-disabled-link-hover-color:
|
|
737
|
+
@nav-disabled-link-color: @link-disabled-color;
|
|
738
|
+
@nav-disabled-link-hover-color: @link-disabled-color;
|
|
727
739
|
|
|
728
740
|
//== Tabs
|
|
729
|
-
@nav-tabs-border-color:
|
|
730
|
-
@nav-tabs-font-size:
|
|
731
|
-
@nav-tabs-active-hover-border-color:
|
|
741
|
+
@nav-tabs-border-color: @brand-smoke;
|
|
742
|
+
@nav-tabs-font-size: @font-size-base;
|
|
743
|
+
@nav-tabs-active-hover-border-color: @brand-light-blue;
|
|
732
744
|
|
|
733
|
-
@nav-tabs-justified-link-border-color:
|
|
734
|
-
@nav-tabs-justified-active-link-border-color:
|
|
745
|
+
@nav-tabs-justified-link-border-color: @brand-smoke;
|
|
746
|
+
@nav-tabs-justified-active-link-border-color: @body-bg;
|
|
735
747
|
|
|
736
748
|
//== Pills
|
|
737
|
-
@nav-pills-font-size:
|
|
749
|
+
@nav-pills-font-size: @font-size-small;
|
|
738
750
|
|
|
739
751
|
//== Pagination
|
|
740
752
|
//
|
|
741
753
|
//##
|
|
742
754
|
|
|
743
|
-
@pagination-color:
|
|
744
|
-
@pagination-font-weight:
|
|
745
|
-
@pagination-bg:
|
|
755
|
+
@pagination-color: @brand-navy;
|
|
756
|
+
@pagination-font-weight: @font-weight-normal;
|
|
757
|
+
@pagination-bg: transparent;
|
|
746
758
|
|
|
747
|
-
@pagination-hover-color:
|
|
748
|
-
@pagination-hover-bg:
|
|
759
|
+
@pagination-hover-color: @brand-navy;
|
|
760
|
+
@pagination-hover-bg: @brand-smoke-plus-20;
|
|
749
761
|
|
|
750
|
-
@pagination-active-color:
|
|
751
|
-
@pagination-active-bg:
|
|
762
|
+
@pagination-active-color: @brand-navy;
|
|
763
|
+
@pagination-active-bg: @brand-smoke-plus-20;
|
|
752
764
|
|
|
753
|
-
@pagination-disabled-color:
|
|
754
|
-
@pagination-disabled-bg:
|
|
755
|
-
@pagination-disabled-border:
|
|
765
|
+
@pagination-disabled-color: @link-disabled-color;
|
|
766
|
+
@pagination-disabled-bg: #fff;
|
|
767
|
+
@pagination-disabled-border: @brand-smoke;
|
|
756
768
|
|
|
757
|
-
@pagination-inverse-hover-bg:
|
|
758
|
-
@pagination-inverse-active-bg:
|
|
769
|
+
@pagination-inverse-hover-bg: @brand-white;
|
|
770
|
+
@pagination-inverse-active-bg: @brand-white;
|
|
759
771
|
|
|
760
772
|
//== Pager
|
|
761
773
|
//
|
|
762
774
|
//##
|
|
763
775
|
|
|
764
|
-
@pager-bg:
|
|
765
|
-
@pager-border-radius:
|
|
776
|
+
@pager-bg: @pagination-bg;
|
|
777
|
+
@pager-border-radius: @border-radius-base;
|
|
778
|
+
|
|
779
|
+
@pager-hover-color: #fff;
|
|
780
|
+
@pager-hover-bg: @pagination-hover-bg;
|
|
766
781
|
|
|
767
|
-
@pager-
|
|
768
|
-
@pager-
|
|
782
|
+
@pager-active-bg: @pagination-active-bg;
|
|
783
|
+
@pager-active-color: @pagination-active-color;
|
|
769
784
|
|
|
770
|
-
@pager-
|
|
771
|
-
@pager-active-color: @pagination-active-color;
|
|
785
|
+
@pager-disabled-color: @pagination-disabled-color;
|
|
772
786
|
|
|
773
|
-
@pager-disabled-color: @pagination-disabled-color;
|
|
774
787
|
|
|
775
788
|
//== Jumbotron
|
|
776
789
|
//
|
|
777
790
|
//##
|
|
778
791
|
|
|
779
|
-
@jumbotron-padding:
|
|
780
|
-
@jumbotron-color:
|
|
781
|
-
@jumbotron-bg:
|
|
782
|
-
@jumbotron-heading-color:
|
|
783
|
-
@jumbotron-font-size:
|
|
784
|
-
@jumbotron-heading-font-size:
|
|
785
|
-
@jumbotron-heading-line-height:
|
|
792
|
+
@jumbotron-padding: 32px;
|
|
793
|
+
@jumbotron-color: #FFF; //inherit;
|
|
794
|
+
@jumbotron-bg: @brand-navy;
|
|
795
|
+
@jumbotron-heading-color: #FFF; //inherit;
|
|
796
|
+
@jumbotron-font-size: 22px;
|
|
797
|
+
@jumbotron-heading-font-size: 42px;
|
|
798
|
+
@jumbotron-heading-line-height: 56px;
|
|
786
799
|
|
|
787
800
|
//== Form states and alerts
|
|
788
801
|
//
|
|
789
802
|
//## Define colors for form feedback states and, by default, alerts.
|
|
790
803
|
|
|
791
|
-
@state-success-text:
|
|
792
|
-
@state-success-text-large:
|
|
793
|
-
@state-success-text-hover:
|
|
794
|
-
@state-success-bg:
|
|
795
|
-
@state-success-border:
|
|
796
|
-
@state-success-border-hover:
|
|
797
|
-
|
|
798
|
-
@state-info-text:
|
|
799
|
-
@state-info-text-large:
|
|
800
|
-
@state-info-text-hover:
|
|
801
|
-
@state-info-bg:
|
|
802
|
-
@state-info-border:
|
|
803
|
-
@state-info-border-hover:
|
|
804
|
-
|
|
805
|
-
@state-warning-text:
|
|
806
|
-
@state-warning-text-large:
|
|
807
|
-
@state-warning-text-hover:
|
|
808
|
-
@state-warning-bg:
|
|
809
|
-
@state-warning-border:
|
|
810
|
-
@state-warning-border-hover:
|
|
811
|
-
|
|
812
|
-
@state-danger-text:
|
|
813
|
-
@state-danger-text-large:
|
|
814
|
-
@state-danger-text-hover:
|
|
815
|
-
@state-danger-bg:
|
|
816
|
-
@state-danger-border:
|
|
817
|
-
@state-danger-border-hover:
|
|
804
|
+
@state-success-text: @brand-green-minus-20;
|
|
805
|
+
@state-success-text-large: @brand-green;
|
|
806
|
+
@state-success-text-hover: @brand-green-minus-20;
|
|
807
|
+
@state-success-bg: @brand-green-wash;
|
|
808
|
+
@state-success-border: @brand-green;
|
|
809
|
+
@state-success-border-hover: @brand-green-minus-20;
|
|
810
|
+
|
|
811
|
+
@state-info-text: @brand-light-blue-minus-10;
|
|
812
|
+
@state-info-text-large: @brand-light-blue;
|
|
813
|
+
@state-info-text-hover: @brand-light-blue-minus-10;
|
|
814
|
+
@state-info-bg: @brand-light-blue-wash;
|
|
815
|
+
@state-info-border: @brand-light-blue;
|
|
816
|
+
@state-info-border-hover: @brand-light-blue-minus-20;
|
|
817
|
+
|
|
818
|
+
@state-warning-text: @brand-orange-minus-20;
|
|
819
|
+
@state-warning-text-large: @brand-orange;
|
|
820
|
+
@state-warning-text-hover: @brand-orange-minus-20;
|
|
821
|
+
@state-warning-bg: @brand-orange-wash;
|
|
822
|
+
@state-warning-border: @brand-orange;
|
|
823
|
+
@state-warning-border-hover: @brand-orange-minus-20;
|
|
824
|
+
|
|
825
|
+
@state-danger-text: @brand-red-minus-10;
|
|
826
|
+
@state-danger-text-large: @brand-red;
|
|
827
|
+
@state-danger-text-hover: @brand-red-minus-10;
|
|
828
|
+
@state-danger-bg: @brand-red-wash;
|
|
829
|
+
@state-danger-border: @brand-red;
|
|
830
|
+
@state-danger-border-hover: @brand-red-minus-20;
|
|
831
|
+
|
|
818
832
|
|
|
819
833
|
//== Tooltips
|
|
820
834
|
//
|
|
821
835
|
//##
|
|
822
836
|
|
|
823
837
|
//** Tooltip max width
|
|
824
|
-
@tooltip-max-width:
|
|
838
|
+
@tooltip-max-width: 200px;
|
|
825
839
|
//** Tooltip text color
|
|
826
|
-
@tooltip-color:
|
|
840
|
+
@tooltip-color: @brand-navy;
|
|
827
841
|
//** Tooltip background color
|
|
828
|
-
@tooltip-bg:
|
|
829
|
-
@tooltip-opacity:
|
|
842
|
+
@tooltip-bg: @brand-white;
|
|
843
|
+
@tooltip-opacity: 1;
|
|
830
844
|
|
|
831
845
|
//** Tooltip arrow width
|
|
832
|
-
@tooltip-arrow-width:
|
|
846
|
+
@tooltip-arrow-width: 5px;
|
|
833
847
|
//** Tooltip arrow color
|
|
834
|
-
@tooltip-arrow-color:
|
|
848
|
+
@tooltip-arrow-color: @tooltip-bg;
|
|
835
849
|
|
|
836
850
|
//== Popovers
|
|
837
851
|
//
|
|
838
852
|
//##
|
|
839
853
|
|
|
840
854
|
//** Popover body background color
|
|
841
|
-
@popover-bg:
|
|
855
|
+
@popover-bg: @brand-white;
|
|
842
856
|
//** Popover maximum width
|
|
843
|
-
@popover-max-width:
|
|
857
|
+
@popover-max-width: 276px;
|
|
844
858
|
//** Popover border color
|
|
845
|
-
@popover-border-color:
|
|
859
|
+
@popover-border-color: @brand-white;
|
|
846
860
|
//** Popover fallback border color
|
|
847
|
-
@popover-fallback-border-color:
|
|
861
|
+
@popover-fallback-border-color: @brand-white;
|
|
848
862
|
|
|
849
863
|
//** Popover title background color
|
|
850
|
-
@popover-title-bg:
|
|
864
|
+
@popover-title-bg: @brand-white;
|
|
851
865
|
|
|
852
866
|
//** Popover arrow width
|
|
853
|
-
@popover-arrow-width:
|
|
867
|
+
@popover-arrow-width: 14px;
|
|
854
868
|
//** Popover arrow color
|
|
855
|
-
@popover-arrow-color:
|
|
869
|
+
@popover-arrow-color: @popover-bg;
|
|
856
870
|
|
|
857
871
|
//** Popover outer arrow width
|
|
858
|
-
@popover-arrow-outer-width:
|
|
872
|
+
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
|
859
873
|
//** Popover outer arrow color
|
|
860
|
-
@popover-arrow-outer-color:
|
|
874
|
+
@popover-arrow-outer-color: @brand-white;
|
|
861
875
|
//** Popover outer arrow fallback color
|
|
862
|
-
@popover-arrow-outer-fallback-color:
|
|
876
|
+
@popover-arrow-outer-fallback-color: @brand-white;
|
|
877
|
+
|
|
863
878
|
|
|
864
879
|
//== Labels
|
|
865
880
|
//
|
|
866
881
|
//##
|
|
867
882
|
|
|
868
883
|
//** Default label background color
|
|
869
|
-
@label-default-bg:
|
|
870
|
-
@label-default-bg-hover:
|
|
884
|
+
@label-default-bg: @brand-smoke;
|
|
885
|
+
@label-default-bg-hover: @brand-smoke-minus-10;
|
|
871
886
|
//** Primary label background color
|
|
872
|
-
@label-primary-bg:
|
|
873
|
-
@label-primary-bg-hover:
|
|
887
|
+
@label-primary-bg: @brand-navy;
|
|
888
|
+
@label-primary-bg-hover: @brand-navy-minus-10;
|
|
874
889
|
//** Success label background color
|
|
875
|
-
@label-success-bg:
|
|
876
|
-
@label-success-bg-hover:
|
|
890
|
+
@label-success-bg: @brand-green;
|
|
891
|
+
@label-success-bg-hover: @brand-green-minus-10;
|
|
877
892
|
//** Info label background color
|
|
878
|
-
@label-info-bg:
|
|
879
|
-
@label-info-bg-hover:
|
|
893
|
+
@label-info-bg: @brand-light-blue;
|
|
894
|
+
@label-info-bg-hover: @brand-light-blue-minus-10;
|
|
880
895
|
//** Warning label background color
|
|
881
|
-
@label-warning-bg:
|
|
882
|
-
@label-warning-bg-hover:
|
|
896
|
+
@label-warning-bg: @brand-orange;
|
|
897
|
+
@label-warning-bg-hover: @brand-orange-minus-10;
|
|
883
898
|
//** Danger label background color
|
|
884
|
-
@label-danger-bg:
|
|
885
|
-
@label-danger-bg-hover:
|
|
899
|
+
@label-danger-bg: @brand-red;
|
|
900
|
+
@label-danger-bg-hover: @brand-red-minus-10;
|
|
886
901
|
|
|
887
902
|
//** Default label text color
|
|
888
|
-
@label-color:
|
|
903
|
+
@label-color: #fff;
|
|
889
904
|
//** Default text color of a linked label
|
|
890
|
-
@label-link-hover-color:
|
|
905
|
+
@label-link-hover-color: #fff;
|
|
906
|
+
|
|
891
907
|
|
|
892
908
|
//== Modals
|
|
893
909
|
//
|
|
894
910
|
//##
|
|
895
911
|
|
|
896
912
|
//** Padding applied to the modal body
|
|
897
|
-
@modal-inner-padding:
|
|
913
|
+
@modal-inner-padding: @spacing-1-desktop;
|
|
898
914
|
@modal-inner-padding-collapse: @spacing-1-tablet;
|
|
899
915
|
|
|
900
916
|
//** Padding applied to the modal title
|
|
901
|
-
@modal-title-padding:
|
|
902
|
-
@modal-title-vertical-padding: 28px;
|
|
917
|
+
@modal-title-padding: @spacing-1-desktop;
|
|
918
|
+
@modal-title-vertical-padding: 28px; // 2*28 + 24 = 80
|
|
903
919
|
//** Modal title line-height
|
|
904
|
-
@modal-title-line-height:
|
|
920
|
+
@modal-title-line-height: @line-height-computed;
|
|
905
921
|
|
|
906
922
|
//** Background color of modal content area
|
|
907
|
-
@modal-content-bg:
|
|
923
|
+
@modal-content-bg: #fff;
|
|
908
924
|
//** Modal content border color
|
|
909
|
-
@modal-content-border-color:
|
|
925
|
+
@modal-content-border-color: @brand-smoke-plus-10;
|
|
910
926
|
//** Modal content border color **for IE8**
|
|
911
|
-
@modal-content-fallback-border-color:
|
|
927
|
+
@modal-content-fallback-border-color: #999;
|
|
912
928
|
|
|
913
929
|
//** Modal backdrop background color
|
|
914
|
-
@modal-backdrop-bg:
|
|
930
|
+
@modal-backdrop-bg: @brand-navy;
|
|
915
931
|
|
|
916
932
|
//** Modal backdrop opacity
|
|
917
|
-
@modal-backdrop-opacity:
|
|
933
|
+
@modal-backdrop-opacity: .8;
|
|
918
934
|
//** Modal header border color
|
|
919
|
-
@modal-header-border-color:
|
|
935
|
+
@modal-header-border-color: @brand-smoke-plus-10;
|
|
920
936
|
//** Modal footer border color
|
|
921
|
-
@modal-footer-border-color:
|
|
937
|
+
@modal-footer-border-color: @modal-header-border-color;
|
|
938
|
+
|
|
939
|
+
@modal-lg: 720px;
|
|
940
|
+
@modal-md: 540px;
|
|
941
|
+
@modal-sm: 300px;
|
|
922
942
|
|
|
923
|
-
@modal-lg: 720px;
|
|
924
|
-
@modal-md: 540px;
|
|
925
|
-
@modal-sm: 300px;
|
|
926
943
|
|
|
927
944
|
//== Alerts
|
|
928
945
|
//
|
|
929
946
|
//## Define alert colors, border radius, and padding.
|
|
930
947
|
|
|
931
|
-
@alert-padding:
|
|
932
|
-
@alert-border-radius:
|
|
933
|
-
@alert-bar-width:
|
|
934
|
-
@alert-link-font-weight:
|
|
948
|
+
@alert-padding: 24px;
|
|
949
|
+
@alert-border-radius: @border-radius-base;
|
|
950
|
+
@alert-bar-width: 8px;
|
|
951
|
+
@alert-link-font-weight: bold;
|
|
935
952
|
|
|
936
|
-
@alert-success-bg:
|
|
937
|
-
@alert-success-text:
|
|
938
|
-
@alert-success-text-hover:
|
|
939
|
-
@alert-success-border:
|
|
953
|
+
@alert-success-bg: @state-success-bg;
|
|
954
|
+
@alert-success-text: @state-success-text;
|
|
955
|
+
@alert-success-text-hover: @state-success-text-hover;
|
|
956
|
+
@alert-success-border: @state-success-border;
|
|
940
957
|
|
|
941
|
-
@alert-info-bg:
|
|
942
|
-
@alert-info-text:
|
|
943
|
-
@alert-info-text-hover:
|
|
944
|
-
@alert-info-border:
|
|
958
|
+
@alert-info-bg: @brand-smoke-plus-20;
|
|
959
|
+
@alert-info-text: @brand-grey-minus-10;
|
|
960
|
+
@alert-info-text-hover: @brand-grey-minus-10;
|
|
961
|
+
@alert-info-border: @brand-light-blue;
|
|
945
962
|
|
|
946
|
-
@alert-warning-bg:
|
|
947
|
-
@alert-warning-text:
|
|
948
|
-
@alert-warning-text-hover:
|
|
949
|
-
@alert-warning-border:
|
|
963
|
+
@alert-warning-bg: @state-warning-bg;
|
|
964
|
+
@alert-warning-text: @state-warning-text;
|
|
965
|
+
@alert-warning-text-hover: @state-warning-text-hover;
|
|
966
|
+
@alert-warning-border: @state-warning-border;
|
|
950
967
|
|
|
951
|
-
@alert-danger-bg:
|
|
952
|
-
@alert-danger-text:
|
|
953
|
-
@alert-danger-text-hover:
|
|
954
|
-
@alert-danger-border:
|
|
968
|
+
@alert-danger-bg: @state-danger-bg;
|
|
969
|
+
@alert-danger-text: @state-danger-text;
|
|
970
|
+
@alert-danger-text-hover: @state-danger-text-hover;
|
|
971
|
+
@alert-danger-border: @state-danger-border;
|
|
955
972
|
|
|
956
|
-
@alert-arrow-width:
|
|
973
|
+
@alert-arrow-width: 10px;
|
|
957
974
|
|
|
958
975
|
//== Progress bars
|
|
959
976
|
//
|
|
960
977
|
//##
|
|
961
978
|
|
|
962
979
|
//** Progress bar height
|
|
963
|
-
@progress-height:
|
|
980
|
+
@progress-height: 2px;
|
|
964
981
|
//** Large progress bar height
|
|
965
|
-
@progress-height-lg:
|
|
982
|
+
@progress-height-lg: 32px;
|
|
966
983
|
//** Background color of the whole progress component
|
|
967
|
-
@progress-bg:
|
|
984
|
+
@progress-bg: @brand-smoke-plus-10;
|
|
968
985
|
//** Progress bar text color
|
|
969
|
-
@progress-bar-color:
|
|
986
|
+
@progress-bar-color: #fff;
|
|
970
987
|
|
|
971
988
|
//** Default progress bar color
|
|
972
|
-
@progress-bar-bg:
|
|
989
|
+
@progress-bar-bg: @brand-light-blue;
|
|
973
990
|
//** Primary progress bar color
|
|
974
|
-
@progress-bar-primary-bg:
|
|
991
|
+
@progress-bar-primary-bg: @brand-navy;
|
|
975
992
|
//** Success progress bar color
|
|
976
|
-
@progress-bar-success-bg:
|
|
993
|
+
@progress-bar-success-bg: @brand-green;
|
|
977
994
|
//** Warning progress bar color
|
|
978
|
-
@progress-bar-warning-bg:
|
|
995
|
+
@progress-bar-warning-bg: @brand-orange;
|
|
979
996
|
//** Danger progress bar color
|
|
980
|
-
@progress-bar-danger-bg:
|
|
997
|
+
@progress-bar-danger-bg: @brand-red;
|
|
981
998
|
//** Info progress bar color
|
|
982
|
-
@progress-bar-info-bg:
|
|
999
|
+
@progress-bar-info-bg: @brand-light-blue;
|
|
983
1000
|
|
|
984
|
-
@progress-pip-size:
|
|
1001
|
+
@progress-pip-size: 8px;
|
|
985
1002
|
|
|
986
1003
|
//== List group
|
|
987
1004
|
//
|
|
988
1005
|
//##
|
|
989
1006
|
|
|
990
1007
|
//** Background color on `.list-group-item`
|
|
991
|
-
@list-group-bg:
|
|
1008
|
+
@list-group-bg: #fff;
|
|
992
1009
|
//** `.list-group-item` border color
|
|
993
|
-
@list-group-border:
|
|
1010
|
+
@list-group-border: @brand-smoke-plus-10;
|
|
994
1011
|
//** List group border radius
|
|
995
|
-
@list-group-border-radius:
|
|
1012
|
+
@list-group-border-radius: @border-radius-base;
|
|
996
1013
|
|
|
997
1014
|
//** Background color of single list items on hover
|
|
998
|
-
@list-group-hover-bg:
|
|
1015
|
+
@list-group-hover-bg: @brand-smoke-plus-20;
|
|
999
1016
|
//** Text color of active list items
|
|
1000
|
-
@list-group-active-color:
|
|
1017
|
+
@list-group-active-color: @component-active-color;
|
|
1001
1018
|
//** Background color of active list items
|
|
1002
|
-
@list-group-active-bg:
|
|
1019
|
+
@list-group-active-bg: #fff;
|
|
1003
1020
|
//** Border color of active list elements
|
|
1004
|
-
@list-group-active-border:
|
|
1021
|
+
@list-group-active-border: @list-group-active-bg;
|
|
1005
1022
|
//** Text color for content within active list items
|
|
1006
|
-
@list-group-active-text-color:
|
|
1023
|
+
@list-group-active-text-color: #FFF; // lighten(@list-group-active-bg, 40%);
|
|
1007
1024
|
|
|
1008
1025
|
//** Text color of disabled list items
|
|
1009
|
-
@list-group-disabled-color:
|
|
1026
|
+
@list-group-disabled-color: @link-disabled-color;
|
|
1010
1027
|
//** Background color of disabled list items
|
|
1011
|
-
@list-group-disabled-bg:
|
|
1028
|
+
@list-group-disabled-bg: #FFF;
|
|
1012
1029
|
//** Text color for content within disabled list items
|
|
1013
1030
|
@list-group-disabled-text-color: @list-group-disabled-color;
|
|
1014
1031
|
|
|
1015
|
-
@list-group-link-color:
|
|
1016
|
-
@list-group-link-hover-color:
|
|
1032
|
+
@list-group-link-color: @link-color;
|
|
1033
|
+
@list-group-link-hover-color: @link-hover-color;
|
|
1017
1034
|
@list-group-link-heading-color: @link-color;
|
|
1018
1035
|
|
|
1036
|
+
|
|
1019
1037
|
//== Panels
|
|
1020
1038
|
//
|
|
1021
1039
|
//##
|
|
1022
1040
|
|
|
1023
|
-
@panel-bg:
|
|
1024
|
-
@panel-heading-color:
|
|
1025
|
-
@panel-border-radius:
|
|
1026
|
-
@panel-focus-transtion:
|
|
1041
|
+
@panel-bg: transparent;
|
|
1042
|
+
@panel-heading-color: @brand-navy-minus-10;
|
|
1043
|
+
@panel-border-radius: @border-radius-base;
|
|
1044
|
+
@panel-focus-transtion: @transition-duration;
|
|
1027
1045
|
|
|
1028
1046
|
//** Border color for elements within panels
|
|
1029
|
-
@panel-inner-border:
|
|
1030
|
-
@panel-footer-bg:
|
|
1047
|
+
@panel-inner-border: #FFF;
|
|
1048
|
+
@panel-footer-bg: #fff;
|
|
1049
|
+
|
|
1050
|
+
@panel-default-text: @gray-dark;
|
|
1051
|
+
@panel-default-border: @brand-smoke-plus-10;
|
|
1052
|
+
@panel-default-heading-bg: #fff;
|
|
1031
1053
|
|
|
1032
|
-
@panel-
|
|
1033
|
-
@panel-
|
|
1034
|
-
@panel-
|
|
1054
|
+
@panel-primary-text: #fff;
|
|
1055
|
+
@panel-primary-border: @brand-navy;
|
|
1056
|
+
@panel-primary-heading-bg: #fff;
|
|
1035
1057
|
|
|
1036
|
-
@panel-
|
|
1037
|
-
@panel-
|
|
1038
|
-
@panel-
|
|
1058
|
+
@panel-success-text: @state-success-text;
|
|
1059
|
+
@panel-success-border: @state-success-border;
|
|
1060
|
+
@panel-success-heading-bg: #FFF;
|
|
1039
1061
|
|
|
1040
|
-
@panel-
|
|
1041
|
-
@panel-
|
|
1042
|
-
@panel-
|
|
1062
|
+
@panel-info-text: @state-info-text;
|
|
1063
|
+
@panel-info-border: @state-info-border;
|
|
1064
|
+
@panel-info-heading-bg: #FFF;
|
|
1043
1065
|
|
|
1044
|
-
@panel-
|
|
1045
|
-
@panel-
|
|
1046
|
-
@panel-
|
|
1066
|
+
@panel-warning-text: @state-warning-text;
|
|
1067
|
+
@panel-warning-border: @state-warning-border;
|
|
1068
|
+
@panel-warning-heading-bg: #FFF;
|
|
1069
|
+
|
|
1070
|
+
@panel-danger-text: @state-danger-text;
|
|
1071
|
+
@panel-danger-border: @state-danger-border;
|
|
1072
|
+
@panel-danger-heading-bg: #FFF;
|
|
1047
1073
|
|
|
1048
|
-
@panel-warning-text: @state-warning-text;
|
|
1049
|
-
@panel-warning-border: @state-warning-border;
|
|
1050
|
-
@panel-warning-heading-bg: #fff;
|
|
1051
1074
|
|
|
1052
|
-
@panel-danger-text: @state-danger-text;
|
|
1053
|
-
@panel-danger-border: @state-danger-border;
|
|
1054
|
-
@panel-danger-heading-bg: #fff;
|
|
1055
1075
|
|
|
1056
1076
|
//== Thumbnails
|
|
1057
1077
|
//
|
|
1058
1078
|
//##
|
|
1059
1079
|
|
|
1060
1080
|
//** Padding around the thumbnail image
|
|
1061
|
-
@thumbnail-padding:
|
|
1081
|
+
@thumbnail-padding: 0;
|
|
1062
1082
|
//** Thumbnail background color
|
|
1063
|
-
@thumbnail-bg:
|
|
1083
|
+
@thumbnail-bg: @body-bg;
|
|
1064
1084
|
//** Thumbnail border color
|
|
1065
|
-
@thumbnail-border:
|
|
1085
|
+
@thumbnail-border: @brand-smoke-plus-10;
|
|
1066
1086
|
//** Thumbnail border radius
|
|
1067
|
-
@thumbnail-border-radius:
|
|
1087
|
+
@thumbnail-border-radius: @border-radius-base;
|
|
1068
1088
|
|
|
1069
1089
|
//** Custom text color for thumbnail captions
|
|
1070
|
-
@thumbnail-caption-color:
|
|
1090
|
+
@thumbnail-caption-color: @text-color;
|
|
1071
1091
|
//** Padding around the thumbnail caption
|
|
1072
|
-
@thumbnail-caption-padding:
|
|
1092
|
+
@thumbnail-caption-padding: 24px;
|
|
1093
|
+
|
|
1073
1094
|
|
|
1074
1095
|
//== Tiles
|
|
1075
1096
|
//
|
|
1076
1097
|
//##
|
|
1077
1098
|
|
|
1078
1099
|
//** Padding around the tile
|
|
1079
|
-
@tile-font-size:
|
|
1100
|
+
@tile-font-size: @font-size-small;
|
|
1101
|
+
|
|
1102
|
+
|
|
1080
1103
|
|
|
1081
1104
|
//== Media objects
|
|
1082
1105
|
//
|
|
1083
1106
|
//##
|
|
1084
|
-
@media-object-padding-horizontal:
|
|
1107
|
+
@media-object-padding-horizontal: (@spacer * 3);
|
|
1108
|
+
|
|
1085
1109
|
|
|
1086
1110
|
//== Wells
|
|
1087
1111
|
//
|
|
1088
1112
|
//##
|
|
1089
1113
|
|
|
1090
|
-
@well-bg:
|
|
1091
|
-
@well-border:
|
|
1114
|
+
@well-bg: @gray-base;
|
|
1115
|
+
@well-border: @gray-lighter;
|
|
1116
|
+
|
|
1117
|
+
|
|
1092
1118
|
|
|
1093
1119
|
//== Badges
|
|
1094
1120
|
//
|
|
1095
1121
|
//##
|
|
1096
1122
|
|
|
1097
|
-
@badge-color:
|
|
1123
|
+
@badge-color: #fff;
|
|
1098
1124
|
//** Linked badge text color on hover
|
|
1099
|
-
@badge-link-hover-color:
|
|
1100
|
-
@badge-bg:
|
|
1125
|
+
@badge-link-hover-color: #fff;
|
|
1126
|
+
@badge-bg: @brand-red;
|
|
1101
1127
|
|
|
1102
1128
|
//** Badge text color in active nav link
|
|
1103
|
-
@badge-active-color:
|
|
1129
|
+
@badge-active-color: @link-color;
|
|
1104
1130
|
//** Badge background color in active nav link
|
|
1105
|
-
@badge-active-bg:
|
|
1131
|
+
@badge-active-bg: #fff;
|
|
1106
1132
|
|
|
1107
|
-
@badge-font-size:
|
|
1108
|
-
@badge-font-weight:
|
|
1109
|
-
@badge-line-height:
|
|
1110
|
-
@badge-border-radius:
|
|
1133
|
+
@badge-font-size: 10px;
|
|
1134
|
+
@badge-font-weight: bold;
|
|
1135
|
+
@badge-line-height: 1;
|
|
1136
|
+
@badge-border-radius: 10px;
|
|
1111
1137
|
|
|
1112
1138
|
//== Breadcrumbs
|
|
1113
1139
|
//
|
|
1114
1140
|
//##
|
|
1115
1141
|
|
|
1116
|
-
@breadcrumb-padding-vertical:
|
|
1142
|
+
@breadcrumb-padding-vertical: 8px;
|
|
1117
1143
|
@breadcrumb-padding-horizontal: 0;
|
|
1118
1144
|
|
|
1119
|
-
|
|
1120
|
-
@breadcrumb-
|
|
1121
|
-
@breadcrumb-
|
|
1122
|
-
@breadcrumb-
|
|
1145
|
+
|
|
1146
|
+
@breadcrumb-bg: none;
|
|
1147
|
+
@breadcrumb-color: #ccc;
|
|
1148
|
+
@breadcrumb-active-color: @gray-light;
|
|
1149
|
+
@breadcrumb-separator: "❯";
|
|
1123
1150
|
|
|
1124
1151
|
//== Carousel
|
|
1125
1152
|
//
|
|
1126
1153
|
//##
|
|
1127
1154
|
|
|
1128
|
-
@carousel-text-shadow:
|
|
1155
|
+
@carousel-text-shadow: 0 1px 7px rgba(0,0,0,.8);
|
|
1129
1156
|
|
|
1130
|
-
@carousel-control-color:
|
|
1131
|
-
@carousel-control-width:
|
|
1132
|
-
@carousel-control-opacity:
|
|
1133
|
-
@carousel-control-font-size:
|
|
1157
|
+
@carousel-control-color: @brand-light-blue;
|
|
1158
|
+
@carousel-control-width: 15%;
|
|
1159
|
+
@carousel-control-opacity: 1;
|
|
1160
|
+
@carousel-control-font-size: 20px;
|
|
1134
1161
|
|
|
1135
|
-
@carousel-indicator-active-bg:
|
|
1136
|
-
@carousel-indicator-border-color:
|
|
1162
|
+
@carousel-indicator-active-bg: @brand-light-blue;
|
|
1163
|
+
@carousel-indicator-border-color: @brand-light-blue;
|
|
1164
|
+
|
|
1165
|
+
@carousel-caption-color: #fff;
|
|
1137
1166
|
|
|
1138
|
-
@carousel-caption-color: #fff;
|
|
1139
1167
|
|
|
1140
1168
|
//== Close
|
|
1141
1169
|
//
|
|
1142
1170
|
//##
|
|
1143
1171
|
|
|
1144
|
-
@close-font-size:
|
|
1145
|
-
@close-font-weight:
|
|
1146
|
-
@close-color:
|
|
1147
|
-
@close-color-hover:
|
|
1148
|
-
@close-color-active:
|
|
1172
|
+
@close-font-size: 32px;
|
|
1173
|
+
@close-font-weight: bold;
|
|
1174
|
+
@close-color: @brand-light-blue;
|
|
1175
|
+
@close-color-hover: @brand-light-blue-minus-10;
|
|
1176
|
+
@close-color-active: @brand-light-blue-minus-20;
|
|
1177
|
+
|
|
1149
1178
|
|
|
1150
1179
|
//== Code
|
|
1151
1180
|
//
|
|
1152
1181
|
//##
|
|
1153
1182
|
|
|
1154
|
-
@code-color:
|
|
1155
|
-
@code-bg:
|
|
1183
|
+
@code-color: @brand-grey-minus-10;
|
|
1184
|
+
@code-bg: @brand-smoke-plus-20;
|
|
1156
1185
|
|
|
1157
|
-
@kbd-color:
|
|
1158
|
-
@kbd-bg:
|
|
1186
|
+
@kbd-color: #fff;
|
|
1187
|
+
@kbd-bg: #333;
|
|
1188
|
+
|
|
1189
|
+
@pre-bg: @brand-smoke-plus-20;
|
|
1190
|
+
@pre-color: @gray-dark;
|
|
1191
|
+
@pre-border-color: #ccc;
|
|
1192
|
+
@pre-scrollable-max-height: 340px;
|
|
1159
1193
|
|
|
1160
|
-
@pre-bg: @brand-smoke-plus-20;
|
|
1161
|
-
@pre-color: @gray-dark;
|
|
1162
|
-
@pre-border-color: #ccc;
|
|
1163
|
-
@pre-scrollable-max-height: 340px;
|
|
1164
1194
|
|
|
1165
1195
|
//== Type
|
|
1166
1196
|
//
|
|
@@ -1169,23 +1199,23 @@
|
|
|
1169
1199
|
//** Horizontal offset for forms and lists.
|
|
1170
1200
|
@component-offset-horizontal: 180px;
|
|
1171
1201
|
//** Text muted color
|
|
1172
|
-
@text-muted:
|
|
1202
|
+
@text-muted: @brand-smoke-minus-10;
|
|
1173
1203
|
//** Abbreviations and acronyms border color
|
|
1174
|
-
@abbr-border-color:
|
|
1204
|
+
@abbr-border-color: @link-color;
|
|
1175
1205
|
//** Headings small color
|
|
1176
|
-
@headings-small-color:
|
|
1206
|
+
@headings-small-color: @gray-light;
|
|
1177
1207
|
//** Blockquote small color
|
|
1178
|
-
@blockquote-small-color:
|
|
1208
|
+
@blockquote-small-color: @gray-light;
|
|
1179
1209
|
//** Blockquote font size
|
|
1180
|
-
@blockquote-font-size:
|
|
1210
|
+
@blockquote-font-size: @font-size-large;
|
|
1181
1211
|
//** Blockquote border color
|
|
1182
|
-
@blockquote-border-color:
|
|
1212
|
+
@blockquote-border-color: @brand-light-blue;
|
|
1183
1213
|
//** Page header border color
|
|
1184
|
-
@page-header-border-color:
|
|
1214
|
+
@page-header-border-color: @brand-smoke-plus-10;
|
|
1185
1215
|
//** Width of horizontal description list titles
|
|
1186
|
-
@dl-horizontal-offset:
|
|
1216
|
+
@dl-horizontal-offset: @component-offset-horizontal;
|
|
1187
1217
|
//** Horizontal line color.
|
|
1188
|
-
@hr-border:
|
|
1218
|
+
@hr-border: @brand-smoke-plus-10;
|
|
1189
1219
|
|
|
1190
1220
|
//== Sequence
|
|
1191
1221
|
//
|
|
@@ -1200,11 +1230,12 @@
|
|
|
1200
1230
|
@sequence-line-width: 2px;
|
|
1201
1231
|
|
|
1202
1232
|
@sequence-border: #d3d5d8;
|
|
1203
|
-
@sequence-bg: #
|
|
1233
|
+
@sequence-bg: #FFF;
|
|
1204
1234
|
|
|
1205
1235
|
@sequence-inverse-border: @brand-navy-minus-20;
|
|
1206
1236
|
@sequence-inverse-bg: @brand-navy;
|
|
1207
1237
|
|
|
1238
|
+
|
|
1208
1239
|
@sequence-spacing-horizontal: 24px;
|
|
1209
1240
|
@sequence-spacing-horizontal-lg: 48px;
|
|
1210
1241
|
|