bootstrapped-rails 2.0.7.2 → 2.0.7.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/app/helpers/twitter_breadcrumbs_helper.rb +5 -0
- data/app/views/twitter_bootstrap/_breadcrumbs.html.erb +14 -0
- data/bootstrapped-rails.gemspec +2 -2
- data/lib/bootstrapped-rails/breadcrumbs.rb +21 -0
- data/lib/bootstrapped-rails/engine.rb +8 -0
- data/lib/bootstrapped-rails/version.rb +1 -1
- data/logical_license +23 -0
- data/readme.md +58 -25
- data/vendor/assets/javascripts/bootstrapped/bootstrap-alert.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-button.js +4 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-carousel.js +7 -3
- data/vendor/assets/javascripts/bootstrapped/bootstrap-collapse.js +4 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-dropdown.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-modal.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-popover.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-scrollspy.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-tab.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-tooltip.js +2 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-transition.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-typeahead.js +7 -7
- data/vendor/assets/stylesheets/bootstrapped-sass/_reset.scss +31 -10
- data/vendor/assets/stylesheets/custom_partials/animation.scss +170 -0
- data/vendor/assets/stylesheets/custom_partials/box-shadow.scss +13 -0
- data/vendor/assets/stylesheets/custom_partials/box-sizing.scss +6 -0
- data/vendor/assets/stylesheets/custom_partials/flex-box.scss +64 -0
- data/vendor/assets/stylesheets/custom_partials/license +24 -0
- data/vendor/toolkit/twitter/bootstrap/accordion.less +28 -0
- data/vendor/toolkit/twitter/bootstrap/alerts.less +70 -0
- data/vendor/toolkit/twitter/bootstrap/bootstrap.less +62 -0
- data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +22 -0
- data/vendor/toolkit/twitter/bootstrap/button-groups.less +148 -0
- data/vendor/toolkit/twitter/bootstrap/buttons.less +183 -0
- data/vendor/toolkit/twitter/bootstrap/carousel.less +121 -0
- data/vendor/toolkit/twitter/bootstrap/close.less +18 -0
- data/vendor/toolkit/twitter/bootstrap/code.less +57 -0
- data/vendor/toolkit/twitter/bootstrap/component-animations.less +18 -0
- data/vendor/toolkit/twitter/bootstrap/dropdowns.less +130 -0
- data/vendor/toolkit/twitter/bootstrap/forms.less +522 -0
- data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
- data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
- data/vendor/toolkit/twitter/bootstrap/labels.less +32 -0
- data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
- data/vendor/toolkit/twitter/bootstrap/mixins.less +590 -0
- data/vendor/toolkit/twitter/bootstrap/modals.less +83 -0
- data/vendor/toolkit/twitter/bootstrap/navbar.less +299 -0
- data/vendor/toolkit/twitter/bootstrap/navs.less +353 -0
- data/vendor/toolkit/twitter/bootstrap/pager.less +30 -0
- data/vendor/toolkit/twitter/bootstrap/pagination.less +55 -0
- data/vendor/toolkit/twitter/bootstrap/popovers.less +49 -0
- data/vendor/toolkit/twitter/bootstrap/progress-bars.less +95 -0
- data/vendor/toolkit/twitter/bootstrap/reset.less +126 -0
- data/vendor/toolkit/twitter/bootstrap/responsive.less +327 -0
- data/vendor/toolkit/twitter/bootstrap/scaffolding.less +29 -0
- data/vendor/toolkit/twitter/bootstrap/sprites.less +158 -0
- data/vendor/toolkit/twitter/bootstrap/tables.less +150 -0
- data/vendor/toolkit/twitter/bootstrap/thumbnails.less +35 -0
- data/vendor/toolkit/twitter/bootstrap/tooltip.less +35 -0
- data/vendor/toolkit/twitter/bootstrap/type.less +218 -0
- data/vendor/toolkit/twitter/bootstrap/utilities.less +23 -0
- data/vendor/toolkit/twitter/bootstrap/variables.less +107 -0
- data/vendor/toolkit/twitter/bootstrap/wells.less +17 -0
- data/vendor/toolkit/twitter/bootstrap_base.less +2 -0
- metadata +64 -10
@@ -0,0 +1,20 @@
|
|
1
|
+
// HERO UNIT
|
2
|
+
// ---------
|
3
|
+
|
4
|
+
.hero-unit {
|
5
|
+
padding: 60px;
|
6
|
+
margin-bottom: 30px;
|
7
|
+
background-color: #f5f5f5;
|
8
|
+
.border-radius(6px);
|
9
|
+
h1 {
|
10
|
+
margin-bottom: 0;
|
11
|
+
font-size: 60px;
|
12
|
+
line-height: 1;
|
13
|
+
letter-spacing: -1px;
|
14
|
+
}
|
15
|
+
p {
|
16
|
+
font-size: 18px;
|
17
|
+
font-weight: 200;
|
18
|
+
line-height: @baseLineHeight * 1.5;
|
19
|
+
}
|
20
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// LABELS
|
2
|
+
// ------
|
3
|
+
|
4
|
+
// Base
|
5
|
+
.label {
|
6
|
+
padding: 2px 4px 3px;
|
7
|
+
font-size: @baseFontSize * .85;
|
8
|
+
font-weight: bold;
|
9
|
+
color: @white;
|
10
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
11
|
+
background-color: @grayLight;
|
12
|
+
.border-radius(3px);
|
13
|
+
}
|
14
|
+
|
15
|
+
// Hover state
|
16
|
+
.label:hover {
|
17
|
+
color: @white;
|
18
|
+
text-decoration: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Colors
|
22
|
+
.label-important { background-color: @errorText; }
|
23
|
+
.label-important:hover { background-color: darken(@errorText, 10%); }
|
24
|
+
|
25
|
+
.label-warning { background-color: @orange; }
|
26
|
+
.label-warning:hover { background-color: darken(@orange, 10%); }
|
27
|
+
|
28
|
+
.label-success { background-color: @successText; }
|
29
|
+
.label-success:hover { background-color: darken(@successText, 10%); }
|
30
|
+
|
31
|
+
.label-info { background-color: @infoText; }
|
32
|
+
.label-info:hover { background-color: darken(@infoText, 10%); }
|
@@ -0,0 +1,17 @@
|
|
1
|
+
//
|
2
|
+
// Layouts
|
3
|
+
// Fixed-width and fluid (with sidebar) layouts
|
4
|
+
// --------------------------------------------
|
5
|
+
|
6
|
+
|
7
|
+
// Container (centered, fixed-width layouts)
|
8
|
+
.container {
|
9
|
+
.container-fixed();
|
10
|
+
}
|
11
|
+
|
12
|
+
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
13
|
+
.container-fluid {
|
14
|
+
padding-left: @gridGutterWidth;
|
15
|
+
padding-right: @gridGutterWidth;
|
16
|
+
.clearfix();
|
17
|
+
}
|
@@ -0,0 +1,590 @@
|
|
1
|
+
// Mixins.less
|
2
|
+
// Snippets of reusable CSS to develop faster and keep code readable
|
3
|
+
// -----------------------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// UTILITY MIXINS
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
// Clearfix
|
10
|
+
// --------
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
12
|
+
.clearfix {
|
13
|
+
*zoom: 1;
|
14
|
+
&:before,
|
15
|
+
&:after {
|
16
|
+
display: table;
|
17
|
+
content: "";
|
18
|
+
}
|
19
|
+
&:after {
|
20
|
+
clear: both;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
// Webkit-style focus
|
25
|
+
// ------------------
|
26
|
+
.tab-focus() {
|
27
|
+
// Default
|
28
|
+
outline: thin dotted #333;
|
29
|
+
// Webkit
|
30
|
+
outline: 5px auto -webkit-focus-ring-color;
|
31
|
+
outline-offset: -2px;
|
32
|
+
}
|
33
|
+
|
34
|
+
// Center-align a block level element
|
35
|
+
// ----------------------------------
|
36
|
+
.center-block() {
|
37
|
+
display: block;
|
38
|
+
margin-left: auto;
|
39
|
+
margin-right: auto;
|
40
|
+
}
|
41
|
+
|
42
|
+
// IE7 inline-block
|
43
|
+
// ----------------
|
44
|
+
.ie7-inline-block() {
|
45
|
+
*display: inline; /* IE7 inline-block hack */
|
46
|
+
*zoom: 1;
|
47
|
+
}
|
48
|
+
|
49
|
+
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
50
|
+
// Ems because we're attempting to match the width of a space character. Left
|
51
|
+
// version is for form buttons, which typically come after other elements, and
|
52
|
+
// right version is for icons, which come before. Applying both is ok, but it will
|
53
|
+
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
54
|
+
// instead of the 1 space in other browsers.
|
55
|
+
.ie7-restore-left-whitespace() {
|
56
|
+
*margin-left: .3em;
|
57
|
+
|
58
|
+
&:first-child {
|
59
|
+
*margin-left: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
.ie7-restore-right-whitespace() {
|
64
|
+
*margin-right: .3em;
|
65
|
+
|
66
|
+
&:last-child {
|
67
|
+
*margin-left: 0;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
// Sizing shortcuts
|
72
|
+
// -------------------------
|
73
|
+
.size(@height: 5px, @width: 5px) {
|
74
|
+
width: @width;
|
75
|
+
height: @height;
|
76
|
+
}
|
77
|
+
.square(@size: 5px) {
|
78
|
+
.size(@size, @size);
|
79
|
+
}
|
80
|
+
|
81
|
+
// Placeholder text
|
82
|
+
// -------------------------
|
83
|
+
.placeholder(@color: @placeholderText) {
|
84
|
+
:-moz-placeholder {
|
85
|
+
color: @color;
|
86
|
+
}
|
87
|
+
::-webkit-input-placeholder {
|
88
|
+
color: @color;
|
89
|
+
}
|
90
|
+
}
|
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
|
+
|
102
|
+
|
103
|
+
// FONTS
|
104
|
+
// --------------------------------------------------
|
105
|
+
|
106
|
+
#font {
|
107
|
+
#family {
|
108
|
+
.serif() {
|
109
|
+
font-family: Georgia, "Times New Roman", Times, serif;
|
110
|
+
}
|
111
|
+
.sans-serif() {
|
112
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
113
|
+
}
|
114
|
+
.monospace() {
|
115
|
+
font-family: Menlo, Monaco, "Courier New", monospace;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
119
|
+
font-size: @size;
|
120
|
+
font-weight: @weight;
|
121
|
+
line-height: @lineHeight;
|
122
|
+
}
|
123
|
+
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
124
|
+
#font > #family > .serif;
|
125
|
+
#font > .shorthand(@size, @weight, @lineHeight);
|
126
|
+
}
|
127
|
+
.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
128
|
+
#font > #family > .sans-serif;
|
129
|
+
#font > .shorthand(@size, @weight, @lineHeight);
|
130
|
+
}
|
131
|
+
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
132
|
+
#font > #family > .monospace;
|
133
|
+
#font > .shorthand(@size, @weight, @lineHeight);
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
137
|
+
|
138
|
+
|
139
|
+
// GRID SYSTEM
|
140
|
+
// --------------------------------------------------
|
141
|
+
|
142
|
+
// Site container
|
143
|
+
// -------------------------
|
144
|
+
.container-fixed() {
|
145
|
+
width: @gridRowWidth;
|
146
|
+
margin-left: auto;
|
147
|
+
margin-right: auto;
|
148
|
+
.clearfix();
|
149
|
+
}
|
150
|
+
|
151
|
+
// Le grid system
|
152
|
+
// -------------------------
|
153
|
+
#gridSystem {
|
154
|
+
// Setup the mixins to be used
|
155
|
+
.columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
|
156
|
+
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
157
|
+
}
|
158
|
+
.offset(@gridColumnWidth, @gridGutterWidth, @columns) {
|
159
|
+
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
160
|
+
}
|
161
|
+
.gridColumn(@gridGutterWidth) {
|
162
|
+
float: left;
|
163
|
+
margin-left: @gridGutterWidth;
|
164
|
+
}
|
165
|
+
// Take these values and mixins, and make 'em do their thang
|
166
|
+
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
|
167
|
+
// Row surrounds the columns
|
168
|
+
.row {
|
169
|
+
margin-left: @gridGutterWidth * -1;
|
170
|
+
.clearfix();
|
171
|
+
}
|
172
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
173
|
+
[class*="span"] {
|
174
|
+
#gridSystem > .gridColumn(@gridGutterWidth);
|
175
|
+
}
|
176
|
+
// Default columns
|
177
|
+
.span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
178
|
+
.span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
179
|
+
.span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
180
|
+
.span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
181
|
+
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
182
|
+
.span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
183
|
+
.span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
184
|
+
.span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
185
|
+
.span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
186
|
+
.span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
187
|
+
.span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
188
|
+
.span12,
|
189
|
+
.container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
190
|
+
// Offset column options
|
191
|
+
.offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
|
192
|
+
.offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
|
193
|
+
.offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
|
194
|
+
.offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
|
195
|
+
.offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
|
196
|
+
.offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
|
197
|
+
.offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
|
198
|
+
.offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
|
199
|
+
.offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
|
200
|
+
.offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
|
201
|
+
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
|
202
|
+
}
|
203
|
+
}
|
204
|
+
|
205
|
+
// Fluid grid system
|
206
|
+
// -------------------------
|
207
|
+
#fluidGridSystem {
|
208
|
+
// Setup the mixins to be used
|
209
|
+
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
|
210
|
+
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
211
|
+
}
|
212
|
+
.gridColumn(@fluidGridGutterWidth) {
|
213
|
+
float: left;
|
214
|
+
margin-left: @fluidGridGutterWidth;
|
215
|
+
}
|
216
|
+
// Take these values and mixins, and make 'em do their thang
|
217
|
+
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
|
218
|
+
// Row surrounds the columns
|
219
|
+
.row-fluid {
|
220
|
+
width: 100%;
|
221
|
+
.clearfix();
|
222
|
+
|
223
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
224
|
+
> [class*="span"] {
|
225
|
+
#fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
|
226
|
+
}
|
227
|
+
> [class*="span"]:first-child {
|
228
|
+
margin-left: 0;
|
229
|
+
}
|
230
|
+
// Default columns
|
231
|
+
> .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
|
232
|
+
> .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
|
233
|
+
> .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
|
234
|
+
> .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
|
235
|
+
> .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
|
236
|
+
> .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
|
237
|
+
> .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
|
238
|
+
> .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
|
239
|
+
> .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
|
240
|
+
> .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
|
241
|
+
> .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
|
242
|
+
> .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
|
243
|
+
}
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
// Input grid system
|
248
|
+
// -------------------------
|
249
|
+
#inputGridSystem {
|
250
|
+
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
|
251
|
+
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
|
252
|
+
}
|
253
|
+
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
|
254
|
+
input,
|
255
|
+
textarea,
|
256
|
+
.uneditable-input {
|
257
|
+
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
|
258
|
+
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
|
259
|
+
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
|
260
|
+
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
|
261
|
+
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
|
262
|
+
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
|
263
|
+
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
|
264
|
+
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
|
265
|
+
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
|
266
|
+
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
|
267
|
+
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
|
268
|
+
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
|
269
|
+
}
|
270
|
+
}
|
271
|
+
}
|
272
|
+
|
273
|
+
// Make a Grid
|
274
|
+
// -------------------------
|
275
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
276
|
+
.makeRow() {
|
277
|
+
margin-left: @gridGutterWidth * -1;
|
278
|
+
.clearfix();
|
279
|
+
}
|
280
|
+
.makeColumn(@columns: 1) {
|
281
|
+
float: left;
|
282
|
+
margin-left: @gridGutterWidth;
|
283
|
+
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
284
|
+
}
|
285
|
+
|
286
|
+
|
287
|
+
|
288
|
+
// Form field states (used in forms.less)
|
289
|
+
// --------------------------------------------------
|
290
|
+
|
291
|
+
// Mixin for form field states
|
292
|
+
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
|
293
|
+
// Set the text color
|
294
|
+
> label,
|
295
|
+
.help-block,
|
296
|
+
.help-inline {
|
297
|
+
color: @textColor;
|
298
|
+
}
|
299
|
+
// Style inputs accordingly
|
300
|
+
input,
|
301
|
+
select,
|
302
|
+
textarea {
|
303
|
+
color: @textColor;
|
304
|
+
border-color: @borderColor;
|
305
|
+
&:focus {
|
306
|
+
border-color: darken(@borderColor, 10%);
|
307
|
+
.box-shadow(0 0 6px lighten(@borderColor, 20%));
|
308
|
+
}
|
309
|
+
}
|
310
|
+
// Give a small background color for input-prepend/-append
|
311
|
+
.input-prepend .add-on,
|
312
|
+
.input-append .add-on {
|
313
|
+
color: @textColor;
|
314
|
+
background-color: @backgroundColor;
|
315
|
+
border-color: @textColor;
|
316
|
+
}
|
317
|
+
}
|
318
|
+
|
319
|
+
|
320
|
+
|
321
|
+
// CSS3 PROPERTIES
|
322
|
+
// --------------------------------------------------
|
323
|
+
|
324
|
+
// Border Radius
|
325
|
+
.border-radius(@radius: 5px) {
|
326
|
+
-webkit-border-radius: @radius;
|
327
|
+
-moz-border-radius: @radius;
|
328
|
+
border-radius: @radius;
|
329
|
+
}
|
330
|
+
|
331
|
+
// Drop shadows
|
332
|
+
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
333
|
+
-webkit-box-shadow: @shadow;
|
334
|
+
-moz-box-shadow: @shadow;
|
335
|
+
box-shadow: @shadow;
|
336
|
+
}
|
337
|
+
|
338
|
+
// Transitions
|
339
|
+
.transition(@transition) {
|
340
|
+
-webkit-transition: @transition;
|
341
|
+
-moz-transition: @transition;
|
342
|
+
-ms-transition: @transition;
|
343
|
+
-o-transition: @transition;
|
344
|
+
transition: @transition;
|
345
|
+
}
|
346
|
+
|
347
|
+
// Transformations
|
348
|
+
.rotate(@degrees) {
|
349
|
+
-webkit-transform: rotate(@degrees);
|
350
|
+
-moz-transform: rotate(@degrees);
|
351
|
+
-ms-transform: rotate(@degrees);
|
352
|
+
-o-transform: rotate(@degrees);
|
353
|
+
transform: rotate(@degrees);
|
354
|
+
}
|
355
|
+
.scale(@ratio) {
|
356
|
+
-webkit-transform: scale(@ratio);
|
357
|
+
-moz-transform: scale(@ratio);
|
358
|
+
-ms-transform: scale(@ratio);
|
359
|
+
-o-transform: scale(@ratio);
|
360
|
+
transform: scale(@ratio);
|
361
|
+
}
|
362
|
+
.translate(@x: 0, @y: 0) {
|
363
|
+
-webkit-transform: translate(@x, @y);
|
364
|
+
-moz-transform: translate(@x, @y);
|
365
|
+
-ms-transform: translate(@x, @y);
|
366
|
+
-o-transform: translate(@x, @y);
|
367
|
+
transform: translate(@x, @y);
|
368
|
+
}
|
369
|
+
.skew(@x: 0, @y: 0) {
|
370
|
+
-webkit-transform: skew(@x, @y);
|
371
|
+
-moz-transform: skew(@x, @y);
|
372
|
+
-ms-transform: skew(@x, @y);
|
373
|
+
-o-transform: skew(@x, @y);
|
374
|
+
transform: skew(@x, @y);
|
375
|
+
}
|
376
|
+
.translate3d(@x: 0, @y: 0, @z: 0) {
|
377
|
+
-webkit-transform: translate(@x, @y, @z);
|
378
|
+
-moz-transform: translate(@x, @y, @z);
|
379
|
+
-ms-transform: translate(@x, @y, @z);
|
380
|
+
-o-transform: translate(@x, @y, @z);
|
381
|
+
transform: translate(@x, @y, @z);
|
382
|
+
}
|
383
|
+
|
384
|
+
// Background clipping
|
385
|
+
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
386
|
+
.background-clip(@clip) {
|
387
|
+
-webkit-background-clip: @clip;
|
388
|
+
-moz-background-clip: @clip;
|
389
|
+
background-clip: @clip;
|
390
|
+
}
|
391
|
+
|
392
|
+
// Background sizing
|
393
|
+
.background-size(@size){
|
394
|
+
-webkit-background-size: @size;
|
395
|
+
-moz-background-size: @size;
|
396
|
+
-o-background-size: @size;
|
397
|
+
background-size: @size;
|
398
|
+
}
|
399
|
+
|
400
|
+
|
401
|
+
// Box sizing
|
402
|
+
.box-sizing(@boxmodel) {
|
403
|
+
-webkit-box-sizing: @boxmodel;
|
404
|
+
-moz-box-sizing: @boxmodel;
|
405
|
+
box-sizing: @boxmodel;
|
406
|
+
}
|
407
|
+
|
408
|
+
// User select
|
409
|
+
// For selecting text on the page
|
410
|
+
.user-select(@select) {
|
411
|
+
-webkit-user-select: @select;
|
412
|
+
-moz-user-select: @select;
|
413
|
+
-o-user-select: @select;
|
414
|
+
user-select: @select;
|
415
|
+
}
|
416
|
+
|
417
|
+
// Resize anything
|
418
|
+
.resizable(@direction: both) {
|
419
|
+
resize: @direction; // Options: horizontal, vertical, both
|
420
|
+
overflow: auto; // Safari fix
|
421
|
+
}
|
422
|
+
|
423
|
+
// CSS3 Content Columns
|
424
|
+
.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
|
425
|
+
-webkit-column-count: @columnCount;
|
426
|
+
-moz-column-count: @columnCount;
|
427
|
+
column-count: @columnCount;
|
428
|
+
-webkit-column-gap: @columnGap;
|
429
|
+
-moz-column-gap: @columnGap;
|
430
|
+
column-gap: @columnGap;
|
431
|
+
}
|
432
|
+
|
433
|
+
// Opacity
|
434
|
+
.opacity(@opacity: 100) {
|
435
|
+
opacity: @opacity / 100;
|
436
|
+
filter: e(%("alpha(opacity=%d)", @opacity));
|
437
|
+
}
|
438
|
+
|
439
|
+
|
440
|
+
|
441
|
+
// BACKGROUNDS
|
442
|
+
// --------------------------------------------------
|
443
|
+
|
444
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
445
|
+
#translucent {
|
446
|
+
.background(@color: @white, @alpha: 1) {
|
447
|
+
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
448
|
+
}
|
449
|
+
.border(@color: @white, @alpha: 1) {
|
450
|
+
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
451
|
+
.background-clip(padding-box);
|
452
|
+
}
|
453
|
+
}
|
454
|
+
|
455
|
+
// Gradient Bar Colors for buttons and alerts
|
456
|
+
.gradientBar(@primaryColor, @secondaryColor) {
|
457
|
+
#gradient > .vertical(@primaryColor, @secondaryColor);
|
458
|
+
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
459
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
460
|
+
}
|
461
|
+
|
462
|
+
// Gradients
|
463
|
+
#gradient {
|
464
|
+
.horizontal(@startColor: #555, @endColor: #333) {
|
465
|
+
background-color: @endColor;
|
466
|
+
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
|
467
|
+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
|
468
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
469
|
+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
470
|
+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
471
|
+
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
|
472
|
+
background-repeat: repeat-x;
|
473
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
|
474
|
+
}
|
475
|
+
.vertical(@startColor: #555, @endColor: #333) {
|
476
|
+
background-color: mix(@startColor, @endColor, 60%);
|
477
|
+
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
478
|
+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
479
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
480
|
+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
481
|
+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
482
|
+
background-image: linear-gradient(top, @startColor, @endColor); // The standard
|
483
|
+
background-repeat: repeat-x;
|
484
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
|
485
|
+
}
|
486
|
+
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
|
487
|
+
background-color: @endColor;
|
488
|
+
background-repeat: repeat-x;
|
489
|
+
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
|
490
|
+
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
|
491
|
+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
492
|
+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
|
493
|
+
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
|
494
|
+
}
|
495
|
+
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
|
496
|
+
background-color: mix(@midColor, @endColor, 80%);
|
497
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
|
498
|
+
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
499
|
+
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
|
500
|
+
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
501
|
+
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
502
|
+
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
503
|
+
background-repeat: no-repeat;
|
504
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
|
505
|
+
}
|
506
|
+
.radial(@innerColor: #555, @outerColor: #333) {
|
507
|
+
background-color: @outerColor;
|
508
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
|
509
|
+
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
|
510
|
+
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
|
511
|
+
background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
|
512
|
+
background-repeat: no-repeat;
|
513
|
+
// Opera cannot do radial gradients yet
|
514
|
+
}
|
515
|
+
.striped(@color, @angle: -45deg) {
|
516
|
+
background-color: @color;
|
517
|
+
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));
|
518
|
+
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);
|
519
|
+
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);
|
520
|
+
background-image: -ms-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);
|
521
|
+
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);
|
522
|
+
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
|
523
|
+
}
|
524
|
+
}
|
525
|
+
// Reset filters for IE
|
526
|
+
.reset-filter() {
|
527
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
|
528
|
+
}
|
529
|
+
|
530
|
+
|
531
|
+
// Mixin for generating button backgrounds
|
532
|
+
// ---------------------------------------
|
533
|
+
.buttonBackground(@startColor, @endColor) {
|
534
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
535
|
+
.gradientBar(@startColor, @endColor);
|
536
|
+
.reset-filter();
|
537
|
+
|
538
|
+
// in these cases the gradient won't cover the background, so we override
|
539
|
+
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
540
|
+
background-color: @endColor;
|
541
|
+
}
|
542
|
+
|
543
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
544
|
+
&:active,
|
545
|
+
&.active {
|
546
|
+
background-color: darken(@endColor, 10%) e("\9");
|
547
|
+
}
|
548
|
+
}
|
549
|
+
|
550
|
+
|
551
|
+
// COMPONENT MIXINS
|
552
|
+
// --------------------------------------------------
|
553
|
+
|
554
|
+
// POPOVER ARROWS
|
555
|
+
// -------------------------
|
556
|
+
// For tipsies and popovers
|
557
|
+
#popoverArrow {
|
558
|
+
.top(@arrowWidth: 5px) {
|
559
|
+
bottom: 0;
|
560
|
+
left: 50%;
|
561
|
+
margin-left: -@arrowWidth;
|
562
|
+
border-left: @arrowWidth solid transparent;
|
563
|
+
border-right: @arrowWidth solid transparent;
|
564
|
+
border-top: @arrowWidth solid @black;
|
565
|
+
}
|
566
|
+
.left(@arrowWidth: 5px) {
|
567
|
+
top: 50%;
|
568
|
+
right: 0;
|
569
|
+
margin-top: -@arrowWidth;
|
570
|
+
border-top: @arrowWidth solid transparent;
|
571
|
+
border-bottom: @arrowWidth solid transparent;
|
572
|
+
border-left: @arrowWidth solid @black;
|
573
|
+
}
|
574
|
+
.bottom(@arrowWidth: 5px) {
|
575
|
+
top: 0;
|
576
|
+
left: 50%;
|
577
|
+
margin-left: -@arrowWidth;
|
578
|
+
border-left: @arrowWidth solid transparent;
|
579
|
+
border-right: @arrowWidth solid transparent;
|
580
|
+
border-bottom: @arrowWidth solid @black;
|
581
|
+
}
|
582
|
+
.right(@arrowWidth: 5px) {
|
583
|
+
top: 50%;
|
584
|
+
left: 0;
|
585
|
+
margin-top: -@arrowWidth;
|
586
|
+
border-top: @arrowWidth solid transparent;
|
587
|
+
border-bottom: @arrowWidth solid transparent;
|
588
|
+
border-right: @arrowWidth solid @black;
|
589
|
+
}
|
590
|
+
}
|