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.
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
+ }