bootstrap-sass 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.

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;