bootstrap-sass-rails-rtl 2.0.4.12

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