anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1
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/Rakefile +11 -15
- data/bootstrap-rails.gemspec +4 -4
- data/lib/bootstrap-rails/version.rb +1 -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 +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 +8 -5
- data/vendor/assets/stylesheets/accordion.scss +28 -0
- data/vendor/assets/stylesheets/alerts.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap.scss +44 -8
- data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/button-groups.scss +147 -0
- data/vendor/assets/stylesheets/buttons.scss +165 -0
- data/vendor/assets/stylesheets/carousel.scss +121 -0
- data/vendor/assets/stylesheets/close.scss +18 -0
- data/vendor/assets/stylesheets/code.scss +44 -0
- data/vendor/assets/stylesheets/component-animations.scss +18 -0
- data/vendor/assets/stylesheets/dropdowns.scss +131 -0
- data/vendor/assets/stylesheets/forms.scss +337 -287
- data/vendor/assets/stylesheets/grid.scss +8 -0
- data/vendor/assets/stylesheets/hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/labels.scss +16 -0
- data/vendor/assets/stylesheets/layouts.scss +17 -0
- data/vendor/assets/stylesheets/mixins.scss +375 -111
- data/vendor/assets/stylesheets/modals.scss +72 -0
- data/vendor/assets/stylesheets/navbar.scss +292 -0
- data/vendor/assets/stylesheets/navs.scss +344 -0
- data/vendor/assets/stylesheets/pager.scss +30 -0
- data/vendor/assets/stylesheets/pagination.scss +55 -0
- data/vendor/assets/stylesheets/popovers.scss +49 -0
- data/vendor/assets/stylesheets/progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/reset.scss +37 -52
- data/vendor/assets/stylesheets/responsive.scss +323 -0
- data/vendor/assets/stylesheets/scaffolding.scss +13 -96
- data/vendor/assets/stylesheets/sprites.scss +158 -0
- data/vendor/assets/stylesheets/tables.scss +68 -149
- data/vendor/assets/stylesheets/thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/tooltip.scss +35 -0
- data/vendor/assets/stylesheets/type.scss +100 -70
- data/vendor/assets/stylesheets/utilities.scss +23 -0
- data/vendor/assets/stylesheets/variables.scss +94 -55
- data/vendor/assets/stylesheets/wells.scss +17 -0
- metadata +51 -30
- 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/patterns.scss +0 -1060
@@ -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
|
+
}
|
@@ -1,48 +1,86 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
// Mixins.less
|
2
|
+
// Snippets of reusable CSS to develop faster and keep code readable
|
3
|
+
// -----------------------------------------------------------------
|
4
4
|
|
5
5
|
|
6
|
-
//
|
7
|
-
|
8
|
-
|
6
|
+
// UTILITY MIXINS
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
// Clearfix
|
10
|
+
// --------
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
12
|
+
@mixin clearfix() {
|
13
|
+
*zoom: 1;
|
9
14
|
&:before,
|
10
15
|
&:after {
|
11
16
|
display: table;
|
12
17
|
content: "";
|
13
|
-
zoom: 1;
|
14
18
|
}
|
15
19
|
&:after {
|
16
20
|
clear: both;
|
17
21
|
}
|
18
22
|
}
|
19
23
|
|
20
|
-
|
21
|
-
|
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;
|
22
32
|
}
|
23
33
|
|
24
34
|
// Center-align a block level element
|
25
|
-
|
26
|
-
|
35
|
+
// ----------------------------------
|
36
|
+
@mixin center-block() {
|
37
|
+
display: block;
|
27
38
|
margin-left: auto;
|
28
39
|
margin-right: auto;
|
29
40
|
}
|
30
41
|
|
31
|
-
|
32
|
-
|
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
|
+
}
|
33
69
|
}
|
34
70
|
|
35
71
|
// Sizing shortcuts
|
72
|
+
// -------------------------
|
36
73
|
@mixin size($height: 5px, $width: 5px) {
|
37
|
-
|
38
|
-
|
74
|
+
width: $width;
|
75
|
+
height: $height;
|
39
76
|
}
|
40
77
|
@mixin square($size: 5px) {
|
41
|
-
|
78
|
+
@include size($size, $size);
|
42
79
|
}
|
43
80
|
|
44
|
-
//
|
45
|
-
|
81
|
+
// Placeholder text
|
82
|
+
// -------------------------
|
83
|
+
@mixin placeholder($color: $placeholderText) {
|
46
84
|
:-moz-placeholder {
|
47
85
|
color: $color;
|
48
86
|
}
|
@@ -51,61 +89,153 @@
|
|
51
89
|
}
|
52
90
|
}
|
53
91
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
92
|
+
|
93
|
+
|
94
|
+
// FONTS
|
95
|
+
// --------------------------------------------------
|
96
|
+
|
97
|
+
@mixin font-family-serif() {
|
98
|
+
font-family: Georgia, "Times New Roman", Times, serif;
|
59
99
|
}
|
60
|
-
|
100
|
+
|
101
|
+
@mixin font-family-sans-serif() {
|
61
102
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
62
|
-
font-size: $size;
|
63
|
-
font-weight: $weight;
|
64
|
-
line-height: $lineHeight;
|
65
103
|
}
|
66
|
-
|
67
|
-
|
68
|
-
font-
|
69
|
-
font-weight: $weight;
|
70
|
-
line-height: $lineHeight;
|
104
|
+
|
105
|
+
@mixin font-family-monospace() {
|
106
|
+
font-family: Menlo, Monaco, "Courier New", monospace;
|
71
107
|
}
|
72
|
-
|
73
|
-
|
108
|
+
|
109
|
+
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
74
110
|
font-size: $size;
|
75
111
|
font-weight: $weight;
|
76
112
|
line-height: $lineHeight;
|
77
113
|
}
|
78
114
|
|
79
|
-
|
80
|
-
@
|
81
|
-
|
115
|
+
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
116
|
+
@include font-family-serif;
|
117
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
118
|
+
}
|
119
|
+
|
120
|
+
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
121
|
+
@include font-family-sans-serif;
|
122
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
123
|
+
}
|
124
|
+
|
125
|
+
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
126
|
+
@include font-family-monospace;
|
127
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
128
|
+
}
|
129
|
+
|
130
|
+
|
131
|
+
|
132
|
+
|
133
|
+
// GRID SYSTEM
|
134
|
+
// --------------------------------------------------
|
135
|
+
|
136
|
+
// Site container
|
137
|
+
// -------------------------
|
138
|
+
@mixin container-fixed() {
|
139
|
+
width: $gridRowWidth;
|
82
140
|
margin-left: auto;
|
83
141
|
margin-right: auto;
|
84
|
-
@include clearfix;
|
142
|
+
@include clearfix();
|
85
143
|
}
|
86
144
|
|
87
|
-
|
88
|
-
|
89
|
-
}
|
145
|
+
// Le grid system
|
146
|
+
// -------------------------
|
90
147
|
|
91
|
-
|
92
|
-
|
148
|
+
// Setup the mixins to be used
|
149
|
+
@mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
150
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
93
151
|
}
|
94
|
-
|
95
|
-
|
152
|
+
|
153
|
+
@mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
|
154
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
96
155
|
}
|
97
|
-
|
98
|
-
@mixin
|
99
|
-
display: inline;
|
156
|
+
|
157
|
+
@mixin grid-system-grid-column($gridGutterWidth) {
|
100
158
|
float: left;
|
101
159
|
margin-left: $gridGutterWidth;
|
102
160
|
}
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
161
|
+
|
162
|
+
// Take these values and mixins, and make 'em do their thang
|
163
|
+
@mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
164
|
+
// Row surrounds the columns
|
165
|
+
.row {
|
166
|
+
margin-left: $gridGutterWidth * -1;
|
167
|
+
@include clearfix();
|
168
|
+
}
|
169
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
170
|
+
[class*="span"] {
|
171
|
+
@include grid-system-grid-column($gridGutterWidth);
|
172
|
+
}
|
173
|
+
// Default columns
|
174
|
+
@for $i from 1 through 12 {
|
175
|
+
.span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
176
|
+
}
|
177
|
+
.container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
178
|
+
// Offset column options
|
179
|
+
@for $i from 1 through 11 {
|
180
|
+
.offset#{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); }
|
181
|
+
}
|
107
182
|
}
|
108
183
|
|
184
|
+
// Fluid grid system
|
185
|
+
// -------------------------
|
186
|
+
|
187
|
+
// Setup the mixins to be used
|
188
|
+
@mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
189
|
+
//TODO: check floid
|
190
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
191
|
+
}
|
192
|
+
@mixin fluid-grid-system-grid-column($fluidGridGutterWidth) {
|
193
|
+
float: left;
|
194
|
+
margin-left: $fluidGridGutterWidth;
|
195
|
+
}
|
196
|
+
// Take these values and mixins, and make 'em do their thang
|
197
|
+
@mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
198
|
+
// Row surrounds the columns
|
199
|
+
.row-fluid {
|
200
|
+
width: 100%;
|
201
|
+
@include clearfix();
|
202
|
+
|
203
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
204
|
+
> [class*="span"] {
|
205
|
+
@include fluid-grid-system-grid-column($fluidGridGutterWidth);
|
206
|
+
}
|
207
|
+
> [class*="span"]:first-child {
|
208
|
+
margin-left: 0;
|
209
|
+
}
|
210
|
+
// Default columns
|
211
|
+
@for $i from 1 through 12 {
|
212
|
+
.span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
|
213
|
+
}
|
214
|
+
}
|
215
|
+
}
|
216
|
+
|
217
|
+
|
218
|
+
|
219
|
+
// Input grid system
|
220
|
+
// -------------------------
|
221
|
+
@mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
222
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
223
|
+
}
|
224
|
+
@mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
225
|
+
input,
|
226
|
+
textarea,
|
227
|
+
.uneditable-input {
|
228
|
+
@for $i from 1 through 12 {
|
229
|
+
&.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
230
|
+
}
|
231
|
+
}
|
232
|
+
}
|
233
|
+
|
234
|
+
|
235
|
+
|
236
|
+
// CSS3 PROPERTIES
|
237
|
+
// --------------------------------------------------
|
238
|
+
|
109
239
|
// Border Radius
|
110
240
|
@mixin border-radius($radius: 5px) {
|
111
241
|
-webkit-border-radius: $radius;
|
@@ -122,103 +252,185 @@
|
|
122
252
|
|
123
253
|
// Transitions
|
124
254
|
@mixin transition($transition) {
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
255
|
+
-webkit-transition: $transition;
|
256
|
+
-moz-transition: $transition;
|
257
|
+
-ms-transition: $transition;
|
258
|
+
-o-transition: $transition;
|
259
|
+
transition: $transition;
|
260
|
+
}
|
261
|
+
|
262
|
+
// Transformations
|
263
|
+
@mixin rotate($degrees) {
|
264
|
+
-webkit-transform: rotate($degrees);
|
265
|
+
-moz-transform: rotate($degrees);
|
266
|
+
-ms-transform: rotate($degrees);
|
267
|
+
-o-transform: rotate($degrees);
|
268
|
+
transform: rotate($degrees);
|
269
|
+
}
|
270
|
+
@mixin scale($ratio) {
|
271
|
+
-webkit-transform: scale($ratio);
|
272
|
+
-moz-transform: scale($ratio);
|
273
|
+
-ms-transform: scale($ratio);
|
274
|
+
-o-transform: scale($ratio);
|
275
|
+
transform: scale($ratio);
|
276
|
+
}
|
277
|
+
@mixin translate($x: 0, $y: 0) {
|
278
|
+
-webkit-transform: translate($x, $y);
|
279
|
+
-moz-transform: translate($x, $y);
|
280
|
+
-ms-transform: translate($x, $y);
|
281
|
+
-o-transform: translate($x, $y);
|
282
|
+
transform: translate($x, $y);
|
283
|
+
}
|
284
|
+
@mixin skew($x: 0, $y: 0) {
|
285
|
+
-webkit-transform: skew($x, $y);
|
286
|
+
-moz-transform: skew($x, $y);
|
287
|
+
-ms-transform: skew($x, $y);
|
288
|
+
-o-transform: skew($x, $y);
|
289
|
+
transform: skew($x, $y);
|
130
290
|
}
|
131
291
|
|
132
292
|
// Background clipping
|
293
|
+
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
133
294
|
@mixin background-clip($clip) {
|
134
|
-
|
135
|
-
|
136
|
-
|
295
|
+
-webkit-background-clip: $clip;
|
296
|
+
-moz-background-clip: $clip;
|
297
|
+
background-clip: $clip;
|
298
|
+
}
|
299
|
+
|
300
|
+
// Background sizing
|
301
|
+
@mixin background-size($size){
|
302
|
+
-webkit-background-size: $size;
|
303
|
+
-moz-background-size: $size;
|
304
|
+
-o-background-size: $size;
|
305
|
+
background-size: $size;
|
306
|
+
}
|
307
|
+
|
308
|
+
|
309
|
+
// Box sizing
|
310
|
+
@mixin box-sizing($boxmodel) {
|
311
|
+
-webkit-box-sizing: $boxmodel;
|
312
|
+
-moz-box-sizing: $boxmodel;
|
313
|
+
box-sizing: $boxmodel;
|
314
|
+
}
|
315
|
+
|
316
|
+
// User select
|
317
|
+
// For selecting text on the page
|
318
|
+
@mixin user-select($select) {
|
319
|
+
-webkit-user-select: $select;
|
320
|
+
-moz-user-select: $select;
|
321
|
+
-o-user-select: $select;
|
322
|
+
user-select: $select;
|
323
|
+
}
|
324
|
+
|
325
|
+
// Resize anything
|
326
|
+
@mixin resizable($direction: both) {
|
327
|
+
resize: $direction; // Options: horizontal, vertical, both
|
328
|
+
overflow: auto; // Safari fix
|
137
329
|
}
|
138
330
|
|
139
331
|
// CSS3 Content Columns
|
140
|
-
@mixin content-columns($columnCount, $columnGap:
|
141
|
-
|
142
|
-
|
332
|
+
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
|
333
|
+
-webkit-column-count: $columnCount;
|
334
|
+
-moz-column-count: $columnCount;
|
143
335
|
column-count: $columnCount;
|
144
336
|
-webkit-column-gap: $columnGap;
|
145
|
-
|
337
|
+
-moz-column-gap: $columnGap;
|
146
338
|
column-gap: $columnGap;
|
147
339
|
}
|
148
340
|
|
149
|
-
//
|
150
|
-
@mixin
|
151
|
-
|
152
|
-
|
341
|
+
// Opacity
|
342
|
+
@mixin opacity($opacity: 100) {
|
343
|
+
opacity: $opacity / 100;
|
344
|
+
filter: alpha(opacity=#{$opacity});
|
153
345
|
}
|
154
346
|
|
347
|
+
|
348
|
+
|
349
|
+
// BACKGROUNDS
|
350
|
+
// --------------------------------------------------
|
351
|
+
|
155
352
|
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
156
353
|
@mixin translucent-background($color: $white, $alpha: 1) {
|
157
354
|
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
158
355
|
}
|
159
356
|
@mixin translucent-border($color: $white, $alpha: 1) {
|
160
|
-
|
161
|
-
|
357
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
358
|
+
@include background-clip(padding-box);
|
162
359
|
}
|
163
360
|
|
164
361
|
// Gradients
|
165
|
-
@mixin gradient-horizontal
|
362
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
166
363
|
background-color: $endColor;
|
167
|
-
background-repeat: repeat-x;
|
168
|
-
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
|
169
364
|
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
170
365
|
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
171
|
-
background-image: -webkit-gradient(linear,
|
366
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
172
367
|
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
173
368
|
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
174
369
|
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
370
|
+
background-repeat: repeat-x;
|
175
371
|
$ieStartColor: ie_hex_str($startColor);
|
176
372
|
$ieEndColor: ie_hex_str($endColor);
|
177
373
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=1); // IE9 and down
|
178
374
|
}
|
179
|
-
@mixin gradient-vertical
|
180
|
-
background-color: $endColor;
|
181
|
-
background-repeat: repeat-x;
|
182
|
-
background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
|
375
|
+
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
376
|
+
background-color: mix($startColor, $endColor, 60%);
|
183
377
|
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
184
378
|
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
185
|
-
background-image: -webkit-gradient(linear,
|
379
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
186
380
|
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
187
381
|
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
188
382
|
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
383
|
+
background-repeat: repeat-x;
|
189
384
|
$ieStartColor: ie_hex_str($startColor);
|
190
385
|
$ieEndColor: ie_hex_str($endColor);
|
191
386
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down
|
192
387
|
}
|
193
|
-
@mixin gradient-directional
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
388
|
+
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
389
|
+
background-color: $endColor;
|
390
|
+
background-repeat: repeat-x;
|
391
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
392
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
393
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
394
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
395
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
396
|
+
}
|
202
397
|
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
}
|
215
|
-
|
216
|
-
|
398
|
+
background-color: mix($midColor, $endColor, 80%);
|
399
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
400
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
401
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
402
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
403
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
404
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
405
|
+
background-repeat: no-repeat;
|
406
|
+
$ieStartColor: ie_hex_str($startColor);
|
407
|
+
$ieEndColor: ie_hex_str($endColor);
|
408
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
409
|
+
}
|
410
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
411
|
+
background-color: $outerColor;
|
412
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
413
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
414
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
415
|
+
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
416
|
+
background-repeat: no-repeat;
|
417
|
+
// Opera cannot do radial gradients yet
|
418
|
+
}
|
419
|
+
@mixin gradient-striped($color, $angle: -45deg) {
|
420
|
+
background-color: $color;
|
421
|
+
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));
|
422
|
+
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);
|
423
|
+
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);
|
424
|
+
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);
|
425
|
+
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);
|
426
|
+
background-image: 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);
|
427
|
+
}
|
428
|
+
|
429
|
+
// Gradient Bar Colors for buttons and alerts
|
217
430
|
@mixin gradient-bar($primaryColor, $secondaryColor) {
|
218
431
|
@include gradient-vertical($primaryColor, $secondaryColor);
|
219
|
-
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
220
432
|
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
221
|
-
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1)
|
433
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
222
434
|
}
|
223
435
|
|
224
436
|
// Reset filters for IE
|
@@ -226,10 +438,62 @@
|
|
226
438
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
227
439
|
}
|
228
440
|
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
441
|
+
|
442
|
+
// Mixin for generating button backgrounds
|
443
|
+
// ---------------------------------------
|
444
|
+
@mixin button-background($startColor, $endColor) {
|
445
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
446
|
+
@include gradient-bar($startColor, $endColor);
|
447
|
+
@include reset-filter();
|
448
|
+
|
449
|
+
// in these cases the gradient won't cover the background, so we override
|
450
|
+
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
451
|
+
background-color: $endColor;
|
452
|
+
}
|
453
|
+
|
454
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
455
|
+
&:active,
|
456
|
+
&.active {
|
457
|
+
background-color: darken($endColor, 10%) \9;
|
458
|
+
}
|
459
|
+
}
|
460
|
+
|
461
|
+
|
462
|
+
// COMPONENT MIXINS
|
463
|
+
// --------------------------------------------------
|
464
|
+
|
465
|
+
// POPOVER ARROWS
|
466
|
+
// -------------------------
|
467
|
+
// For tipsies and popovers
|
468
|
+
@mixin popover-arrow-top($arrowWidth: 5px) {
|
469
|
+
bottom: 0;
|
470
|
+
left: 50%;
|
471
|
+
margin-left: -$arrowWidth;
|
472
|
+
border-left: $arrowWidth solid transparent;
|
473
|
+
border-right: $arrowWidth solid transparent;
|
474
|
+
border-top: $arrowWidth solid $black;
|
475
|
+
}
|
476
|
+
@mixin popover-arrow-left($arrowWidth: 5px) {
|
477
|
+
top: 50%;
|
478
|
+
right: 0;
|
479
|
+
margin-top: -$arrowWidth;
|
480
|
+
border-top: $arrowWidth solid transparent;
|
481
|
+
border-bottom: $arrowWidth solid transparent;
|
482
|
+
border-left: $arrowWidth solid $black;
|
483
|
+
}
|
484
|
+
@mixin popover-arrow-bottom($arrowWidth: 5px) {
|
485
|
+
top: 0;
|
486
|
+
left: 50%;
|
487
|
+
margin-left: -$arrowWidth;
|
488
|
+
border-left: $arrowWidth solid transparent;
|
489
|
+
border-right: $arrowWidth solid transparent;
|
490
|
+
border-bottom: $arrowWidth solid $black;
|
491
|
+
}
|
492
|
+
@mixin popover-arrow-right($arrowWidth: 5px) {
|
493
|
+
top: 50%;
|
494
|
+
left: 0;
|
495
|
+
margin-top: -$arrowWidth;
|
496
|
+
border-top: $arrowWidth solid transparent;
|
497
|
+
border-bottom: $arrowWidth solid transparent;
|
498
|
+
border-right: $arrowWidth solid $black;
|
499
|
+
}
|