twbs_less_rails 2.7.2 → 2.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/LICENSE +1 -1
  4. data/README.md +1 -1
  5. data/lib/twbs_less_rails/version.rb +1 -1
  6. data/vendor/assets/javascripts/twbs/bootstrap/affix.js +34 -23
  7. data/vendor/assets/javascripts/twbs/bootstrap/alert.js +5 -15
  8. data/vendor/assets/javascripts/twbs/bootstrap/button.js +21 -29
  9. data/vendor/assets/javascripts/twbs/bootstrap/carousel.js +16 -28
  10. data/vendor/assets/javascripts/twbs/bootstrap/collapse.js +7 -16
  11. data/vendor/assets/javascripts/twbs/bootstrap/dropdown.js +19 -26
  12. data/vendor/assets/javascripts/twbs/bootstrap/modal.js +25 -28
  13. data/vendor/assets/javascripts/twbs/bootstrap/popover.js +14 -21
  14. data/vendor/assets/javascripts/twbs/bootstrap/scrollspy.js +16 -21
  15. data/vendor/assets/javascripts/twbs/bootstrap/tab.js +7 -17
  16. data/vendor/assets/javascripts/twbs/bootstrap/tooltip.js +52 -39
  17. data/vendor/assets/javascripts/twbs/bootstrap/transition.js +11 -19
  18. data/vendor/assets/stylesheets/twbs/bootstrap/badges.less +4 -0
  19. data/vendor/assets/stylesheets/twbs/bootstrap/breadcrumbs.less +4 -1
  20. data/vendor/assets/stylesheets/twbs/bootstrap/button-groups.less +10 -11
  21. data/vendor/assets/stylesheets/twbs/bootstrap/buttons.less +8 -8
  22. data/vendor/assets/stylesheets/twbs/bootstrap/code.less +10 -0
  23. data/vendor/assets/stylesheets/twbs/bootstrap/dropdowns.less +28 -2
  24. data/vendor/assets/stylesheets/twbs/bootstrap/forms.less +82 -38
  25. data/vendor/assets/stylesheets/twbs/bootstrap/glyphicons.less +1 -5
  26. data/vendor/assets/stylesheets/twbs/bootstrap/grid.less +26 -5
  27. data/vendor/assets/stylesheets/twbs/bootstrap/input-groups.less +39 -18
  28. data/vendor/assets/stylesheets/twbs/bootstrap/jumbotron.less +3 -5
  29. data/vendor/assets/stylesheets/twbs/bootstrap/list-group.less +25 -3
  30. data/vendor/assets/stylesheets/twbs/bootstrap/mixins.less +130 -49
  31. data/vendor/assets/stylesheets/twbs/bootstrap/modals.less +16 -7
  32. data/vendor/assets/stylesheets/twbs/bootstrap/navbar.less +24 -20
  33. data/vendor/assets/stylesheets/twbs/bootstrap/navs.less +2 -2
  34. data/vendor/assets/stylesheets/twbs/bootstrap/normalize.less +139 -122
  35. data/vendor/assets/stylesheets/twbs/bootstrap/pager.less +5 -5
  36. data/vendor/assets/stylesheets/twbs/bootstrap/pagination.less +6 -3
  37. data/vendor/assets/stylesheets/twbs/bootstrap/panels.less +64 -16
  38. data/vendor/assets/stylesheets/twbs/bootstrap/print.less +0 -4
  39. data/vendor/assets/stylesheets/twbs/bootstrap/responsive-utilities.less +13 -129
  40. data/vendor/assets/stylesheets/twbs/bootstrap/scaffolding.less +17 -2
  41. data/vendor/assets/stylesheets/twbs/bootstrap/tables.less +3 -1
  42. data/vendor/assets/stylesheets/twbs/bootstrap/theme.less +1 -1
  43. data/vendor/assets/stylesheets/twbs/bootstrap/tooltip.less +1 -1
  44. data/vendor/assets/stylesheets/twbs/bootstrap/type.less +78 -63
  45. data/vendor/assets/stylesheets/twbs/bootstrap/variables.less +346 -161
  46. data/vendor/assets/stylesheets/twbs/bootstrap/wells.less +1 -1
  47. metadata +2 -2
@@ -141,6 +141,7 @@ table {
141
141
  td,
142
142
  th {
143
143
  &[class*="col-"] {
144
+ position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
144
145
  float: none;
145
146
  display: table-cell;
146
147
  }
@@ -156,8 +157,9 @@ table {
156
157
  // Generate the contextual variants
157
158
  .table-row-variant(active; @table-bg-active);
158
159
  .table-row-variant(success; @state-success-bg);
159
- .table-row-variant(danger; @state-danger-bg);
160
+ .table-row-variant(info; @state-info-bg);
160
161
  .table-row-variant(warning; @state-warning-bg);
162
+ .table-row-variant(danger; @state-danger-bg);
161
163
 
162
164
 
163
165
  // Responsive tables
@@ -63,9 +63,9 @@
63
63
  .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
64
64
  .btn-primary { .btn-styles(@btn-primary-bg); }
65
65
  .btn-success { .btn-styles(@btn-success-bg); }
66
+ .btn-info { .btn-styles(@btn-info-bg); }
66
67
  .btn-warning { .btn-styles(@btn-warning-bg); }
67
68
  .btn-danger { .btn-styles(@btn-danger-bg); }
68
- .btn-info { .btn-styles(@btn-info-bg); }
69
69
 
70
70
 
71
71
 
@@ -13,7 +13,7 @@
13
13
  line-height: 1.4;
14
14
  .opacity(0);
15
15
 
16
- &.in { .opacity(.9); }
16
+ &.in { .opacity(@tooltip-opacity); }
17
17
  &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
18
18
  &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
19
19
  &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
@@ -21,9 +21,9 @@ h1, h2, h3, h4, h5, h6,
21
21
  }
22
22
  }
23
23
 
24
- h1,
25
- h2,
26
- h3 {
24
+ h1, .h1,
25
+ h2, .h2,
26
+ h3, .h3 {
27
27
  margin-top: @line-height-computed;
28
28
  margin-bottom: (@line-height-computed / 2);
29
29
 
@@ -32,9 +32,9 @@ h3 {
32
32
  font-size: 65%;
33
33
  }
34
34
  }
35
- h4,
36
- h5,
37
- h6 {
35
+ h4, .h4,
36
+ h5, .h5,
37
+ h6, .h6 {
38
38
  margin-top: (@line-height-computed / 2);
39
39
  margin-bottom: (@line-height-computed / 2);
40
40
 
@@ -61,7 +61,7 @@ p {
61
61
 
62
62
  .lead {
63
63
  margin-bottom: @line-height-computed;
64
- font-size: floor(@font-size-base * 1.15);
64
+ font-size: floor((@font-size-base * 1.15));
65
65
  font-weight: 200;
66
66
  line-height: 1.4;
67
67
 
@@ -81,45 +81,53 @@ small,
81
81
  // Undo browser default styling
82
82
  cite { font-style: normal; }
83
83
 
84
- // Contextual emphasis
84
+ // Alignment
85
+ .text-left { text-align: left; }
86
+ .text-right { text-align: right; }
87
+ .text-center { text-align: center; }
88
+ .text-justify { text-align: justify; }
89
+
90
+ // Contextual colors
85
91
  .text-muted {
86
92
  color: @text-muted;
87
93
  }
88
94
  .text-primary {
89
- color: @brand-primary;
90
- &:hover {
91
- color: darken(@brand-primary, 10%);
92
- }
95
+ .text-emphasis-variant(@brand-primary);
96
+ }
97
+ .text-success {
98
+ .text-emphasis-variant(@state-success-text);
99
+ }
100
+ .text-info {
101
+ .text-emphasis-variant(@state-info-text);
93
102
  }
94
103
  .text-warning {
95
- color: @state-warning-text;
96
- &:hover {
97
- color: darken(@state-warning-text, 10%);
98
- }
104
+ .text-emphasis-variant(@state-warning-text);
99
105
  }
100
106
  .text-danger {
101
- color: @state-danger-text;
102
- &:hover {
103
- color: darken(@state-danger-text, 10%);
104
- }
107
+ .text-emphasis-variant(@state-danger-text);
105
108
  }
106
- .text-success {
107
- color: @state-success-text;
108
- &:hover {
109
- color: darken(@state-success-text, 10%);
110
- }
109
+
110
+ // Contextual backgrounds
111
+ // For now we'll leave these alongside the text classes until v4 when we can
112
+ // safely shift things around (per SemVer rules).
113
+ .bg-primary {
114
+ // Given the contrast here, this is the only class to have its color inverted
115
+ // automatically.
116
+ color: #fff;
117
+ .bg-variant(@brand-primary);
111
118
  }
112
- .text-info {
113
- color: @state-info-text;
114
- &:hover {
115
- color: darken(@state-info-text, 10%);
116
- }
119
+ .bg-success {
120
+ .bg-variant(@state-success-bg);
121
+ }
122
+ .bg-info {
123
+ .bg-variant(@state-info-bg);
124
+ }
125
+ .bg-warning {
126
+ .bg-variant(@state-warning-bg);
127
+ }
128
+ .bg-danger {
129
+ .bg-variant(@state-danger-bg);
117
130
  }
118
-
119
- // Alignment
120
- .text-left { text-align: left; }
121
- .text-right { text-align: right; }
122
- .text-center { text-align: center; }
123
131
 
124
132
 
125
133
  // Page header
@@ -201,7 +209,7 @@ dd {
201
209
  }
202
210
  dd {
203
211
  margin-left: @component-offset-horizontal;
204
- .clearfix(); // Clear the floated `dt` if an empty `dd` is present
212
+ &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
205
213
  }
206
214
  }
207
215
  }
@@ -225,44 +233,51 @@ abbr[data-original-title] {
225
233
  blockquote {
226
234
  padding: (@line-height-computed / 2) @line-height-computed;
227
235
  margin: 0 0 @line-height-computed;
236
+ font-size: (@font-size-base * 1.25);
228
237
  border-left: 5px solid @blockquote-border-color;
229
- p {
230
- font-size: (@font-size-base * 1.25);
231
- font-weight: 300;
232
- line-height: 1.25;
233
- }
234
- p:last-child {
235
- margin-bottom: 0;
238
+
239
+ p,
240
+ ul,
241
+ ol {
242
+ &:last-child {
243
+ margin-bottom: 0;
244
+ }
236
245
  }
246
+
247
+ // Note: Deprecated small and .small as of v3.1.0
248
+ // Context: https://github.com/twbs/bootstrap/issues/11660
249
+ footer,
237
250
  small,
238
251
  .small {
239
252
  display: block;
253
+ font-size: 80%; // back to default font-size
240
254
  line-height: @line-height-base;
241
255
  color: @blockquote-small-color;
256
+
242
257
  &:before {
243
- content: '\2014 \00A0'; // EM DASH, NBSP
258
+ content: '\2014 \00A0'; // em dash, nbsp
244
259
  }
245
260
  }
261
+ }
246
262
 
247
- // Float right with text-align: right
248
- &.pull-right {
249
- padding-right: 15px;
250
- padding-left: 0;
251
- border-right: 5px solid @blockquote-border-color;
252
- border-left: 0;
253
- p,
254
- small,
255
- .small {
256
- text-align: right;
257
- }
258
- small,
259
- .small {
260
- &:before {
261
- content: '';
262
- }
263
- &:after {
264
- content: '\00A0 \2014'; // NBSP, EM DASH
265
- }
263
+ // Opposite alignment of blockquote
264
+ //
265
+ // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
266
+ .blockquote-reverse,
267
+ blockquote.pull-right {
268
+ padding-right: 15px;
269
+ padding-left: 0;
270
+ border-right: 5px solid @blockquote-border-color;
271
+ border-left: 0;
272
+ text-align: right;
273
+
274
+ // Account for citation
275
+ footer,
276
+ small,
277
+ .small {
278
+ &:before { content: ''; }
279
+ &:after {
280
+ content: '\00A0 \2014'; // nbsp, em dash
266
281
  }
267
282
  }
268
283
  }
@@ -3,11 +3,9 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // Global values
7
- // --------------------------------------------------
8
-
9
- // Grays
10
- // -------------------------
6
+ //== Colors
7
+ //
8
+ //## Gray and brand colors for use across Bootstrap.
11
9
 
12
10
  @gray-darker: lighten(#000, 13.5%); // #222
13
11
  @gray-dark: lighten(#000, 20%); // #333
@@ -15,107 +13,127 @@
15
13
  @gray-light: lighten(#000, 60%); // #999
16
14
  @gray-lighter: lighten(#000, 93.5%); // #eee
17
15
 
18
- // Brand colors
19
- // -------------------------
20
-
21
16
  @brand-primary: #428bca;
22
17
  @brand-success: #5cb85c;
18
+ @brand-info: #5bc0de;
23
19
  @brand-warning: #f0ad4e;
24
20
  @brand-danger: #d9534f;
25
- @brand-info: #5bc0de;
26
21
 
27
- // Scaffolding
28
- // -------------------------
29
22
 
23
+ //== Scaffolding
24
+ //
25
+ // ## Settings for some of the most global styles.
26
+
27
+ //** Background color for `<body>`.
30
28
  @body-bg: #fff;
29
+ //** Global text color on `<body>`.
31
30
  @text-color: @gray-dark;
32
31
 
33
- // Links
34
- // -------------------------
35
-
32
+ //** Global textual link color.
36
33
  @link-color: @brand-primary;
34
+ //** Link hover color set via `darken()` function.
37
35
  @link-hover-color: darken(@link-color, 15%);
38
36
 
39
- // Typography
40
- // -------------------------
37
+
38
+ //== Typography
39
+ //
40
+ //## Font, line-height, and color for body text, headings, and more.
41
41
 
42
42
  @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
43
43
  @font-family-serif: Georgia, "Times New Roman", Times, serif;
44
+ //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
44
45
  @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
45
46
  @font-family-base: @font-family-sans-serif;
46
47
 
47
48
  @font-size-base: 14px;
48
- @font-size-large: ceil(@font-size-base * 1.25); // ~18px
49
- @font-size-small: ceil(@font-size-base * 0.85); // ~12px
49
+ @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
50
+ @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
50
51
 
51
- @font-size-h1: floor(@font-size-base * 2.6); // ~36px
52
- @font-size-h2: floor(@font-size-base * 2.15); // ~30px
53
- @font-size-h3: ceil(@font-size-base * 1.7); // ~24px
54
- @font-size-h4: ceil(@font-size-base * 1.25); // ~18px
52
+ @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
53
+ @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
54
+ @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
55
+ @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
55
56
  @font-size-h5: @font-size-base;
56
- @font-size-h6: ceil(@font-size-base * 0.85); // ~12px
57
+ @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
57
58
 
59
+ //** Unit-less `line-height` for use in components like buttons.
58
60
  @line-height-base: 1.428571429; // 20/14
59
- @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
61
+ //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
62
+ @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
60
63
 
61
- @headings-font-family: @font-family-base;
64
+ //** By default, this inherits from the `<body>`.
65
+ @headings-font-family: inherit;
62
66
  @headings-font-weight: 500;
63
67
  @headings-line-height: 1.1;
64
68
  @headings-color: inherit;
65
69
 
66
70
 
67
- // Iconography
68
- // -------------------------
71
+ //-- Iconography
72
+ //
73
+ //## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
69
74
 
70
75
  @icon-font-path: "../fonts/";
71
76
  @icon-font-name: "glyphicons-halflings-regular";
77
+ @icon-font-svg-id: "glyphicons_halflingsregular";
72
78
 
79
+ //== Components
80
+ //
81
+ //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
73
82
 
74
- // Components
75
- // -------------------------
76
- // Based on 14px font-size and 1.428 line-height (~20px to start)
83
+ @padding-base-vertical: 6px;
84
+ @padding-base-horizontal: 12px;
77
85
 
78
- @padding-base-vertical: 6px;
79
- @padding-base-horizontal: 12px;
86
+ @padding-large-vertical: 10px;
87
+ @padding-large-horizontal: 16px;
80
88
 
81
- @padding-large-vertical: 10px;
82
- @padding-large-horizontal: 16px;
89
+ @padding-small-vertical: 5px;
90
+ @padding-small-horizontal: 10px;
83
91
 
84
- @padding-small-vertical: 5px;
85
- @padding-small-horizontal: 10px;
92
+ @padding-xs-vertical: 1px;
93
+ @padding-xs-horizontal: 5px;
86
94
 
87
- @padding-xs-vertical: 1px;
88
- @padding-xs-horizontal: 5px;
95
+ @line-height-large: 1.33;
96
+ @line-height-small: 1.5;
89
97
 
90
- @line-height-large: 1.33;
91
- @line-height-small: 1.5;
98
+ @border-radius-base: 4px;
99
+ @border-radius-large: 6px;
100
+ @border-radius-small: 3px;
92
101
 
93
- @border-radius-base: 4px;
94
- @border-radius-large: 6px;
95
- @border-radius-small: 3px;
102
+ //** Global color for active items (e.g., navs or dropdowns).
103
+ @component-active-color: #fff;
104
+ //** Global background color for active items (e.g., navs or dropdowns).
105
+ @component-active-bg: @brand-primary;
96
106
 
97
- @component-active-color: #fff;
98
- @component-active-bg: @brand-primary;
107
+ //** Width of the `border` for generating carets that indicator dropdowns.
108
+ @caret-width-base: 4px;
109
+ //** Carets increase slightly in size for larger components.
110
+ @caret-width-large: 5px;
99
111
 
100
- @caret-width-base: 4px;
101
- @caret-width-large: 5px;
102
112
 
103
- // Tables
104
- // -------------------------
113
+ //== Tables
114
+ //
115
+ //## Customizes the `.table` component with basic values, each used across all table variations.
105
116
 
106
- @table-cell-padding: 8px;
107
- @table-condensed-cell-padding: 5px;
117
+ //** Padding for `<th>`s and `<td>`s.
118
+ @table-cell-padding: 8px;
119
+ //** Padding for cells in `.table-condensed`.
120
+ @table-condensed-cell-padding: 5px;
108
121
 
109
- @table-bg: transparent; // overall background-color
110
- @table-bg-accent: #f9f9f9; // for striping
111
- @table-bg-hover: #f5f5f5;
112
- @table-bg-active: @table-bg-hover;
122
+ //** Default background color used for all tables.
123
+ @table-bg: transparent;
124
+ //** Background color used for `.table-striped`.
125
+ @table-bg-accent: #f9f9f9;
126
+ //** Background color used for `.table-hover`.
127
+ @table-bg-hover: #f5f5f5;
128
+ @table-bg-active: @table-bg-hover;
113
129
 
114
- @table-border-color: #ddd; // table and cell border
130
+ //** Border color for table and cell borders.
131
+ @table-border-color: #ddd;
115
132
 
116
133
 
117
- // Buttons
118
- // -------------------------
134
+ //== Buttons
135
+ //
136
+ //## For each of Bootstrap's buttons, define text, background and border color.
119
137
 
120
138
  @btn-font-weight: normal;
121
139
 
@@ -131,6 +149,10 @@
131
149
  @btn-success-bg: @brand-success;
132
150
  @btn-success-border: darken(@btn-success-bg, 5%);
133
151
 
152
+ @btn-info-color: #fff;
153
+ @btn-info-bg: @brand-info;
154
+ @btn-info-border: darken(@btn-info-bg, 5%);
155
+
134
156
  @btn-warning-color: #fff;
135
157
  @btn-warning-bg: @brand-warning;
136
158
  @btn-warning-border: darken(@btn-warning-bg, 5%);
@@ -139,65 +161,87 @@
139
161
  @btn-danger-bg: @brand-danger;
140
162
  @btn-danger-border: darken(@btn-danger-bg, 5%);
141
163
 
142
- @btn-info-color: #fff;
143
- @btn-info-bg: @brand-info;
144
- @btn-info-border: darken(@btn-info-bg, 5%);
145
-
146
164
  @btn-link-disabled-color: @gray-light;
147
165
 
148
166
 
149
- // Forms
150
- // -------------------------
167
+ //== Forms
168
+ //
169
+ //##
151
170
 
171
+ //** `<input>` background color
152
172
  @input-bg: #fff;
173
+ //** `<input disabled>` background color
153
174
  @input-bg-disabled: @gray-lighter;
154
175
 
176
+ //** Text color for `<input>`s
155
177
  @input-color: @gray;
178
+ //** `<input>` border color
156
179
  @input-border: #ccc;
180
+ //** `<input>` border radius
157
181
  @input-border-radius: @border-radius-base;
182
+ //** Border color for inputs on focus
158
183
  @input-border-focus: #66afe9;
159
184
 
185
+ //** Placeholder text color
160
186
  @input-color-placeholder: @gray-light;
161
187
 
188
+ //** Default `.form-control` height
162
189
  @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
190
+ //** Large `.form-control` height
163
191
  @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
192
+ //** Small `.form-control` height
164
193
  @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
165
194
 
166
195
  @legend-color: @gray-dark;
167
196
  @legend-border-color: #e5e5e5;
168
197
 
198
+ //** Background color for textual input addons
169
199
  @input-group-addon-bg: @gray-lighter;
200
+ //** Border color for textual input addons
170
201
  @input-group-addon-border-color: @input-border;
171
202
 
172
203
 
173
- // Dropdowns
174
- // -------------------------
204
+ //== Dropdowns
205
+ //
206
+ //## Dropdown menu container and contents.
175
207
 
208
+ //** Background for the dropdown menu.
176
209
  @dropdown-bg: #fff;
210
+ //** Dropdown menu `border-color`.
177
211
  @dropdown-border: rgba(0,0,0,.15);
212
+ //** Dropdown menu `border-color` **for IE8**.
178
213
  @dropdown-fallback-border: #ccc;
214
+ //** Divider color for between dropdown items.
179
215
  @dropdown-divider-bg: #e5e5e5;
180
216
 
217
+ //** Dropdown link text color.
181
218
  @dropdown-link-color: @gray-dark;
219
+ //** Hover color for dropdown links.
182
220
  @dropdown-link-hover-color: darken(@gray-dark, 5%);
221
+ //** Hover background for dropdown links.
183
222
  @dropdown-link-hover-bg: #f5f5f5;
184
223
 
224
+ //** Active dropdown menu item text color.
185
225
  @dropdown-link-active-color: @component-active-color;
226
+ //** Active dropdown menu item background color.
186
227
  @dropdown-link-active-bg: @component-active-bg;
187
228
 
229
+ //** Disabled dropdown menu item background color.
188
230
  @dropdown-link-disabled-color: @gray-light;
189
231
 
232
+ //** Text color for headers within dropdown menus.
190
233
  @dropdown-header-color: @gray-light;
191
234
 
192
-
193
- // COMPONENT VARIABLES
194
- // --------------------------------------------------
235
+ // Note: Deprecated @dropdown-caret-color as of v3.1.0
236
+ @dropdown-caret-color: #000;
195
237
 
196
238
 
197
- // Z-index master list
198
- // -------------------------
199
- // Used for a bird's eye view of components dependent on the z-axis
200
- // Try to avoid customizing these :)
239
+ //-- Z-index master list
240
+ //
241
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
242
+ // of components dependent on the z-axis and are designed to all work together.
243
+ //
244
+ // Note: These variables are not generated into the Customizer.
201
245
 
202
246
  @zindex-navbar: 1000;
203
247
  @zindex-dropdown: 1000;
@@ -207,8 +251,10 @@
207
251
  @zindex-modal-background: 1040;
208
252
  @zindex-modal: 1050;
209
253
 
210
- // Media queries breakpoints
211
- // --------------------------------------------------
254
+
255
+ //== Media queries breakpoints
256
+ //
257
+ //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
212
258
 
213
259
  // Extra small screen / phone
214
260
  // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@@ -240,31 +286,32 @@
240
286
  @screen-md-max: (@screen-lg-min - 1);
241
287
 
242
288
 
243
- // Grid system
244
- // --------------------------------------------------
289
+ //== Grid system
290
+ //
291
+ //## Define your custom responsive grid.
245
292
 
246
- // Number of columns in the grid system
293
+ //** Number of columns in the grid.
247
294
  @grid-columns: 12;
248
- // Padding, to be divided by two and applied to the left and right of all columns
295
+ //** Padding between columns. Gets divided in half for the left and right.
249
296
  @grid-gutter-width: 30px;
250
-
251
297
  // Navbar collapse
252
-
253
- // Point at which the navbar becomes uncollapsed
298
+ //** Point at which the navbar becomes uncollapsed.
254
299
  @grid-float-breakpoint: @screen-sm-min;
255
- // Point at which the navbar begins collapsing
300
+ //** Point at which the navbar begins collapsing.
256
301
  @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
257
302
 
258
303
 
259
- // Navbar
260
- // -------------------------
304
+ //== Navbar
305
+ //
306
+ //##
261
307
 
262
308
  // Basics of a navbar
263
309
  @navbar-height: 50px;
264
310
  @navbar-margin-bottom: @line-height-computed;
265
311
  @navbar-border-radius: @border-radius-base;
266
- @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
312
+ @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
267
313
  @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
314
+ @navbar-collapse-max-height: 340px;
268
315
 
269
316
  @navbar-default-color: #777;
270
317
  @navbar-default-bg: #f8f8f8;
@@ -286,12 +333,11 @@
286
333
 
287
334
  // Navbar toggle
288
335
  @navbar-default-toggle-hover-bg: #ddd;
289
- @navbar-default-toggle-icon-bar-bg: #ccc;
336
+ @navbar-default-toggle-icon-bar-bg: #888;
290
337
  @navbar-default-toggle-border-color: #ddd;
291
338
 
292
339
 
293
340
  // Inverted navbar
294
- //
295
341
  // Reset inverted navbar basics
296
342
  @navbar-inverse-color: @gray-light;
297
343
  @navbar-inverse-bg: #222;
@@ -317,9 +363,11 @@
317
363
  @navbar-inverse-toggle-border-color: #333;
318
364
 
319
365
 
320
- // Navs
321
- // -------------------------
366
+ //== Navs
367
+ //
368
+ //##
322
369
 
370
+ //=== Shared nav styles
323
371
  @nav-link-padding: 10px 15px;
324
372
  @nav-link-hover-bg: @gray-lighter;
325
373
 
@@ -328,7 +376,7 @@
328
376
 
329
377
  @nav-open-link-hover-color: #fff;
330
378
 
331
- // Tabs
379
+ //== Tabs
332
380
  @nav-tabs-border-color: #ddd;
333
381
 
334
382
  @nav-tabs-link-hover-border-color: @gray-lighter;
@@ -340,45 +388,63 @@
340
388
  @nav-tabs-justified-link-border-color: #ddd;
341
389
  @nav-tabs-justified-active-link-border-color: @body-bg;
342
390
 
343
- // Pills
391
+ //== Pills
344
392
  @nav-pills-border-radius: @border-radius-base;
345
393
  @nav-pills-active-link-hover-bg: @component-active-bg;
346
394
  @nav-pills-active-link-hover-color: @component-active-color;
347
395
 
348
396
 
349
- // Pagination
350
- // -------------------------
397
+ //== Pagination
398
+ //
399
+ //##
351
400
 
401
+ @pagination-color: @link-color;
352
402
  @pagination-bg: #fff;
353
403
  @pagination-border: #ddd;
354
404
 
405
+ @pagination-hover-color: @link-hover-color;
355
406
  @pagination-hover-bg: @gray-lighter;
407
+ @pagination-hover-border: #ddd;
356
408
 
357
- @pagination-active-bg: @brand-primary;
358
409
  @pagination-active-color: #fff;
410
+ @pagination-active-bg: @brand-primary;
411
+ @pagination-active-border: @brand-primary;
359
412
 
360
413
  @pagination-disabled-color: @gray-light;
414
+ @pagination-disabled-bg: #fff;
415
+ @pagination-disabled-border: #ddd;
361
416
 
362
417
 
363
- // Pager
364
- // -------------------------
418
+ //== Pager
419
+ //
420
+ //##
365
421
 
422
+ @pager-bg: @pagination-bg;
423
+ @pager-border: @pagination-border;
366
424
  @pager-border-radius: 15px;
367
- @pager-disabled-color: @gray-light;
368
425
 
426
+ @pager-hover-bg: @pagination-hover-bg;
427
+
428
+ @pager-active-bg: @pagination-active-bg;
429
+ @pager-active-color: @pagination-active-color;
430
+
431
+ @pager-disabled-color: @pagination-disabled-color;
369
432
 
370
- // Jumbotron
371
- // -------------------------
433
+
434
+ //== Jumbotron
435
+ //
436
+ //##
372
437
 
373
438
  @jumbotron-padding: 30px;
374
439
  @jumbotron-color: inherit;
375
440
  @jumbotron-bg: @gray-lighter;
376
441
  @jumbotron-heading-color: inherit;
377
- @jumbotron-font-size: ceil(@font-size-base * 1.5);
442
+ @jumbotron-font-size: ceil((@font-size-base * 1.5));
378
443
 
379
444
 
380
- // Form states and alerts
381
- // -------------------------
445
+ //== Form states and alerts
446
+ //
447
+ //## Define colors for form feedback states and, by default, alerts.
382
448
 
383
449
  @state-success-text: #3c763d;
384
450
  @state-success-bg: #dff0d8;
@@ -397,65 +463,113 @@
397
463
  @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
398
464
 
399
465
 
400
- // Tooltips
401
- // -------------------------
466
+ //== Tooltips
467
+ //
468
+ //##
469
+
470
+ //** Tooltip max width
402
471
  @tooltip-max-width: 200px;
472
+ //** Tooltip text color
403
473
  @tooltip-color: #fff;
474
+ //** Tooltip background color
404
475
  @tooltip-bg: #000;
476
+ @tooltip-opacity: .9;
405
477
 
478
+ //** Tooltip arrow width
406
479
  @tooltip-arrow-width: 5px;
480
+ //** Tooltip arrow color
407
481
  @tooltip-arrow-color: @tooltip-bg;
408
482
 
409
483
 
410
- // Popovers
411
- // -------------------------
484
+ //== Popovers
485
+ //
486
+ //##
487
+
488
+ //** Popover body background color
412
489
  @popover-bg: #fff;
490
+ //** Popover maximum width
413
491
  @popover-max-width: 276px;
492
+ //** Popover border color
414
493
  @popover-border-color: rgba(0,0,0,.2);
494
+ //** Popover fallback border color
415
495
  @popover-fallback-border-color: #ccc;
416
496
 
497
+ //** Popover title background color
417
498
  @popover-title-bg: darken(@popover-bg, 3%);
418
499
 
500
+ //** Popover arrow width
419
501
  @popover-arrow-width: 10px;
502
+ //** Popover arrow color
420
503
  @popover-arrow-color: #fff;
421
504
 
505
+ //** Popover outer arrow width
422
506
  @popover-arrow-outer-width: (@popover-arrow-width + 1);
507
+ //** Popover outer arrow color
423
508
  @popover-arrow-outer-color: rgba(0,0,0,.25);
509
+ //** Popover outer arrow fallback color
424
510
  @popover-arrow-outer-fallback-color: #999;
425
511
 
426
512
 
427
- // Labels
428
- // -------------------------
513
+ //== Labels
514
+ //
515
+ //##
429
516
 
517
+ //** Default label background color
430
518
  @label-default-bg: @gray-light;
519
+ //** Primary label background color
431
520
  @label-primary-bg: @brand-primary;
521
+ //** Success label background color
432
522
  @label-success-bg: @brand-success;
523
+ //** Info label background color
433
524
  @label-info-bg: @brand-info;
525
+ //** Warning label background color
434
526
  @label-warning-bg: @brand-warning;
527
+ //** Danger label background color
435
528
  @label-danger-bg: @brand-danger;
436
529
 
530
+ //** Default label text color
437
531
  @label-color: #fff;
532
+ //** Default text color of a linked label
438
533
  @label-link-hover-color: #fff;
439
534
 
440
535
 
441
- // Modals
442
- // -------------------------
536
+ //== Modals
537
+ //
538
+ //##
539
+
540
+ //** Padding applied to the modal body
443
541
  @modal-inner-padding: 20px;
444
542
 
543
+ //** Padding applied to the modal title
445
544
  @modal-title-padding: 15px;
545
+ //** Modal title line-height
446
546
  @modal-title-line-height: @line-height-base;
447
547
 
548
+ //** Background color of modal content area
448
549
  @modal-content-bg: #fff;
550
+ //** Modal content border color
449
551
  @modal-content-border-color: rgba(0,0,0,.2);
552
+ //** Modal content border color **for IE8**
450
553
  @modal-content-fallback-border-color: #999;
451
554
 
555
+ //** Modal backdrop background color
452
556
  @modal-backdrop-bg: #000;
557
+ //** Modal backdrop opacity
558
+ @modal-backdrop-opacity: .5;
559
+ //** Modal header border color
453
560
  @modal-header-border-color: #e5e5e5;
561
+ //** Modal footer border color
454
562
  @modal-footer-border-color: @modal-header-border-color;
455
563
 
564
+ @modal-lg: 900px;
565
+ @modal-md: 600px;
566
+ @modal-sm: 300px;
567
+
568
+
569
+ //== Alerts
570
+ //
571
+ //## Define alert colors, border radius, and padding.
456
572
 
457
- // Alerts
458
- // -------------------------
459
573
  @alert-padding: 15px;
460
574
  @alert-border-radius: @border-radius-base;
461
575
  @alert-link-font-weight: bold;
@@ -477,38 +591,62 @@
477
591
  @alert-danger-border: @state-danger-border;
478
592
 
479
593
 
480
- // Progress bars
481
- // -------------------------
594
+ //== Progress bars
595
+ //
596
+ //##
597
+
598
+ //** Background color of the whole progress component
482
599
  @progress-bg: #f5f5f5;
600
+ //** Progress bar text color
483
601
  @progress-bar-color: #fff;
484
602
 
603
+ //** Default progress bar color
485
604
  @progress-bar-bg: @brand-primary;
605
+ //** Success progress bar color
486
606
  @progress-bar-success-bg: @brand-success;
607
+ //** Warning progress bar color
487
608
  @progress-bar-warning-bg: @brand-warning;
609
+ //** Danger progress bar color
488
610
  @progress-bar-danger-bg: @brand-danger;
611
+ //** Info progress bar color
489
612
  @progress-bar-info-bg: @brand-info;
490
613
 
491
614
 
492
- // List group
493
- // -------------------------
494
- @list-group-bg: #fff;
495
- @list-group-border: #ddd;
496
- @list-group-border-radius: @border-radius-base;
497
-
498
- @list-group-hover-bg: #f5f5f5;
499
- @list-group-active-color: @component-active-color;
500
- @list-group-active-bg: @component-active-bg;
501
- @list-group-active-border: @list-group-active-bg;
502
-
503
- @list-group-link-color: #555;
504
- @list-group-link-heading-color: #333;
505
-
615
+ //== List group
616
+ //
617
+ //##
618
+
619
+ //** Background color on `.list-group-item`
620
+ @list-group-bg: #fff;
621
+ //** `.list-group-item` border color
622
+ @list-group-border: #ddd;
623
+ //** List group border radius
624
+ @list-group-border-radius: @border-radius-base;
625
+
626
+ //** Background color of single list elements on hover
627
+ @list-group-hover-bg: #f5f5f5;
628
+ //** Text color of active list elements
629
+ @list-group-active-color: @component-active-color;
630
+ //** Background color of active list elements
631
+ @list-group-active-bg: @component-active-bg;
632
+ //** Border color of active list elements
633
+ @list-group-active-border: @list-group-active-bg;
634
+ @list-group-active-text-color: lighten(@list-group-active-bg, 40%);
635
+
636
+ @list-group-link-color: #555;
637
+ @list-group-link-heading-color: #333;
638
+
639
+
640
+ //== Panels
641
+ //
642
+ //##
506
643
 
507
- // Panels
508
- // -------------------------
509
644
  @panel-bg: #fff;
510
- @panel-inner-border: #ddd;
645
+ @panel-body-padding: 15px;
511
646
  @panel-border-radius: @border-radius-base;
647
+
648
+ //** Border color for elements within panels
649
+ @panel-inner-border: #ddd;
512
650
  @panel-footer-bg: #f5f5f5;
513
651
 
514
652
  @panel-default-text: @gray-dark;
@@ -523,6 +661,10 @@
523
661
  @panel-success-border: @state-success-border;
524
662
  @panel-success-heading-bg: @state-success-bg;
525
663
 
664
+ @panel-info-text: @state-info-text;
665
+ @panel-info-border: @state-info-border;
666
+ @panel-info-heading-bg: @state-info-bg;
667
+
526
668
  @panel-warning-text: @state-warning-text;
527
669
  @panel-warning-border: @state-warning-border;
528
670
  @panel-warning-heading-bg: @state-warning-bg;
@@ -531,34 +673,46 @@
531
673
  @panel-danger-border: @state-danger-border;
532
674
  @panel-danger-heading-bg: @state-danger-bg;
533
675
 
534
- @panel-info-text: @state-info-text;
535
- @panel-info-border: @state-info-border;
536
- @panel-info-heading-bg: @state-info-bg;
537
676
 
677
+ //== Thumbnails
678
+ //
679
+ //##
538
680
 
539
- // Thumbnails
540
- // -------------------------
681
+ //** Padding around the thumbnail image
541
682
  @thumbnail-padding: 4px;
683
+ //** Thumbnail background color
542
684
  @thumbnail-bg: @body-bg;
685
+ //** Thumbnail border color
543
686
  @thumbnail-border: #ddd;
687
+ //** Thumbnail border radius
544
688
  @thumbnail-border-radius: @border-radius-base;
545
689
 
690
+ //** Custom text color for thumbnail captions
546
691
  @thumbnail-caption-color: @text-color;
692
+ //** Padding around the thumbnail caption
547
693
  @thumbnail-caption-padding: 9px;
548
694
 
549
695
 
550
- // Wells
551
- // -------------------------
696
+ //== Wells
697
+ //
698
+ //##
699
+
552
700
  @well-bg: #f5f5f5;
701
+ @well-border: darken(@well-bg, 7%);
553
702
 
554
703
 
555
- // Badges
556
- // -------------------------
704
+ //== Badges
705
+ //
706
+ //##
707
+
557
708
  @badge-color: #fff;
709
+ //** Linked badge text color on hover
558
710
  @badge-link-hover-color: #fff;
559
711
  @badge-bg: @gray-light;
560
712
 
713
+ //** Badge text color in active nav link
561
714
  @badge-active-color: @link-color;
715
+ //** Badge background color in active nav link
562
716
  @badge-active-bg: #fff;
563
717
 
564
718
  @badge-font-weight: bold;
@@ -566,16 +720,25 @@
566
720
  @badge-border-radius: 10px;
567
721
 
568
722
 
569
- // Breadcrumbs
570
- // -------------------------
571
- @breadcrumb-bg: #f5f5f5;
572
- @breadcrumb-color: #ccc;
573
- @breadcrumb-active-color: @gray-light;
574
- @breadcrumb-separator: "/";
723
+ //== Breadcrumbs
724
+ //
725
+ //##
726
+
727
+ @breadcrumb-padding-vertical: 8px;
728
+ @breadcrumb-padding-horizontal: 15px;
729
+ //** Breadcrumb background color
730
+ @breadcrumb-bg: #f5f5f5;
731
+ //** Breadcrumb text color
732
+ @breadcrumb-color: #ccc;
733
+ //** Text color of current page in the breadcrumb
734
+ @breadcrumb-active-color: @gray-light;
735
+ //** Textual separator for between breadcrumb elements
736
+ @breadcrumb-separator: "/";
575
737
 
576
738
 
577
- // Carousel
578
- // ------------------------
739
+ //== Carousel
740
+ //
741
+ //##
579
742
 
580
743
  @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
581
744
 
@@ -590,53 +753,75 @@
590
753
  @carousel-caption-color: #fff;
591
754
 
592
755
 
593
- // Close
594
- // ------------------------
756
+ //== Close
757
+ //
758
+ //##
759
+
595
760
  @close-font-weight: bold;
596
761
  @close-color: #000;
597
762
  @close-text-shadow: 0 1px 0 #fff;
598
763
 
599
764
 
600
- // Code
601
- // ------------------------
765
+ //== Code
766
+ //
767
+ //##
768
+
602
769
  @code-color: #c7254e;
603
770
  @code-bg: #f9f2f4;
604
771
 
772
+ @kbd-color: #fff;
773
+ @kbd-bg: #333;
774
+
605
775
  @pre-bg: #f5f5f5;
606
776
  @pre-color: @gray-dark;
607
777
  @pre-border-color: #ccc;
608
778
  @pre-scrollable-max-height: 340px;
609
779
 
610
- // Type
611
- // ------------------------
780
+
781
+ //== Type
782
+ //
783
+ //##
784
+
785
+ //** Text muted color
612
786
  @text-muted: @gray-light;
787
+ //** Abbreviations and acronyms border color
613
788
  @abbr-border-color: @gray-light;
789
+ //** Headings small color
614
790
  @headings-small-color: @gray-light;
791
+ //** Blockquote small color
615
792
  @blockquote-small-color: @gray-light;
793
+ //** Blockquote border color
616
794
  @blockquote-border-color: @gray-lighter;
795
+ //** Page header border color
617
796
  @page-header-border-color: @gray-lighter;
618
797
 
619
- // Miscellaneous
620
- // -------------------------
621
798
 
622
- // Hr border color
799
+ //== Miscellaneous
800
+ //
801
+ //##
802
+
803
+ //** Horizontal line color.
623
804
  @hr-border: @gray-lighter;
624
805
 
625
- // Horizontal forms & lists
806
+ //** Horizontal offset for forms and lists.
626
807
  @component-offset-horizontal: 180px;
627
808
 
628
809
 
629
- // Container sizes
630
- // --------------------------------------------------
810
+ //== Container sizes
811
+ //
812
+ //## Define the maximum width of `.container` for different screen sizes.
631
813
 
632
814
  // Small screen / tablet
633
815
  @container-tablet: ((720px + @grid-gutter-width));
816
+ //** For `@screen-sm-min` and up.
634
817
  @container-sm: @container-tablet;
635
818
 
636
819
  // Medium screen / desktop
637
820
  @container-desktop: ((940px + @grid-gutter-width));
821
+ //** For `@screen-md-min` and up.
638
822
  @container-md: @container-desktop;
639
823
 
640
824
  // Large screen / wide desktop
641
825
  @container-large-desktop: ((1140px + @grid-gutter-width));
826
+ //** For `@screen-lg-min` and up.
642
827
  @container-lg: @container-large-desktop;