bootstrap-sass 3.0.3.0 → 3.1.0.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

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