@transferwise/neptune-css 0.0.0-experimental-d1d4c1b → 0.0.0-experimental-14ea772

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