bootstrapped 1.0.1 → 2.0.3
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.
- data/.gitmodules +3 -0
- data/README.rdoc +7 -1
- data/bootstrapped.gemspec +1 -1
- data/lib/bootstrapped/engine.rb +1 -1
- data/lib/bootstrapped/version.rb +2 -1
- data/vendor/assets/javascripts/bootstrap-alert.js +28 -29
- data/vendor/assets/javascripts/bootstrap-button.js +32 -34
- data/vendor/assets/javascripts/bootstrap-carousel.js +34 -19
- data/vendor/assets/javascripts/bootstrap-collapse.js +47 -26
- data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
- data/vendor/assets/javascripts/bootstrap-modal.js +26 -18
- data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
- data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
- data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
- data/vendor/assets/javascripts/bootstrap-transition.js +31 -21
- data/vendor/assets/javascripts/bootstrap-typeahead.js +30 -16
- data/vendor/assets/stylesheets/twitter/bootstrap/static/bootstrap-responsive.css +808 -0
- data/vendor/assets/stylesheets/twitter/bootstrap/static/bootstrap.css +2314 -850
- data/vendor/less/twitter/bootstrap/less/accordion.less +5 -0
- data/vendor/less/twitter/bootstrap/less/alerts.less +2 -14
- data/vendor/less/twitter/bootstrap/less/bootstrap.less +2 -2
- data/vendor/less/twitter/bootstrap/less/breadcrumbs.less +3 -1
- data/vendor/less/twitter/bootstrap/less/button-groups.less +78 -34
- data/vendor/less/twitter/bootstrap/less/buttons.less +53 -27
- data/vendor/less/twitter/bootstrap/less/carousel.less +0 -0
- data/vendor/less/twitter/bootstrap/less/close.less +12 -1
- data/vendor/less/twitter/bootstrap/less/code.less +18 -5
- data/vendor/less/twitter/bootstrap/less/component-animations.less +9 -7
- data/vendor/less/twitter/bootstrap/less/dropdowns.less +59 -47
- data/vendor/less/twitter/bootstrap/less/forms.less +167 -98
- data/vendor/less/twitter/bootstrap/less/grid.less +2 -5
- data/vendor/less/twitter/bootstrap/less/hero-unit.less +3 -1
- data/vendor/less/twitter/bootstrap/less/labels-badges.less +55 -0
- data/vendor/less/twitter/bootstrap/less/layouts.less +1 -1
- data/vendor/less/twitter/bootstrap/less/mixins.less +261 -167
- data/vendor/less/twitter/bootstrap/less/modals.less +22 -4
- data/vendor/less/twitter/bootstrap/less/navbar.less +147 -75
- data/vendor/less/twitter/bootstrap/less/navs.less +72 -53
- data/vendor/less/twitter/bootstrap/less/pager.less +6 -0
- data/vendor/less/twitter/bootstrap/less/pagination.less +1 -0
- data/vendor/less/twitter/bootstrap/less/popovers.less +0 -0
- data/vendor/less/twitter/bootstrap/less/progress-bars.less +27 -5
- data/vendor/less/twitter/bootstrap/less/reset.less +4 -4
- data/vendor/less/twitter/bootstrap/less/responsive-1200px-min.less +26 -0
- data/vendor/less/twitter/bootstrap/less/responsive-767px-max.less +149 -0
- data/vendor/less/twitter/bootstrap/less/responsive-768px-979px.less +17 -0
- data/vendor/less/twitter/bootstrap/less/responsive-navbar.less +146 -0
- data/vendor/less/twitter/bootstrap/less/responsive-utilities.less +41 -0
- data/vendor/less/twitter/bootstrap/less/responsive.less +14 -289
- data/vendor/less/twitter/bootstrap/less/scaffolding.less +4 -4
- data/vendor/less/twitter/bootstrap/less/sprites.less +47 -12
- data/vendor/less/twitter/bootstrap/less/tables.less +59 -22
- data/vendor/less/twitter/bootstrap/less/thumbnails.less +15 -3
- data/vendor/less/twitter/bootstrap/less/tooltip.less +0 -0
- data/vendor/less/twitter/bootstrap/less/type.less +30 -12
- data/vendor/less/twitter/bootstrap/less/utilities.less +0 -0
- data/vendor/less/twitter/bootstrap/less/variables.less +119 -13
- data/vendor/less/twitter/bootstrap/less/wells.less +10 -0
- metadata +30 -22
@@ -4,17 +4,19 @@
|
|
4
4
|
.hero-unit {
|
5
5
|
padding: 60px;
|
6
6
|
margin-bottom: 30px;
|
7
|
-
background-color:
|
7
|
+
background-color: @heroUnitBackground;
|
8
8
|
.border-radius(6px);
|
9
9
|
h1 {
|
10
10
|
margin-bottom: 0;
|
11
11
|
font-size: 60px;
|
12
12
|
line-height: 1;
|
13
|
+
color: @heroUnitHeadingColor;
|
13
14
|
letter-spacing: -1px;
|
14
15
|
}
|
15
16
|
p {
|
16
17
|
font-size: 18px;
|
17
18
|
font-weight: 200;
|
18
19
|
line-height: @baseLineHeight * 1.5;
|
20
|
+
color: @heroUnitLeadColor;
|
19
21
|
}
|
20
22
|
}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
// LABELS & BADGES
|
2
|
+
// ---------------
|
3
|
+
|
4
|
+
// Base classes
|
5
|
+
.label,
|
6
|
+
.badge {
|
7
|
+
font-size: @baseFontSize * .846;
|
8
|
+
font-weight: bold;
|
9
|
+
line-height: 14px; // ensure proper line-height if floated
|
10
|
+
color: @white;
|
11
|
+
vertical-align: baseline;
|
12
|
+
white-space: nowrap;
|
13
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
14
|
+
background-color: @grayLight;
|
15
|
+
}
|
16
|
+
// Set unique padding and border-radii
|
17
|
+
.label {
|
18
|
+
padding: 1px 4px 2px;
|
19
|
+
.border-radius(3px);
|
20
|
+
}
|
21
|
+
.badge {
|
22
|
+
padding: 1px 9px 2px;
|
23
|
+
.border-radius(9px);
|
24
|
+
}
|
25
|
+
|
26
|
+
// Hover state, but only for links
|
27
|
+
a {
|
28
|
+
&.label:hover,
|
29
|
+
&.badge:hover {
|
30
|
+
color: @white;
|
31
|
+
text-decoration: none;
|
32
|
+
cursor: pointer;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
// Colors
|
37
|
+
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
|
38
|
+
.label,
|
39
|
+
.badge {
|
40
|
+
// Important (red)
|
41
|
+
&-important { background-color: @errorText; }
|
42
|
+
&-important[href] { background-color: darken(@errorText, 10%); }
|
43
|
+
// Warnings (orange)
|
44
|
+
&-warning { background-color: @orange; }
|
45
|
+
&-warning[href] { background-color: darken(@orange, 10%); }
|
46
|
+
// Success (green)
|
47
|
+
&-success { background-color: @successText; }
|
48
|
+
&-success[href] { background-color: darken(@successText, 10%); }
|
49
|
+
// Info (turquoise)
|
50
|
+
&-info { background-color: @infoText; }
|
51
|
+
&-info[href] { background-color: darken(@infoText, 10%); }
|
52
|
+
// Inverse (black)
|
53
|
+
&-inverse { background-color: @grayDark; }
|
54
|
+
&-inverse[href] { background-color: darken(@grayDark, 10%); }
|
55
|
+
}
|
@@ -9,7 +9,7 @@
|
|
9
9
|
// Clearfix
|
10
10
|
// --------
|
11
11
|
// For clearing floats like a boss h5bp.com/q
|
12
|
-
.clearfix
|
12
|
+
.clearfix {
|
13
13
|
*zoom: 1;
|
14
14
|
&:before,
|
15
15
|
&:after {
|
@@ -25,7 +25,7 @@
|
|
25
25
|
// ------------------
|
26
26
|
.tab-focus() {
|
27
27
|
// Default
|
28
|
-
outline: thin dotted;
|
28
|
+
outline: thin dotted #333;
|
29
29
|
// Webkit
|
30
30
|
outline: 5px auto -webkit-focus-ring-color;
|
31
31
|
outline-offset: -2px;
|
@@ -70,11 +70,11 @@
|
|
70
70
|
|
71
71
|
// Sizing shortcuts
|
72
72
|
// -------------------------
|
73
|
-
.size(@height
|
73
|
+
.size(@height, @width) {
|
74
74
|
width: @width;
|
75
75
|
height: @height;
|
76
76
|
}
|
77
|
-
.square(@size
|
77
|
+
.square(@size) {
|
78
78
|
.size(@size, @size);
|
79
79
|
}
|
80
80
|
|
@@ -89,6 +89,25 @@
|
|
89
89
|
}
|
90
90
|
}
|
91
91
|
|
92
|
+
// Text overflow
|
93
|
+
// -------------------------
|
94
|
+
// Requires inline-block or block for proper styling
|
95
|
+
.text-overflow() {
|
96
|
+
overflow: hidden;
|
97
|
+
text-overflow: ellipsis;
|
98
|
+
white-space: nowrap;
|
99
|
+
}
|
100
|
+
|
101
|
+
// CSS image replacement
|
102
|
+
// -------------------------
|
103
|
+
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
104
|
+
.hide-text {
|
105
|
+
font: 0/0 a;
|
106
|
+
color: transparent;
|
107
|
+
text-shadow: none;
|
108
|
+
background-color: transparent;
|
109
|
+
border: 0;
|
110
|
+
}
|
92
111
|
|
93
112
|
|
94
113
|
// FONTS
|
@@ -97,13 +116,13 @@
|
|
97
116
|
#font {
|
98
117
|
#family {
|
99
118
|
.serif() {
|
100
|
-
font-family:
|
119
|
+
font-family: @serifFontFamily;
|
101
120
|
}
|
102
121
|
.sans-serif() {
|
103
|
-
font-family:
|
122
|
+
font-family: @sansFontFamily;
|
104
123
|
}
|
105
124
|
.monospace() {
|
106
|
-
font-family:
|
125
|
+
font-family: @monoFontFamily;
|
107
126
|
}
|
108
127
|
}
|
109
128
|
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
@@ -126,140 +145,43 @@
|
|
126
145
|
}
|
127
146
|
|
128
147
|
|
129
|
-
|
130
|
-
// GRID SYSTEM
|
148
|
+
// FORMS
|
131
149
|
// --------------------------------------------------
|
132
150
|
|
133
|
-
//
|
134
|
-
|
135
|
-
|
136
|
-
width:
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
//
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
.
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
.row {
|
160
|
-
margin-left: @gridGutterWidth * -1;
|
161
|
-
.clearfix();
|
162
|
-
}
|
163
|
-
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
164
|
-
[class*="span"] {
|
165
|
-
#gridSystem > .gridColumn(@gridGutterWidth);
|
166
|
-
}
|
167
|
-
// Default columns
|
168
|
-
.span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
169
|
-
.span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
170
|
-
.span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
171
|
-
.span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
172
|
-
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
173
|
-
.span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
174
|
-
.span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
175
|
-
.span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
176
|
-
.span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
177
|
-
.span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
178
|
-
.span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
179
|
-
.span12,
|
180
|
-
.container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
181
|
-
// Offset column options
|
182
|
-
.offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
|
183
|
-
.offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
|
184
|
-
.offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
|
185
|
-
.offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
|
186
|
-
.offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
|
187
|
-
.offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
|
188
|
-
.offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
|
189
|
-
.offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
|
190
|
-
.offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
|
191
|
-
.offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
|
192
|
-
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
|
193
|
-
}
|
194
|
-
}
|
195
|
-
|
196
|
-
// Fluid grid system
|
197
|
-
// -------------------------
|
198
|
-
#fluidGridSystem {
|
199
|
-
// Setup the mixins to be used
|
200
|
-
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
|
201
|
-
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
202
|
-
}
|
203
|
-
.gridColumn(@fluidGridGutterWidth) {
|
204
|
-
float: left;
|
205
|
-
margin-left: @fluidGridGutterWidth;
|
206
|
-
}
|
207
|
-
// Take these values and mixins, and make 'em do their thang
|
208
|
-
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
|
209
|
-
// Row surrounds the columns
|
210
|
-
.row-fluid {
|
211
|
-
width: 100%;
|
212
|
-
.clearfix();
|
213
|
-
|
214
|
-
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
215
|
-
> [class*="span"] {
|
216
|
-
#fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
|
217
|
-
}
|
218
|
-
> [class*="span"]:first-child {
|
219
|
-
margin-left: 0;
|
220
|
-
}
|
221
|
-
// Default columns
|
222
|
-
.span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
|
223
|
-
.span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
|
224
|
-
.span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
|
225
|
-
.span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
|
226
|
-
.span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
|
227
|
-
.span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
|
228
|
-
.span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
|
229
|
-
.span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
|
230
|
-
.span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
|
231
|
-
.span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
|
232
|
-
.span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
|
233
|
-
.span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
|
151
|
+
// Block level inputs
|
152
|
+
.input-block-level {
|
153
|
+
display: block;
|
154
|
+
width: 100%;
|
155
|
+
min-height: 28px; // Make inputs at least the height of their button counterpart
|
156
|
+
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
157
|
+
}
|
158
|
+
|
159
|
+
|
160
|
+
// Mixin for form field states
|
161
|
+
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
|
162
|
+
// Set the text color
|
163
|
+
> label,
|
164
|
+
.help-block,
|
165
|
+
.help-inline {
|
166
|
+
color: @textColor;
|
167
|
+
}
|
168
|
+
// Style inputs accordingly
|
169
|
+
input,
|
170
|
+
select,
|
171
|
+
textarea {
|
172
|
+
color: @textColor;
|
173
|
+
border-color: @borderColor;
|
174
|
+
&:focus {
|
175
|
+
border-color: darken(@borderColor, 10%);
|
176
|
+
.box-shadow(0 0 6px lighten(@borderColor, 20%));
|
234
177
|
}
|
235
178
|
}
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
#inputGridSystem {
|
243
|
-
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
|
244
|
-
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
|
245
|
-
}
|
246
|
-
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
|
247
|
-
input,
|
248
|
-
textarea,
|
249
|
-
.uneditable-input {
|
250
|
-
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
251
|
-
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
252
|
-
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
253
|
-
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
254
|
-
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
255
|
-
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
256
|
-
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
257
|
-
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
258
|
-
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
259
|
-
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
260
|
-
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
261
|
-
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
262
|
-
}
|
179
|
+
// Give a small background color for input-prepend/-append
|
180
|
+
.input-prepend .add-on,
|
181
|
+
.input-append .add-on {
|
182
|
+
color: @textColor;
|
183
|
+
background-color: @backgroundColor;
|
184
|
+
border-color: @textColor;
|
263
185
|
}
|
264
186
|
}
|
265
187
|
|
@@ -269,14 +191,14 @@
|
|
269
191
|
// --------------------------------------------------
|
270
192
|
|
271
193
|
// Border Radius
|
272
|
-
.border-radius(@radius
|
194
|
+
.border-radius(@radius) {
|
273
195
|
-webkit-border-radius: @radius;
|
274
196
|
-moz-border-radius: @radius;
|
275
197
|
border-radius: @radius;
|
276
198
|
}
|
277
199
|
|
278
200
|
// Drop shadows
|
279
|
-
.box-shadow(@shadow
|
201
|
+
.box-shadow(@shadow) {
|
280
202
|
-webkit-box-shadow: @shadow;
|
281
203
|
-moz-box-shadow: @shadow;
|
282
204
|
box-shadow: @shadow;
|
@@ -306,27 +228,38 @@
|
|
306
228
|
-o-transform: scale(@ratio);
|
307
229
|
transform: scale(@ratio);
|
308
230
|
}
|
309
|
-
.translate(@x
|
231
|
+
.translate(@x, @y) {
|
310
232
|
-webkit-transform: translate(@x, @y);
|
311
233
|
-moz-transform: translate(@x, @y);
|
312
234
|
-ms-transform: translate(@x, @y);
|
313
235
|
-o-transform: translate(@x, @y);
|
314
236
|
transform: translate(@x, @y);
|
315
237
|
}
|
316
|
-
.skew(@x
|
317
|
-
-webkit-transform: translate(@x, @y);
|
318
|
-
-moz-transform: translate(@x, @y);
|
319
|
-
-ms-transform: translate(@x, @y);
|
320
|
-
-o-transform: translate(@x, @y);
|
321
|
-
transform: translate(@x, @y);
|
322
|
-
}
|
323
|
-
.skew(@x: 0, @y: 0) {
|
238
|
+
.skew(@x, @y) {
|
324
239
|
-webkit-transform: skew(@x, @y);
|
325
240
|
-moz-transform: skew(@x, @y);
|
326
241
|
-ms-transform: skew(@x, @y);
|
327
242
|
-o-transform: skew(@x, @y);
|
328
243
|
transform: skew(@x, @y);
|
329
244
|
}
|
245
|
+
.translate3d(@x, @y, @z) {
|
246
|
+
-webkit-transform: translate(@x, @y, @z);
|
247
|
+
-moz-transform: translate(@x, @y, @z);
|
248
|
+
-ms-transform: translate(@x, @y, @z);
|
249
|
+
-o-transform: translate(@x, @y, @z);
|
250
|
+
transform: translate(@x, @y, @z);
|
251
|
+
}
|
252
|
+
|
253
|
+
// Backface visibility
|
254
|
+
// Prevent browsers from flickering when using CSS 3D transforms.
|
255
|
+
// Default value is `visible`, but can be changed to `hidden
|
256
|
+
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
257
|
+
.backface-visibility(@visibility){
|
258
|
+
-webkit-backface-visibility: @visibility;
|
259
|
+
-moz-backface-visibility: @visibility;
|
260
|
+
-ms-backface-visibility: @visibility;
|
261
|
+
backface-visibility: @visibility;
|
262
|
+
}
|
330
263
|
|
331
264
|
// Background clipping
|
332
265
|
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
@@ -349,6 +282,7 @@
|
|
349
282
|
.box-sizing(@boxmodel) {
|
350
283
|
-webkit-box-sizing: @boxmodel;
|
351
284
|
-moz-box-sizing: @boxmodel;
|
285
|
+
-ms-box-sizing: @boxmodel;
|
352
286
|
box-sizing: @boxmodel;
|
353
287
|
}
|
354
288
|
|
@@ -357,18 +291,19 @@
|
|
357
291
|
.user-select(@select) {
|
358
292
|
-webkit-user-select: @select;
|
359
293
|
-moz-user-select: @select;
|
294
|
+
-ms-user-select: @select;
|
360
295
|
-o-user-select: @select;
|
361
296
|
user-select: @select;
|
362
297
|
}
|
363
298
|
|
364
299
|
// Resize anything
|
365
|
-
.resizable(@direction
|
300
|
+
.resizable(@direction) {
|
366
301
|
resize: @direction; // Options: horizontal, vertical, both
|
367
302
|
overflow: auto; // Safari fix
|
368
303
|
}
|
369
304
|
|
370
305
|
// CSS3 Content Columns
|
371
|
-
.content-columns(@columnCount, @columnGap: @
|
306
|
+
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
|
372
307
|
-webkit-column-count: @columnCount;
|
373
308
|
-moz-column-count: @columnCount;
|
374
309
|
column-count: @columnCount;
|
@@ -378,9 +313,9 @@
|
|
378
313
|
}
|
379
314
|
|
380
315
|
// Opacity
|
381
|
-
.opacity(@opacity
|
316
|
+
.opacity(@opacity) {
|
382
317
|
opacity: @opacity / 100;
|
383
|
-
|
318
|
+
filter: ~"alpha(opacity=@{opacity})";
|
384
319
|
}
|
385
320
|
|
386
321
|
|
@@ -456,8 +391,8 @@
|
|
456
391
|
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
|
457
392
|
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
|
458
393
|
background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
|
394
|
+
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
|
459
395
|
background-repeat: no-repeat;
|
460
|
-
// Opera cannot do radial gradients yet
|
461
396
|
}
|
462
397
|
.striped(@color, @angle: -45deg) {
|
463
398
|
background-color: @color;
|
@@ -475,16 +410,39 @@
|
|
475
410
|
}
|
476
411
|
|
477
412
|
|
478
|
-
|
479
|
-
//
|
413
|
+
|
414
|
+
// COMPONENT MIXINS
|
415
|
+
// --------------------------------------------------
|
416
|
+
|
417
|
+
// Horizontal dividers
|
418
|
+
// -------------------------
|
419
|
+
// Dividers (basically an hr) within dropdowns and nav lists
|
420
|
+
.nav-divider() {
|
421
|
+
// IE7 needs a set width since we gave a height. Restricting just
|
422
|
+
// to IE7 to keep the 1px left/right space in other browsers.
|
423
|
+
// It is unclear where IE is getting the extra space that we need
|
424
|
+
// to negative-margin away, but so it goes.
|
425
|
+
*width: 100%;
|
426
|
+
height: 1px;
|
427
|
+
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
|
428
|
+
*margin: -5px 0 5px;
|
429
|
+
overflow: hidden;
|
430
|
+
background-color: #e5e5e5;
|
431
|
+
border-bottom: 1px solid @white;
|
432
|
+
}
|
433
|
+
|
434
|
+
// Button backgrounds
|
435
|
+
// ------------------
|
480
436
|
.buttonBackground(@startColor, @endColor) {
|
481
437
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
482
438
|
.gradientBar(@startColor, @endColor);
|
439
|
+
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
483
440
|
.reset-filter();
|
484
441
|
|
485
442
|
// in these cases the gradient won't cover the background, so we override
|
486
443
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
487
444
|
background-color: @endColor;
|
445
|
+
*background-color: darken(@endColor, 5%);
|
488
446
|
}
|
489
447
|
|
490
448
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
@@ -494,44 +452,180 @@
|
|
494
452
|
}
|
495
453
|
}
|
496
454
|
|
455
|
+
// Navbar vertical align
|
456
|
+
// -------------------------
|
457
|
+
// Vertically center elements in the navbar.
|
458
|
+
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
459
|
+
.navbarVerticalAlign(@elementHeight) {
|
460
|
+
margin-top: (@navbarHeight - @elementHeight) / 2;
|
461
|
+
}
|
497
462
|
|
498
|
-
//
|
499
|
-
// --------------------------------------------------
|
500
|
-
|
501
|
-
// POPOVER ARROWS
|
463
|
+
// Popover arrows
|
502
464
|
// -------------------------
|
503
465
|
// For tipsies and popovers
|
504
466
|
#popoverArrow {
|
505
|
-
.top(@arrowWidth: 5px) {
|
467
|
+
.top(@arrowWidth: 5px, @color: @black) {
|
506
468
|
bottom: 0;
|
507
469
|
left: 50%;
|
508
470
|
margin-left: -@arrowWidth;
|
509
471
|
border-left: @arrowWidth solid transparent;
|
510
472
|
border-right: @arrowWidth solid transparent;
|
511
|
-
border-top: @arrowWidth solid @
|
473
|
+
border-top: @arrowWidth solid @color;
|
512
474
|
}
|
513
|
-
.left(@arrowWidth: 5px) {
|
475
|
+
.left(@arrowWidth: 5px, @color: @black) {
|
514
476
|
top: 50%;
|
515
477
|
right: 0;
|
516
478
|
margin-top: -@arrowWidth;
|
517
479
|
border-top: @arrowWidth solid transparent;
|
518
480
|
border-bottom: @arrowWidth solid transparent;
|
519
|
-
border-left: @arrowWidth solid @
|
481
|
+
border-left: @arrowWidth solid @color;
|
520
482
|
}
|
521
|
-
.bottom(@arrowWidth: 5px) {
|
483
|
+
.bottom(@arrowWidth: 5px, @color: @black) {
|
522
484
|
top: 0;
|
523
485
|
left: 50%;
|
524
486
|
margin-left: -@arrowWidth;
|
525
487
|
border-left: @arrowWidth solid transparent;
|
526
488
|
border-right: @arrowWidth solid transparent;
|
527
|
-
border-bottom: @arrowWidth solid @
|
489
|
+
border-bottom: @arrowWidth solid @color;
|
528
490
|
}
|
529
|
-
.right(@arrowWidth: 5px) {
|
491
|
+
.right(@arrowWidth: 5px, @color: @black) {
|
530
492
|
top: 50%;
|
531
493
|
left: 0;
|
532
494
|
margin-top: -@arrowWidth;
|
533
495
|
border-top: @arrowWidth solid transparent;
|
534
496
|
border-bottom: @arrowWidth solid transparent;
|
535
|
-
border-right: @arrowWidth solid @
|
497
|
+
border-right: @arrowWidth solid @color;
|
536
498
|
}
|
537
499
|
}
|
500
|
+
|
501
|
+
// Grid System
|
502
|
+
// -----------
|
503
|
+
|
504
|
+
// Centered container element
|
505
|
+
.container-fixed() {
|
506
|
+
margin-right: auto;
|
507
|
+
margin-left: auto;
|
508
|
+
.clearfix();
|
509
|
+
}
|
510
|
+
|
511
|
+
// Table columns
|
512
|
+
.tableColumns(@columnSpan: 1) {
|
513
|
+
float: none; // undo default grid column styles
|
514
|
+
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
515
|
+
margin-left: 0; // undo default grid column styles
|
516
|
+
}
|
517
|
+
|
518
|
+
// Make a Grid
|
519
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
520
|
+
.makeRow() {
|
521
|
+
margin-left: @gridGutterWidth * -1;
|
522
|
+
.clearfix();
|
523
|
+
}
|
524
|
+
.makeColumn(@columns: 1, @offset: 0) {
|
525
|
+
float: left;
|
526
|
+
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
|
527
|
+
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
528
|
+
}
|
529
|
+
|
530
|
+
// The Grid
|
531
|
+
#grid {
|
532
|
+
|
533
|
+
.core (@gridColumnWidth, @gridGutterWidth) {
|
534
|
+
|
535
|
+
.spanX (@index) when (@index > 0) {
|
536
|
+
(~".span@{index}") { .span(@index); }
|
537
|
+
.spanX(@index - 1);
|
538
|
+
}
|
539
|
+
.spanX (0) {}
|
540
|
+
|
541
|
+
.offsetX (@index) when (@index > 0) {
|
542
|
+
(~".offset@{index}") { .offset(@index); }
|
543
|
+
.offsetX(@index - 1);
|
544
|
+
}
|
545
|
+
.offsetX (0) {}
|
546
|
+
|
547
|
+
.offset (@columns) {
|
548
|
+
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
|
549
|
+
}
|
550
|
+
|
551
|
+
.span (@columns) {
|
552
|
+
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
553
|
+
}
|
554
|
+
|
555
|
+
.row {
|
556
|
+
margin-left: @gridGutterWidth * -1;
|
557
|
+
.clearfix();
|
558
|
+
}
|
559
|
+
|
560
|
+
[class*="span"] {
|
561
|
+
float: left;
|
562
|
+
margin-left: @gridGutterWidth;
|
563
|
+
}
|
564
|
+
|
565
|
+
// Set the container width, and override it for fixed navbars in media queries
|
566
|
+
.container,
|
567
|
+
.navbar-fixed-top .container,
|
568
|
+
.navbar-fixed-bottom .container { .span(@gridColumns); }
|
569
|
+
|
570
|
+
// generate .spanX and .offsetX
|
571
|
+
.spanX (@gridColumns);
|
572
|
+
.offsetX (@gridColumns);
|
573
|
+
|
574
|
+
}
|
575
|
+
|
576
|
+
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
|
577
|
+
|
578
|
+
.spanX (@index) when (@index > 0) {
|
579
|
+
(~".span@{index}") { .span(@index); }
|
580
|
+
.spanX(@index - 1);
|
581
|
+
}
|
582
|
+
.spanX (0) {}
|
583
|
+
|
584
|
+
.span (@columns) {
|
585
|
+
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
586
|
+
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
|
587
|
+
}
|
588
|
+
|
589
|
+
.row-fluid {
|
590
|
+
width: 100%;
|
591
|
+
.clearfix();
|
592
|
+
[class*="span"] {
|
593
|
+
.input-block-level();
|
594
|
+
float: left;
|
595
|
+
margin-left: @fluidGridGutterWidth;
|
596
|
+
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
597
|
+
}
|
598
|
+
[class*="span"]:first-child {
|
599
|
+
margin-left: 0;
|
600
|
+
}
|
601
|
+
|
602
|
+
// generate .spanX
|
603
|
+
.spanX (@gridColumns);
|
604
|
+
}
|
605
|
+
|
606
|
+
}
|
607
|
+
|
608
|
+
.input(@gridColumnWidth, @gridGutterWidth) {
|
609
|
+
|
610
|
+
.spanX (@index) when (@index > 0) {
|
611
|
+
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
|
612
|
+
.spanX(@index - 1);
|
613
|
+
}
|
614
|
+
.spanX (0) {}
|
615
|
+
|
616
|
+
.span(@columns) {
|
617
|
+
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
|
618
|
+
}
|
619
|
+
|
620
|
+
input,
|
621
|
+
textarea,
|
622
|
+
.uneditable-input {
|
623
|
+
margin-left: 0; // override margin-left from core grid system
|
624
|
+
}
|
625
|
+
|
626
|
+
// generate .spanX
|
627
|
+
.spanX (@gridColumns);
|
628
|
+
|
629
|
+
}
|
630
|
+
|
631
|
+
}
|