bootstrap-sass-keppy 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +97 -0
  3. data/lib/bootstrap-sass.rb +43 -0
  4. data/lib/bootstrap-sass/compass_functions.rb +10 -0
  5. data/lib/bootstrap-sass/engine.rb +7 -0
  6. data/lib/bootstrap-sass/rails_functions.rb +14 -0
  7. data/templates/project/manifest.rb +18 -0
  8. data/templates/project/styles.scss +5 -0
  9. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  10. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  11. data/vendor/assets/javascripts/bootstrap-alert.js +90 -0
  12. data/vendor/assets/javascripts/bootstrap-button.js +96 -0
  13. data/vendor/assets/javascripts/bootstrap-carousel.js +169 -0
  14. data/vendor/assets/javascripts/bootstrap-collapse.js +157 -0
  15. data/vendor/assets/javascripts/bootstrap-dropdown.js +100 -0
  16. data/vendor/assets/javascripts/bootstrap-modal.js +218 -0
  17. data/vendor/assets/javascripts/bootstrap-popover.js +98 -0
  18. data/vendor/assets/javascripts/bootstrap-scrollspy.js +151 -0
  19. data/vendor/assets/javascripts/bootstrap-tab.js +135 -0
  20. data/vendor/assets/javascripts/bootstrap-tooltip.js +275 -0
  21. data/vendor/assets/javascripts/bootstrap-transition.js +61 -0
  22. data/vendor/assets/javascripts/bootstrap-typeahead.js +285 -0
  23. data/vendor/assets/javascripts/bootstrap.js +12 -0
  24. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +35 -0
  25. data/vendor/assets/stylesheets/_bootstrap.scss +62 -0
  26. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +33 -0
  27. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +56 -0
  28. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +24 -0
  29. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +178 -0
  30. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +171 -0
  31. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
  32. data/vendor/assets/stylesheets/bootstrap/_close.scss +29 -0
  33. data/vendor/assets/stylesheets/bootstrap/_code.scss +56 -0
  34. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +20 -0
  35. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +137 -0
  36. data/vendor/assets/stylesheets/bootstrap/_forms.scss +482 -0
  37. data/vendor/assets/stylesheets/bootstrap/_grid.scss +5 -0
  38. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +22 -0
  39. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
  40. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
  41. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +625 -0
  42. data/vendor/assets/stylesheets/bootstrap/_modals.scss +90 -0
  43. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +344 -0
  44. data/vendor/assets/stylesheets/bootstrap/_navs.scss +340 -0
  45. data/vendor/assets/stylesheets/bootstrap/_pager.scss +35 -0
  46. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
  47. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
  48. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +118 -0
  49. data/vendor/assets/stylesheets/bootstrap/_reset.scss +110 -0
  50. data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +26 -0
  51. data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +136 -0
  52. data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +16 -0
  53. data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +147 -0
  54. data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +41 -0
  55. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
  56. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +177 -0
  57. data/vendor/assets/stylesheets/bootstrap/_tables.scss +133 -0
  58. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +49 -0
  59. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
  60. data/vendor/assets/stylesheets/bootstrap/_type.scss +224 -0
  61. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
  62. data/vendor/assets/stylesheets/bootstrap/_variables.scss +237 -0
  63. data/vendor/assets/stylesheets/bootstrap/_wells.scss +27 -0
  64. metadata +129 -0
@@ -0,0 +1,5 @@
1
+ // Fixed (940px)
2
+ @include gridCore($gridColumnWidth, $gridGutterWidth);
3
+
4
+ // Fluid (940px)
5
+ @include gridFluid($fluidGridColumnWidth, $fluidGridGutterWidth);
@@ -0,0 +1,22 @@
1
+ // HERO UNIT
2
+ // ---------
3
+
4
+ .hero-unit {
5
+ padding: 60px;
6
+ margin-bottom: 30px;
7
+ background-color: $heroUnitBackground;
8
+ @include border-radius(6px);
9
+ h1 {
10
+ margin-bottom: 0;
11
+ font-size: 60px;
12
+ line-height: 1;
13
+ color: $heroUnitHeadingColor;
14
+ letter-spacing: -1px;
15
+ }
16
+ p {
17
+ font-size: 18px;
18
+ font-weight: 200;
19
+ line-height: $baseLineHeight * 1.5;
20
+ color: $heroUnitLeadColor;
21
+ }
22
+ }
@@ -0,0 +1,50 @@
1
+ // LABELS & BADGES
2
+ // ---------------
3
+
4
+ // Base classes
5
+ .label, .badge {
6
+ font-size: $baseFontSize * .846;
7
+ font-weight: bold;
8
+ line-height: 14px; // ensure proper line-height if floated
9
+ color: $white;
10
+ vertical-align: baseline;
11
+ white-space: nowrap;
12
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
13
+ background-color: $grayLight;
14
+ }
15
+ // Set unique padding and border-radii
16
+ .label {
17
+ padding: 1px 4px 2px;
18
+ @include border-radius(3px);
19
+ }
20
+ .badge {
21
+ padding: 1px 9px 2px;
22
+ @include border-radius(9px);
23
+ }
24
+
25
+ // Hover state, but only for links
26
+ a {
27
+ &.label:hover, &.badge:hover {
28
+ color: $white;
29
+ text-decoration: none;
30
+ cursor: pointer;
31
+ }
32
+ }
33
+
34
+ // Colors
35
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
36
+ // Important (red)
37
+ .label-important, .badge-important { background-color: $errorText; }
38
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
39
+ // Warnings (orange)
40
+ .label-warning, .badge-warning { background-color: $orange; }
41
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
42
+ // Success (green)
43
+ .label-success, .badge-success { background-color: $successText; }
44
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
45
+ // Info (turquoise)
46
+ .label-info, .badge-info { background-color: $infoText; }
47
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
48
+ // Inverse (black)
49
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
50
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
@@ -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-right: $gridGutterWidth;
15
+ padding-left: $gridGutterWidth;
16
+ @include clearfix();
17
+ }
@@ -0,0 +1,625 @@
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
+ .clearfix { @include clearfix(); }
24
+
25
+ // Webkit-style focus
26
+ // ------------------
27
+ @mixin tab-focus() {
28
+ // Default
29
+ outline: thin dotted #333;
30
+ // Webkit
31
+ outline: 5px auto -webkit-focus-ring-color;
32
+ outline-offset: -2px;
33
+ }
34
+
35
+ // Center-align a block level element
36
+ // ----------------------------------
37
+ @mixin center-block() {
38
+ display: block;
39
+ margin-left: auto;
40
+ margin-right: auto;
41
+ }
42
+
43
+ // IE7 inline-block
44
+ // ----------------
45
+ @mixin ie7-inline-block() {
46
+ *display: inline; /* IE7 inline-block hack */
47
+ *zoom: 1;
48
+ }
49
+
50
+ // IE7 likes to collapse whitespace on either side of the inline-block elements.
51
+ // Ems because we're attempting to match the width of a space character. Left
52
+ // version is for form buttons, which typically come after other elements, and
53
+ // right version is for icons, which come before. Applying both is ok, but it will
54
+ // mean that space between those elements will be .6em (~2 space characters) in IE7,
55
+ // instead of the 1 space in other browsers.
56
+ @mixin ie7-restore-left-whitespace() {
57
+ *margin-left: .3em;
58
+
59
+ &:first-child {
60
+ *margin-left: 0;
61
+ }
62
+ }
63
+
64
+ @mixin ie7-restore-right-whitespace() {
65
+ *margin-right: .3em;
66
+
67
+ &:last-child {
68
+ *margin-left: 0;
69
+ }
70
+ }
71
+
72
+ // Sizing shortcuts
73
+ // -------------------------
74
+ @mixin size($height, $width) {
75
+ width: $width;
76
+ height: $height;
77
+ }
78
+ @mixin square($size) {
79
+ @include size($size, $size);
80
+ }
81
+
82
+ // Placeholder text
83
+ // -------------------------
84
+ @mixin placeholder($color: $placeholderText) {
85
+ &:-moz-placeholder {
86
+ color: $color;
87
+ }
88
+ &:-ms-input-placeholder {
89
+ color: $color;
90
+ }
91
+ &::-webkit-input-placeholder {
92
+ color: $color;
93
+ }
94
+ }
95
+
96
+ // Sass doesn't support using & at base level, so we need a special root placeholder mixin.
97
+ @mixin rootPlaceholder($color: $placeholderText) {
98
+ :-moz-placeholder {
99
+ color: $color;
100
+ }
101
+ :-ms-input-placeholder {
102
+ color: $color;
103
+ }
104
+ ::-webkit-input-placeholder {
105
+ color: $color;
106
+ }
107
+ }
108
+
109
+ // Text overflow
110
+ // ------------------------
111
+ @mixin text-overflow() {
112
+ overflow: hidden;
113
+ text-overflow: ellipsis;
114
+ white-space: nowrap;
115
+ }
116
+
117
+ // CSS image replacement
118
+ // -------------------------
119
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
120
+ @mixin hide-text() {
121
+ font: 0/0 a;
122
+ color: transparent;
123
+ text-shadow: none;
124
+ background-color: transparent;
125
+ border: 0;
126
+ }
127
+
128
+
129
+ // FONTS
130
+ // --------------------------------------------------
131
+ @mixin font-family-serif() {
132
+ font-family: $serifFontFamily;
133
+ }
134
+ @mixin font-family-sans-serif() {
135
+ font-family: $sansFontFamily;
136
+ }
137
+ @mixin font-family-monospace() {
138
+ font-family: $monoFontFamily;
139
+ }
140
+ @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
141
+ font-size: $size;
142
+ font-weight: $weight;
143
+ line-height: $lineHeight;
144
+ }
145
+ @mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
146
+ @include font-family-serif();
147
+ @include font-shorthand($size, $weight, $lineHeight);
148
+ }
149
+ @mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
150
+ @include font-family-sans-serif();
151
+ @include font-shorthand($size, $weight, $lineHeight);
152
+ }
153
+ @mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
154
+ @include font-family-monospace();
155
+ @include font-shorthand($size, $weight, $lineHeight);
156
+ }
157
+
158
+
159
+
160
+ // FORMS
161
+ // --------------------------------------------------
162
+
163
+ @mixin input-block-level() {
164
+ display: block;
165
+ width: 100%;
166
+ min-height: 28px; // Make inputs at least the height of their button counterpart
167
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
168
+ }
169
+
170
+
171
+ // Mixin for form field states
172
+ @mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
173
+ // Set the text color
174
+ > label, .help-block, .help-inline {
175
+ color: $textColor;
176
+ }
177
+ // Style inputs accordingly
178
+ .checkbox, .radio, input, select, textarea {
179
+ color: $textColor;
180
+ border-color: $borderColor;
181
+ &:focus {
182
+ border-color: darken($borderColor, 10%);
183
+ @include box-shadow(0 0 6px lighten($borderColor, 20%));
184
+ }
185
+ }
186
+ // Give a small background color for input-prepend/-append
187
+ .input-prepend .add-on, .input-append .add-on {
188
+ color: $textColor;
189
+ background-color: $backgroundColor;
190
+ border-color: $textColor;
191
+ }
192
+ }
193
+
194
+
195
+ // CSS3 PROPERTIES
196
+ // --------------------------------------------------
197
+
198
+ // Border Radius
199
+ @mixin border-radius($radius) {
200
+ -webkit-border-radius: $radius;
201
+ -moz-border-radius: $radius;
202
+ border-radius: $radius;
203
+ }
204
+
205
+ // Drop shadows
206
+ @mixin box-shadow($shadow) {
207
+ -webkit-box-shadow: $shadow;
208
+ -moz-box-shadow: $shadow;
209
+ box-shadow: $shadow;
210
+ }
211
+
212
+ // Transitions
213
+ @mixin transition($transition) {
214
+ -webkit-transition: $transition;
215
+ -moz-transition: $transition;
216
+ -ms-transition: $transition;
217
+ -o-transition: $transition;
218
+ transition: $transition;
219
+ }
220
+
221
+ // Transformations
222
+ @mixin rotate($degrees) {
223
+ -webkit-transform: rotate($degrees);
224
+ -moz-transform: rotate($degrees);
225
+ -ms-transform: rotate($degrees);
226
+ -o-transform: rotate($degrees);
227
+ transform: rotate($degrees);
228
+ }
229
+ @mixin scale($ratio) {
230
+ -webkit-transform: scale($ratio);
231
+ -moz-transform: scale($ratio);
232
+ -ms-transform: scale($ratio);
233
+ -o-transform: scale($ratio);
234
+ transform: scale($ratio);
235
+ }
236
+ @mixin translate($x, $y) {
237
+ -webkit-transform: translate($x, $y);
238
+ -moz-transform: translate($x, $y);
239
+ -ms-transform: translate($x, $y);
240
+ -o-transform: translate($x, $y);
241
+ transform: translate($x, $y);
242
+ }
243
+
244
+ @mixin skew($x, $y) {
245
+ -webkit-transform: skew($x, $y);
246
+ -moz-transform: skew($x, $y);
247
+ -ms-transform: skew($x, $y);
248
+ -o-transform: skew($x, $y);
249
+ transform: skew($x, $y);
250
+ }
251
+
252
+ @mixin translate3d($x, $y, $z) {
253
+ -webkit-transform: translate($x, $y, $z);
254
+ -moz-transform: translate($x, $y, $z);
255
+ -ms-transform: translate($x, $y, $z);
256
+ -o-transform: translate($x, $y, $z);
257
+ transform: translate($x, $y, $z);
258
+ }
259
+
260
+ // Backface visibility
261
+ // Prevent browsers from flickering when using CSS 3D transforms.
262
+ // Default value is `visible`, but can be changed to `hidden
263
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
264
+ @mixin backface-visibility($visibility){
265
+ -webkit-backface-visibility: $visibility;
266
+ -moz-backface-visibility: $visibility;
267
+ -ms-backface-visibility: $visibility;
268
+ backface-visibility: $visibility;
269
+ }
270
+
271
+ // Background clipping
272
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
273
+ @mixin background-clip($clip) {
274
+ -webkit-background-clip: $clip;
275
+ -moz-background-clip: $clip;
276
+ background-clip: $clip;
277
+ }
278
+
279
+ // Background sizing
280
+ @mixin background-size($size){
281
+ -webkit-background-size: $size;
282
+ -moz-background-size: $size;
283
+ -o-background-size: $size;
284
+ background-size: $size;
285
+ }
286
+
287
+
288
+ // Box sizing
289
+ @mixin box-sizing($boxmodel) {
290
+ -webkit-box-sizing: $boxmodel;
291
+ -moz-box-sizing: $boxmodel;
292
+ -ms-box-sizing: $boxmodel;
293
+ box-sizing: $boxmodel;
294
+ }
295
+
296
+ // User select
297
+ // For selecting text on the page
298
+ @mixin user-select($select) {
299
+ -webkit-user-select: $select;
300
+ -moz-user-select: $select;
301
+ -ms-user-select: $select;
302
+ -o-user-select: $select;
303
+ user-select: $select;
304
+ }
305
+
306
+ // Resize anything
307
+ @mixin resizable($direction) {
308
+ resize: $direction; // Options: horizontal, vertical, both
309
+ overflow: auto; // Safari fix
310
+ }
311
+
312
+ // CSS3 Content Columns
313
+ @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
314
+ -webkit-column-count: $columnCount;
315
+ -moz-column-count: $columnCount;
316
+ column-count: $columnCount;
317
+ -webkit-column-gap: $columnGap;
318
+ -moz-column-gap: $columnGap;
319
+ column-gap: $columnGap;
320
+ }
321
+
322
+
323
+ // Optional hyphenation
324
+ @mixin hyphens($mode: auto) {
325
+ word-wrap: break-word;
326
+ -webkit-hyphens: $mode;
327
+ -moz-hyphens: $mode;
328
+ -ms-hyphens: $mode;
329
+ -o-hyphens: $mode;
330
+ hyphens: $mode;
331
+ }
332
+
333
+ // Opacity
334
+ @mixin opacity($opacity: 1) {
335
+ opacity: $opacity;
336
+ filter: alpha(opacity=#{$opacity * 100});
337
+ }
338
+
339
+
340
+
341
+ // BACKGROUNDS
342
+ // --------------------------------------------------
343
+
344
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
345
+ @mixin translucent-background($color: $white, $alpha: 1) {
346
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
347
+ }
348
+ @mixin translucent-border($color: $white, $alpha: 1) {
349
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
350
+ @include background-clip(padding-box);
351
+ }
352
+
353
+ // Gradient Bar Colors for buttons and alerts
354
+ @mixin gradientBar($primaryColor, $secondaryColor) {
355
+ @include gradient-vertical($primaryColor, $secondaryColor);
356
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
357
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
358
+ }
359
+
360
+ // Gradients
361
+ @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
362
+ background-color: $endColor;
363
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
364
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
365
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
366
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
367
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
368
+ background-image: linear-gradient(left, $startColor, $endColor); // Le standard
369
+ background-repeat: repeat-x;
370
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
371
+ }
372
+ @mixin gradient-vertical($startColor: #555, $endColor: #333) {
373
+ background-color: mix($startColor, $endColor, 60%);
374
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
375
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
376
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
377
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
378
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
379
+ background-image: linear-gradient(top, $startColor, $endColor); // The standard
380
+ background-repeat: repeat-x;
381
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
382
+ }
383
+ @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
384
+ background-color: $endColor;
385
+ background-repeat: repeat-x;
386
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
387
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
388
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
389
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
390
+ background-image: linear-gradient($deg, $startColor, $endColor); // The standard
391
+ }
392
+ @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
393
+ background-color: mix($midColor, $endColor, 80%);
394
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
395
+ background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
396
+ background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
397
+ background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
398
+ background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
399
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
400
+ background-repeat: no-repeat;
401
+ 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
402
+ }
403
+ @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
404
+ background-color: $outerColor;
405
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
406
+ background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
407
+ background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
408
+ background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
409
+ background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
410
+ background-repeat: no-repeat;
411
+ }
412
+ @mixin gradient-striped($color, $angle: -45deg) {
413
+ background-color: $color;
414
+ 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));
415
+ 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);
416
+ 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);
417
+ 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);
418
+ 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);
419
+ 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));
420
+ }
421
+ // Reset filters for IE
422
+ @mixin reset-filter() {
423
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
424
+ }
425
+
426
+
427
+ // COMPONENT MIXINS
428
+ // --------------------------------------------------
429
+
430
+ // Horizontal dividers
431
+ // -------------------
432
+ // Dividers (basically an hr) within dropdowns and nav lists
433
+ @mixin nav-divider($top: #e5e5e5, $bottom: $white) {
434
+ // IE7 needs a set width since we gave a height. Restricting just
435
+ // to IE7 to keep the 1px left/right space in other browsers.
436
+ // It is unclear where IE is getting the extra space that we need
437
+ // to negative-margin away, but so it goes.
438
+ *width: 100%;
439
+ height: 1px;
440
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
441
+ *margin: -5px 0 5px;
442
+ overflow: hidden;
443
+ background-color: $top;
444
+ border-bottom: 1px solid $bottom;
445
+ }
446
+
447
+ // Button backgrounds
448
+ // ------------------
449
+ @mixin buttonBackground($startColor, $endColor) {
450
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
451
+ @include gradientBar($startColor, $endColor);
452
+ *background-color: $endColor; // Darken IE7 buttons by default so they stand out more given they won't have borders
453
+ @include reset-filter();
454
+
455
+ // in these cases the gradient won't cover the background, so we override
456
+ &:hover, &:active, &.active, &.disabled, &[disabled] {
457
+ background-color: $endColor;
458
+ *background-color: darken($endColor, 5%);
459
+ }
460
+
461
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
462
+ &:active, &.active {
463
+ background-color: darken($endColor, 10%) \9;
464
+ }
465
+ }
466
+
467
+ // Navbar vertical align
468
+ // -------------------------
469
+ // Vertically center elements in the navbar.
470
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
471
+ @mixin navbarVerticalAlign($elementHeight) {
472
+ margin-top: ($navbarHeight - $elementHeight) / 2;
473
+ }
474
+
475
+ // Popover arrows
476
+ // -------------------------
477
+ // For tipsies and popovers
478
+ @mixin popoverArrowTop($arrowWidth: 5px, $color: $black) {
479
+ bottom: 0;
480
+ left: 50%;
481
+ margin-left: -$arrowWidth;
482
+ border-left: $arrowWidth solid transparent;
483
+ border-right: $arrowWidth solid transparent;
484
+ border-top: $arrowWidth solid $color;
485
+ }
486
+ @mixin popoverArrowLeft($arrowWidth: 5px, $color: $black) {
487
+ top: 50%;
488
+ right: 0;
489
+ margin-top: -$arrowWidth;
490
+ border-top: $arrowWidth solid transparent;
491
+ border-bottom: $arrowWidth solid transparent;
492
+ border-left: $arrowWidth solid $color;
493
+ }
494
+ @mixin popoverArrowBottom($arrowWidth: 5px, $color: $black) {
495
+ top: 0;
496
+ left: 50%;
497
+ margin-left: -$arrowWidth;
498
+ border-left: $arrowWidth solid transparent;
499
+ border-right: $arrowWidth solid transparent;
500
+ border-bottom: $arrowWidth solid $color;
501
+ }
502
+ @mixin popoverArrowRight($arrowWidth: 5px, $color: $black) {
503
+ top: 50%;
504
+ left: 0;
505
+ margin-top: -$arrowWidth;
506
+ border-top: $arrowWidth solid transparent;
507
+ border-bottom: $arrowWidth solid transparent;
508
+ border-right: $arrowWidth solid $color;
509
+ }
510
+
511
+ // Grid System
512
+ // -----------
513
+
514
+ // Centered container element
515
+ @mixin container-fixed() {
516
+ margin-right: auto;
517
+ margin-left: auto;
518
+ @include clearfix();
519
+ }
520
+
521
+ // Table columns
522
+ @mixin tableColumns($columnSpan: 1) {
523
+ float: none; // undo default grid column styles
524
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
525
+ margin-left: 0; // undo default grid column styles
526
+ }
527
+
528
+ // Make a Grid
529
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
530
+ @mixin makeRow() {
531
+ margin-left: $gridGutterWidth * -1;
532
+ @include clearfix();
533
+ }
534
+ @mixin makeColumn($columns: 1, $offset: 0) {
535
+ float: left;
536
+ margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
537
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
538
+ }
539
+
540
+ // The Grid
541
+ @mixin gridCore($columnWidth, $gutterWidth) {
542
+ .row {
543
+ margin-left: $gutterWidth * -1;
544
+ @include clearfix();
545
+ }
546
+
547
+ [class*="span"] {
548
+ float: left;
549
+ margin-left: $gutterWidth;
550
+ }
551
+
552
+ // Set the container width, and override it for fixed navbars in media queries
553
+ .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }
554
+
555
+ @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
556
+ @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
557
+ }
558
+ @mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
559
+ @for $i from 1 through $cols {
560
+ .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
561
+ }
562
+ }
563
+ @mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
564
+ width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
565
+ }
566
+ @mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
567
+ @for $i from 1 through $cols {
568
+ .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
569
+ }
570
+ }
571
+ @mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
572
+ margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
573
+ }
574
+
575
+ @mixin gridFluid($columnWidth, $gutterWidth) {
576
+ .row-fluid {
577
+ width: 100%;
578
+ @include clearfix();
579
+ [class*="span"] {
580
+ @include input-block-level();
581
+ float: left;
582
+ margin-left: $gutterWidth;
583
+ *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
584
+ }
585
+ [class*="span"]:first-child {
586
+ margin-left: 0;
587
+ }
588
+
589
+ // generate .spanX
590
+ @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
591
+ }
592
+ }
593
+ @mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
594
+ @for $i from 1 through $cols {
595
+ .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
596
+ }
597
+ }
598
+ @mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
599
+ width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
600
+ *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
601
+ }
602
+
603
+ @mixin gridInput($columnWidth, $gutterWidth) {
604
+ input, textarea, .uneditable-input {
605
+ margin-left: 0; // override margin-left from core grid system
606
+ }
607
+
608
+ // generate .spanX
609
+ @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
610
+ }
611
+ @mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
612
+ @for $i from 1 through $cols {
613
+ input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
614
+ }
615
+ }
616
+ @mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
617
+ width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
618
+ }
619
+
620
+ @mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
621
+ // This isn't perfect, but it's better than nothing.
622
+ float: left;
623
+ margin-left: $gutterWidth;
624
+ @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
625
+ }