bootstrap-sass-rails-rtl 2.0.4.12

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 (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-left: $gridGutterWidth;
15
+ padding-right: $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-right: auto;
39
+ margin-left: 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-right: .3em;
57
+
58
+ &:first-child {
59
+ *margin-right: 0;
60
+ }
61
+ }
62
+
63
+ @mixin ie7-restore-right-whitespace() {
64
+ *margin-left: .3em;
65
+
66
+ &:last-child {
67
+ *margin-right: 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(right, $startColor, $endColor); // FF 3.6+
358
+ background-image: -ms-linear-gradient(right, $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(right, $startColor, $endColor); // Safari 5.1+, Chrome 10+
361
+ background-image: -o-linear-gradient(right, $startColor, $endColor); // Opera 11.10
362
+ background-image: linear-gradient(right, $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
+ right: 50%;
477
+ margin-right: -$arrowWidth;
478
+ border-right: $arrowWidth solid transparent;
479
+ border-left: $arrowWidth solid transparent;
480
+ border-top: $arrowWidth solid $color;
481
+ }
482
+ @mixin popoverArrow-left($arrowWidth: 5px, $color: $black) {
483
+ top: 50%;
484
+ left: 0;
485
+ margin-top: -$arrowWidth;
486
+ border-top: $arrowWidth solid transparent;
487
+ border-bottom: $arrowWidth solid transparent;
488
+ border-right: $arrowWidth solid $color;
489
+ }
490
+ @mixin popoverArrow-bottom($arrowWidth: 5px, $color: $black) {
491
+ top: 0;
492
+ right: 50%;
493
+ margin-right: -$arrowWidth;
494
+ border-right: $arrowWidth solid transparent;
495
+ border-left: $arrowWidth solid transparent;
496
+ border-bottom: $arrowWidth solid $color;
497
+ }
498
+ @mixin popoverArrow-right($arrowWidth: 5px, $color: $black) {
499
+ top: 50%;
500
+ right: 0;
501
+ margin-top: -$arrowWidth;
502
+ border-top: $arrowWidth solid transparent;
503
+ border-bottom: $arrowWidth solid transparent;
504
+ border-left: $arrowWidth solid $color;
505
+ }
506
+
507
+ // Grid System
508
+ // -----------
509
+
510
+ // Centered container element
511
+ @mixin container-fixed() {
512
+ margin-left: auto;
513
+ margin-right: 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-right: 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-right: $gridGutterWidth * -1;
528
+ @include clearfix();
529
+ }
530
+ @mixin makeColumn($columns: 1, $offset: 0) {
531
+ float: right;
532
+ margin-right: ($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-right: ($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-right: $gridGutterWidth * -1;
548
+ @include clearfix();
549
+ }
550
+
551
+ [class*="span"] {
552
+ float: right;
553
+ margin-right: $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: right;
580
+ margin-right: $fluidGridGutterWidth;
581
+ *margin-right: $fluidGridGutterWidth - (.5 / ($gridRowWidth/1px) * 100%);
582
+ }
583
+ [class*="span"]:first-child {
584
+ margin-right: 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-right: 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
+ }