anjlab-bootstrap-rails 2.3.1.2 → 3.0.0.0.alpha1

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