bootstrap-generators 2.0.1 → 2.0.4
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/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
|
+
}
|