webgen-sass_twitter_bootstrap-bundle 1.0.0

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