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