twitter-bootstrap-turbo 2.1.3

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