bootstrap-sass-rtl 2.3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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
+ }