less-rails-bootstrap 2.3.3 → 3.0.0.rc1

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 (72) hide show
  1. data/.gitignore +1 -0
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +7 -11
  4. data/lib/less/rails/bootstrap/version.rb +1 -1
  5. data/scripts/update_bootstrap.sh +37 -8
  6. data/test/cases/usage_css_spec.rb +15 -12
  7. data/test/cases/usage_js_spec.rb +4 -4
  8. data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
  9. data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
  10. data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
  11. data/test/spec_helper.rb +1 -2
  12. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
  13. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
  14. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
  15. data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
  16. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
  17. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
  18. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
  19. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
  20. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
  21. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
  22. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
  23. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
  24. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
  25. data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
  26. data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
  27. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
  28. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
  29. data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
  30. data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
  31. data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
  32. data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
  33. data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
  34. data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
  35. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
  36. data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
  37. data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
  38. data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
  39. data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
  40. data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
  41. data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
  42. data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
  43. data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
  44. data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
  45. data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
  46. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
  47. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
  48. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
  49. data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
  50. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
  51. data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
  52. data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
  53. data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
  54. data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
  55. data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
  56. metadata +41 -44
  57. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  58. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  59. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
  60. data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
  61. data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
  62. data/vendor/frameworks/twitter/bootstrap.less +0 -1
  63. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
  64. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
  65. data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
  66. data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
  67. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
  68. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
  69. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
  70. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
  71. data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
  72. data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -2,20 +2,203 @@
2
2
  // Grid system
3
3
  // --------------------------------------------------
4
4
 
5
+ // Set the container width, and override it for fixed navbars in media queries
6
+ .container {
7
+ .container-fixed();
8
+ }
9
+
10
+ // Mobile-first defaults
11
+ .row {
12
+ .make-row();
13
+ }
14
+
15
+ // Common styles for small and large grid columns
16
+ .col-1,
17
+ .col-2,
18
+ .col-3,
19
+ .col-4,
20
+ .col-5,
21
+ .col-6,
22
+ .col-7,
23
+ .col-8,
24
+ .col-9,
25
+ .col-10,
26
+ .col-11,
27
+ .col-12,
28
+ .col-sm-1,
29
+ .col-sm-2,
30
+ .col-sm-3,
31
+ .col-sm-4,
32
+ .col-sm-5,
33
+ .col-sm-6,
34
+ .col-sm-7,
35
+ .col-sm-8,
36
+ .col-sm-9,
37
+ .col-sm-10,
38
+ .col-sm-11,
39
+ .col-sm-12,
40
+ .col-lg-1,
41
+ .col-lg-2,
42
+ .col-lg-3,
43
+ .col-lg-4,
44
+ .col-lg-5,
45
+ .col-lg-6,
46
+ .col-lg-7,
47
+ .col-lg-8,
48
+ .col-lg-9,
49
+ .col-lg-10,
50
+ .col-lg-11,
51
+ .col-lg-12 {
52
+ position: relative;
53
+ // Prevent columns from collapsing when empty
54
+ min-height: 1px;
55
+ // Inner gutter via padding
56
+ padding-left: (@grid-gutter-width / 2);
57
+ padding-right: (@grid-gutter-width / 2);
58
+ }
59
+
60
+
61
+
62
+ //
63
+ // Container and grid column sizing
64
+ //
65
+
66
+ // Tiny device columns (smartphones)
67
+ .col-1,
68
+ .col-2,
69
+ .col-3,
70
+ .col-4,
71
+ .col-5,
72
+ .col-6,
73
+ .col-7,
74
+ .col-8,
75
+ .col-9,
76
+ .col-10,
77
+ .col-11,
78
+ .col-12 {
79
+ float: left;
80
+ }
81
+ .col-1 { width: percentage((1 / @grid-columns)); }
82
+ .col-2 { width: percentage((2 / @grid-columns)); }
83
+ .col-3 { width: percentage((3 / @grid-columns)); }
84
+ .col-4 { width: percentage((4 / @grid-columns)); }
85
+ .col-5 { width: percentage((5 / @grid-columns)); }
86
+ .col-6 { width: percentage((6 / @grid-columns)); }
87
+ .col-7 { width: percentage((7 / @grid-columns)); }
88
+ .col-8 { width: percentage((8 / @grid-columns)); }
89
+ .col-9 { width: percentage((9 / @grid-columns)); }
90
+ .col-10 { width: percentage((10/ @grid-columns)); }
91
+ .col-11 { width: percentage((11/ @grid-columns)); }
92
+ .col-12 { width: 100%; }
5
93
 
6
- // Fixed (940px)
7
- #grid > .core(@gridColumnWidth, @gridGutterWidth);
94
+ // Small device columns (phones to tablets)
95
+ @media (min-width: @screen-tablet) {
96
+ .container {
97
+ max-width: @container-tablet;
98
+ }
99
+
100
+ .col-sm-1,
101
+ .col-sm-2,
102
+ .col-sm-3,
103
+ .col-sm-4,
104
+ .col-sm-5,
105
+ .col-sm-6,
106
+ .col-sm-7,
107
+ .col-sm-8,
108
+ .col-sm-9,
109
+ .col-sm-10,
110
+ .col-sm-11,
111
+ .col-sm-12 {
112
+ float: left;
113
+ }
114
+ .col-sm-1 { width: percentage((1 / @grid-columns)); }
115
+ .col-sm-2 { width: percentage((2 / @grid-columns)); }
116
+ .col-sm-3 { width: percentage((3 / @grid-columns)); }
117
+ .col-sm-4 { width: percentage((4 / @grid-columns)); }
118
+ .col-sm-5 { width: percentage((5 / @grid-columns)); }
119
+ .col-sm-6 { width: percentage((6 / @grid-columns)); }
120
+ .col-sm-7 { width: percentage((7 / @grid-columns)); }
121
+ .col-sm-8 { width: percentage((8 / @grid-columns)); }
122
+ .col-sm-9 { width: percentage((9 / @grid-columns)); }
123
+ .col-sm-10 { width: percentage((10/ @grid-columns)); }
124
+ .col-sm-11 { width: percentage((11/ @grid-columns)); }
125
+ .col-sm-12 { width: 100%; }
126
+
127
+ // Push and pull columns for source order changes
128
+ .col-push-1 { left: percentage((1 / @grid-columns)); }
129
+ .col-push-2 { left: percentage((2 / @grid-columns)); }
130
+ .col-push-3 { left: percentage((3 / @grid-columns)); }
131
+ .col-push-4 { left: percentage((4 / @grid-columns)); }
132
+ .col-push-5 { left: percentage((5 / @grid-columns)); }
133
+ .col-push-6 { left: percentage((6 / @grid-columns)); }
134
+ .col-push-7 { left: percentage((7 / @grid-columns)); }
135
+ .col-push-8 { left: percentage((8 / @grid-columns)); }
136
+ .col-push-9 { left: percentage((9 / @grid-columns)); }
137
+ .col-push-10 { left: percentage((10/ @grid-columns)); }
138
+ .col-push-11 { left: percentage((11/ @grid-columns)); }
139
+
140
+ .col-pull-1 { right: percentage((1 / @grid-columns)); }
141
+ .col-pull-2 { right: percentage((2 / @grid-columns)); }
142
+ .col-pull-3 { right: percentage((3 / @grid-columns)); }
143
+ .col-pull-4 { right: percentage((4 / @grid-columns)); }
144
+ .col-pull-5 { right: percentage((5 / @grid-columns)); }
145
+ .col-pull-6 { right: percentage((6 / @grid-columns)); }
146
+ .col-pull-7 { right: percentage((7 / @grid-columns)); }
147
+ .col-pull-8 { right: percentage((8 / @grid-columns)); }
148
+ .col-pull-9 { right: percentage((9 / @grid-columns)); }
149
+ .col-pull-10 { right: percentage((10/ @grid-columns)); }
150
+ .col-pull-11 { right: percentage((11/ @grid-columns)); }
151
+ }
8
152
 
9
- // Fluid (940px)
10
- #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
153
+ // Medium and large device columns (desktop and up)
154
+ @media (min-width: @screen-desktop) {
155
+ .container {
156
+ max-width: @container-desktop;
157
+ }
158
+ .col-lg-1,
159
+ .col-lg-2,
160
+ .col-lg-3,
161
+ .col-lg-4,
162
+ .col-lg-5,
163
+ .col-lg-6,
164
+ .col-lg-7,
165
+ .col-lg-8,
166
+ .col-lg-9,
167
+ .col-lg-10,
168
+ .col-lg-11,
169
+ .col-lg-12 {
170
+ float: left;
171
+ }
172
+ .col-lg-1 { width: percentage((1 / @grid-columns)); }
173
+ .col-lg-2 { width: percentage((2 / @grid-columns)); }
174
+ .col-lg-3 { width: percentage((3 / @grid-columns)); }
175
+ .col-lg-4 { width: percentage((4 / @grid-columns)); }
176
+ .col-lg-5 { width: percentage((5 / @grid-columns)); }
177
+ .col-lg-6 { width: percentage((6 / @grid-columns)); }
178
+ .col-lg-7 { width: percentage((7 / @grid-columns)); }
179
+ .col-lg-8 { width: percentage((8 / @grid-columns)); }
180
+ .col-lg-9 { width: percentage((9 / @grid-columns)); }
181
+ .col-lg-10 { width: percentage((10/ @grid-columns)); }
182
+ .col-lg-11 { width: percentage((11/ @grid-columns)); }
183
+ .col-lg-12 { width: 100%; }
11
184
 
12
- // Reset utility classes due to specificity
13
- [class*="span"].hide,
14
- .row-fluid [class*="span"].hide {
15
- display: none;
185
+ // Offsets
186
+ .col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
187
+ .col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
188
+ .col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
189
+ .col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
190
+ .col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
191
+ .col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
192
+ .col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
193
+ .col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
194
+ .col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
195
+ .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
196
+ .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
16
197
  }
17
198
 
18
- [class*="span"].pull-right,
19
- .row-fluid [class*="span"].pull-right {
20
- float: right;
199
+ // Large desktops and up
200
+ @media (min-width: @screen-large-desktop) {
201
+ .container {
202
+ max-width: @container-large-desktop;
203
+ }
21
204
  }
@@ -10,7 +10,6 @@
10
10
  .media,
11
11
  .media-body {
12
12
  overflow: hidden;
13
- *overflow: visible;
14
13
  zoom: 1;
15
14
  }
16
15
 
@@ -37,11 +36,13 @@
37
36
  // Media image alignment
38
37
  // -------------------------
39
38
 
40
- .media > .pull-left {
41
- margin-right: 10px;
42
- }
43
- .media > .pull-right {
44
- margin-left: 10px;
39
+ .media {
40
+ > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ > .pull-right {
44
+ margin-left: 10px;
45
+ }
45
46
  }
46
47
 
47
48
 
@@ -50,6 +51,6 @@
50
51
 
51
52
  // Undo default ul/ol styles
52
53
  .media-list {
53
- margin-left: 0;
54
+ padding-left: 0;
54
55
  list-style: none;
55
56
  }
@@ -3,21 +3,24 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // UTILITY MIXINS
7
- // --------------------------------------------------
6
+ // Utilities
7
+ // -------------------------
8
8
 
9
9
  // Clearfix
10
- // --------
11
- // For clearing floats like a boss h5bp.com/q
12
- .clearfix {
13
- *zoom: 1;
10
+ // Source: http://nicolasgallagher.com/micro-clearfix-hack/
11
+ //
12
+ // For modern browsers
13
+ // 1. The space content is one way to avoid an Opera bug when the
14
+ // contenteditable attribute is included anywhere else in the document.
15
+ // Otherwise it causes space to appear at the top and bottom of elements
16
+ // that are clearfixed.
17
+ // 2. The use of `table` rather than `block` is only necessary if using
18
+ // `:before` to contain the top-margins of child elements.
19
+ .clearfix() {
14
20
  &:before,
15
21
  &:after {
16
- display: table;
17
- content: "";
18
- // Fixes Opera/contenteditable bug:
19
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
- line-height: 0;
22
+ content: " "; /* 1 */
23
+ display: table; /* 2 */
21
24
  }
22
25
  &:after {
23
26
  clear: both;
@@ -25,7 +28,6 @@
25
28
  }
26
29
 
27
30
  // Webkit-style focus
28
- // ------------------
29
31
  .tab-focus() {
30
32
  // Default
31
33
  outline: thin dotted #333;
@@ -35,41 +37,14 @@
35
37
  }
36
38
 
37
39
  // Center-align a block level element
38
- // ----------------------------------
39
40
  .center-block() {
40
41
  display: block;
41
42
  margin-left: auto;
42
43
  margin-right: auto;
43
44
  }
44
45
 
45
- // IE7 inline-block
46
- // ----------------
47
- .ie7-inline-block() {
48
- *display: inline; /* IE7 inline-block hack */
49
- *zoom: 1;
50
- }
51
-
52
- // IE7 likes to collapse whitespace on either side of the inline-block elements.
53
- // Ems because we're attempting to match the width of a space character. Left
54
- // version is for form buttons, which typically come after other elements, and
55
- // right version is for icons, which come before. Applying both is ok, but it will
56
- // mean that space between those elements will be .6em (~2 space characters) in IE7,
57
- // instead of the 1 space in other browsers.
58
- .ie7-restore-left-whitespace() {
59
- *margin-left: .3em;
60
-
61
- &:first-child {
62
- *margin-left: 0;
63
- }
64
- }
65
-
66
- .ie7-restore-right-whitespace() {
67
- *margin-right: .3em;
68
- }
69
-
70
46
  // Sizing shortcuts
71
- // -------------------------
72
- .size(@height, @width) {
47
+ .size(@width, @height) {
73
48
  width: @width;
74
49
  height: @height;
75
50
  }
@@ -78,21 +53,14 @@
78
53
  }
79
54
 
80
55
  // Placeholder text
81
- // -------------------------
82
- .placeholder(@color: @placeholderText) {
83
- &:-moz-placeholder {
84
- color: @color;
85
- }
86
- &:-ms-input-placeholder {
87
- color: @color;
88
- }
89
- &::-webkit-input-placeholder {
90
- color: @color;
91
- }
56
+ .placeholder(@color: @input-color-placeholder) {
57
+ &:-moz-placeholder { color: @color; } // Firefox 4-18
58
+ &::-moz-placeholder { color: @color; } // Firefox 19+
59
+ &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
60
+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
92
61
  }
93
62
 
94
63
  // Text overflow
95
- // -------------------------
96
64
  // Requires inline-block or block for proper styling
97
65
  .text-overflow() {
98
66
  overflow: hidden;
@@ -101,10 +69,9 @@
101
69
  }
102
70
 
103
71
  // CSS image replacement
104
- // -------------------------
105
72
  // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
106
- .hide-text {
107
- font: 0/0 a;
73
+ .hide-text() {
74
+ font: ~"0/0" a;
108
75
  color: transparent;
109
76
  text-shadow: none;
110
77
  background-color: transparent;
@@ -112,209 +79,83 @@
112
79
  }
113
80
 
114
81
 
115
- // FONTS
116
- // --------------------------------------------------
117
-
118
- #font {
119
- #family {
120
- .serif() {
121
- font-family: @serifFontFamily;
122
- }
123
- .sans-serif() {
124
- font-family: @sansFontFamily;
125
- }
126
- .monospace() {
127
- font-family: @monoFontFamily;
128
- }
129
- }
130
- .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
131
- font-size: @size;
132
- font-weight: @weight;
133
- line-height: @lineHeight;
134
- }
135
- .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136
- #font > #family > .serif;
137
- #font > .shorthand(@size, @weight, @lineHeight);
138
- }
139
- .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140
- #font > #family > .sans-serif;
141
- #font > .shorthand(@size, @weight, @lineHeight);
142
- }
143
- .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
144
- #font > #family > .monospace;
145
- #font > .shorthand(@size, @weight, @lineHeight);
146
- }
147
- }
148
-
149
-
150
- // FORMS
151
- // --------------------------------------------------
152
-
153
- // Block level inputs
154
- .input-block-level {
155
- display: block;
156
- width: 100%;
157
- min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
158
- .box-sizing(border-box); // Makes inputs behave like true block-level elements
159
- }
160
-
161
-
162
-
163
- // Mixin for form field states
164
- .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
165
- // Set the text color
166
- .control-label,
167
- .help-block,
168
- .help-inline {
169
- color: @textColor;
170
- }
171
- // Style inputs accordingly
172
- .checkbox,
173
- .radio,
174
- input,
175
- select,
176
- textarea {
177
- color: @textColor;
178
- }
179
- input,
180
- select,
181
- textarea {
182
- border-color: @borderColor;
183
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
184
- &:focus {
185
- border-color: darken(@borderColor, 10%);
186
- @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
187
- .box-shadow(@shadow);
188
- }
189
- }
190
- // Give a small background color for input-prepend/-append
191
- .input-prepend .add-on,
192
- .input-append .add-on {
193
- color: @textColor;
194
- background-color: @backgroundColor;
195
- border-color: @textColor;
196
- }
197
- }
198
-
199
-
200
82
 
201
83
  // CSS3 PROPERTIES
202
84
  // --------------------------------------------------
203
85
 
204
- // Border Radius
205
- .border-radius(@radius) {
206
- -webkit-border-radius: @radius;
207
- -moz-border-radius: @radius;
208
- border-radius: @radius;
209
- }
210
-
211
- // Single Corner Border Radius
212
- .border-top-left-radius(@radius) {
213
- -webkit-border-top-left-radius: @radius;
214
- -moz-border-radius-topleft: @radius;
215
- border-top-left-radius: @radius;
216
- }
217
- .border-top-right-radius(@radius) {
218
- -webkit-border-top-right-radius: @radius;
219
- -moz-border-radius-topright: @radius;
220
- border-top-right-radius: @radius;
221
- }
222
- .border-bottom-right-radius(@radius) {
223
- -webkit-border-bottom-right-radius: @radius;
224
- -moz-border-radius-bottomright: @radius;
225
- border-bottom-right-radius: @radius;
226
- }
227
- .border-bottom-left-radius(@radius) {
228
- -webkit-border-bottom-left-radius: @radius;
229
- -moz-border-radius-bottomleft: @radius;
230
- border-bottom-left-radius: @radius;
231
- }
232
-
233
- // Single Side Border Radius
86
+ // Single side border-radius
234
87
  .border-top-radius(@radius) {
235
- .border-top-right-radius(@radius);
236
- .border-top-left-radius(@radius);
88
+ border-top-right-radius: @radius;
89
+ border-top-left-radius: @radius;
237
90
  }
238
91
  .border-right-radius(@radius) {
239
- .border-top-right-radius(@radius);
240
- .border-bottom-right-radius(@radius);
92
+ border-bottom-right-radius: @radius;
93
+ border-top-right-radius: @radius;
241
94
  }
242
95
  .border-bottom-radius(@radius) {
243
- .border-bottom-right-radius(@radius);
244
- .border-bottom-left-radius(@radius);
96
+ border-bottom-right-radius: @radius;
97
+ border-bottom-left-radius: @radius;
245
98
  }
246
99
  .border-left-radius(@radius) {
247
- .border-top-left-radius(@radius);
248
- .border-bottom-left-radius(@radius);
100
+ border-bottom-left-radius: @radius;
101
+ border-top-left-radius: @radius;
249
102
  }
250
103
 
251
104
  // Drop shadows
252
105
  .box-shadow(@shadow) {
253
- -webkit-box-shadow: @shadow;
254
- -moz-box-shadow: @shadow;
106
+ -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
255
107
  box-shadow: @shadow;
256
108
  }
257
109
 
258
110
  // Transitions
259
111
  .transition(@transition) {
260
112
  -webkit-transition: @transition;
261
- -moz-transition: @transition;
262
- -o-transition: @transition;
263
113
  transition: @transition;
264
114
  }
265
115
  .transition-delay(@transition-delay) {
266
116
  -webkit-transition-delay: @transition-delay;
267
- -moz-transition-delay: @transition-delay;
268
- -o-transition-delay: @transition-delay;
269
117
  transition-delay: @transition-delay;
270
118
  }
271
119
  .transition-duration(@transition-duration) {
272
120
  -webkit-transition-duration: @transition-duration;
273
- -moz-transition-duration: @transition-duration;
274
- -o-transition-duration: @transition-duration;
275
121
  transition-duration: @transition-duration;
276
122
  }
123
+ .transition-transform(@transition) {
124
+ -webkit-transition: -webkit-transform @transition;
125
+ -moz-transition: -moz-transform @transition;
126
+ -o-transition: -o-transform @transition;
127
+ transition: transform @transition;
128
+ }
277
129
 
278
130
  // Transformations
279
131
  .rotate(@degrees) {
280
132
  -webkit-transform: rotate(@degrees);
281
- -moz-transform: rotate(@degrees);
282
133
  -ms-transform: rotate(@degrees);
283
- -o-transform: rotate(@degrees);
284
134
  transform: rotate(@degrees);
285
135
  }
286
136
  .scale(@ratio) {
287
137
  -webkit-transform: scale(@ratio);
288
- -moz-transform: scale(@ratio);
289
138
  -ms-transform: scale(@ratio);
290
- -o-transform: scale(@ratio);
291
139
  transform: scale(@ratio);
292
140
  }
293
141
  .translate(@x, @y) {
294
142
  -webkit-transform: translate(@x, @y);
295
- -moz-transform: translate(@x, @y);
296
143
  -ms-transform: translate(@x, @y);
297
- -o-transform: translate(@x, @y);
298
144
  transform: translate(@x, @y);
299
145
  }
300
146
  .skew(@x, @y) {
301
147
  -webkit-transform: skew(@x, @y);
302
- -moz-transform: skew(@x, @y);
303
- -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
304
- -o-transform: skew(@x, @y);
148
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
305
149
  transform: skew(@x, @y);
306
- -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
307
150
  }
308
151
  .translate3d(@x, @y, @z) {
309
152
  -webkit-transform: translate3d(@x, @y, @z);
310
- -moz-transform: translate3d(@x, @y, @z);
311
- -o-transform: translate3d(@x, @y, @z);
312
153
  transform: translate3d(@x, @y, @z);
313
154
  }
314
155
 
315
156
  // Backface visibility
316
157
  // Prevent browsers from flickering when using CSS 3D transforms.
317
- // Default value is `visible`, but can be changed to `hidden
158
+ // Default value is `visible`, but can be changed to `hidden`
318
159
  // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
319
160
  .backface-visibility(@visibility){
320
161
  -webkit-backface-visibility: @visibility;
@@ -323,22 +164,15 @@
323
164
  }
324
165
 
325
166
  // Background clipping
326
- // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
327
167
  .background-clip(@clip) {
328
- -webkit-background-clip: @clip;
329
- -moz-background-clip: @clip;
330
168
  background-clip: @clip;
331
169
  }
332
170
 
333
171
  // Background sizing
334
172
  .background-size(@size) {
335
- -webkit-background-size: @size;
336
- -moz-background-size: @size;
337
- -o-background-size: @size;
338
173
  background-size: @size;
339
174
  }
340
175
 
341
-
342
176
  // Box sizing
343
177
  .box-sizing(@boxmodel) {
344
178
  -webkit-box-sizing: @boxmodel;
@@ -363,13 +197,13 @@
363
197
  }
364
198
 
365
199
  // CSS3 Content Columns
366
- .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
367
- -webkit-column-count: @columnCount;
368
- -moz-column-count: @columnCount;
369
- column-count: @columnCount;
370
- -webkit-column-gap: @columnGap;
371
- -moz-column-gap: @columnGap;
372
- column-gap: @columnGap;
200
+ .content-columns(@column-count, @column-gap: @grid-gutter-width) {
201
+ -webkit-column-count: @column-count;
202
+ -moz-column-count: @column-count;
203
+ column-count: @column-count;
204
+ -webkit-column-gap: @column-gap;
205
+ -moz-column-gap: @column-gap;
206
+ column-gap: @column-gap;
373
207
  }
374
208
 
375
209
  // Optional hyphenation
@@ -384,92 +218,79 @@
384
218
 
385
219
  // Opacity
386
220
  .opacity(@opacity) {
387
- opacity: @opacity / 100;
388
- filter: ~"alpha(opacity=@{opacity})";
221
+ opacity: @opacity;
222
+ // IE8 filter
223
+ @opacity-ie: (@opacity * 100);
224
+ filter: ~"alpha(opacity=@{opacity-ie})";
389
225
  }
390
226
 
391
227
 
392
228
 
393
- // BACKGROUNDS
229
+ // GRADIENTS
394
230
  // --------------------------------------------------
395
231
 
396
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
397
- #translucent {
398
- .background(@color: @white, @alpha: 1) {
399
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
400
- }
401
- .border(@color: @white, @alpha: 1) {
402
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
403
- .background-clip(padding-box);
404
- }
405
- }
406
-
407
- // Gradient Bar Colors for buttons and alerts
408
- .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
409
- color: @textColor;
410
- text-shadow: @textShadow;
411
- #gradient > .vertical(@primaryColor, @secondaryColor);
412
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
413
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
414
- }
415
-
416
- // Gradients
417
232
  #gradient {
418
- .horizontal(@startColor: #555, @endColor: #333) {
419
- background-color: @endColor;
420
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
421
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
422
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
423
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
424
- background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
233
+
234
+ // Horizontal gradient, from left to right
235
+ //
236
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
237
+ // Color stops are not available in IE9 and below.
238
+ .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
239
+ background-color: @end-color;
240
+ background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
241
+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
242
+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
243
+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
425
244
  background-repeat: repeat-x;
426
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
245
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
427
246
  }
428
- .vertical(@startColor: #555, @endColor: #333) {
429
- background-color: mix(@startColor, @endColor, 60%);
430
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
431
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
432
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
433
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
434
- background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
247
+
248
+ // Vertical gradient, from top to bottom
249
+ //
250
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
251
+ // Color stops are not available in IE9 and below.
252
+ .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
253
+ background-color: @end-color;
254
+ background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
255
+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
256
+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
257
+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
435
258
  background-repeat: repeat-x;
436
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
259
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
437
260
  }
438
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
439
- background-color: @endColor;
261
+
262
+ .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
263
+ background-color: @end-color;
440
264
  background-repeat: repeat-x;
441
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
442
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
443
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
444
- background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
265
+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
266
+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
267
+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
445
268
  }
446
- .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
447
- background-color: mix(@midColor, @endColor, 80%);
448
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
449
- background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
450
- background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
451
- background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
452
- background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
269
+ .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
270
+ background-color: mix(@mid-color, @end-color, 80%);
271
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
272
+ background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
273
+ background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
274
+ background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
453
275
  background-repeat: no-repeat;
454
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
276
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
455
277
  }
456
278
 
457
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
458
- background-color: mix(@midColor, @endColor, 80%);
459
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
460
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
461
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
462
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
463
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
279
+ .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
280
+ background-color: mix(@mid-color, @end-color, 80%);
281
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
282
+ background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
283
+ background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
284
+ background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
464
285
  background-repeat: no-repeat;
465
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
286
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
466
287
  }
467
- .radial(@innerColor: #555, @outerColor: #333) {
468
- background-color: @outerColor;
469
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
470
- background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
471
- background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
472
- background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
288
+ .radial(@inner-color: #555, @outer-color: #333) {
289
+ background-color: @outer-color;
290
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
291
+ background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
292
+ background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
293
+ background-image: radial-gradient(circle, @inner-color, @outer-color);
473
294
  background-repeat: no-repeat;
474
295
  }
475
296
  .striped(@color: #555, @angle: 45deg) {
@@ -477,56 +298,107 @@
477
298
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
478
299
  background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
479
300
  background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
480
- background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
481
301
  background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
482
302
  }
483
303
  }
304
+
484
305
  // Reset filters for IE
306
+ //
307
+ // When you need to remove a gradient background, don't forget to use this to reset
308
+ // the IE filter for IE9 and below.
485
309
  .reset-filter() {
486
310
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
487
311
  }
488
312
 
489
313
 
490
314
 
315
+ // RETINA IMAGE SUPPORT
316
+ // --------------------------------------------------
317
+
318
+ // Short retina mixin for setting background-image and -size
319
+ .img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
320
+ background-image: asset-url("@{file-1x}");
321
+
322
+ @media
323
+ only screen and (-webkit-min-device-pixel-ratio: 2),
324
+ only screen and ( min--moz-device-pixel-ratio: 2),
325
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
326
+ only screen and ( min-device-pixel-ratio: 2),
327
+ only screen and ( min-resolution: 192dpi),
328
+ only screen and ( min-resolution: 2dppx) {
329
+ background-image: asset-url("@{file-2x}");
330
+ background-size: @width-1x @height-1x;
331
+ }
332
+ }
333
+
334
+
491
335
  // COMPONENT MIXINS
492
336
  // --------------------------------------------------
493
337
 
494
338
  // Horizontal dividers
495
339
  // -------------------------
496
340
  // Dividers (basically an hr) within dropdowns and nav lists
497
- .nav-divider(@top: #e5e5e5, @bottom: @white) {
498
- // IE7 needs a set width since we gave a height. Restricting just
499
- // to IE7 to keep the 1px left/right space in other browsers.
500
- // It is unclear where IE is getting the extra space that we need
501
- // to negative-margin away, but so it goes.
502
- *width: 100%;
341
+ .nav-divider(@color: #e5e5e5) {
503
342
  height: 1px;
504
- margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
505
- *margin: -5px 0 5px;
343
+ margin: ((@line-height-computed / 2) - 1) 0;
506
344
  overflow: hidden;
507
- background-color: @top;
508
- border-bottom: 1px solid @bottom;
509
- }
510
-
511
- // Button backgrounds
512
- // ------------------
513
- .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
514
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
515
- .gradientBar(@startColor, @endColor, @textColor, @textShadow);
516
- *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
517
- .reset-filter();
518
-
519
- // in these cases the gradient won't cover the background, so we override
520
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
521
- color: @textColor;
522
- background-color: @endColor;
523
- *background-color: darken(@endColor, 5%);
345
+ background-color: @color;
346
+ }
347
+
348
+ // Alerts
349
+ // -------------------------
350
+ .alert-variant(@background, @border, @text-color) {
351
+ background-color: @background;
352
+ border-color: @border;
353
+ color: @text-color;
354
+ hr {
355
+ border-top-color: darken(@border, 5%);
356
+ }
357
+ .alert-link {
358
+ color: darken(@text-color, 10%);
524
359
  }
360
+ }
525
361
 
526
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
362
+ // Button pseudo states
363
+ // -------------------------
364
+ // Easily pump out default styles, as well as :hover, :focus, :active,
365
+ // and disabled options for all buttons
366
+ .btn-pseudo-states(@color, @background, @border) {
367
+ color: @color;
368
+ background-color: @background;
369
+ border-color: @border;
370
+
371
+ &:hover,
372
+ &:focus,
527
373
  &:active,
528
374
  &.active {
529
- background-color: darken(@endColor, 10%) e("\9");
375
+ background-color: darken(@background, 5%);
376
+ border-color: darken(@border, 10%);
377
+ }
378
+
379
+ &.disabled,
380
+ &[disabled],
381
+ fieldset[disabled] & {
382
+ &,
383
+ &:hover,
384
+ &:focus,
385
+ &:active,
386
+ &.active {
387
+ background-color: @background;
388
+ border-color: @border
389
+ }
390
+ }
391
+ }
392
+
393
+ // Labels
394
+ // -------------------------
395
+ .label-variant(@color) {
396
+ background-color: @color;
397
+ &[href] {
398
+ &:hover,
399
+ &:focus {
400
+ background-color: darken(@color, 10%);
401
+ }
530
402
  }
531
403
  }
532
404
 
@@ -534,11 +406,36 @@
534
406
  // -------------------------
535
407
  // Vertically center elements in the navbar.
536
408
  // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
537
- .navbarVerticalAlign(@elementHeight) {
538
- margin-top: (@navbarHeight - @elementHeight) / 2;
409
+ .navbar-vertical-align(@element-height) {
410
+ margin-top: ((@navbar-height - @element-height) / 2);
411
+ margin-bottom: ((@navbar-height - @element-height) / 2);
539
412
  }
540
413
 
414
+ // Progress bars
415
+ // -------------------------
416
+ .progress-bar-variant(@color) {
417
+ background-color: @color;
418
+ .progress-striped & {
419
+ #gradient > .striped(@color);
420
+ }
421
+ }
541
422
 
423
+ // Responsive utilities
424
+ // -------------------------
425
+ // More easily include all the states for responsive-utilities.less.
426
+ .responsive-visibility() {
427
+ display: block !important;
428
+ tr& { display: table-row !important; }
429
+ th&,
430
+ td& { display: table-cell !important; }
431
+ }
432
+
433
+ .responsive-invisibility() {
434
+ display: none !important;
435
+ tr& { display: none !important; }
436
+ th&,
437
+ td& { display: none !important; }
438
+ }
542
439
 
543
440
  // Grid System
544
441
  // -----------
@@ -550,153 +447,100 @@
550
447
  .clearfix();
551
448
  }
552
449
 
553
- // Table columns
554
- .tableColumns(@columnSpan: 1) {
555
- float: none; // undo default grid column styles
556
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
557
- margin-left: 0; // undo default grid column styles
558
- }
559
-
560
- // Make a Grid
561
- // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
562
- .makeRow() {
563
- margin-left: @gridGutterWidth * -1;
450
+ // Creates a wrapper for a series of columns
451
+ .make-row() {
452
+ // Then clear the floated columns
564
453
  .clearfix();
565
- }
566
- .makeColumn(@columns: 1, @offset: 0) {
567
- float: left;
568
- margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
569
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
570
- }
571
-
572
- // The Grid
573
- #grid {
574
-
575
- .core (@gridColumnWidth, @gridGutterWidth) {
576
-
577
- .spanX (@index) when (@index > 0) {
578
- .span@{index} { .span(@index); }
579
- .spanX(@index - 1);
580
- }
581
- .spanX (0) {}
582
-
583
- .offsetX (@index) when (@index > 0) {
584
- .offset@{index} { .offset(@index); }
585
- .offsetX(@index - 1);
586
- }
587
- .offsetX (0) {}
588
-
589
- .offset (@columns) {
590
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
591
- }
592
-
593
- .span (@columns) {
594
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
595
- }
596
-
597
- .row {
598
- margin-left: @gridGutterWidth * -1;
599
- .clearfix();
600
- }
601
-
602
- [class*="span"] {
603
- float: left;
604
- min-height: 1px; // prevent collapsing columns
605
- margin-left: @gridGutterWidth;
606
- }
607
-
608
- // Set the container width, and override it for fixed navbars in media queries
609
- .container,
610
- .navbar-static-top .container,
611
- .navbar-fixed-top .container,
612
- .navbar-fixed-bottom .container { .span(@gridColumns); }
613
-
614
- // generate .spanX and .offsetX
615
- .spanX (@gridColumns);
616
- .offsetX (@gridColumns);
617
454
 
455
+ @media (min-width: @screen-small) {
456
+ margin-left: (@grid-gutter-width / -2);
457
+ margin-right: (@grid-gutter-width / -2);
618
458
  }
619
459
 
620
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
621
-
622
- .spanX (@index) when (@index > 0) {
623
- .span@{index} { .span(@index); }
624
- .spanX(@index - 1);
625
- }
626
- .spanX (0) {}
627
-
628
- .offsetX (@index) when (@index > 0) {
629
- .offset@{index} { .offset(@index); }
630
- .offset@{index}:first-child { .offsetFirstChild(@index); }
631
- .offsetX(@index - 1);
632
- }
633
- .offsetX (0) {}
634
-
635
- .offset (@columns) {
636
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
637
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
638
- }
639
-
640
- .offsetFirstChild (@columns) {
641
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
642
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
643
- }
460
+ // Negative margin nested rows out to align the content of columns
461
+ .row {
462
+ margin-left: (@grid-gutter-width / -2);
463
+ margin-right: (@grid-gutter-width / -2);
464
+ }
465
+ }
644
466
 
645
- .span (@columns) {
646
- width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
647
- *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
648
- }
649
-
650
- .row-fluid {
651
- width: 100%;
652
- .clearfix();
653
- [class*="span"] {
654
- .input-block-level();
655
- float: left;
656
- margin-left: @fluidGridGutterWidth;
657
- *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
658
- }
659
- [class*="span"]:first-child {
660
- margin-left: 0;
661
- }
662
-
663
- // Space grid-sized controls properly if multiple per line
664
- .controls-row [class*="span"] + [class*="span"] {
665
- margin-left: @fluidGridGutterWidth;
666
- }
667
-
668
- // generate .spanX and .offsetX
669
- .spanX (@gridColumns);
670
- .offsetX (@gridColumns);
671
- }
467
+ // Generate the columns
468
+ .make-column(@columns) {
469
+ position: relative;
470
+ // Prevent columns from collapsing when empty
471
+ min-height: 1px;
472
+ // Inner gutter via padding
473
+ padding-left: (@grid-gutter-width / 2);
474
+ padding-right: (@grid-gutter-width / 2);
672
475
 
476
+ // Calculate width based on number of columns available
477
+ @media (min-width: @grid-float-breakpoint) {
478
+ float: left;
479
+ width: percentage((@columns / @grid-columns));
673
480
  }
481
+ }
674
482
 
675
- .input(@gridColumnWidth, @gridGutterWidth) {
483
+ // Generate the column offsets
484
+ .make-column-offset(@columns) {
485
+ @media (min-width: @grid-float-breakpoint) {
486
+ margin-left: percentage((@columns / @grid-columns));
487
+ }
488
+ }
489
+ .make-column-push(@columns) {
490
+ @media (min-width: @grid-float-breakpoint) {
491
+ left: percentage((@columns / @grid-columns));
492
+ }
493
+ }
494
+ .make-column-pull(@columns) {
495
+ @media (min-width: @grid-float-breakpoint) {
496
+ right: percentage((@columns / @grid-columns));
497
+ }
498
+ }
676
499
 
677
- .spanX (@index) when (@index > 0) {
678
- input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
679
- .spanX(@index - 1);
680
- }
681
- .spanX (0) {}
500
+ // Generate the small columns
501
+ .make-small-column(@columns) {
502
+ position: relative;
503
+ float: left;
504
+ // Prevent columns from collapsing when empty
505
+ min-height: 1px;
506
+ // Inner gutter via padding
507
+ padding-left: (@grid-gutter-width / 2);
508
+ padding-right: (@grid-gutter-width / 2);
509
+ @max-width: (@grid-float-breakpoint - 1);
510
+
511
+ // Calculate width based on number of columns available
512
+ @media (max-width: @max-width) {
513
+ width: percentage((@columns / @grid-columns));
514
+ }
515
+ }
682
516
 
683
- .span(@columns) {
684
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
685
- }
686
517
 
687
- input,
688
- textarea,
689
- .uneditable-input {
690
- margin-left: 0; // override margin-left from core grid system
691
- }
518
+ // Form validation states
519
+ //
520
+ // Used in forms.less to generate the form validation CSS for warnings, errors,
521
+ // and successes.
692
522
 
693
- // Space grid-sized controls properly if multiple per line
694
- .controls-row [class*="span"] + [class*="span"] {
695
- margin-left: @gridGutterWidth;
523
+ .form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
524
+ // Color the label and help text
525
+ .help-block,
526
+ .control-label {
527
+ color: @text-color;
528
+ }
529
+ // Set the border and box shadow on specific inputs to match
530
+ .form-control {
531
+ padding-right: 32px; // to account for the feedback icon
532
+ border-color: @border-color;
533
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
534
+ &:focus {
535
+ border-color: darken(@border-color, 10%);
536
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
537
+ .box-shadow(@shadow);
696
538
  }
697
-
698
- // generate .spanX
699
- .spanX (@gridColumns);
700
-
539
+ }
540
+ // Set validation states also for addons
541
+ .input-group-addon {
542
+ color: @text-color;
543
+ border-color: @border-color;
544
+ background-color: @background-color;
701
545
  }
702
546
  }