@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

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 (119) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/css/accordion.css +1 -1
  3. package/dist/css/alerts.css +1 -1
  4. package/dist/css/background.css +1 -1
  5. package/dist/css/badge.css +1 -1
  6. package/dist/css/breadcrumbs.css +1 -1
  7. package/dist/css/button-groups.css +1 -1
  8. package/dist/css/buttons.css +1 -1
  9. package/dist/css/chevron.css +1 -1
  10. package/dist/css/circles.css +1 -1
  11. package/dist/css/close.css +1 -1
  12. package/dist/css/column-layout.css +1 -1
  13. package/dist/css/currency-flags.css +1 -1
  14. package/dist/css/decision.css +1 -1
  15. package/dist/css/droppable.css +1 -1
  16. package/dist/css/flex.css +1 -1
  17. package/dist/css/footer.css +1 -1
  18. package/dist/css/forms.css +1 -1
  19. package/dist/css/grid.css +1 -1
  20. package/dist/css/input-groups.css +1 -1
  21. package/dist/css/link-callout.css +1 -1
  22. package/dist/css/list-group.css +1 -1
  23. package/dist/css/loaders.css +1 -1
  24. package/dist/css/media.css +1 -1
  25. package/dist/css/modals.css +1 -1
  26. package/dist/css/navbar.css +1 -1
  27. package/dist/css/navs.css +1 -1
  28. package/dist/css/neptune-addons.css +1 -1
  29. package/dist/css/neptune-core.css +1 -1
  30. package/dist/css/neptune-social-media.css +1 -1
  31. package/dist/css/neptune.css +1 -1
  32. package/dist/css/panels.css +1 -0
  33. package/dist/css/popovers.css +1 -1
  34. package/dist/css/process.css +1 -1
  35. package/dist/css/progress-bars.css +1 -1
  36. package/dist/css/select.css +1 -1
  37. package/dist/css/sequences.css +1 -1
  38. package/dist/css/table.css +1 -1
  39. package/dist/css/tick.css +1 -1
  40. package/dist/css/tooltip.css +1 -1
  41. package/dist/css/utilities.css +1 -1
  42. package/dist/css/wells.css +1 -1
  43. package/dist/less/legacy-variables.less +712 -23
  44. package/dist/less/neptune-tokens.less +78 -84
  45. package/dist/props/legacy-custom-props.css +65 -0
  46. package/dist/props/neptune-tokens.css +41 -84
  47. package/package.json +3 -3
  48. package/src/less/addons/_background-utilities.less +7 -32
  49. package/src/less/addons/_spacing-utilities.less +4 -4
  50. package/src/less/alerts.less +16 -16
  51. package/src/less/background.less +1 -1
  52. package/src/less/badge.less +4 -65
  53. package/src/less/breadcrumbs.less +4 -25
  54. package/src/less/button-groups.less +38 -46
  55. package/src/less/buttons.less +175 -111
  56. package/src/less/chevron.less +1 -5
  57. package/src/less/circles.less +19 -206
  58. package/src/less/close.less +6 -38
  59. package/src/less/column-layout.less +3 -160
  60. package/src/less/core/_scaffolding.less +31 -39
  61. package/src/less/core/_typography-utilities.less +46 -59
  62. package/src/less/core/_typography.less +114 -130
  63. package/src/less/currency-flags.less +4 -4
  64. package/src/less/decision.less +14 -6
  65. package/src/less/droppable.less +3 -202
  66. package/src/less/flex.less +16 -17
  67. package/src/less/footer.less +20 -20
  68. package/src/less/forms/bootstrap-forms.less +110 -122
  69. package/src/less/forms/checkbox-radio.less +54 -54
  70. package/src/less/grid.less +22 -23
  71. package/src/less/input-groups.less +50 -50
  72. package/src/less/link-callout.less +1 -4
  73. package/src/less/list-group.less +4 -281
  74. package/src/less/loaders.less +3 -90
  75. package/src/less/media.less +3 -6
  76. package/src/less/mixins/_alerts.less +7 -15
  77. package/src/less/mixins/_arrows.less +7 -13
  78. package/src/less/mixins/_border-radius.less +8 -1
  79. package/src/less/mixins/_buttons.less +5 -5
  80. package/src/less/mixins/_forms.less +10 -16
  81. package/src/less/mixins/_grid-framework.less +8 -11
  82. package/src/less/mixins/_grid.less +36 -52
  83. package/src/less/mixins/_spacing.less +10 -20
  84. package/src/less/mixins/_table-row.less +1 -1
  85. package/src/less/mixins/_text-emphasis.less +1 -7
  86. package/src/less/modals.less +27 -57
  87. package/src/less/navbar.less +20 -16
  88. package/src/less/navs.less +3 -338
  89. package/src/less/neptune-social-media.less +8 -13
  90. package/src/less/neptune.bundle.less +1 -1
  91. package/src/less/panels.less +6 -0
  92. package/src/less/popovers.less +5 -368
  93. package/src/less/process.less +3 -358
  94. package/src/less/progress-bars.less +15 -18
  95. package/src/less/select.less +7 -9
  96. package/src/less/sequences.less +8 -505
  97. package/src/less/table.less +56 -42
  98. package/src/less/tick.less +1 -14
  99. package/src/less/tooltip.less +4 -123
  100. package/src/less/utilities.less +4 -134
  101. package/src/less/variables/_typography.less +21 -0
  102. package/src/props/legacy-custom-props.css +65 -0
  103. package/src/variables/legacy-variables.less +712 -23
  104. package/src/variables/neptune-tokens.less +3 -0
  105. package/dist/css/dropdowns.css +0 -1
  106. package/dist/css/navbar-base.css +0 -1
  107. package/src/less/addons/_utilities.less +0 -141
  108. package/src/less/dropdowns.less +0 -363
  109. package/src/less/mixins/_center-block.less +0 -7
  110. package/src/less/mixins/_circle.less +0 -11
  111. package/src/less/mixins/_hide-text.less +0 -20
  112. package/src/less/mixins/_list-group.less +0 -23
  113. package/src/less/mixins/_logical-properties-IE-friendly.less +0 -365
  114. package/src/less/mixins/_logical-properties-modern-browsers.less +0 -226
  115. package/src/less/mixins/_logical-properties.less +0 -5
  116. package/src/less/mixins/_physical-properties.less +0 -111
  117. package/src/less/mixins/_reset-text.less +0 -22
  118. package/src/less/mixins/_sequence.less +0 -197
  119. package/src/less/navbar-base.less +0 -1381
@@ -2,7 +2,124 @@
2
2
  // Variables
3
3
  // --------------------------------------------------
4
4
 
5
- //== Colors not longer here, use https://transferwise.github.io/neptune-web/styles/tokens/Colors
5
+ //== Colors
6
+ //
7
+ //
8
+
9
+ @brand-white: #fff;
10
+
11
+
12
+ @brand-pale-blue-minus-20: #77d9f7;
13
+ @brand-pale-blue-minus-10: #a7e2f9;
14
+ @brand-pale-blue: #dbf0fd;
15
+
16
+ @brand-navy-minus-20: #253655;
17
+ @brand-navy-minus-10: #2e4369;
18
+ @brand-navy: #37517e;
19
+
20
+ //=== Blues
21
+ //
22
+ //
23
+ @brand-blue-minus-20: #111824;
24
+ @brand-blue-minus-10: #192439;
25
+ @brand-blue: #223049;
26
+ @brand-blue-plus-10: #283957;
27
+ @brand-blue-plus-20: #2f4366;
28
+
29
+ //=== Dark Grays
30
+ //
31
+ //
32
+ @brand-grey-minus-20: #384347;
33
+ @brand-grey-minus-10: #4a5860;
34
+ @brand-grey: #5d7079;
35
+ @brand-grey-plus-10: #6f8691;
36
+ @brand-grey-plus-20: #829ca9;
37
+
38
+ //=== Light Grays
39
+ //
40
+ //
41
+ @brand-smoke-minus-20: #7e7f81;
42
+ @brand-smoke-minus-10: #a8aaac;
43
+ @brand-smoke: #d3d5d8;
44
+ @brand-smoke-plus-10: #e2e6e8;
45
+ @brand-smoke-plus-20: #f2f5f7;
46
+
47
+ //=== Light Blues
48
+ //
49
+ //
50
+ @brand-light-blue-minus-20: #008ec0;
51
+ @brand-light-blue-minus-10: #00a4df;
52
+ @brand-light-blue: #00b9ff;
53
+
54
+ @brand-light-blue-wash: #D8F1fA;
55
+
56
+ //=== Reds
57
+ //
58
+ //
59
+ @brand-red-minus-20: #B62A18;
60
+ @brand-red-minus-10: #C22E2E;
61
+ @brand-red: #F53636;
62
+
63
+ @brand-red-wash: #FFDFDF;
64
+ @brand-red-alert: #C22E2E;
65
+
66
+ //=== Greens
67
+ //
68
+ //
69
+ @brand-green-minus-20: #1B7940;
70
+ @brand-green-minus-10: #28B862;
71
+ @brand-green: #2ED06E;
72
+
73
+ @brand-green-wash: #D6F5E2;
74
+ @brand-green-alert: #1B7940;
75
+
76
+ //=== Oranges
77
+ //
78
+ //
79
+ @brand-orange-minus-20: #9E5F00;
80
+ @brand-orange-minus-10: #DF8700;
81
+ @brand-orange: #FFA600;
82
+
83
+ @brand-orange-wash: #FFF3DD;
84
+ @brand-orange-alert: #9E5F00;
85
+
86
+ //=== Yellows
87
+ //
88
+ //
89
+ @brand-yellow-minus-20: #c0ae10;
90
+ @brand-yellow-minus-10: #dfc912;
91
+ @brand-yellow: #ffe714;
92
+
93
+
94
+ //== Bootstrap Color Mapping
95
+ //
96
+ //## Gray and brand colors for use across Bootstrap.
97
+
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;
104
+
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;
110
+
111
+ //== Scaffolding
112
+ //
113
+ //## Settings for some of the most global styles.
114
+
115
+ //** Background color for `<body>`.
116
+ @body-bg: @brand-white;
117
+ //** Global text color on `<body>`.
118
+ @text-color: @brand-grey;
119
+ //** Bold text color on `<body>`.
120
+ @text-bold-color: @brand-navy-minus-10;
121
+
122
+ @text-secondary-color: @brand-grey;
6
123
 
7
124
  //== Typography
8
125
  //
@@ -50,6 +167,7 @@
50
167
  @headings-font-family: "Averta", "Avenir W02", "Avenir", Helvetica, Arial, sans-serif; //inherit;
51
168
  @headings-font-weight: @font-weight-semi-bold;
52
169
  @headings-line-height: 1.2; //1.1;
170
+ @headings-color: @brand-navy-minus-10;
53
171
 
54
172
  @display1-size: 104px;
55
173
  @display2-size: 88px;
@@ -73,10 +191,37 @@
73
191
 
74
192
  @buttons-font-family: "Averta", "Avenir W02", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
75
193
 
194
+ //** Global textual link color.
195
+ @link-color: @brand-light-blue;
76
196
  //** Global textual link color.
77
197
  @link-decoration: underline;
198
+ //** Link hover color
199
+ @link-hover-color: @brand-light-blue-minus-10;
78
200
  //** Link hover decoration.
79
201
  @link-hover-decoration: underline;
202
+ //** Link active color
203
+ @link-active-color: @brand-light-blue-minus-20;
204
+ //** Link disabled color
205
+ @link-disabled-color: @brand-smoke-minus-10;
206
+ //** Link font weight
207
+ @link-font-weight: @font-weight-semi-bold;
208
+
209
+ @link-secondary-color: @brand-navy;
210
+ @link-secondary-hover-color: @link-color;
211
+ @link-secondary-active-color: @link-hover-color;
212
+ @link-secondary-font-weight: @font-weight-normal;
213
+
214
+ //== Iconography
215
+ //
216
+ //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
217
+
218
+ //** Load fonts from this directory.
219
+ @icon-font-path: "../fonts/";
220
+ //** File name for all font files.
221
+ @icon-font-name: "glyphicons-halflings-regular";
222
+ //** Element ID within SVG icon file.
223
+ @icon-font-svg-id: "glyphicons_halflingsregular";
224
+
80
225
 
81
226
  //== Components
82
227
  //
@@ -105,6 +250,11 @@
105
250
  @spacer-y: @spacer;
106
251
  @spacer-x: @spacer;
107
252
 
253
+ //** Global color for active items (e.g., navs or dropdowns).
254
+ @component-active-color: #fff;
255
+ //** Global background color for active items (e.g., navs or dropdowns).
256
+ @component-active-bg: @brand-navy-minus-10;
257
+
108
258
  //** Width of the `border` for generating carets that indicator dropdowns.
109
259
  @caret-width-base: 4px;
110
260
  //** Carets increase slightly in size for larger components.
@@ -142,12 +292,17 @@
142
292
  //** Padding for cells in `.table-condensed`.
143
293
  @table-condensed-cell-padding: 8px;
144
294
 
145
- //== Panels
146
- //
147
- //##
295
+ //** Default background color used for all tables.
296
+ @table-bg: @brand-white;
297
+ //** Background color used for `.table-striped`.
298
+ @table-bg-accent: @gray-base; //#f9f9f9;
299
+ //** Background color used for `.table-hover`.
300
+ @table-bg-hover: @state-info-bg;
301
+ @table-bg-active: @table-bg-hover;
302
+
303
+ //** Border color for table and cell borders.
304
+ @table-border-color: @brand-smoke-plus-20;
148
305
 
149
- @panel-border-radius: @border-radius-base;
150
- @panel-focus-transtion: @transition-duration;
151
306
 
152
307
  //== Buttons
153
308
  //
@@ -183,6 +338,112 @@
183
338
  @btn-lg-padding-vertical: ((@input-height-large - @btn-lg-line-height) / 2);
184
339
  @btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal (@btn-lg-padding-vertical - 2px);
185
340
 
341
+ @btn-disabled-bg: @brand-smoke-plus-10;
342
+ @btn-disabled-color: @brand-smoke-minus-10;
343
+
344
+
345
+ //=== Button Default
346
+ //
347
+ //
348
+ @btn-default-color: @brand-light-blue;
349
+ @btn-default-bg: transparent;
350
+ @btn-default-border: @brand-light-blue;
351
+ @btn-default-bg-hover: @brand-light-blue;
352
+ @btn-default-border-hover: @brand-light-blue;
353
+ @btn-default-bg-active: @brand-light-blue-minus-20;
354
+ @btn-default-border-active: @brand-light-blue-minus-20;
355
+
356
+ //=== Button Primary
357
+ //
358
+ //
359
+ @btn-primary-color: #fff;
360
+ @btn-primary-bg: @brand-light-blue;
361
+ @btn-primary-border: @brand-light-blue;
362
+ @btn-primary-bg-hover: @brand-light-blue-minus-10;
363
+ @btn-primary-border-hover: @brand-light-blue-minus-10;
364
+ @btn-primary-bg-active: @brand-light-blue-minus-20;
365
+ @btn-primary-border-active: @brand-light-blue-minus-20;
366
+
367
+ //=== Button Success
368
+ //
369
+ //
370
+ @btn-success-color: #fff;
371
+ @btn-success-bg: @brand-green;
372
+ @btn-success-border: @brand-green;
373
+ @btn-success-bg-hover: @brand-green-minus-10;
374
+ @btn-success-border-hover: @brand-green-minus-10;
375
+ @btn-success-bg-active: @brand-green-minus-20;
376
+ @btn-success-border-active: @brand-green-minus-20;
377
+
378
+ //=== Button Info
379
+ //
380
+ //
381
+ @btn-info-color: @brand-grey-plus-10;
382
+ @btn-info-bg: transparent;
383
+ @btn-info-border: @brand-grey-plus-10;
384
+ @btn-info-bg-hover: @brand-light-blue;
385
+ @btn-info-border-hover: @brand-light-blue;
386
+ @btn-info-bg-active: @brand-light-blue-minus-20;
387
+ @btn-info-border-active: @brand-light-blue-minus-20;
388
+
389
+ //=== Button Warning
390
+ //
391
+ //
392
+ @btn-warning-color: @brand-orange;
393
+ @btn-warning-bg: transparent;
394
+ @btn-warning-border: @brand-orange;
395
+ @btn-warning-bg-hover: @brand-orange-minus-10;
396
+ @btn-warning-border-hover: @brand-orange-minus-10;
397
+ @btn-warning-bg-active: @brand-orange-minus-20;
398
+ @btn-warning-border-active: @brand-orange-minus-20;
399
+
400
+ //=== Button Danger
401
+ //
402
+ //
403
+ @btn-danger-color: @brand-grey-plus-10;
404
+ @btn-danger-bg: transparent;
405
+ @btn-danger-border: @brand-grey-plus-10;
406
+ @btn-danger-bg-hover: @brand-red;
407
+ @btn-danger-border-hover: @brand-red;
408
+ @btn-danger-bg-active: @brand-red-minus-20;
409
+ @btn-danger-border-active: @brand-red-minus-20;
410
+
411
+ //=== Button Download
412
+ //
413
+ //
414
+ @btn-download-color: #fff;
415
+ @btn-download-bg: #000;
416
+ @btn-download-border: #bbb;
417
+ @btn-download-bg-hover: #333;
418
+ @btn-download-border-hover: #999;
419
+ @btn-download-bg-active: #666;
420
+ @btn-download-border-active: #666;
421
+
422
+ @btn-facebook: #3B5998;
423
+ @btn-facebook-active: #344F88;
424
+ @btn-google: #4285F4;
425
+ @btn-google-active: #3B77DB;
426
+
427
+ //== Forms
428
+ //
429
+ //##
430
+
431
+ //** `<input>` background color
432
+ @input-bg: #fff;
433
+ //** `<input disabled>` background color
434
+ @input-bg-disabled: @brand-smoke-plus-20;
435
+ //** Text color for `<input>`s
436
+ @input-color: @brand-navy-minus-10;
437
+ //** `<input disabled>` color
438
+ @input-color-disabled: @brand-smoke;
439
+
440
+ //** `<input>` border color
441
+ @input-border: @brand-smoke;
442
+ //** `<input>` border hover
443
+ @input-border-hover: @brand-grey-plus-20;
444
+ //** `<input disabled>` border color
445
+ @input-border-disabled: @brand-smoke-plus-10;
446
+
186
447
  @input-font-size: 16px;
187
448
  @input-line-height: @btn-line-height;
188
449
  @input-padding: (@padding-large-vertical + 1px) @padding-base-horizontal (@padding-large-vertical - 1px);
@@ -204,6 +465,12 @@
204
465
  //** Small `.form-control` border radius
205
466
  @input-border-radius-small: @border-radius-base;
206
467
 
468
+ //** Border color for inputs on focus
469
+ @input-border-focus: @brand-light-blue;
470
+
471
+ //** Placeholder text color
472
+ @input-color-placeholder: @brand-smoke-minus-10;
473
+
207
474
  //** Default `.form-control` height
208
475
  @input-height-base: 48px; //(@line-height-computed + (@padding-base-vertical * 2) + 2);
209
476
  //** Large `.form-control` height
@@ -214,10 +481,18 @@
214
481
  //** `.form-group` margin
215
482
  @form-group-margin-bottom: 24px; // Visible space is 24px but line height(20) is 6px bigger than font size(14)
216
483
 
484
+ @legend-color: @headings-color;
485
+ @legend-border-color: @input-border;
486
+
487
+ @control-label-color: @text-color;
488
+ @control-label-focus: @brand-light-blue-minus-20;
217
489
  @control-label-font-size: @font-size-small;
218
490
 
219
491
  //** Color for textual input addons
492
+ @input-group-color: @brand-smoke-minus-10;
220
493
  @input-group-addon-font-size: @input-font-size;
494
+ @input-group-addon-bg: @input-bg;
495
+ @input-group-addon-border-color: @input-border;
221
496
  @input-group-addon-padding: @padding-large-vertical @padding-base-horizontal (@padding-large-vertical - 2px);
222
497
 
223
498
  @input-group-addon-sm-padding: (@padding-small-vertical - 1px) @padding-small-horizontal;
@@ -227,30 +502,43 @@
227
502
  @cursor-disabled: not-allowed;
228
503
  @cursor-default: default;
229
504
 
230
- //=== Button Download
231
- //
232
- //
233
- @btn-download-color: #fff;
234
- @btn-download-bg: #000;
235
- @btn-download-border: #bbb;
236
- @btn-download-bg-hover: #333;
237
- @btn-download-border-hover: #999;
238
- @btn-download-bg-active: #666;
239
- @btn-download-border-active: #666;
240
-
241
- @btn-facebook: #3B5998;
242
- @btn-facebook-active: #344F88;
243
- @btn-google: #4285F4;
244
- @btn-google-active: #3B77DB;
245
-
246
505
 
247
506
 
248
507
  //== Dropdowns
249
508
  //
250
509
  //## Dropdown menu container and contents.
251
510
 
511
+ //** Background for the dropdown menu.
512
+ @dropdown-bg: #fff;
513
+ //** Dropdown menu `border-color`.
514
+ @dropdown-border: @brand-smoke-plus-10;
515
+ //** Dropdown menu `border-color` **for IE8**.
516
+ @dropdown-fallback-border: @brand-white;
517
+ //** Divider color for between dropdown items.
518
+ @dropdown-divider-bg: @brand-smoke-plus-20;
519
+
520
+ //** Dropdown link text color.
521
+ @dropdown-link-color: @brand-navy-minus-10;
252
522
  //** Dropdown link padding.
253
523
  @dropdown-link-padding: (@padding-large-vertical + 1px) @padding-large-horizontal (@padding-large-vertical - 1px);
524
+ //** Hover color for dropdown links.
525
+ @dropdown-link-hover-color: @brand-navy-minus-10;
526
+ //** Hover background for dropdown links.
527
+ @dropdown-link-hover-bg: @brand-smoke-plus-20;
528
+
529
+ //** Active dropdown menu item text color.
530
+ @dropdown-link-active-color: @component-active-color;
531
+ //** Active dropdown menu item background color.
532
+ @dropdown-link-active-bg: @component-active-bg;
533
+
534
+ //** Disabled dropdown menu item background color.
535
+ @dropdown-link-disabled-color: @link-disabled-color;
536
+
537
+ //** Text color for headers within dropdown menus.
538
+ @dropdown-header-color: @control-label-color;
539
+
540
+ //** Deprecated `@dropdown-caret-color` as of v3.1.0
541
+ @dropdown-caret-color: #000;
254
542
 
255
543
  @transition-duration: 0.15s;
256
544
 
@@ -362,6 +650,20 @@
362
650
  //** For `@screen-xl-min` and up.
363
651
  @container-xl: @container-xlarge-desktop;
364
652
 
653
+
654
+ @nav-link-color: @link-secondary-color;
655
+ @nav-link-hover-color: @link-secondary-hover-color;
656
+ @nav-link-active-color: @link-secondary-active-color;
657
+
658
+ @nav-active-link-color: @link-color;
659
+ @nav-active-link-hover-color: @link-hover-color;
660
+ @nav-active-link-active-color: @link-active-color;
661
+
662
+ @nav-inverse-link-color: @brand-pale-blue;
663
+ @nav-inverse-link-hover-color: @brand-light-blue;
664
+ @nav-inverse-link-active-color: @brand-light-blue-minus-10;
665
+ @nav-inverse-link-active-bg: @brand-navy-minus-10;
666
+
365
667
  //== Navbar
366
668
  //
367
669
  //##
@@ -382,15 +684,69 @@
382
684
 
383
685
  @navbar-collapse-max-height: 340px;
384
686
  @navbar-collapse-max-width: (320px - 56px);
687
+ @navbar-collapse-bg: @brand-navy;
385
688
 
386
689
  //=== Standard navbar
690
+ // Navbar basics
691
+ @navbar-default-color: @brand-navy-minus-10;
692
+ @navbar-default-bg: transparent;
693
+ @navbar-default-border: @brand-grey-minus-10;
694
+
695
+ // Navbar links
696
+ @navbar-default-link-color: @nav-link-color;
697
+ @navbar-default-link-hover-color: @nav-link-hover-color;
698
+ @navbar-default-link-hover-bg: transparent;
699
+ @navbar-default-link-active-color: @nav-active-link-color;
700
+ @navbar-default-link-active-bg: transparent;
701
+ @navbar-default-link-disabled-color: @brand-smoke;
702
+ @navbar-default-link-disabled-bg: transparent;
703
+
704
+ // Navbar brand label
705
+ @navbar-default-brand-color: @navbar-inverse-link-color;
706
+ @navbar-default-brand-hover-color: #fff;
707
+ @navbar-default-brand-hover-bg: transparent;
708
+
709
+ // Navbar toggle
710
+ @navbar-default-toggle-hover-bg: transparent;
711
+ @navbar-default-toggle-icon-bar-bg: @brand-light-blue;
712
+ @navbar-default-toggle-border-color: transparent;
713
+ @navbar-default-toggle-hover-border-color: @brand-light-blue;
387
714
 
388
715
  // Navbar sercondary
716
+ @navbar-secondary-bg: transparent;
389
717
  @navbar-secondary-height: 64px;
390
718
  @navbar-secondary-padding-vertical: 12px;
391
719
 
392
720
 
393
721
  //=== Inverted navbar
722
+ // Reset inverted navbar basics
723
+ @navbar-inverse-color: #FFF;
724
+ @navbar-inverse-bg: transparent;
725
+ @navbar-inverse-border: @brand-grey-minus-10;
726
+
727
+ // Inverted navbar links
728
+ @navbar-inverse-link-color: #FFF; // @nav-inverse-link-color;
729
+ @navbar-inverse-link-hover-color: @nav-inverse-link-hover-color;
730
+ @navbar-inverse-link-hover-bg: transparent;
731
+ @navbar-inverse-link-active-color: @nav-active-link-color;
732
+ @navbar-inverse-link-active-bg: transparent;
733
+ @navbar-inverse-link-disabled-color: #444;
734
+ @navbar-inverse-link-disabled-bg: transparent;
735
+
736
+ // Inverted navbar brand label
737
+ @navbar-inverse-brand-color: @navbar-default-link-color;
738
+ @navbar-inverse-brand-hover-color: darken(@navbar-default-brand-color, 10%);
739
+ @navbar-inverse-brand-hover-bg: transparent;
740
+
741
+ // Inverted navbar toggle
742
+ @navbar-inverse-toggle-hover-bg: transparent;
743
+ @navbar-inverse-toggle-icon-bar-bg: @brand-light-blue;
744
+ @navbar-inverse-toggle-border-color: transparent;
745
+ @navbar-inverse-toggle-hover-border-color: @brand-light-blue;
746
+
747
+ // Navbar sercondary
748
+ @navbar-inverse-secondary-bg: @brand-navy-minus-10;
749
+
394
750
 
395
751
  //== Navs
396
752
  //
@@ -398,43 +754,180 @@
398
754
 
399
755
  //=== Shared nav styles
400
756
  @nav-link-padding: 9px 24px 7px;
757
+ @nav-link-hover-bg: @brand-smoke-plus-20;
758
+
759
+ @nav-disabled-link-color: @link-disabled-color;
760
+ @nav-disabled-link-hover-color: @link-disabled-color;
761
+
762
+ //== Tabs
763
+ @nav-tabs-border-color: @brand-smoke;
764
+ @nav-tabs-font-size: @font-size-base;
765
+ @nav-tabs-active-hover-border-color: @brand-light-blue;
766
+
767
+ @nav-tabs-justified-link-border-color: @brand-smoke;
768
+ @nav-tabs-justified-active-link-border-color: @body-bg;
401
769
 
402
770
  //== Pills
403
771
  @nav-pills-font-size: @font-size-small;
404
772
 
405
773
 
774
+ //== Pagination
775
+ //
776
+ //##
777
+
778
+ @pagination-color: @brand-navy;
779
+ @pagination-font-weight: @font-weight-normal;
780
+ @pagination-bg: transparent;
781
+
782
+ @pagination-hover-color: @brand-navy;
783
+ @pagination-hover-bg: @brand-smoke-plus-20;
784
+
785
+ @pagination-active-color: @brand-navy;
786
+ @pagination-active-bg: @brand-smoke-plus-20;
787
+
788
+ @pagination-disabled-color: @link-disabled-color;
789
+ @pagination-disabled-bg: #fff;
790
+ @pagination-disabled-border: @brand-smoke;
791
+
792
+ @pagination-inverse-hover-bg: @brand-white;
793
+ @pagination-inverse-active-bg: @brand-white;
794
+
795
+ //== Pager
796
+ //
797
+ //##
798
+
799
+ @pager-bg: @pagination-bg;
800
+ @pager-border-radius: @border-radius-base;
801
+
802
+ @pager-hover-color: #fff;
803
+ @pager-hover-bg: @pagination-hover-bg;
804
+
805
+ @pager-active-bg: @pagination-active-bg;
806
+ @pager-active-color: @pagination-active-color;
807
+
808
+ @pager-disabled-color: @pagination-disabled-color;
809
+
810
+
406
811
  //== Jumbotron
407
812
  //
408
813
  //##
409
814
 
410
815
  @jumbotron-padding: 32px;
816
+ @jumbotron-color: #FFF; //inherit;
817
+ @jumbotron-bg: @brand-navy;
818
+ @jumbotron-heading-color: #FFF; //inherit;
411
819
  @jumbotron-font-size: 22px;
412
820
  @jumbotron-heading-font-size: 42px;
413
821
  @jumbotron-heading-line-height: 56px;
414
822
 
415
823
 
824
+ //== Form states and alerts
825
+ //
826
+ //## Define colors for form feedback states and, by default, alerts.
827
+
828
+ @state-success-text: @brand-green-minus-20;
829
+ @state-success-text-large: @brand-green;
830
+ @state-success-text-hover: @brand-green-minus-20;
831
+ @state-success-bg: @brand-green-wash;
832
+ @state-success-border: @brand-green;
833
+ @state-success-border-hover: @brand-green-minus-20;
834
+
835
+ @state-info-text: @brand-light-blue-minus-10;
836
+ @state-info-text-large: @brand-light-blue;
837
+ @state-info-text-hover: @brand-light-blue-minus-10;
838
+ @state-info-bg: @brand-light-blue-wash;
839
+ @state-info-border: @brand-light-blue;
840
+ @state-info-border-hover: @brand-light-blue-minus-20;
841
+
842
+ @state-warning-text: @brand-orange-minus-20;
843
+ @state-warning-text-large: @brand-orange;
844
+ @state-warning-text-hover: @brand-orange-minus-20;
845
+ @state-warning-bg: @brand-orange-wash;
846
+ @state-warning-border: @brand-orange;
847
+ @state-warning-border-hover: @brand-orange-minus-20;
848
+
849
+ @state-danger-text: @brand-red-minus-10;
850
+ @state-danger-text-large: @brand-red;
851
+ @state-danger-text-hover: @brand-red-minus-10;
852
+ @state-danger-bg: @brand-red-wash;
853
+ @state-danger-border: @brand-red;
854
+ @state-danger-border-hover: @brand-red-minus-20;
855
+
856
+
416
857
  //== Tooltips
417
858
  //
418
859
  //##
419
860
 
420
861
  //** Tooltip max width
421
862
  @tooltip-max-width: 200px;
863
+ //** Tooltip text color
864
+ @tooltip-color: @brand-navy;
865
+ //** Tooltip background color
866
+ @tooltip-bg: @brand-white;
422
867
  @tooltip-opacity: 1;
423
868
 
424
869
  //** Tooltip arrow width
425
870
  @tooltip-arrow-width: 5px;
871
+ //** Tooltip arrow color
872
+ @tooltip-arrow-color: @tooltip-bg;
873
+
426
874
 
427
875
  //== Popovers
428
876
  //
429
877
  //##
878
+
879
+ //** Popover body background color
880
+ @popover-bg: @brand-white;
430
881
  //** Popover maximum width
431
882
  @popover-max-width: 276px;
883
+ //** Popover border color
884
+ @popover-border-color: @brand-white;
885
+ //** Popover fallback border color
886
+ @popover-fallback-border-color: @brand-white;
887
+
888
+ //** Popover title background color
889
+ @popover-title-bg: @brand-white;
432
890
 
433
891
  //** Popover arrow width
434
892
  @popover-arrow-width: 14px;
893
+ //** Popover arrow color
894
+ @popover-arrow-color: @popover-bg;
435
895
 
436
896
  //** Popover outer arrow width
437
897
  @popover-arrow-outer-width: (@popover-arrow-width + 1);
898
+ //** Popover outer arrow color
899
+ @popover-arrow-outer-color: @brand-white;
900
+ //** Popover outer arrow fallback color
901
+ @popover-arrow-outer-fallback-color: @brand-white;
902
+
903
+
904
+ //== Labels
905
+ //
906
+ //##
907
+
908
+ //** Default label background color
909
+ @label-default-bg: @brand-smoke;
910
+ @label-default-bg-hover: @brand-smoke-minus-10;
911
+ //** Primary label background color
912
+ @label-primary-bg: @brand-navy;
913
+ @label-primary-bg-hover: @brand-navy-minus-10;
914
+ //** Success label background color
915
+ @label-success-bg: @brand-green;
916
+ @label-success-bg-hover: @brand-green-minus-10;
917
+ //** Info label background color
918
+ @label-info-bg: @brand-light-blue;
919
+ @label-info-bg-hover: @brand-light-blue-minus-10;
920
+ //** Warning label background color
921
+ @label-warning-bg: @brand-orange;
922
+ @label-warning-bg-hover: @brand-orange-minus-10;
923
+ //** Danger label background color
924
+ @label-danger-bg: @brand-red;
925
+ @label-danger-bg-hover: @brand-red-minus-10;
926
+
927
+ //** Default label text color
928
+ @label-color: #fff;
929
+ //** Default text color of a linked label
930
+ @label-link-hover-color: #fff;
438
931
 
439
932
 
440
933
  //== Modals
@@ -451,8 +944,21 @@
451
944
  //** Modal title line-height
452
945
  @modal-title-line-height: @line-height-computed;
453
946
 
947
+ //** Background color of modal content area
948
+ @modal-content-bg: #fff;
949
+ //** Modal content border color
950
+ @modal-content-border-color: @brand-smoke-plus-10;
951
+ //** Modal content border color **for IE8**
952
+ @modal-content-fallback-border-color: #999;
953
+
954
+ //** Modal backdrop background color
955
+ @modal-backdrop-bg: @brand-navy;
454
956
  //** Modal backdrop opacity
455
957
  @modal-backdrop-opacity: .8;
958
+ //** Modal header border color
959
+ @modal-header-border-color: @brand-smoke-plus-10;
960
+ //** Modal footer border color
961
+ @modal-footer-border-color: @modal-header-border-color;
456
962
 
457
963
  @modal-lg: 720px;
458
964
  @modal-md: 540px;
@@ -468,6 +974,26 @@
468
974
  @alert-bar-width: 8px;
469
975
  @alert-link-font-weight: bold;
470
976
 
977
+ @alert-success-bg: @state-success-bg;
978
+ @alert-success-text: @state-success-text;
979
+ @alert-success-text-hover: @state-success-text-hover;
980
+ @alert-success-border: @state-success-border;
981
+
982
+ @alert-info-bg: @brand-smoke-plus-20;
983
+ @alert-info-text: @brand-grey-minus-10;
984
+ @alert-info-text-hover: @brand-grey-minus-10;
985
+ @alert-info-border: @brand-light-blue;
986
+
987
+ @alert-warning-bg: @state-warning-bg;
988
+ @alert-warning-text: @state-warning-text;
989
+ @alert-warning-text-hover: @state-warning-text-hover;
990
+ @alert-warning-border: @state-warning-border;
991
+
992
+ @alert-danger-bg: @state-danger-bg;
993
+ @alert-danger-text: @state-danger-text;
994
+ @alert-danger-text-hover: @state-danger-text-hover;
995
+ @alert-danger-border: @state-danger-border;
996
+
471
997
  @alert-arrow-width: 10px;
472
998
 
473
999
  //== Progress bars
@@ -478,16 +1004,114 @@
478
1004
  @progress-height: 2px;
479
1005
  //** Large progress bar height
480
1006
  @progress-height-lg: 32px;
1007
+ //** Background color of the whole progress component
1008
+ @progress-bg: @brand-smoke-plus-10;
1009
+ //** Progress bar text color
1010
+ @progress-bar-color: #fff;
1011
+
1012
+ //** Default progress bar color
1013
+ @progress-bar-bg: @brand-light-blue;
1014
+ //** Primary progress bar color
1015
+ @progress-bar-primary-bg: @brand-navy;
1016
+ //** Success progress bar color
1017
+ @progress-bar-success-bg: @brand-green;
1018
+ //** Warning progress bar color
1019
+ @progress-bar-warning-bg: @brand-orange;
1020
+ //** Danger progress bar color
1021
+ @progress-bar-danger-bg: @brand-red;
1022
+ //** Info progress bar color
1023
+ @progress-bar-info-bg: @brand-light-blue;
481
1024
 
482
1025
  @progress-pip-size: 8px;
483
1026
 
484
1027
 
1028
+ //== List group
1029
+ //
1030
+ //##
1031
+
1032
+ //** Background color on `.list-group-item`
1033
+ @list-group-bg: #fff;
1034
+ //** `.list-group-item` border color
1035
+ @list-group-border: @brand-smoke-plus-10;
1036
+ //** List group border radius
1037
+ @list-group-border-radius: @border-radius-base;
1038
+
1039
+ //** Background color of single list items on hover
1040
+ @list-group-hover-bg: @brand-smoke-plus-20;
1041
+ //** Text color of active list items
1042
+ @list-group-active-color: @component-active-color;
1043
+ //** Background color of active list items
1044
+ @list-group-active-bg: #fff;
1045
+ //** Border color of active list elements
1046
+ @list-group-active-border: @list-group-active-bg;
1047
+ //** Text color for content within active list items
1048
+ @list-group-active-text-color: #FFF; // lighten(@list-group-active-bg, 40%);
1049
+
1050
+ //** Text color of disabled list items
1051
+ @list-group-disabled-color: @link-disabled-color;
1052
+ //** Background color of disabled list items
1053
+ @list-group-disabled-bg: #FFF;
1054
+ //** Text color for content within disabled list items
1055
+ @list-group-disabled-text-color: @list-group-disabled-color;
1056
+
1057
+ @list-group-link-color: @link-color;
1058
+ @list-group-link-hover-color: @link-hover-color;
1059
+ @list-group-link-heading-color: @link-color;
1060
+
1061
+
1062
+ //== Panels
1063
+ //
1064
+ //##
1065
+
1066
+ @panel-bg: transparent;
1067
+ @panel-heading-color: @brand-navy-minus-10;
1068
+ @panel-border-radius: @border-radius-base;
1069
+ @panel-focus-transtion: @transition-duration;
1070
+
1071
+ //** Border color for elements within panels
1072
+ @panel-inner-border: #FFF;
1073
+ @panel-footer-bg: #fff;
1074
+
1075
+ @panel-default-text: @gray-dark;
1076
+ @panel-default-border: @brand-smoke-plus-10;
1077
+ @panel-default-heading-bg: #fff;
1078
+
1079
+ @panel-primary-text: #fff;
1080
+ @panel-primary-border: @brand-navy;
1081
+ @panel-primary-heading-bg: #fff;
1082
+
1083
+ @panel-success-text: @state-success-text;
1084
+ @panel-success-border: @state-success-border;
1085
+ @panel-success-heading-bg: #FFF;
1086
+
1087
+ @panel-info-text: @state-info-text;
1088
+ @panel-info-border: @state-info-border;
1089
+ @panel-info-heading-bg: #FFF;
1090
+
1091
+ @panel-warning-text: @state-warning-text;
1092
+ @panel-warning-border: @state-warning-border;
1093
+ @panel-warning-heading-bg: #FFF;
1094
+
1095
+ @panel-danger-text: @state-danger-text;
1096
+ @panel-danger-border: @state-danger-border;
1097
+ @panel-danger-heading-bg: #FFF;
1098
+
1099
+
485
1100
  //== Thumbnails
486
1101
  //
487
1102
  //##
488
1103
 
489
1104
  //** Padding around the thumbnail image
490
1105
  @thumbnail-padding: 0;
1106
+ //** Thumbnail background color
1107
+ @thumbnail-bg: @body-bg;
1108
+ //** Thumbnail border color
1109
+ @thumbnail-border: @brand-smoke-plus-10;
1110
+ //** Thumbnail border radius
1111
+ @thumbnail-border-radius: @border-radius-base;
1112
+
1113
+ //** Custom text color for thumbnail captions
1114
+ @thumbnail-caption-color: @text-color;
491
1115
  //** Padding around the thumbnail caption
492
1116
  @thumbnail-caption-padding: 24px;
493
1117
 
@@ -507,10 +1131,28 @@
507
1131
  @media-object-padding-horizontal: (@spacer * 3);
508
1132
 
509
1133
 
1134
+ //== Wells
1135
+ //
1136
+ //##
1137
+
1138
+ @well-bg: @gray-base;
1139
+ @well-border: @gray-lighter;
1140
+
1141
+
510
1142
  //== Badges
511
1143
  //
512
1144
  //##
513
1145
 
1146
+ @badge-color: #fff;
1147
+ //** Linked badge text color on hover
1148
+ @badge-link-hover-color: #fff;
1149
+ @badge-bg: @brand-red;
1150
+
1151
+ //** Badge text color in active nav link
1152
+ @badge-active-color: @link-color;
1153
+ //** Badge background color in active nav link
1154
+ @badge-active-bg: #fff;
1155
+
514
1156
  @badge-font-size: 10px;
515
1157
  @badge-font-weight: bold;
516
1158
  @badge-line-height: 1;
@@ -525,6 +1167,8 @@
525
1167
 
526
1168
 
527
1169
  @breadcrumb-bg: none;
1170
+ @breadcrumb-color: #ccc;
1171
+ @breadcrumb-active-color: @gray-light;
528
1172
  @breadcrumb-separator: "❯";
529
1173
 
530
1174
  //== Carousel
@@ -533,22 +1177,41 @@
533
1177
 
534
1178
  @carousel-text-shadow: 0 1px 7px rgba(0,0,0,.8);
535
1179
 
1180
+ @carousel-control-color: @brand-light-blue;
536
1181
  @carousel-control-width: 15%;
537
1182
  @carousel-control-opacity: 1;
538
1183
  @carousel-control-font-size: 20px;
539
1184
 
1185
+ @carousel-indicator-active-bg: @brand-light-blue;
1186
+ @carousel-indicator-border-color: @brand-light-blue;
1187
+
1188
+ @carousel-caption-color: #fff;
1189
+
1190
+
540
1191
  //== Close
541
1192
  //
542
1193
  //##
543
1194
 
544
1195
  @close-font-size: 32px;
545
1196
  @close-font-weight: bold;
1197
+ @close-color: @brand-light-blue;
1198
+ @close-color-hover: @brand-light-blue-minus-10;
1199
+ @close-color-active: @brand-light-blue-minus-20;
546
1200
 
547
1201
 
548
1202
  //== Code
549
1203
  //
550
1204
  //##
551
1205
 
1206
+ @code-color: @brand-grey-minus-10;
1207
+ @code-bg: @brand-smoke-plus-20;
1208
+
1209
+ @kbd-color: #fff;
1210
+ @kbd-bg: #333;
1211
+
1212
+ @pre-bg: @brand-smoke-plus-20;
1213
+ @pre-color: @gray-dark;
1214
+ @pre-border-color: #ccc;
552
1215
  @pre-scrollable-max-height: 340px;
553
1216
 
554
1217
 
@@ -558,6 +1221,24 @@
558
1221
 
559
1222
  //** Horizontal offset for forms and lists.
560
1223
  @component-offset-horizontal: 180px;
1224
+ //** Text muted color
1225
+ @text-muted: @brand-smoke-minus-10;
1226
+ //** Abbreviations and acronyms border color
1227
+ @abbr-border-color: @link-color;
1228
+ //** Headings small color
1229
+ @headings-small-color: @gray-light;
1230
+ //** Blockquote small color
1231
+ @blockquote-small-color: @gray-light;
1232
+ //** Blockquote font size
1233
+ @blockquote-font-size: @font-size-large;
1234
+ //** Blockquote border color
1235
+ @blockquote-border-color: @brand-light-blue;
1236
+ //** Page header border color
1237
+ @page-header-border-color: @brand-smoke-plus-10;
1238
+ //** Width of horizontal description list titles
1239
+ @dl-horizontal-offset: @component-offset-horizontal;
1240
+ //** Horizontal line color.
1241
+ @hr-border: @brand-smoke-plus-10;
561
1242
 
562
1243
  //== Sequence
563
1244
  //
@@ -571,12 +1252,19 @@
571
1252
  @sequence-pip-size: 8px;
572
1253
  @sequence-line-width: 2px;
573
1254
 
1255
+ @sequence-border: #d3d5d8;
1256
+ @sequence-bg: #FFF;
1257
+
1258
+ @sequence-inverse-border: @brand-navy-minus-20;
1259
+ @sequence-inverse-bg: @brand-navy;
1260
+
574
1261
  @sequence-spacing-horizontal: 24px;
575
1262
  @sequence-spacing-horizontal-lg: 48px;
576
1263
 
577
1264
  @sequence-icon-size: 24px;
578
1265
  @sequence-icon-size-md: 32px;
579
1266
  @sequence-icon-size-lg: 40px;
1267
+ @sequence-icon-border: @text-color;
580
1268
 
581
1269
  //== Column layout
582
1270
  @column-width: 264px;
@@ -586,4 +1274,5 @@
586
1274
  //##
587
1275
  @decision-focus-transition: @transition-duration;
588
1276
  @decision-padding-md: 12px;
589
- @decision-padding-lg: 24px;
1277
+ @decision-padding-lg: 24px;
1278
+ @decision-border: 1px solid @brand-smoke-plus-10;