anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. data/Rakefile +11 -15
  2. data/bootstrap-rails.gemspec +4 -4
  3. data/lib/bootstrap-rails/version.rb +1 -1
  4. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  5. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  6. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  7. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  8. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  9. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  10. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  11. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  12. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  13. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  15. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  16. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  17. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  18. data/vendor/assets/javascripts/bootstrap.js +8 -5
  19. data/vendor/assets/stylesheets/accordion.scss +28 -0
  20. data/vendor/assets/stylesheets/alerts.scss +70 -0
  21. data/vendor/assets/stylesheets/bootstrap.scss +44 -8
  22. data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
  23. data/vendor/assets/stylesheets/button-groups.scss +147 -0
  24. data/vendor/assets/stylesheets/buttons.scss +165 -0
  25. data/vendor/assets/stylesheets/carousel.scss +121 -0
  26. data/vendor/assets/stylesheets/close.scss +18 -0
  27. data/vendor/assets/stylesheets/code.scss +44 -0
  28. data/vendor/assets/stylesheets/component-animations.scss +18 -0
  29. data/vendor/assets/stylesheets/dropdowns.scss +131 -0
  30. data/vendor/assets/stylesheets/forms.scss +337 -287
  31. data/vendor/assets/stylesheets/grid.scss +8 -0
  32. data/vendor/assets/stylesheets/hero-unit.scss +20 -0
  33. data/vendor/assets/stylesheets/labels.scss +16 -0
  34. data/vendor/assets/stylesheets/layouts.scss +17 -0
  35. data/vendor/assets/stylesheets/mixins.scss +375 -111
  36. data/vendor/assets/stylesheets/modals.scss +72 -0
  37. data/vendor/assets/stylesheets/navbar.scss +292 -0
  38. data/vendor/assets/stylesheets/navs.scss +344 -0
  39. data/vendor/assets/stylesheets/pager.scss +30 -0
  40. data/vendor/assets/stylesheets/pagination.scss +55 -0
  41. data/vendor/assets/stylesheets/popovers.scss +49 -0
  42. data/vendor/assets/stylesheets/progress-bars.scss +95 -0
  43. data/vendor/assets/stylesheets/reset.scss +37 -52
  44. data/vendor/assets/stylesheets/responsive.scss +323 -0
  45. data/vendor/assets/stylesheets/scaffolding.scss +13 -96
  46. data/vendor/assets/stylesheets/sprites.scss +158 -0
  47. data/vendor/assets/stylesheets/tables.scss +68 -149
  48. data/vendor/assets/stylesheets/thumbnails.scss +35 -0
  49. data/vendor/assets/stylesheets/tooltip.scss +35 -0
  50. data/vendor/assets/stylesheets/type.scss +100 -70
  51. data/vendor/assets/stylesheets/utilities.scss +23 -0
  52. data/vendor/assets/stylesheets/variables.scss +94 -55
  53. data/vendor/assets/stylesheets/wells.scss +17 -0
  54. metadata +51 -30
  55. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  56. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  57. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  58. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  59. data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -0,0 +1,8 @@
1
+ // GRID SYSTEM
2
+ // -----------
3
+
4
+ // Fixed (940px)
5
+ @include grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
6
+
7
+ // Fluid (940px)
8
+ @include fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
@@ -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
- /* Mixins
2
- * Snippets of reusable CSS to develop faster and keep code readable
3
- * ----------------------------------------------------------------- */
1
+ // Mixins.less
2
+ // Snippets of reusable CSS to develop faster and keep code readable
3
+ // -----------------------------------------------------------------
4
4
 
5
5
 
6
- // Clearfix for clearing floats like a boss h5bp.com/q
7
- @mixin clearfix {
8
- zoom: 1;
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
- .clearfix {
21
- @include clearfix;
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
- @mixin center-block {
26
- display: block;
35
+ // ----------------------------------
36
+ @mixin center-block() {
37
+ display: block;
27
38
  margin-left: auto;
28
39
  margin-right: auto;
29
40
  }
30
41
 
31
- .center-block {
32
- @include center-block;
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
- height: $height;
38
- width: $width;
74
+ width: $width;
75
+ height: $height;
39
76
  }
40
77
  @mixin square($size: 5px) {
41
- @include size($size, $size);
78
+ @include size($size, $size);
42
79
  }
43
80
 
44
- // Input placeholder text
45
- @mixin placeholder($color: $grayLight) {
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
- // Font Stacks
55
- @mixin font-shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
56
- font-size: $size;
57
- font-weight: $weight;
58
- line-height: $lineHeight;
92
+
93
+
94
+ // FONTS
95
+ // --------------------------------------------------
96
+
97
+ @mixin font-family-serif() {
98
+ font-family: Georgia, "Times New Roman", Times, serif;
59
99
  }
60
- @mixin font-sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
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
- @mixin font-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
67
- font-family: "Georgia", Times New Roman, Times, serif;
68
- font-size: $size;
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
- @mixin font-monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
73
- font-family: "Monaco", Courier New, monospace;
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
- // Grid System
80
- @mixin fixed-container {
81
- width: $siteWidth;
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
- .fixed-container {
88
- @include fixed-container;
89
- }
145
+ // Le grid system
146
+ // -------------------------
90
147
 
91
- @mixin columns($columnSpan: 1) {
92
- width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
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
- @mixin offset($columnOffset: 1) {
95
- margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
152
+
153
+ @mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
154
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
96
155
  }
97
- // Necessary grid styles for every column to make them appear next to each other horizontally
98
- @mixin gridColumn() {
99
- display: inline;
156
+
157
+ @mixin grid-system-grid-column($gridGutterWidth) {
100
158
  float: left;
101
159
  margin-left: $gridGutterWidth;
102
160
  }
103
- // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
104
- @mixin makeColumn($columnSpan: 1) {
105
- @include gridColumn;
106
- @include columns($columnSpan);
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
- -webkit-transition: $transition;
126
- -moz-transition: $transition;
127
- -ms-transition: $transition;
128
- -o-transition: $transition;
129
- transition: $transition;
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
- -webkit-background-clip: $clip;
135
- -moz-background-clip: $clip;
136
- background-clip: $clip;
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: 20px) {
141
- -webkit-column-count: $columnCount;
142
- -moz-column-count: $columnCount;
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
- -moz-column-gap: $columnGap;
337
+ -moz-column-gap: $columnGap;
146
338
  column-gap: $columnGap;
147
339
  }
148
340
 
149
- // Make any element resizable for prototyping
150
- @mixin resizable($direction: both) {
151
- resize: $direction; // Options are horizontal, vertical, both
152
- overflow: auto; // Safari fix
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
- border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
161
- background-clip: padding-box;
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 ($startColor: #555, $endColor: #333) {
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, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
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 ($startColor: #555, $endColor: #333) {
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, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
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 ($startColor: #555, $endColor: #333, $deg: 45deg) {
194
- background-color: $endColor;
195
- background-repeat: repeat-x;
196
- background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
197
- background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
198
- background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
199
- background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
200
- background-image: linear-gradient($deg, $startColor, $endColor); // The standard
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
- background-color: $endColor;
204
- background-repeat: no-repeat;
205
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
206
- background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
207
- background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
208
- background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
209
- background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
210
- background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
211
- $ieStartColor: ie_hex_str($startColor);
212
- $ieEndColor: ie_hex_str($endColor);
213
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
214
- }
215
-
216
- // Gradient Bar Colors for buttons and allerts
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) fade-in(rgba(0,0,0,.1), 0.15);
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
- // Opacity
230
- @mixin opacity($opacity: 100) {
231
- filter: alpha(opacity=#{$opacity});
232
- -khtml-opacity: $opacity / 100;
233
- -moz-opacity: $opacity / 100;
234
- opacity: $opacity / 100;
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
+ }