bootstrap-sass 1.4.4 → 2.0.0
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.
Potentially problematic release.
This version of bootstrap-sass might be problematic. Click here for more details.
- data/README.md +52 -19
- data/lib/bootstrap-sass.rb +24 -6
- data/lib/bootstrap-sass/compass_extensions.rb +10 -0
- data/lib/bootstrap-sass/config/sass_extentions.rb +14 -0
- data/lib/bootstrap-sass/engine.rb +9 -0
- data/templates/project/manifest.rb +18 -0
- data/templates/project/styles.scss +5 -0
- 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 +91 -0
- data/vendor/assets/javascripts/bootstrap-button.js +98 -0
- data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
- data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
- data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
- data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
- data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
- data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
- data/vendor/assets/javascripts/bootstrap.js +9 -6
- data/vendor/assets/stylesheets/_bootstrap-responsive.scss +314 -0
- data/vendor/assets/stylesheets/_bootstrap.scss +63 -0
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +28 -0
- data/vendor/assets/stylesheets/bootstrap/_alerts.scss +62 -0
- data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +136 -0
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +149 -0
- data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
- data/vendor/assets/stylesheets/bootstrap/_close.scss +18 -0
- data/vendor/assets/stylesheets/bootstrap/_code.scss +43 -0
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +18 -0
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +127 -0
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +458 -0
- data/vendor/assets/stylesheets/bootstrap/_grid.scss +8 -0
- data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/bootstrap/_labels.scss +16 -0
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +479 -0
- data/vendor/assets/stylesheets/bootstrap/_modals.scss +72 -0
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +282 -0
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +320 -0
- data/vendor/assets/stylesheets/bootstrap/_pager.scss +30 -0
- data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +105 -0
- data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +156 -0
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +117 -0
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_type.scss +209 -0
- data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +99 -0
- data/vendor/assets/stylesheets/bootstrap/_wells.scss +17 -0
- metadata +68 -20
- data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
- data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
- data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
- data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
- data/vendor/assets/stylesheets/bootstrap.css.scss +0 -25
- data/vendor/assets/stylesheets/bootstrap/forms.css.scss +0 -427
- data/vendor/assets/stylesheets/bootstrap/mixins.css.scss +0 -216
- data/vendor/assets/stylesheets/bootstrap/patterns.css.scss +0 -994
- data/vendor/assets/stylesheets/bootstrap/reset.css.scss +0 -142
- data/vendor/assets/stylesheets/bootstrap/scaffolding.css.scss +0 -129
- data/vendor/assets/stylesheets/bootstrap/tables.css.scss +0 -212
- data/vendor/assets/stylesheets/bootstrap/type.css.scss +0 -186
- data/vendor/assets/stylesheets/bootstrap/variables.css.scss +0 -51
@@ -0,0 +1,20 @@
|
|
1
|
+
// HERO UNIT
|
2
|
+
// ---------
|
3
|
+
|
4
|
+
.hero-unit {
|
5
|
+
padding: 60px;
|
6
|
+
margin-bottom: 30px;
|
7
|
+
background-color: #f5f5f5;
|
8
|
+
@include 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,16 @@
|
|
1
|
+
// LABELS
|
2
|
+
// ------
|
3
|
+
|
4
|
+
.label {
|
5
|
+
padding: 1px 3px 2px;
|
6
|
+
font-size: $baseFontSize * .75;
|
7
|
+
font-weight: bold;
|
8
|
+
color: $white;
|
9
|
+
text-transform: uppercase;
|
10
|
+
background-color: $grayLight;
|
11
|
+
@include border-radius(3px);
|
12
|
+
}
|
13
|
+
.label-important { background-color: $errorText; }
|
14
|
+
.label-warning { background-color: $orange; }
|
15
|
+
.label-success { background-color: $successText; }
|
16
|
+
.label-info { background-color: $infoText; }
|
@@ -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
|
+
@include 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
|
+
@include clearfix();
|
17
|
+
}
|
@@ -0,0 +1,479 @@
|
|
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
|
+
@mixin 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
|
+
@mixin tab-focus() {
|
27
|
+
// Default
|
28
|
+
outline: thin dotted;
|
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
|
+
@mixin center-block() {
|
37
|
+
display: block;
|
38
|
+
margin-left: auto;
|
39
|
+
margin-right: auto;
|
40
|
+
}
|
41
|
+
|
42
|
+
// IE7 inline-block
|
43
|
+
// ----------------
|
44
|
+
@mixin 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
|
+
@mixin ie7-restore-left-whitespace() {
|
56
|
+
*margin-left: .3em;
|
57
|
+
|
58
|
+
&:first-child {
|
59
|
+
*margin-left: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@mixin ie7-restore-right-whitespace() {
|
64
|
+
*margin-right: .3em;
|
65
|
+
|
66
|
+
&:last-child {
|
67
|
+
*margin-left: 0;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
// Sizing shortcuts
|
72
|
+
// -------------------------
|
73
|
+
@mixin size($height: 5px, $width: 5px) {
|
74
|
+
width: $width;
|
75
|
+
height: $height;
|
76
|
+
}
|
77
|
+
@mixin square($size: 5px) {
|
78
|
+
@include size($size, $size);
|
79
|
+
}
|
80
|
+
|
81
|
+
// Placeholder text
|
82
|
+
// -------------------------
|
83
|
+
@mixin placeholder($color: $placeholderText) {
|
84
|
+
:-moz-placeholder {
|
85
|
+
color: $color;
|
86
|
+
}
|
87
|
+
::-webkit-input-placeholder {
|
88
|
+
color: $color;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
|
93
|
+
|
94
|
+
// FONTS
|
95
|
+
// --------------------------------------------------
|
96
|
+
@mixin font-family-serif() {
|
97
|
+
font-family: Georgia, "Times New Roman", Times, serif;
|
98
|
+
}
|
99
|
+
@mixin font-family-sans-serif() {
|
100
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
101
|
+
}
|
102
|
+
@mixin font-family-monospace() {
|
103
|
+
font-family: Menlo, Monaco, "Courier New", monospace;
|
104
|
+
}
|
105
|
+
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
106
|
+
font-size: $size;
|
107
|
+
font-weight: $weight;
|
108
|
+
line-height: $lineHeight;
|
109
|
+
}
|
110
|
+
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
111
|
+
@include font-family-serif();
|
112
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
113
|
+
}
|
114
|
+
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
115
|
+
@include font-family-sans-serif();
|
116
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
117
|
+
}
|
118
|
+
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
119
|
+
@include font-family-monospace();
|
120
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
121
|
+
}
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
// GRID SYSTEM
|
126
|
+
// --------------------------------------------------
|
127
|
+
|
128
|
+
// Site container
|
129
|
+
// -------------------------
|
130
|
+
@mixin container-fixed() {
|
131
|
+
width: $gridRowWidth;
|
132
|
+
margin-left: auto;
|
133
|
+
margin-right: auto;
|
134
|
+
@include clearfix();
|
135
|
+
}
|
136
|
+
|
137
|
+
// Le grid system
|
138
|
+
// -------------------------
|
139
|
+
|
140
|
+
// Setup the mixins to be used
|
141
|
+
@mixin gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
142
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
143
|
+
}
|
144
|
+
@mixin gridSystemOffset($gridColumnWidth, $gridGutterWidth, $columns) {
|
145
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
146
|
+
}
|
147
|
+
@mixin gridSystemGridColumn($gridGutterWidth) {
|
148
|
+
float: left;
|
149
|
+
margin-left: $gridGutterWidth;
|
150
|
+
}
|
151
|
+
// Take these values and mixins, and make 'em do their thang
|
152
|
+
@mixin gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
153
|
+
// Row surrounds the columns
|
154
|
+
.row {
|
155
|
+
margin-left: $gridGutterWidth * -1;
|
156
|
+
@include clearfix();
|
157
|
+
}
|
158
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
159
|
+
[class*="span"] {
|
160
|
+
@include gridSystemGridColumn($gridGutterWidth);
|
161
|
+
}
|
162
|
+
// Default columns
|
163
|
+
@for $i from 1 through $gridColumns {
|
164
|
+
.span#{$i} { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i) }
|
165
|
+
}
|
166
|
+
.container { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $gridColumns) }
|
167
|
+
|
168
|
+
// Offset column options
|
169
|
+
@for $i from 1 through $gridColumns - 1 {
|
170
|
+
.offset#{$i} { @include gridSystemOffset($gridColumnWidth, $gridGutterWidth, $i) }
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
174
|
+
// Fluid grid system
|
175
|
+
// -------------------------
|
176
|
+
@mixin fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
177
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
178
|
+
}
|
179
|
+
@mixin fluidGridSystemGridColumn($fluidGridGutterWidth) {
|
180
|
+
float: left;
|
181
|
+
margin-left: $fluidGridGutterWidth;
|
182
|
+
}
|
183
|
+
// Take these values and mixins, and make 'em do their thang
|
184
|
+
@mixin fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
185
|
+
// Row surrounds the columns
|
186
|
+
.row-fluid {
|
187
|
+
width: 100%;
|
188
|
+
@include clearfix();
|
189
|
+
|
190
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
191
|
+
> [class*="span"] {
|
192
|
+
@include fluidGridSystemGridColumn($fluidGridGutterWidth);
|
193
|
+
}
|
194
|
+
> [class*="span"]:first-child {
|
195
|
+
margin-left: 0;
|
196
|
+
}
|
197
|
+
// Default columns
|
198
|
+
@for $i from 1 through $gridColumns {
|
199
|
+
.span#{$i} { @include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
|
200
|
+
}
|
201
|
+
}
|
202
|
+
}
|
203
|
+
|
204
|
+
|
205
|
+
|
206
|
+
// Input grid system
|
207
|
+
// -------------------------
|
208
|
+
@mixin inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
209
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
210
|
+
}
|
211
|
+
@mixin inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
212
|
+
input, textarea, .uneditable-input {
|
213
|
+
@for $i from 1 through $gridColumns {
|
214
|
+
&.span#{$i} { @include inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
215
|
+
}
|
216
|
+
}
|
217
|
+
}
|
218
|
+
|
219
|
+
|
220
|
+
|
221
|
+
// CSS3 PROPERTIES
|
222
|
+
// --------------------------------------------------
|
223
|
+
|
224
|
+
// Border Radius
|
225
|
+
@mixin border-radius($radius: 5px) {
|
226
|
+
-webkit-border-radius: $radius;
|
227
|
+
-moz-border-radius: $radius;
|
228
|
+
border-radius: $radius;
|
229
|
+
}
|
230
|
+
|
231
|
+
// Drop shadows
|
232
|
+
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
233
|
+
-webkit-box-shadow: $shadow;
|
234
|
+
-moz-box-shadow: $shadow;
|
235
|
+
box-shadow: $shadow;
|
236
|
+
}
|
237
|
+
|
238
|
+
// Transitions
|
239
|
+
@mixin transition($transition) {
|
240
|
+
-webkit-transition: $transition;
|
241
|
+
-moz-transition: $transition;
|
242
|
+
-ms-transition: $transition;
|
243
|
+
-o-transition: $transition;
|
244
|
+
transition: $transition;
|
245
|
+
}
|
246
|
+
|
247
|
+
// Transformations
|
248
|
+
@mixin rotate($degrees) {
|
249
|
+
-webkit-transform: rotate($degrees);
|
250
|
+
-moz-transform: rotate($degrees);
|
251
|
+
-ms-transform: rotate($degrees);
|
252
|
+
-o-transform: rotate($degrees);
|
253
|
+
transform: rotate($degrees);
|
254
|
+
}
|
255
|
+
@mixin scale($ratio) {
|
256
|
+
-webkit-transform: scale($ratio);
|
257
|
+
-moz-transform: scale($ratio);
|
258
|
+
-ms-transform: scale($ratio);
|
259
|
+
-o-transform: scale($ratio);
|
260
|
+
transform: scale($ratio);
|
261
|
+
}
|
262
|
+
@mixin translate($x: 0, $y: 0) {
|
263
|
+
-webkit-transform: translate($x, $y);
|
264
|
+
-moz-transform: translate($x, $y);
|
265
|
+
-ms-transform: translate($x, $y);
|
266
|
+
-o-transform: translate($x, $y);
|
267
|
+
transform: translate($x, $y);
|
268
|
+
}
|
269
|
+
|
270
|
+
// Removed duplicate mixin # TM.
|
271
|
+
|
272
|
+
@mixin skew($x: 0, $y: 0) {
|
273
|
+
-webkit-transform: skew($x, $y);
|
274
|
+
-moz-transform: skew($x, $y);
|
275
|
+
-ms-transform: skew($x, $y);
|
276
|
+
-o-transform: skew($x, $y);
|
277
|
+
transform: skew($x, $y);
|
278
|
+
}
|
279
|
+
|
280
|
+
// Background clipping
|
281
|
+
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
282
|
+
@mixin background-clip($clip) {
|
283
|
+
-webkit-background-clip: $clip;
|
284
|
+
-moz-background-clip: $clip;
|
285
|
+
background-clip: $clip;
|
286
|
+
}
|
287
|
+
|
288
|
+
// Background sizing
|
289
|
+
@mixin background-size($size){
|
290
|
+
-webkit-background-size: $size;
|
291
|
+
-moz-background-size: $size;
|
292
|
+
-o-background-size: $size;
|
293
|
+
background-size: $size;
|
294
|
+
}
|
295
|
+
|
296
|
+
|
297
|
+
// Box sizing
|
298
|
+
@mixin box-sizing($boxmodel) {
|
299
|
+
-webkit-box-sizing: $boxmodel;
|
300
|
+
-moz-box-sizing: $boxmodel;
|
301
|
+
box-sizing: $boxmodel;
|
302
|
+
}
|
303
|
+
|
304
|
+
// User select
|
305
|
+
// For selecting text on the page
|
306
|
+
@mixin user-select($select) {
|
307
|
+
-webkit-user-select: $select;
|
308
|
+
-moz-user-select: $select;
|
309
|
+
-o-user-select: $select;
|
310
|
+
user-select: $select;
|
311
|
+
}
|
312
|
+
|
313
|
+
// Resize anything
|
314
|
+
@mixin resizable($direction: both) {
|
315
|
+
resize: $direction; // Options: horizontal, vertical, both
|
316
|
+
overflow: auto; // Safari fix
|
317
|
+
}
|
318
|
+
|
319
|
+
// CSS3 Content Columns
|
320
|
+
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
|
321
|
+
-webkit-column-count: $columnCount;
|
322
|
+
-moz-column-count: $columnCount;
|
323
|
+
column-count: $columnCount;
|
324
|
+
-webkit-column-gap: $columnGap;
|
325
|
+
-moz-column-gap: $columnGap;
|
326
|
+
column-gap: $columnGap;
|
327
|
+
}
|
328
|
+
|
329
|
+
// Opacity
|
330
|
+
@mixin opacity($opacity: 100) {
|
331
|
+
opacity: $opacity / 100;
|
332
|
+
filter: alpha(opacity=$opacity);
|
333
|
+
}
|
334
|
+
|
335
|
+
|
336
|
+
|
337
|
+
// BACKGROUNDS
|
338
|
+
// --------------------------------------------------
|
339
|
+
|
340
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
341
|
+
@mixin translucent-background($color: $white, $alpha: 1) {
|
342
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
343
|
+
}
|
344
|
+
@mixin translucent-border($color: $white, $alpha: 1) {
|
345
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
346
|
+
@include background-clip(padding-box);
|
347
|
+
}
|
348
|
+
|
349
|
+
// Gradient Bar Colors for buttons and alerts
|
350
|
+
@mixin gradientBar($primaryColor, $secondaryColor) {
|
351
|
+
@include gradient-vertical($primaryColor, $secondaryColor);
|
352
|
+
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
353
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
354
|
+
}
|
355
|
+
|
356
|
+
// Gradients
|
357
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
358
|
+
background-color: $endColor;
|
359
|
+
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
360
|
+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
361
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
362
|
+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
363
|
+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
364
|
+
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
365
|
+
background-repeat: repeat-x;
|
366
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
367
|
+
}
|
368
|
+
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
369
|
+
background-color: mix($startColor, $endColor, 60%);
|
370
|
+
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
371
|
+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
372
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
373
|
+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
374
|
+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
375
|
+
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
376
|
+
background-repeat: repeat-x;
|
377
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
378
|
+
}
|
379
|
+
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
380
|
+
background-color: $endColor;
|
381
|
+
background-repeat: repeat-x;
|
382
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
383
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
384
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
385
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
386
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
387
|
+
}
|
388
|
+
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
389
|
+
background-color: mix($midColor, $endColor, 80%);
|
390
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
391
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
392
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
393
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
394
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
395
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
396
|
+
background-repeat: no-repeat;
|
397
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
398
|
+
}
|
399
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
400
|
+
background-color: $outerColor;
|
401
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
402
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
403
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
404
|
+
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
405
|
+
background-repeat: no-repeat;
|
406
|
+
// Opera cannot do radial gradients yet
|
407
|
+
}
|
408
|
+
@mixin gradient-striped($color, $angle: -45deg) {
|
409
|
+
background-color: $color;
|
410
|
+
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));
|
411
|
+
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);
|
412
|
+
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);
|
413
|
+
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);
|
414
|
+
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);
|
415
|
+
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));
|
416
|
+
}
|
417
|
+
// Reset filters for IE
|
418
|
+
@mixin reset-filter() {
|
419
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
420
|
+
}
|
421
|
+
|
422
|
+
|
423
|
+
// Mixin for generating button backgrounds
|
424
|
+
// ---------------------------------------
|
425
|
+
@mixin buttonBackground($startColor, $endColor) {
|
426
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
427
|
+
@include gradientBar($startColor, $endColor);
|
428
|
+
@include reset-filter();
|
429
|
+
|
430
|
+
// in these cases the gradient won't cover the background, so we override
|
431
|
+
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
432
|
+
background-color: $endColor;
|
433
|
+
}
|
434
|
+
|
435
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
436
|
+
&:active, &.active {
|
437
|
+
background-color: darken($endColor, 10%) \9;
|
438
|
+
}
|
439
|
+
}
|
440
|
+
|
441
|
+
|
442
|
+
// COMPONENT MIXINS
|
443
|
+
// --------------------------------------------------
|
444
|
+
|
445
|
+
// POPOVER ARROWS
|
446
|
+
// -------------------------
|
447
|
+
// For tipsies and popovers
|
448
|
+
@mixin popoverArrowTop($arrowWidth: 5px) {
|
449
|
+
bottom: 0;
|
450
|
+
left: 50%;
|
451
|
+
margin-left: -$arrowWidth;
|
452
|
+
border-left: $arrowWidth solid transparent;
|
453
|
+
border-right: $arrowWidth solid transparent;
|
454
|
+
border-top: $arrowWidth solid $black;
|
455
|
+
}
|
456
|
+
@mixin popoverArrowLeft($arrowWidth: 5px) {
|
457
|
+
top: 50%;
|
458
|
+
right: 0;
|
459
|
+
margin-top: -$arrowWidth;
|
460
|
+
border-top: $arrowWidth solid transparent;
|
461
|
+
border-bottom: $arrowWidth solid transparent;
|
462
|
+
border-left: $arrowWidth solid $black;
|
463
|
+
}
|
464
|
+
@mixin popoverArrowBottom($arrowWidth: 5px) {
|
465
|
+
top: 0;
|
466
|
+
left: 50%;
|
467
|
+
margin-left: -$arrowWidth;
|
468
|
+
border-left: $arrowWidth solid transparent;
|
469
|
+
border-right: $arrowWidth solid transparent;
|
470
|
+
border-bottom: $arrowWidth solid $black;
|
471
|
+
}
|
472
|
+
@mixin popoverArrowRight($arrowWidth: 5px) {
|
473
|
+
top: 50%;
|
474
|
+
left: 0;
|
475
|
+
margin-top: -$arrowWidth;
|
476
|
+
border-top: $arrowWidth solid transparent;
|
477
|
+
border-bottom: $arrowWidth solid transparent;
|
478
|
+
border-right: $arrowWidth solid $black;
|
479
|
+
}
|