bootstrapped 1.0.1 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|