twbs_sass_rails 0.2.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +17 -8
  3. data/CONTRIBUTING.md +4 -4
  4. data/Gemfile.lock +52 -65
  5. data/LICENSE +2 -2
  6. data/README.md +48 -18
  7. data/Rakefile +67 -32
  8. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  9. data/app/assets/fonts/fontawesome-webfont.svg +23 -8
  10. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  11. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  12. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  13. data/app/assets/fonts/glyphicons-halflings-regular.svg +200 -199
  14. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  15. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  16. data/gemfiles/Gemfile.rails-3.2.x +2 -3
  17. data/gemfiles/Gemfile.rails-4.0.x +2 -3
  18. data/lib/generators/twbs_sass_rails/install/install_generator.rb +2 -2
  19. data/lib/generators/twbs_sass_rails/install/templates/{twbs-variables.css.less → twbs-variables.css.scss} +4 -3
  20. data/lib/generators/twbs_sass_rails/install/templates/{twbs.css.less → twbs.css.scss} +12 -7
  21. data/lib/twbs_sass_rails/version.rb +1 -1
  22. data/test/dummy/app/assets/stylesheets/{default-twbs.css.less → default-twbs.css.scss} +0 -0
  23. data/test/dummy/app/assets/stylesheets/test.css.scss +9 -0
  24. data/test/dummy/app/assets/stylesheets/twbs-variables.css.scss +7 -0
  25. data/test/dummy/app/assets/stylesheets/{twbs.css.less → twbs.css.scss} +12 -7
  26. data/test/dummy/config/application.rb +4 -1
  27. data/test/dummy/config/environments/development.rb +1 -1
  28. data/test/generators/install_generator_test.rb +4 -4
  29. data/test/integration/assets_precompile_integration_test.rb +11 -5
  30. data/test/integration/twbs_sass_rails_integration_test.rb +8 -7
  31. data/test/test_helper.rb +2 -4
  32. data/twbs_sass_rails.gemspec +6 -9
  33. data/vendor/assets/javascripts/respond.js +223 -212
  34. data/vendor/assets/javascripts/twbs/bootstrap/affix.js +36 -25
  35. data/vendor/assets/javascripts/twbs/bootstrap/alert.js +7 -17
  36. data/vendor/assets/javascripts/twbs/bootstrap/button.js +26 -28
  37. data/vendor/assets/javascripts/twbs/bootstrap/carousel.js +22 -34
  38. data/vendor/assets/javascripts/twbs/bootstrap/collapse.js +9 -18
  39. data/vendor/assets/javascripts/twbs/bootstrap/dropdown.js +25 -32
  40. data/vendor/assets/javascripts/twbs/bootstrap/modal.js +27 -30
  41. data/vendor/assets/javascripts/twbs/bootstrap/popover.js +16 -23
  42. data/vendor/assets/javascripts/twbs/bootstrap/scrollspy.js +19 -24
  43. data/vendor/assets/javascripts/twbs/bootstrap/tab.js +10 -20
  44. data/vendor/assets/javascripts/twbs/bootstrap/tooltip.js +54 -41
  45. data/vendor/assets/javascripts/twbs/bootstrap/transition.js +13 -21
  46. data/vendor/assets/stylesheets/fontawesome/_bordered-pulled.scss +16 -0
  47. data/vendor/assets/stylesheets/fontawesome/_core.scss +12 -0
  48. data/vendor/assets/stylesheets/fontawesome/_extras.scss +44 -0
  49. data/vendor/assets/stylesheets/fontawesome/_fixed-width.scss +6 -0
  50. data/vendor/assets/stylesheets/fontawesome/_icons.scss +412 -0
  51. data/vendor/assets/stylesheets/fontawesome/_larger.scss +13 -0
  52. data/vendor/assets/stylesheets/fontawesome/_list.scss +19 -0
  53. data/vendor/assets/stylesheets/fontawesome/_mixins.scss +20 -0
  54. data/vendor/assets/stylesheets/fontawesome/_path.scss +14 -0
  55. data/vendor/assets/stylesheets/fontawesome/_rotated-flipped.scss +9 -0
  56. data/vendor/assets/stylesheets/fontawesome/_spinning.scss +30 -0
  57. data/vendor/assets/stylesheets/fontawesome/_stacked.scss +20 -0
  58. data/vendor/assets/stylesheets/fontawesome/_variables.scss +381 -0
  59. data/vendor/assets/stylesheets/fontawesome/font-awesome.scss +17 -0
  60. data/vendor/assets/stylesheets/twbs/bootstrap/{alerts.less → _alerts.scss} +10 -10
  61. data/vendor/assets/stylesheets/twbs/bootstrap/{badges.less → _badges.scss} +19 -15
  62. data/vendor/assets/stylesheets/twbs/bootstrap/_breadcrumbs.scss +26 -0
  63. data/vendor/assets/stylesheets/twbs/bootstrap/{button-groups.less → _button-groups.scss} +38 -60
  64. data/vendor/assets/stylesheets/twbs/bootstrap/{buttons.less → _buttons.scss} +28 -34
  65. data/vendor/assets/stylesheets/twbs/bootstrap/{carousel.less → _carousel.scss} +38 -19
  66. data/vendor/assets/stylesheets/twbs/bootstrap/_close.scss +35 -0
  67. data/vendor/assets/stylesheets/twbs/bootstrap/_code.scss +63 -0
  68. data/vendor/assets/stylesheets/twbs/bootstrap/{component-animations.less → _component-animations.scss} +2 -2
  69. data/vendor/assets/stylesheets/twbs/bootstrap/{dropdowns.less → _dropdowns.scss} +53 -33
  70. data/vendor/assets/stylesheets/twbs/bootstrap/{forms.less → _forms.scss} +133 -79
  71. data/vendor/assets/stylesheets/twbs/bootstrap/{glyphicons.less → _glyphicons.scss} +16 -19
  72. data/vendor/assets/stylesheets/twbs/bootstrap/_grid.scss +100 -0
  73. data/vendor/assets/stylesheets/twbs/bootstrap/{input-groups.less → _input-groups.scss} +58 -29
  74. data/vendor/assets/stylesheets/twbs/bootstrap/_jumbotron.scss +44 -0
  75. data/vendor/assets/stylesheets/twbs/bootstrap/{labels.less → _labels.scss} +14 -8
  76. data/vendor/assets/stylesheets/twbs/bootstrap/_list-group.scss +110 -0
  77. data/vendor/assets/stylesheets/twbs/bootstrap/{media.less → _media.scss} +0 -0
  78. data/vendor/assets/stylesheets/twbs/bootstrap/_mixins.scss +931 -0
  79. data/vendor/assets/stylesheets/twbs/bootstrap/{modals.less → _modals.scss} +37 -40
  80. data/vendor/assets/stylesheets/twbs/bootstrap/_navbar.scss +620 -0
  81. data/vendor/assets/stylesheets/twbs/bootstrap/{navs.less → _navs.scss} +41 -52
  82. data/vendor/assets/stylesheets/twbs/bootstrap/{normalize.less → _normalize.scss} +148 -121
  83. data/vendor/assets/stylesheets/twbs/bootstrap/{pager.less → _pager.scss} +8 -8
  84. data/vendor/assets/stylesheets/twbs/bootstrap/_pagination.scss +88 -0
  85. data/vendor/assets/stylesheets/twbs/bootstrap/_panels.scss +230 -0
  86. data/vendor/assets/stylesheets/twbs/bootstrap/{popovers.less → _popovers.scss} +36 -36
  87. data/vendor/assets/stylesheets/twbs/bootstrap/{print.less → _print.scss} +6 -5
  88. data/vendor/assets/stylesheets/twbs/bootstrap/_progress-bars.scss +80 -0
  89. data/vendor/assets/stylesheets/twbs/bootstrap/_responsive-utilities.scss +80 -0
  90. data/vendor/assets/stylesheets/twbs/bootstrap/{scaffolding.less → _scaffolding.scss} +39 -24
  91. data/vendor/assets/stylesheets/twbs/bootstrap/{tables.less → _tables.scss} +42 -48
  92. data/vendor/assets/stylesheets/twbs/bootstrap/_theme.scss +247 -0
  93. data/vendor/assets/stylesheets/twbs/bootstrap/_thumbnails.scss +38 -0
  94. data/vendor/assets/stylesheets/twbs/bootstrap/_tooltip.scss +95 -0
  95. data/vendor/assets/stylesheets/twbs/bootstrap/_type.scss +296 -0
  96. data/vendor/assets/stylesheets/twbs/bootstrap/{utilities.less → _utilities.scss} +14 -3
  97. data/vendor/assets/stylesheets/twbs/bootstrap/_variables.scss +831 -0
  98. data/vendor/assets/stylesheets/twbs/bootstrap/{wells.less → _wells.scss} +6 -6
  99. data/vendor/assets/stylesheets/twbs/bootstrap/bootstrap.scss +48 -0
  100. data/vendor/assets/stylesheets/twbs/{bootstrap.less → bootstrap.scss} +0 -0
  101. metadata +94 -134
  102. data/test/dummy/app/assets/stylesheets/test.css.less +0 -5
  103. data/test/dummy/app/assets/stylesheets/twbs-variables.css.less +0 -6
  104. data/test/dummy/config/database.yml +0 -25
  105. data/test/dummy/db/.keep +0 -0
  106. data/vendor/assets/stylesheets/fontawesome/bootstrap.less +0 -84
  107. data/vendor/assets/stylesheets/fontawesome/core.less +0 -129
  108. data/vendor/assets/stylesheets/fontawesome/extras.less +0 -93
  109. data/vendor/assets/stylesheets/fontawesome/font-awesome.less +0 -33
  110. data/vendor/assets/stylesheets/fontawesome/icons.less +0 -381
  111. data/vendor/assets/stylesheets/fontawesome/mixins.less +0 -48
  112. data/vendor/assets/stylesheets/fontawesome/path.less +0 -14
  113. data/vendor/assets/stylesheets/fontawesome/variables.less +0 -735
  114. data/vendor/assets/stylesheets/twbs/bootstrap/bootstrap.less +0 -58
  115. data/vendor/assets/stylesheets/twbs/bootstrap/breadcrumbs.less +0 -23
  116. data/vendor/assets/stylesheets/twbs/bootstrap/close.less +0 -33
  117. data/vendor/assets/stylesheets/twbs/bootstrap/code.less +0 -56
  118. data/vendor/assets/stylesheets/twbs/bootstrap/grid.less +0 -346
  119. data/vendor/assets/stylesheets/twbs/bootstrap/jumbotron.less +0 -40
  120. data/vendor/assets/stylesheets/twbs/bootstrap/list-group.less +0 -88
  121. data/vendor/assets/stylesheets/twbs/bootstrap/mixins.less +0 -744
  122. data/vendor/assets/stylesheets/twbs/bootstrap/navbar.less +0 -621
  123. data/vendor/assets/stylesheets/twbs/bootstrap/pagination.less +0 -85
  124. data/vendor/assets/stylesheets/twbs/bootstrap/panels.less +0 -143
  125. data/vendor/assets/stylesheets/twbs/bootstrap/progress-bars.less +0 -96
  126. data/vendor/assets/stylesheets/twbs/bootstrap/responsive-utilities.less +0 -220
  127. data/vendor/assets/stylesheets/twbs/bootstrap/theme.less +0 -244
  128. data/vendor/assets/stylesheets/twbs/bootstrap/thumbnails.less +0 -32
  129. data/vendor/assets/stylesheets/twbs/bootstrap/tooltip.less +0 -95
  130. data/vendor/assets/stylesheets/twbs/bootstrap/type.less +0 -271
  131. data/vendor/assets/stylesheets/twbs/bootstrap/variables.less +0 -635
@@ -1,744 +0,0 @@
1
- //
2
- // Mixins
3
- // --------------------------------------------------
4
-
5
-
6
- // Utilities
7
- // -------------------------
8
-
9
- // Clearfix
10
- // Source: http://nicolasgallagher.com/micro-clearfix-hack/
11
- //
12
- // For modern browsers
13
- // 1. The space content is one way to avoid an Opera bug when the
14
- // contenteditable attribute is included anywhere else in the document.
15
- // Otherwise it causes space to appear at the top and bottom of elements
16
- // that are clearfixed.
17
- // 2. The use of `table` rather than `block` is only necessary if using
18
- // `:before` to contain the top-margins of child elements.
19
- .clearfix() {
20
- &:before,
21
- &:after {
22
- content: " "; /* 1 */
23
- display: table; /* 2 */
24
- }
25
- &:after {
26
- clear: both;
27
- }
28
- }
29
-
30
- // Webkit-style focus
31
- .tab-focus() {
32
- // Default
33
- outline: thin dotted #333;
34
- // Webkit
35
- outline: 5px auto -webkit-focus-ring-color;
36
- outline-offset: -2px;
37
- }
38
-
39
- // Center-align a block level element
40
- .center-block() {
41
- display: block;
42
- margin-left: auto;
43
- margin-right: auto;
44
- }
45
-
46
- // Sizing shortcuts
47
- .size(@width; @height) {
48
- width: @width;
49
- height: @height;
50
- }
51
- .square(@size) {
52
- .size(@size; @size);
53
- }
54
-
55
- // Placeholder text
56
- .placeholder(@color: @input-color-placeholder) {
57
- &:-moz-placeholder { color: @color; } // Firefox 4-18
58
- &::-moz-placeholder { color: @color; } // Firefox 19+
59
- &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
60
- &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
61
- }
62
-
63
- // Text overflow
64
- // Requires inline-block or block for proper styling
65
- .text-overflow() {
66
- overflow: hidden;
67
- text-overflow: ellipsis;
68
- white-space: nowrap;
69
- }
70
-
71
- // CSS image replacement
72
- //
73
- // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
74
- // mixins being reused as classes with the same name, this doesn't hold up. As
75
- // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
76
- // that we cannot chain the mixins together in Less, so they are repeated.
77
- //
78
- // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
79
-
80
- // Deprecated as of v3.0.1 (will be removed in v4)
81
- .hide-text() {
82
- font: ~"0/0" a;
83
- color: transparent;
84
- text-shadow: none;
85
- background-color: transparent;
86
- border: 0;
87
- }
88
- // New mixin to use as of v3.0.1
89
- .text-hide() {
90
- font: ~"0/0" a;
91
- color: transparent;
92
- text-shadow: none;
93
- background-color: transparent;
94
- border: 0;
95
- }
96
-
97
-
98
-
99
- // CSS3 PROPERTIES
100
- // --------------------------------------------------
101
-
102
- // Single side border-radius
103
- .border-top-radius(@radius) {
104
- border-top-right-radius: @radius;
105
- border-top-left-radius: @radius;
106
- }
107
- .border-right-radius(@radius) {
108
- border-bottom-right-radius: @radius;
109
- border-top-right-radius: @radius;
110
- }
111
- .border-bottom-radius(@radius) {
112
- border-bottom-right-radius: @radius;
113
- border-bottom-left-radius: @radius;
114
- }
115
- .border-left-radius(@radius) {
116
- border-bottom-left-radius: @radius;
117
- border-top-left-radius: @radius;
118
- }
119
-
120
- // Drop shadows
121
- .box-shadow(@shadow) {
122
- -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
123
- box-shadow: @shadow;
124
- }
125
-
126
- // Transitions
127
- .transition(@transition) {
128
- -webkit-transition: @transition;
129
- transition: @transition;
130
- }
131
- .transition-property(@transition-property) {
132
- -webkit-transition-property: @transition-property;
133
- transition-property: @transition-property;
134
- }
135
- .transition-delay(@transition-delay) {
136
- -webkit-transition-delay: @transition-delay;
137
- transition-delay: @transition-delay;
138
- }
139
- .transition-duration(@transition-duration) {
140
- -webkit-transition-duration: @transition-duration;
141
- transition-duration: @transition-duration;
142
- }
143
- .transition-transform(@transition) {
144
- -webkit-transition: -webkit-transform @transition;
145
- -moz-transition: -moz-transform @transition;
146
- -o-transition: -o-transform @transition;
147
- transition: transform @transition;
148
- }
149
-
150
- // Transformations
151
- .rotate(@degrees) {
152
- -webkit-transform: rotate(@degrees);
153
- -ms-transform: rotate(@degrees); // IE9+
154
- transform: rotate(@degrees);
155
- }
156
- .scale(@ratio) {
157
- -webkit-transform: scale(@ratio);
158
- -ms-transform: scale(@ratio); // IE9+
159
- transform: scale(@ratio);
160
- }
161
- .translate(@x; @y) {
162
- -webkit-transform: translate(@x, @y);
163
- -ms-transform: translate(@x, @y); // IE9+
164
- transform: translate(@x, @y);
165
- }
166
- .skew(@x; @y) {
167
- -webkit-transform: skew(@x, @y);
168
- -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
169
- transform: skew(@x, @y);
170
- }
171
- .translate3d(@x; @y; @z) {
172
- -webkit-transform: translate3d(@x, @y, @z);
173
- transform: translate3d(@x, @y, @z);
174
- }
175
-
176
- // Backface visibility
177
- // Prevent browsers from flickering when using CSS 3D transforms.
178
- // Default value is `visible`, but can be changed to `hidden`
179
- // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
180
- .backface-visibility(@visibility){
181
- -webkit-backface-visibility: @visibility;
182
- -moz-backface-visibility: @visibility;
183
- backface-visibility: @visibility;
184
- }
185
-
186
- // Box sizing
187
- .box-sizing(@boxmodel) {
188
- -webkit-box-sizing: @boxmodel;
189
- -moz-box-sizing: @boxmodel;
190
- box-sizing: @boxmodel;
191
- }
192
-
193
- // User select
194
- // For selecting text on the page
195
- .user-select(@select) {
196
- -webkit-user-select: @select;
197
- -moz-user-select: @select;
198
- -ms-user-select: @select; // IE10+
199
- -o-user-select: @select;
200
- user-select: @select;
201
- }
202
-
203
- // Resize anything
204
- .resizable(@direction) {
205
- resize: @direction; // Options: horizontal, vertical, both
206
- overflow: auto; // Safari fix
207
- }
208
-
209
- // CSS3 Content Columns
210
- .content-columns(@column-count; @column-gap: @grid-gutter-width) {
211
- -webkit-column-count: @column-count;
212
- -moz-column-count: @column-count;
213
- column-count: @column-count;
214
- -webkit-column-gap: @column-gap;
215
- -moz-column-gap: @column-gap;
216
- column-gap: @column-gap;
217
- }
218
-
219
- // Optional hyphenation
220
- .hyphens(@mode: auto) {
221
- word-wrap: break-word;
222
- -webkit-hyphens: @mode;
223
- -moz-hyphens: @mode;
224
- -ms-hyphens: @mode; // IE10+
225
- -o-hyphens: @mode;
226
- hyphens: @mode;
227
- }
228
-
229
- // Opacity
230
- .opacity(@opacity) {
231
- opacity: @opacity;
232
- // IE8 filter
233
- @opacity-ie: (@opacity * 100);
234
- filter: ~"alpha(opacity=@{opacity-ie})";
235
- }
236
-
237
-
238
-
239
- // GRADIENTS
240
- // --------------------------------------------------
241
-
242
- #gradient {
243
-
244
- // Horizontal gradient, from left to right
245
- //
246
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
247
- // Color stops are not available in IE9 and below.
248
- .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
249
- background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
250
- background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
251
- background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
252
- background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
253
- background-repeat: repeat-x;
254
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
255
- }
256
-
257
- // Vertical gradient, from top to bottom
258
- //
259
- // Creates two color stops, start and end, by specifying a color and position for each color stop.
260
- // Color stops are not available in IE9 and below.
261
- .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
262
- background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
263
- background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
264
- background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
265
- background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
266
- background-repeat: repeat-x;
267
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
268
- }
269
-
270
- .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
271
- background-repeat: repeat-x;
272
- background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
273
- background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
274
- background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
275
- }
276
- .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
277
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
278
- background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
279
- background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
280
- background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
281
- background-repeat: no-repeat;
282
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
283
- }
284
- .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
285
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
286
- background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
287
- background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
288
- background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
289
- background-repeat: no-repeat;
290
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
291
- }
292
- .radial(@inner-color: #555; @outer-color: #333) {
293
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
294
- background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
295
- background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
296
- background-image: radial-gradient(circle, @inner-color, @outer-color);
297
- background-repeat: no-repeat;
298
- }
299
- .striped(@color: #555; @angle: 45deg) {
300
- 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));
301
- 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);
302
- 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);
303
- 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);
304
- }
305
- }
306
-
307
- // Reset filters for IE
308
- //
309
- // When you need to remove a gradient background, do not forget to use this to reset
310
- // the IE filter for IE9 and below.
311
- .reset-filter() {
312
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
313
- }
314
-
315
-
316
-
317
- // Retina images
318
- //
319
- // Short retina mixin for setting background-image and -size
320
-
321
- .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
322
- background-image: url("@{file-1x}");
323
-
324
- @media
325
- only screen and (-webkit-min-device-pixel-ratio: 2),
326
- only screen and ( min--moz-device-pixel-ratio: 2),
327
- only screen and ( -o-min-device-pixel-ratio: 2/1),
328
- only screen and ( min-device-pixel-ratio: 2),
329
- only screen and ( min-resolution: 192dpi),
330
- only screen and ( min-resolution: 2dppx) {
331
- background-image: url("@{file-2x}");
332
- background-size: @width-1x @height-1x;
333
- }
334
- }
335
-
336
-
337
- // Responsive image
338
- //
339
- // Keep images from scaling beyond the width of their parents.
340
-
341
- .img-responsive(@display: block;) {
342
- display: @display;
343
- max-width: 100%; // Part 1: Set a maximum relative to the parent
344
- height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
345
- }
346
-
347
-
348
- // COMPONENT MIXINS
349
- // --------------------------------------------------
350
-
351
- // Horizontal dividers
352
- // -------------------------
353
- // Dividers (basically an hr) within dropdowns and nav lists
354
- .nav-divider(@color: #e5e5e5) {
355
- height: 1px;
356
- margin: ((@line-height-computed / 2) - 1) 0;
357
- overflow: hidden;
358
- background-color: @color;
359
- }
360
-
361
- // Panels
362
- // -------------------------
363
- .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
364
- border-color: @border;
365
- & > .panel-heading {
366
- color: @heading-text-color;
367
- background-color: @heading-bg-color;
368
- border-color: @heading-border;
369
- + .panel-collapse .panel-body {
370
- border-top-color: @border;
371
- }
372
- }
373
- & > .panel-footer {
374
- + .panel-collapse .panel-body {
375
- border-bottom-color: @border;
376
- }
377
- }
378
- }
379
-
380
- // Alerts
381
- // -------------------------
382
- .alert-variant(@background; @border; @text-color) {
383
- background-color: @background;
384
- border-color: @border;
385
- color: @text-color;
386
- hr {
387
- border-top-color: darken(@border, 5%);
388
- }
389
- .alert-link {
390
- color: darken(@text-color, 10%);
391
- }
392
- }
393
-
394
- // Tables
395
- // -------------------------
396
- .table-row-variant(@state; @background; @border) {
397
- // Exact selectors below required to override `.table-striped` and prevent
398
- // inheritance to nested tables.
399
- .table > thead > tr,
400
- .table > tbody > tr,
401
- .table > tfoot > tr {
402
- > td.@{state},
403
- > th.@{state},
404
- &.@{state} > td,
405
- &.@{state} > th {
406
- background-color: @background;
407
- border-color: @border;
408
- }
409
- }
410
-
411
- // Hover states for `.table-hover`
412
- // Note: this is not available for cells or rows within `thead` or `tfoot`.
413
- .table-hover > tbody > tr {
414
- > td.@{state}:hover,
415
- > th.@{state}:hover,
416
- &.@{state}:hover > td,
417
- &.@{state}:hover > th {
418
- background-color: darken(@background, 5%);
419
- border-color: darken(@border, 5%);
420
- }
421
- }
422
- }
423
-
424
- // Button variants
425
- // -------------------------
426
- // Easily pump out default styles, as well as :hover, :focus, :active,
427
- // and disabled options for all buttons
428
- .button-variant(@color; @background; @border) {
429
- color: @color;
430
- background-color: @background;
431
- border-color: @border;
432
-
433
- &:hover,
434
- &:focus,
435
- &:active,
436
- &.active,
437
- .open .dropdown-toggle& {
438
- color: @color;
439
- background-color: darken(@background, 8%);
440
- border-color: darken(@border, 12%);
441
- }
442
- &:active,
443
- &.active,
444
- .open .dropdown-toggle& {
445
- background-image: none;
446
- }
447
- &.disabled,
448
- &[disabled],
449
- fieldset[disabled] & {
450
- &,
451
- &:hover,
452
- &:focus,
453
- &:active,
454
- &.active {
455
- background-color: @background;
456
- border-color: @border
457
- }
458
- }
459
- }
460
-
461
- // Button sizes
462
- // -------------------------
463
- .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
464
- padding: @padding-vertical @padding-horizontal;
465
- font-size: @font-size;
466
- line-height: @line-height;
467
- border-radius: @border-radius;
468
- }
469
-
470
- // Pagination
471
- // -------------------------
472
- .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
473
- > li {
474
- > a,
475
- > span {
476
- padding: @padding-vertical @padding-horizontal;
477
- font-size: @font-size;
478
- }
479
- &:first-child {
480
- > a,
481
- > span {
482
- .border-left-radius(@border-radius);
483
- }
484
- }
485
- &:last-child {
486
- > a,
487
- > span {
488
- .border-right-radius(@border-radius);
489
- }
490
- }
491
- }
492
- }
493
-
494
- // Labels
495
- // -------------------------
496
- .label-variant(@color) {
497
- background-color: @color;
498
- &[href] {
499
- &:hover,
500
- &:focus {
501
- background-color: darken(@color, 10%);
502
- }
503
- }
504
- }
505
-
506
- // Navbar vertical align
507
- // -------------------------
508
- // Vertically center elements in the navbar.
509
- // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
510
- .navbar-vertical-align(@element-height) {
511
- margin-top: ((@navbar-height - @element-height) / 2);
512
- margin-bottom: ((@navbar-height - @element-height) / 2);
513
- }
514
-
515
- // Progress bars
516
- // -------------------------
517
- .progress-bar-variant(@color) {
518
- background-color: @color;
519
- .progress-striped & {
520
- #gradient > .striped(@color);
521
- }
522
- }
523
-
524
- // Responsive utilities
525
- // -------------------------
526
- // More easily include all the states for responsive-utilities.less.
527
- .responsive-visibility() {
528
- display: block !important;
529
- tr& { display: table-row !important; }
530
- th&,
531
- td& { display: table-cell !important; }
532
- }
533
-
534
- .responsive-invisibility() {
535
- display: none !important;
536
- tr& { display: none !important; }
537
- th&,
538
- td& { display: none !important; }
539
- }
540
-
541
- // Grid System
542
- // -----------
543
-
544
- // Centered container element
545
- .container-fixed() {
546
- margin-right: auto;
547
- margin-left: auto;
548
- padding-left: (@grid-gutter-width / 2);
549
- padding-right: (@grid-gutter-width / 2);
550
- .clearfix();
551
- }
552
-
553
- // Creates a wrapper for a series of columns
554
- .make-row(@gutter: @grid-gutter-width) {
555
- margin-left: (@gutter / -2);
556
- margin-right: (@gutter / -2);
557
- .clearfix();
558
- }
559
-
560
- // Generate the extra small columns
561
- .make-xs-column(@columns; @gutter: @grid-gutter-width) {
562
- position: relative;
563
- float: left;
564
- width: percentage((@columns / @grid-columns));
565
- // Prevent columns from collapsing when empty
566
- min-height: 1px;
567
- // Inner gutter via padding
568
- padding-left: (@gutter / 2);
569
- padding-right: (@gutter / 2);
570
- }
571
-
572
- // Generate the small columns
573
- .make-sm-column(@columns; @gutter: @grid-gutter-width) {
574
- position: relative;
575
- // Prevent columns from collapsing when empty
576
- min-height: 1px;
577
- // Inner gutter via padding
578
- padding-left: (@gutter / 2);
579
- padding-right: (@gutter / 2);
580
-
581
- // Calculate width based on number of columns available
582
- @media (min-width: @screen-sm-min) {
583
- float: left;
584
- width: percentage((@columns / @grid-columns));
585
- }
586
- }
587
-
588
- // Generate the small column offsets
589
- .make-sm-column-offset(@columns) {
590
- @media (min-width: @screen-sm-min) {
591
- margin-left: percentage((@columns / @grid-columns));
592
- }
593
- }
594
- .make-sm-column-push(@columns) {
595
- @media (min-width: @screen-sm-min) {
596
- left: percentage((@columns / @grid-columns));
597
- }
598
- }
599
- .make-sm-column-pull(@columns) {
600
- @media (min-width: @screen-sm-min) {
601
- right: percentage((@columns / @grid-columns));
602
- }
603
- }
604
-
605
- // Generate the medium columns
606
- .make-md-column(@columns; @gutter: @grid-gutter-width) {
607
- position: relative;
608
- // Prevent columns from collapsing when empty
609
- min-height: 1px;
610
- // Inner gutter via padding
611
- padding-left: (@gutter / 2);
612
- padding-right: (@gutter / 2);
613
-
614
- // Calculate width based on number of columns available
615
- @media (min-width: @screen-md-min) {
616
- float: left;
617
- width: percentage((@columns / @grid-columns));
618
- }
619
- }
620
-
621
- // Generate the medium column offsets
622
- .make-md-column-offset(@columns) {
623
- @media (min-width: @screen-md-min) {
624
- margin-left: percentage((@columns / @grid-columns));
625
- }
626
- }
627
- .make-md-column-push(@columns) {
628
- @media (min-width: @screen-md) {
629
- left: percentage((@columns / @grid-columns));
630
- }
631
- }
632
- .make-md-column-pull(@columns) {
633
- @media (min-width: @screen-md-min) {
634
- right: percentage((@columns / @grid-columns));
635
- }
636
- }
637
-
638
- // Generate the large columns
639
- .make-lg-column(@columns; @gutter: @grid-gutter-width) {
640
- position: relative;
641
- // Prevent columns from collapsing when empty
642
- min-height: 1px;
643
- // Inner gutter via padding
644
- padding-left: (@gutter / 2);
645
- padding-right: (@gutter / 2);
646
-
647
- // Calculate width based on number of columns available
648
- @media (min-width: @screen-lg-min) {
649
- float: left;
650
- width: percentage((@columns / @grid-columns));
651
- }
652
- }
653
-
654
- // Generate the large column offsets
655
- .make-lg-column-offset(@columns) {
656
- @media (min-width: @screen-lg-min) {
657
- margin-left: percentage((@columns / @grid-columns));
658
- }
659
- }
660
- .make-lg-column-push(@columns) {
661
- @media (min-width: @screen-lg-min) {
662
- left: percentage((@columns / @grid-columns));
663
- }
664
- }
665
- .make-lg-column-pull(@columns) {
666
- @media (min-width: @screen-lg-min) {
667
- right: percentage((@columns / @grid-columns));
668
- }
669
- }
670
-
671
-
672
- // Form validation states
673
- //
674
- // Used in forms.less to generate the form validation CSS for warnings, errors,
675
- // and successes.
676
-
677
- .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
678
- // Color the label and help text
679
- .help-block,
680
- .control-label {
681
- color: @text-color;
682
- }
683
- // Set the border and box shadow on specific inputs to match
684
- .form-control {
685
- border-color: @border-color;
686
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
687
- &:focus {
688
- border-color: darken(@border-color, 10%);
689
- @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
690
- .box-shadow(@shadow);
691
- }
692
- }
693
- // Set validation states also for addons
694
- .input-group-addon {
695
- color: @text-color;
696
- border-color: @border-color;
697
- background-color: @background-color;
698
- }
699
- }
700
-
701
- // Form control focus state
702
- //
703
- // Generate a customized focus state and for any input with the specified color,
704
- // which defaults to the `@input-focus-border` variable.
705
- //
706
- // We highly encourage you to not customize the default value, but instead use
707
- // this to tweak colors on an as-needed basis. This aesthetic change is based on
708
- // WebKit's default styles, but applicable to a wider range of browsers. Its
709
- // usability and accessibility should be taken into account with any change.
710
- //
711
- // Example usage: change the default blue border and shadow to white for better
712
- // contrast against a dark gray background.
713
-
714
- .form-control-focus(@color: @input-border-focus) {
715
- @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
716
- &:focus {
717
- border-color: @color;
718
- outline: 0;
719
- .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
720
- }
721
- }
722
-
723
- // Form control sizing
724
- //
725
- // Relative text size, padding, and border-radii changes for form controls. For
726
- // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
727
- // element gets special love because it's special, and that's a fact!
728
-
729
- .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
730
- height: @input-height;
731
- padding: @padding-vertical @padding-horizontal;
732
- font-size: @font-size;
733
- line-height: @line-height;
734
- border-radius: @border-radius;
735
-
736
- select& {
737
- height: @input-height;
738
- line-height: @input-height;
739
- }
740
-
741
- textarea& {
742
- height: auto;
743
- }
744
- }