bootstrap-generators 2.0.1 → 2.0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +258 -33
- data/Rakefile +0 -59
- data/lib/bootstrap/generators/engine.rb +6 -1
- data/lib/bootstrap/generators/version.rb +1 -1
- data/lib/generators/bootstrap/install/install_generator.rb +10 -2
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +120 -15
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +206 -0
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css +2 -0
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.less +5 -4
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.scss +3 -2
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +2 -0
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +5 -4
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +3 -2
- data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +3 -0
- data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
- data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +2 -2
- data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +1 -1
- data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +1 -1
- data/test/fixtures/application.js +3 -0
- data/test/lib/generators/bootstrap/install_generator_test.rb +4 -3
- data/test/test_helper.rb +8 -1
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
- data/vendor/assets/javascripts/bootstrap-button.js +29 -33
- data/vendor/assets/javascripts/bootstrap-carousel.js +33 -21
- 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 +25 -17
- data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +44 -18
- 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 +30 -20
- data/vendor/assets/javascripts/bootstrap-typeahead.js +29 -15
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/accordion.less +5 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/alerts.less +2 -14
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/bootstrap.less +2 -2
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/breadcrumbs.less +2 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/button-groups.less +76 -33
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/buttons.less +32 -24
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/carousel.less +0 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/close.less +12 -1
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/code.less +6 -6
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/component-animations.less +7 -5
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/dropdowns.less +58 -45
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/forms.less +205 -144
- data/vendor/twitter/bootstrap/less/grid.less +5 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/hero-unit.less +3 -1
- data/vendor/twitter/bootstrap/less/labels-badges.less +55 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/layouts.less +1 -1
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/mixins.less +235 -179
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/modals.less +13 -6
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navbar.less +131 -72
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navs.less +53 -43
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pager.less +6 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pagination.less +1 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/popovers.less +0 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/progress-bars.less +27 -5
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/reset.less +8 -3
- data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +26 -0
- data/vendor/twitter/bootstrap/less/responsive-767px-max.less +149 -0
- data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +17 -0
- data/vendor/twitter/bootstrap/less/responsive-navbar.less +153 -0
- data/vendor/twitter/bootstrap/less/responsive-utilities.less +41 -0
- data/vendor/twitter/bootstrap/less/responsive.less +48 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/scaffolding.less +4 -4
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/sprites.less +42 -9
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tables.less +46 -20
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/thumbnails.less +14 -2
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tooltip.less +0 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/type.less +27 -13
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/utilities.less +0 -0
- data/vendor/twitter/bootstrap/less/variables.less +206 -0
- data/vendor/{assets/stylesheets → twitter/bootstrap}/less/wells.less +10 -0
- data/vendor/{assets/stylesheets/scss/accordion.scss → twitter/bootstrap/sass/_accordion.scss} +5 -0
- data/vendor/{assets/stylesheets/scss/alerts.scss → twitter/bootstrap/sass/_alerts.scss} +3 -15
- data/vendor/{assets/stylesheets/scss/breadcrumbs.scss → twitter/bootstrap/sass/_breadcrumbs.scss} +2 -0
- data/vendor/{assets/stylesheets/scss/button-groups.scss → twitter/bootstrap/sass/_button-groups.scss} +76 -33
- data/vendor/{assets/stylesheets/scss/buttons.scss → twitter/bootstrap/sass/_buttons.scss} +33 -25
- data/vendor/{assets/stylesheets/scss/carousel.scss → twitter/bootstrap/sass/_carousel.scss} +1 -1
- data/vendor/{assets/stylesheets/scss/close.scss → twitter/bootstrap/sass/_close.scss} +12 -1
- data/vendor/{assets/stylesheets/scss/code.scss → twitter/bootstrap/sass/_code.scss} +7 -7
- data/vendor/{assets/stylesheets/scss/component-animations.scss → twitter/bootstrap/sass/_component-animations.scss} +9 -7
- data/vendor/{assets/stylesheets/scss/dropdowns.scss → twitter/bootstrap/sass/_dropdowns.scss} +58 -45
- data/vendor/{assets/stylesheets/scss/forms.scss → twitter/bootstrap/sass/_forms.scss} +205 -145
- data/vendor/twitter/bootstrap/sass/_grid.scss +5 -0
- data/vendor/{assets/stylesheets/scss/hero-unit.scss → twitter/bootstrap/sass/_hero-unit.scss} +3 -1
- data/vendor/twitter/bootstrap/sass/_labels-badges.scss +52 -0
- data/vendor/{assets/stylesheets/scss/layouts.scss → twitter/bootstrap/sass/_layouts.scss} +2 -2
- data/vendor/{assets/stylesheets/scss/mixins.scss → twitter/bootstrap/sass/_mixins.scss} +246 -182
- data/vendor/{assets/stylesheets/scss/modals.scss → twitter/bootstrap/sass/_modals.scss} +14 -7
- data/vendor/{assets/stylesheets/scss/navbar.scss → twitter/bootstrap/sass/_navbar.scss} +132 -73
- data/vendor/{assets/stylesheets/scss/navs.scss → twitter/bootstrap/sass/_navs.scss} +53 -43
- data/vendor/{assets/stylesheets/scss/pager.scss → twitter/bootstrap/sass/_pager.scss} +6 -0
- data/vendor/{assets/stylesheets/scss/pagination.scss → twitter/bootstrap/sass/_pagination.scss} +1 -0
- data/vendor/{assets/stylesheets/scss/popovers.scss → twitter/bootstrap/sass/_popovers.scss} +0 -0
- data/vendor/{assets/stylesheets/scss/progress-bars.scss → twitter/bootstrap/sass/_progress-bars.scss} +27 -5
- data/vendor/{assets/stylesheets/scss/reset.scss → twitter/bootstrap/sass/_reset.scss} +8 -3
- data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +26 -0
- data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +149 -0
- data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +17 -0
- data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +153 -0
- data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +41 -0
- data/vendor/{assets/stylesheets/scss/scaffolding.scss → twitter/bootstrap/sass/_scaffolding.scss} +4 -4
- data/vendor/{assets/stylesheets/scss/sprites.scss → twitter/bootstrap/sass/_sprites.scss} +40 -7
- data/vendor/{assets/stylesheets/scss/tables.scss → twitter/bootstrap/sass/_tables.scss} +37 -32
- data/vendor/{assets/stylesheets/scss/thumbnails.scss → twitter/bootstrap/sass/_thumbnails.scss} +14 -2
- data/vendor/{assets/stylesheets/scss/tooltip.scss → twitter/bootstrap/sass/_tooltip.scss} +1 -1
- data/vendor/{assets/stylesheets/scss/type.scss → twitter/bootstrap/sass/_type.scss} +27 -13
- data/vendor/{assets/stylesheets/scss/utilities.scss → twitter/bootstrap/sass/_utilities.scss} +0 -0
- data/vendor/twitter/bootstrap/sass/_variables.scss +204 -0
- data/vendor/{assets/stylesheets/scss/wells.scss → twitter/bootstrap/sass/_wells.scss} +10 -0
- data/vendor/{assets/stylesheets/scss → twitter/bootstrap/sass}/bootstrap.scss +3 -3
- data/vendor/twitter/bootstrap/sass/responsive.scss +48 -0
- metadata +93 -84
- data/lib/generators/bootstrap/install/templates/assets/javascripts/bootstrap-generators.js +0 -1
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.less +0 -98
- data/vendor/assets/stylesheets/bootstrap.css +0 -3363
- data/vendor/assets/stylesheets/less/grid.less +0 -8
- data/vendor/assets/stylesheets/less/labels.less +0 -32
- data/vendor/assets/stylesheets/less/responsive.less +0 -327
- data/vendor/assets/stylesheets/less/variables.less +0 -107
- data/vendor/assets/stylesheets/scss/grid.scss +0 -8
- data/vendor/assets/stylesheets/scss/labels.scss +0 -32
- data/vendor/assets/stylesheets/scss/responsive.scss +0 -327
- data/vendor/assets/stylesheets/scss/variables.scss +0 -107
data/vendor/{assets/stylesheets/scss/hero-unit.scss → twitter/bootstrap/sass/_hero-unit.scss}
RENAMED
@@ -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
|
@include 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,52 @@
|
|
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
|
+
@include border-radius(3px);
|
20
|
+
}
|
21
|
+
.badge {
|
22
|
+
padding: 1px 9px 2px;
|
23
|
+
@include 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
|
+
// Important (red)
|
39
|
+
.label-important, .badge-important { background-color: $errorText; }
|
40
|
+
.label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
|
41
|
+
// Warnings (orange)
|
42
|
+
.label-warning, .badge-warning { background-color: $orange; }
|
43
|
+
.label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
|
44
|
+
// Success (green)
|
45
|
+
.label-success, .badge-success { background-color: $successText; }
|
46
|
+
.label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
|
47
|
+
// Info (turquoise)
|
48
|
+
.label-info, .badge-info { background-color: $infoText; }
|
49
|
+
.label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
|
50
|
+
// Inverse (black)
|
51
|
+
.label-inverse, .badge-inverse { background-color: $grayDark; }
|
52
|
+
.label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
|
@@ -9,7 +9,7 @@
|
|
9
9
|
// Clearfix
|
10
10
|
// --------
|
11
11
|
// For clearing floats like a boss h5bp.com/q
|
12
|
-
@mixin clearfix
|
12
|
+
@mixin clearfix {
|
13
13
|
*zoom: 1;
|
14
14
|
&:before,
|
15
15
|
&:after {
|
@@ -46,7 +46,7 @@
|
|
46
46
|
// IE7 inline-block
|
47
47
|
// ----------------
|
48
48
|
@mixin ie7-inline-block() {
|
49
|
-
*display: inline;
|
49
|
+
*display: inline; // IE7 inline-block hack
|
50
50
|
*zoom: 1;
|
51
51
|
}
|
52
52
|
|
@@ -74,11 +74,11 @@
|
|
74
74
|
|
75
75
|
// Sizing shortcuts
|
76
76
|
// -------------------------
|
77
|
-
@mixin size($height
|
77
|
+
@mixin size($height, $width) {
|
78
78
|
width: $width;
|
79
79
|
height: $height;
|
80
80
|
}
|
81
|
-
@mixin square($size
|
81
|
+
@mixin square($size) {
|
82
82
|
@include size($size, $size);
|
83
83
|
}
|
84
84
|
|
@@ -88,6 +88,9 @@
|
|
88
88
|
:-moz-placeholder {
|
89
89
|
color: $color;
|
90
90
|
}
|
91
|
+
:-ms-input-placeholder {
|
92
|
+
color: $color;
|
93
|
+
}
|
91
94
|
::-webkit-input-placeholder {
|
92
95
|
color: $color;
|
93
96
|
}
|
@@ -102,19 +105,32 @@
|
|
102
105
|
white-space: nowrap;
|
103
106
|
}
|
104
107
|
|
108
|
+
// CSS image replacement
|
109
|
+
// -------------------------
|
110
|
+
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
111
|
+
@mixin hide-text {
|
112
|
+
font: 0/0 a;
|
113
|
+
color: transparent;
|
114
|
+
text-shadow: none;
|
115
|
+
background-color: transparent;
|
116
|
+
border: 0;
|
117
|
+
}
|
105
118
|
|
119
|
+
.hide-text {
|
120
|
+
@include hide-text();
|
121
|
+
}
|
106
122
|
|
107
123
|
// FONTS
|
108
124
|
// --------------------------------------------------
|
109
125
|
|
110
126
|
@mixin font-family-serif() {
|
111
|
-
font-family:
|
127
|
+
font-family: $serifFontFamily;
|
112
128
|
}
|
113
129
|
@mixin font-family-sans-serif() {
|
114
|
-
font-family:
|
130
|
+
font-family: $sansFontFamily;
|
115
131
|
}
|
116
132
|
@mixin font-family-monospace() {
|
117
|
-
font-family:
|
133
|
+
font-family: $monoFontFamily;
|
118
134
|
}
|
119
135
|
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
120
136
|
font-size: $size;
|
@@ -135,154 +151,18 @@
|
|
135
151
|
}
|
136
152
|
|
137
153
|
|
138
|
-
|
139
|
-
// GRID SYSTEM
|
154
|
+
// FORMS
|
140
155
|
// --------------------------------------------------
|
141
156
|
|
142
|
-
//
|
143
|
-
|
144
|
-
|
145
|
-
width:
|
146
|
-
|
147
|
-
|
148
|
-
@include clearfix();
|
149
|
-
}
|
150
|
-
|
151
|
-
// Le grid system
|
152
|
-
// -------------------------
|
153
|
-
|
154
|
-
@mixin gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
155
|
-
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
156
|
-
}
|
157
|
-
@mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
|
158
|
-
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
159
|
-
}
|
160
|
-
@mixin gridSystem-gridColumn($gridGutterWidth) {
|
161
|
-
float: left;
|
162
|
-
margin-left: $gridGutterWidth;
|
163
|
-
}
|
164
|
-
|
165
|
-
// Take these values and mixins, and make 'em do their thang
|
166
|
-
@mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
167
|
-
// Row surrounds the columns
|
168
|
-
.row {
|
169
|
-
margin-left: $gridGutterWidth * -1;
|
170
|
-
@include 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
|
-
@include gridSystem-gridColumn($gridGutterWidth);
|
175
|
-
}
|
176
|
-
// Default columns
|
177
|
-
.span1 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
|
178
|
-
.span2 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
|
179
|
-
.span3 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
|
180
|
-
.span4 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
|
181
|
-
.span5 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
|
182
|
-
.span6 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
|
183
|
-
.span7 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
|
184
|
-
.span8 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
|
185
|
-
.span9 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
|
186
|
-
.span10 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
|
187
|
-
.span11 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
|
188
|
-
.span12,
|
189
|
-
.container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
190
|
-
// Offset column options
|
191
|
-
.offset1 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
|
192
|
-
.offset2 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
|
193
|
-
.offset3 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
|
194
|
-
.offset4 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
|
195
|
-
.offset5 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
|
196
|
-
.offset6 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
|
197
|
-
.offset7 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
|
198
|
-
.offset8 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
|
199
|
-
.offset9 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
|
200
|
-
.offset10 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
|
201
|
-
.offset11 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
|
202
|
-
}
|
203
|
-
|
204
|
-
// Fluid grid system
|
205
|
-
// -------------------------
|
206
|
-
|
207
|
-
@mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
208
|
-
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
209
|
-
}
|
210
|
-
@mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
|
211
|
-
float: left;
|
212
|
-
margin-left: $fluidGridGutterWidth;
|
213
|
-
}
|
214
|
-
// Take these values and mixins, and make 'em do their thang
|
215
|
-
@mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
216
|
-
// Row surrounds the columns
|
217
|
-
.row-fluid {
|
218
|
-
width: 100%;
|
219
|
-
@include clearfix();
|
220
|
-
|
221
|
-
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
|
222
|
-
> [class*="span"] {
|
223
|
-
@include fluidGridSystem-gridColumn($fluidGridGutterWidth);
|
224
|
-
}
|
225
|
-
> [class*="span"]:first-child {
|
226
|
-
margin-left: 0;
|
227
|
-
}
|
228
|
-
// Default columns
|
229
|
-
> .span1 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
|
230
|
-
> .span2 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
|
231
|
-
> .span3 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
|
232
|
-
> .span4 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
|
233
|
-
> .span5 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
|
234
|
-
> .span6 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
|
235
|
-
> .span7 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
|
236
|
-
> .span8 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
|
237
|
-
> .span9 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
|
238
|
-
> .span10 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
|
239
|
-
> .span11 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
|
240
|
-
> .span12 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
|
241
|
-
}
|
242
|
-
}
|
243
|
-
|
244
|
-
// Input grid system
|
245
|
-
// -------------------------
|
246
|
-
@mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
247
|
-
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
248
|
-
}
|
249
|
-
@mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
250
|
-
input,
|
251
|
-
textarea,
|
252
|
-
.uneditable-input {
|
253
|
-
&.span1 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
|
254
|
-
&.span2 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
|
255
|
-
&.span3 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
|
256
|
-
&.span4 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
|
257
|
-
&.span5 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
|
258
|
-
&.span6 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
|
259
|
-
&.span7 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
|
260
|
-
&.span8 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
|
261
|
-
&.span9 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
|
262
|
-
&.span10 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
|
263
|
-
&.span11 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
|
264
|
-
&.span12 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
265
|
-
}
|
266
|
-
}
|
267
|
-
|
268
|
-
// Make a Grid
|
269
|
-
// -------------------------
|
270
|
-
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
271
|
-
@mixin makeRow() {
|
272
|
-
margin-left: $gridGutterWidth * -1;
|
273
|
-
@include clearfix();
|
274
|
-
}
|
275
|
-
@mixin makeColumn($columns: 1) {
|
276
|
-
float: left;
|
277
|
-
margin-left: $gridGutterWidth;
|
278
|
-
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
157
|
+
// Block level inputs
|
158
|
+
@mixin input-block-level {
|
159
|
+
display: block;
|
160
|
+
width: 100%;
|
161
|
+
min-height: 28px; // Make inputs at least the height of their button counterpart
|
162
|
+
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
279
163
|
}
|
280
164
|
|
281
165
|
|
282
|
-
|
283
|
-
// Form field states (used in forms)
|
284
|
-
// --------------------------------------------------
|
285
|
-
|
286
166
|
// Mixin for form field states
|
287
167
|
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
288
168
|
// Set the text color
|
@@ -292,6 +172,8 @@
|
|
292
172
|
color: $textColor;
|
293
173
|
}
|
294
174
|
// Style inputs accordingly
|
175
|
+
.checkbox,
|
176
|
+
.radio,
|
295
177
|
input,
|
296
178
|
select,
|
297
179
|
textarea {
|
@@ -317,14 +199,14 @@
|
|
317
199
|
// --------------------------------------------------
|
318
200
|
|
319
201
|
// Border Radius
|
320
|
-
@mixin border-radius($radius
|
202
|
+
@mixin border-radius($radius) {
|
321
203
|
-webkit-border-radius: $radius;
|
322
204
|
-moz-border-radius: $radius;
|
323
205
|
border-radius: $radius;
|
324
206
|
}
|
325
207
|
|
326
208
|
// Drop shadows
|
327
|
-
@mixin box-shadow($shadow
|
209
|
+
@mixin box-shadow($shadow) {
|
328
210
|
-webkit-box-shadow: $shadow;
|
329
211
|
-moz-box-shadow: $shadow;
|
330
212
|
box-shadow: $shadow;
|
@@ -354,21 +236,23 @@
|
|
354
236
|
-o-transform: scale($ratio);
|
355
237
|
transform: scale($ratio);
|
356
238
|
}
|
357
|
-
@mixin translate($x
|
239
|
+
@mixin translate($x, $y) {
|
358
240
|
-webkit-transform: translate($x, $y);
|
359
241
|
-moz-transform: translate($x, $y);
|
360
242
|
-ms-transform: translate($x, $y);
|
361
243
|
-o-transform: translate($x, $y);
|
362
244
|
transform: translate($x, $y);
|
363
245
|
}
|
364
|
-
|
246
|
+
|
247
|
+
@mixin skew($x, $y) {
|
365
248
|
-webkit-transform: skew($x, $y);
|
366
249
|
-moz-transform: skew($x, $y);
|
367
250
|
-ms-transform: skew($x, $y);
|
368
251
|
-o-transform: skew($x, $y);
|
369
252
|
transform: skew($x, $y);
|
370
253
|
}
|
371
|
-
|
254
|
+
|
255
|
+
@mixin translate3d($x, $y, $z) {
|
372
256
|
-webkit-transform: translate($x, $y, $z);
|
373
257
|
-moz-transform: translate($x, $y, $z);
|
374
258
|
-ms-transform: translate($x, $y, $z);
|
@@ -376,6 +260,17 @@
|
|
376
260
|
transform: translate($x, $y, $z);
|
377
261
|
}
|
378
262
|
|
263
|
+
// Backface visibility
|
264
|
+
// Prevent browsers from flickering when using CSS 3D transforms.
|
265
|
+
// Default value is `visible`, but can be changed to `hidden
|
266
|
+
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
267
|
+
@mixin backface-visibility($visibility){
|
268
|
+
-webkit-backface-visibility: $visibility;
|
269
|
+
-moz-backface-visibility: $visibility;
|
270
|
+
-ms-backface-visibility: $visibility;
|
271
|
+
backface-visibility: $visibility;
|
272
|
+
}
|
273
|
+
|
379
274
|
// Background clipping
|
380
275
|
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
381
276
|
@mixin background-clip($clip) {
|
@@ -385,7 +280,7 @@
|
|
385
280
|
}
|
386
281
|
|
387
282
|
// Background sizing
|
388
|
-
@mixin background-size($size){
|
283
|
+
@mixin background-size($size) {
|
389
284
|
-webkit-background-size: $size;
|
390
285
|
-moz-background-size: $size;
|
391
286
|
-o-background-size: $size;
|
@@ -397,26 +292,33 @@
|
|
397
292
|
@mixin box-sizing($boxmodel) {
|
398
293
|
-webkit-box-sizing: $boxmodel;
|
399
294
|
-moz-box-sizing: $boxmodel;
|
295
|
+
-ms-box-sizing: $boxmodel;
|
400
296
|
box-sizing: $boxmodel;
|
401
297
|
}
|
402
298
|
|
299
|
+
// Uses box-sizing mixin, so must be defined here
|
300
|
+
.input-block-level {
|
301
|
+
@include input-block-level();
|
302
|
+
}
|
303
|
+
|
403
304
|
// User select
|
404
305
|
// For selecting text on the page
|
405
306
|
@mixin user-select($select) {
|
406
307
|
-webkit-user-select: $select;
|
407
308
|
-moz-user-select: $select;
|
309
|
+
-ms-user-select: $select;
|
408
310
|
-o-user-select: $select;
|
409
311
|
user-select: $select;
|
410
312
|
}
|
411
313
|
|
412
314
|
// Resize anything
|
413
|
-
@mixin resizable($direction
|
315
|
+
@mixin resizable($direction) {
|
414
316
|
resize: $direction; // Options: horizontal, vertical, both
|
415
317
|
overflow: auto; // Safari fix
|
416
318
|
}
|
417
319
|
|
418
320
|
// CSS3 Content Columns
|
419
|
-
@mixin content-columns($columnCount, $columnGap: $
|
321
|
+
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
420
322
|
-webkit-column-count: $columnCount;
|
421
323
|
-moz-column-count: $columnCount;
|
422
324
|
column-count: $columnCount;
|
@@ -425,10 +327,20 @@
|
|
425
327
|
column-gap: $columnGap;
|
426
328
|
}
|
427
329
|
|
330
|
+
// Optional hyphenation
|
331
|
+
@mixin hyphens($mode: auto) {
|
332
|
+
word-wrap: break-word;
|
333
|
+
-webkit-hyphens: $mode;
|
334
|
+
-moz-hyphens: $mode;
|
335
|
+
-ms-hyphens: $mode;
|
336
|
+
-o-hyphens: $mode;
|
337
|
+
hyphens: $mode;
|
338
|
+
}
|
339
|
+
|
428
340
|
// Opacity
|
429
|
-
@mixin opacity($opacity
|
341
|
+
@mixin opacity($opacity) {
|
430
342
|
opacity: $opacity / 100;
|
431
|
-
|
343
|
+
filter: alpha(opacity=$opacity);
|
432
344
|
}
|
433
345
|
|
434
346
|
|
@@ -440,6 +352,7 @@
|
|
440
352
|
@mixin translucent-background($color: $white, $alpha: 1) {
|
441
353
|
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
442
354
|
}
|
355
|
+
|
443
356
|
@mixin translucent-border($color: $white, $alpha: 1) {
|
444
357
|
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
445
358
|
@include background-clip(padding-box);
|
@@ -449,7 +362,7 @@
|
|
449
362
|
@mixin gradientBar($primaryColor, $secondaryColor) {
|
450
363
|
@include gradient-vertical($primaryColor, $secondaryColor);
|
451
364
|
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
452
|
-
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1)
|
365
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
|
453
366
|
}
|
454
367
|
|
455
368
|
// Gradients
|
@@ -462,7 +375,7 @@
|
|
462
375
|
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
463
376
|
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
464
377
|
background-repeat: repeat-x;
|
465
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1)
|
378
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=1); // IE9 and down
|
466
379
|
}
|
467
380
|
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
468
381
|
background-color: mix($startColor, $endColor, 60%);
|
@@ -473,7 +386,7 @@
|
|
473
386
|
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
474
387
|
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
475
388
|
background-repeat: repeat-x;
|
476
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
|
389
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down
|
477
390
|
}
|
478
391
|
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
479
392
|
background-color: $endColor;
|
@@ -493,7 +406,7 @@
|
|
493
406
|
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
494
407
|
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
495
408
|
background-repeat: no-repeat;
|
496
|
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
|
409
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
497
410
|
}
|
498
411
|
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
499
412
|
background-color: $outerColor;
|
@@ -501,8 +414,8 @@
|
|
501
414
|
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
502
415
|
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
503
416
|
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
417
|
+
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
504
418
|
background-repeat: no-repeat;
|
505
|
-
// Opera cannot do radial gradients yet
|
506
419
|
}
|
507
420
|
@mixin gradient-striped($color, $angle: -45deg) {
|
508
421
|
background-color: $color;
|
@@ -515,20 +428,44 @@
|
|
515
428
|
}
|
516
429
|
|
517
430
|
// Reset filters for IE
|
518
|
-
@mixin reset-filter() {
|
519
|
-
filter: progid:DXImageTransform.Microsoft.gradient(enabled
|
431
|
+
@mixin gradient-reset-filter() {
|
432
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
520
433
|
}
|
521
434
|
|
522
|
-
|
523
|
-
|
435
|
+
|
436
|
+
|
437
|
+
// COMPONENT MIXINS
|
438
|
+
// --------------------------------------------------
|
439
|
+
|
440
|
+
// Horizontal dividers
|
441
|
+
// -------------------------
|
442
|
+
// Dividers (basically an hr) within dropdowns and nav lists
|
443
|
+
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
|
444
|
+
// IE7 needs a set width since we gave a height. Restricting just
|
445
|
+
// to IE7 to keep the 1px left/right space in other browsers.
|
446
|
+
// It is unclear where IE is getting the extra space that we need
|
447
|
+
// to negative-margin away, but so it goes.
|
448
|
+
*width: 100%;
|
449
|
+
height: 1px;
|
450
|
+
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
451
|
+
*margin: -5px 0 5px;
|
452
|
+
overflow: hidden;
|
453
|
+
background-color: $top;
|
454
|
+
border-bottom: 1px solid $bottom;
|
455
|
+
}
|
456
|
+
|
457
|
+
// Button backgrounds
|
458
|
+
// ------------------
|
524
459
|
@mixin buttonBackground($startColor, $endColor) {
|
525
460
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
526
461
|
@include gradientBar($startColor, $endColor);
|
527
|
-
|
462
|
+
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
463
|
+
@include gradient-reset-filter();
|
528
464
|
|
529
465
|
// in these cases the gradient won't cover the background, so we override
|
530
466
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
531
467
|
background-color: $endColor;
|
468
|
+
*background-color: darken($endColor, 5%);
|
532
469
|
}
|
533
470
|
|
534
471
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
@@ -538,42 +475,169 @@
|
|
538
475
|
}
|
539
476
|
}
|
540
477
|
|
478
|
+
// Navbar vertical align
|
479
|
+
// -------------------------
|
480
|
+
// Vertically center elements in the navbar.
|
481
|
+
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
482
|
+
@mixin navbarVerticalAlign($elementHeight) {
|
483
|
+
margin-top: ($navbarHeight - $elementHeight) / 2;
|
484
|
+
}
|
541
485
|
|
542
|
-
//
|
543
|
-
// --------------------------------------------------
|
544
|
-
|
545
|
-
// POPOVER ARROWS
|
486
|
+
// Popover arrows
|
546
487
|
// -------------------------
|
547
488
|
// For tipsies and popovers
|
548
|
-
@mixin popoverArrow-top($arrowWidth: 5px) {
|
489
|
+
@mixin popoverArrow-top($arrowWidth: 5px, $color: $black) {
|
549
490
|
bottom: 0;
|
550
491
|
left: 50%;
|
551
492
|
margin-left: -$arrowWidth;
|
552
493
|
border-left: $arrowWidth solid transparent;
|
553
494
|
border-right: $arrowWidth solid transparent;
|
554
|
-
border-top: $arrowWidth solid $
|
495
|
+
border-top: $arrowWidth solid $color;
|
555
496
|
}
|
556
|
-
@mixin popoverArrow-left($arrowWidth: 5px) {
|
497
|
+
@mixin popoverArrow-left($arrowWidth: 5px, $color: $black) {
|
557
498
|
top: 50%;
|
558
499
|
right: 0;
|
559
500
|
margin-top: -$arrowWidth;
|
560
501
|
border-top: $arrowWidth solid transparent;
|
561
502
|
border-bottom: $arrowWidth solid transparent;
|
562
|
-
border-left: $arrowWidth solid $
|
503
|
+
border-left: $arrowWidth solid $color;
|
563
504
|
}
|
564
|
-
@mixin popoverArrow-bottom($arrowWidth: 5px) {
|
505
|
+
@mixin popoverArrow-bottom($arrowWidth: 5px, $color: $black) {
|
565
506
|
top: 0;
|
566
507
|
left: 50%;
|
567
508
|
margin-left: -$arrowWidth;
|
568
509
|
border-left: $arrowWidth solid transparent;
|
569
510
|
border-right: $arrowWidth solid transparent;
|
570
|
-
border-bottom: $arrowWidth solid $
|
511
|
+
border-bottom: $arrowWidth solid $color;
|
571
512
|
}
|
572
|
-
@mixin popoverArrow-right($arrowWidth: 5px) {
|
513
|
+
@mixin popoverArrow-right($arrowWidth: 5px, $color: $black) {
|
573
514
|
top: 50%;
|
574
515
|
left: 0;
|
575
516
|
margin-top: -$arrowWidth;
|
576
517
|
border-top: $arrowWidth solid transparent;
|
577
518
|
border-bottom: $arrowWidth solid transparent;
|
578
|
-
border-right: $arrowWidth solid $
|
519
|
+
border-right: $arrowWidth solid $color;
|
520
|
+
}
|
521
|
+
|
522
|
+
// Grid System
|
523
|
+
// -----------
|
524
|
+
|
525
|
+
// Centered container element
|
526
|
+
@mixin container-fixed() {
|
527
|
+
margin-right: auto;
|
528
|
+
margin-left: auto;
|
529
|
+
@include clearfix();
|
530
|
+
}
|
531
|
+
|
532
|
+
// Table columns
|
533
|
+
@mixin tableColumns($columnSpan: 1) {
|
534
|
+
float: none; // undo default grid column styles
|
535
|
+
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
536
|
+
margin-left: 0; // undo default grid column styles
|
537
|
+
}
|
538
|
+
|
539
|
+
// Make a Grid
|
540
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
541
|
+
@mixin makeRow() {
|
542
|
+
margin-left: $gridGutterWidth * -1;
|
543
|
+
@include clearfix();
|
544
|
+
}
|
545
|
+
@mixin makeColumn($columns: 1, $offset: 0) {
|
546
|
+
float: left;
|
547
|
+
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
548
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
549
|
+
}
|
550
|
+
|
551
|
+
// The Grid
|
552
|
+
@mixin core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
|
553
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
554
|
+
}
|
555
|
+
|
556
|
+
@mixin core-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
557
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
558
|
+
}
|
559
|
+
|
560
|
+
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
|
561
|
+
.row {
|
562
|
+
margin-left: $gridGutterWidth * -1;
|
563
|
+
@include clearfix();
|
564
|
+
}
|
565
|
+
|
566
|
+
[class*="span"] {
|
567
|
+
float: left;
|
568
|
+
margin-left: $gridGutterWidth;
|
569
|
+
}
|
570
|
+
|
571
|
+
// Set the container width, and override it for fixed navbars in media queries
|
572
|
+
.container,
|
573
|
+
.navbar-fixed-top .container,
|
574
|
+
.navbar-fixed-bottom .container {
|
575
|
+
@include core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
576
|
+
}
|
577
|
+
|
578
|
+
// generate .spanX and .offsetX
|
579
|
+
$i: $gridColumns;
|
580
|
+
@while $i > 0 {
|
581
|
+
.span#{$i} { @include core-span($i, $gridColumnWidth, $gridGutterWidth); }
|
582
|
+
$i: $i - 1;
|
583
|
+
}
|
584
|
+
|
585
|
+
$i: $gridColumns;
|
586
|
+
@while $i > 0 {
|
587
|
+
.offset#{$i} { @include core-offset($i, $gridColumnWidth, $gridGutterWidth); }
|
588
|
+
$i: $i - 1;
|
589
|
+
}
|
590
|
+
}
|
591
|
+
|
592
|
+
@mixin fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
593
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
594
|
+
*width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
595
|
+
}
|
596
|
+
|
597
|
+
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
598
|
+
.row-fluid {
|
599
|
+
width: 100%;
|
600
|
+
@include clearfix();
|
601
|
+
[class*="span"] {
|
602
|
+
@include input-block-level();
|
603
|
+
float: left;
|
604
|
+
margin-left: $fluidGridGutterWidth;
|
605
|
+
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
|
606
|
+
}
|
607
|
+
[class*="span"]:first-child {
|
608
|
+
margin-left: 0;
|
609
|
+
}
|
610
|
+
|
611
|
+
// generate .spanX
|
612
|
+
$i: $gridColumns;
|
613
|
+
@while $i > 0 {
|
614
|
+
.span#{$i} {
|
615
|
+
@include fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
616
|
+
}
|
617
|
+
$i: $i - 1;
|
618
|
+
}
|
619
|
+
}
|
579
620
|
}
|
621
|
+
|
622
|
+
@mixin input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
623
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
624
|
+
}
|
625
|
+
|
626
|
+
@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
|
627
|
+
input,
|
628
|
+
textarea,
|
629
|
+
.uneditable-input {
|
630
|
+
margin-left: 0; // override margin-left from core grid system
|
631
|
+
}
|
632
|
+
|
633
|
+
// generate .spanX
|
634
|
+
$i: $gridColumns;
|
635
|
+
@while $i > 0 {
|
636
|
+
input.span#{$i},
|
637
|
+
textarea.span#{$i},
|
638
|
+
.uneditable-input.span#{$i} {
|
639
|
+
@include input-span($i, $gridColumnWidth, $gridGutterWidth);
|
640
|
+
}
|
641
|
+
$i: $i - 1;
|
642
|
+
}
|
643
|
+
}
|