bootstrap-sass-rtl 2.3.0.1

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