twitter-bootswatch-rails 3.0.3.0 → 3.1.0.0

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 (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/twitter/bootstrap/affix.js +34 -23
  3. data/app/assets/javascripts/twitter/bootstrap/alert.js +5 -15
  4. data/app/assets/javascripts/twitter/bootstrap/button.js +21 -29
  5. data/app/assets/javascripts/twitter/bootstrap/carousel.js +16 -28
  6. data/app/assets/javascripts/twitter/bootstrap/collapse.js +7 -16
  7. data/app/assets/javascripts/twitter/bootstrap/dropdown.js +19 -26
  8. data/app/assets/javascripts/twitter/bootstrap/modal.js +25 -28
  9. data/app/assets/javascripts/twitter/bootstrap/popover.js +14 -21
  10. data/app/assets/javascripts/twitter/bootstrap/scrollspy.js +16 -21
  11. data/app/assets/javascripts/twitter/bootstrap/tab.js +7 -17
  12. data/app/assets/javascripts/twitter/bootstrap/tooltip.js +52 -39
  13. data/app/assets/javascripts/twitter/bootstrap/transition.js +11 -19
  14. data/lib/generators/bootswatch/install/templates/loader.js.tt +1 -1
  15. data/lib/generators/bootswatch/install/templates/mixins.less.tt +130 -49
  16. data/lib/generators/bootswatch/install/templates/variables.less.tt +346 -161
  17. data/lib/twitter/bootswatch/rails/version.rb +1 -1
  18. data/vendor/toolkit/twitter/bootstrap/badges.less +4 -0
  19. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +4 -1
  20. data/vendor/toolkit/twitter/bootstrap/button-groups.less +10 -11
  21. data/vendor/toolkit/twitter/bootstrap/buttons.less +8 -8
  22. data/vendor/toolkit/twitter/bootstrap/code.less +10 -0
  23. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +28 -2
  24. data/vendor/toolkit/twitter/bootstrap/forms.less +82 -38
  25. data/vendor/toolkit/twitter/bootstrap/glyphicons.less +1 -5
  26. data/vendor/toolkit/twitter/bootstrap/grid.less +26 -5
  27. data/vendor/toolkit/twitter/bootstrap/input-groups.less +39 -18
  28. data/vendor/toolkit/twitter/bootstrap/jumbotron.less +3 -5
  29. data/vendor/toolkit/twitter/bootstrap/list-group.less +25 -3
  30. data/vendor/toolkit/twitter/bootstrap/mixins.less +130 -49
  31. data/vendor/toolkit/twitter/bootstrap/modals.less +16 -7
  32. data/vendor/toolkit/twitter/bootstrap/navbar.less +24 -20
  33. data/vendor/toolkit/twitter/bootstrap/navs.less +2 -2
  34. data/vendor/toolkit/twitter/bootstrap/normalize.less +139 -122
  35. data/vendor/toolkit/twitter/bootstrap/pager.less +5 -5
  36. data/vendor/toolkit/twitter/bootstrap/pagination.less +6 -3
  37. data/vendor/toolkit/twitter/bootstrap/panels.less +64 -16
  38. data/vendor/toolkit/twitter/bootstrap/print.less +0 -4
  39. data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +13 -129
  40. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +17 -2
  41. data/vendor/toolkit/twitter/bootstrap/tables.less +3 -1
  42. data/vendor/toolkit/twitter/bootstrap/theme.less +1 -1
  43. data/vendor/toolkit/twitter/bootstrap/tooltip.less +1 -1
  44. data/vendor/toolkit/twitter/bootstrap/type.less +78 -63
  45. data/vendor/toolkit/twitter/bootstrap/variables.less +346 -161
  46. data/vendor/toolkit/twitter/bootstrap/wells.less +1 -1
  47. metadata +2 -3
  48. data/lib/generators/bootswatch/import/import_generator.rb +0 -49
@@ -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: "twitter/bootstrap/";
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;