bootplus-rails 0.0.1 → 0.0.1.1

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 (79) hide show
  1. data/lib/bootplus/rails/version.rb +1 -1
  2. data/vendor/assets/javascripts/bootstrap-affix.js +117 -0
  3. data/vendor/assets/javascripts/bootstrap-alert.js +99 -0
  4. data/vendor/assets/javascripts/bootstrap-button.js +105 -0
  5. data/vendor/assets/javascripts/bootstrap-carousel.js +207 -0
  6. data/vendor/assets/javascripts/bootstrap-collapse.js +167 -0
  7. data/vendor/assets/javascripts/bootstrap-dropdown.js +169 -0
  8. data/vendor/assets/javascripts/bootstrap-modal.js +247 -0
  9. data/vendor/assets/javascripts/bootstrap-popover.js +114 -0
  10. data/vendor/assets/javascripts/bootstrap-scrollspy.js +162 -0
  11. data/vendor/assets/javascripts/bootstrap-tab.js +144 -0
  12. data/vendor/assets/javascripts/bootstrap-tooltip.js +361 -0
  13. data/vendor/assets/javascripts/bootstrap-transition.js +60 -0
  14. data/vendor/assets/javascripts/bootstrap-typeahead.js +335 -0
  15. data/vendor/assets/stylesheets/accordion.less +34 -0
  16. data/vendor/assets/stylesheets/alerts.less +79 -0
  17. data/vendor/assets/stylesheets/bootplus/accordion.less +24 -0
  18. data/vendor/assets/stylesheets/bootplus/alerts.less +13 -0
  19. data/vendor/assets/stylesheets/bootplus/bootplus.less +92 -0
  20. data/vendor/assets/stylesheets/bootplus/button-groups.less +23 -0
  21. data/vendor/assets/stylesheets/bootplus/buttons.less +272 -0
  22. data/vendor/assets/stylesheets/bootplus/cards.less +243 -0
  23. data/vendor/assets/stylesheets/bootplus/dropdowns.less +124 -0
  24. data/vendor/assets/stylesheets/bootplus/forms.less +119 -0
  25. data/vendor/assets/stylesheets/bootplus/hero-unit.less +9 -0
  26. data/vendor/assets/stylesheets/bootplus/icons.less +22 -0
  27. data/vendor/assets/stylesheets/bootplus/labels-badges.less +22 -0
  28. data/vendor/assets/stylesheets/bootplus/media.less +19 -0
  29. data/vendor/assets/stylesheets/bootplus/mixins.less +12 -0
  30. data/vendor/assets/stylesheets/bootplus/modals.less +59 -0
  31. data/vendor/assets/stylesheets/bootplus/navbar.less +131 -0
  32. data/vendor/assets/stylesheets/bootplus/navs.less +180 -0
  33. data/vendor/assets/stylesheets/bootplus/popovers.less +18 -0
  34. data/vendor/assets/stylesheets/bootplus/progress-bars.less +64 -0
  35. data/vendor/assets/stylesheets/bootplus/responsive-navbar.less +23 -0
  36. data/vendor/assets/stylesheets/bootplus/responsive.less +49 -0
  37. data/vendor/assets/stylesheets/bootplus/tooltip.less +14 -0
  38. data/vendor/assets/stylesheets/bootplus/variables.less +316 -0
  39. data/vendor/assets/stylesheets/bootplus/wells.less +25 -0
  40. data/vendor/assets/stylesheets/bootstrap.less +63 -0
  41. data/vendor/assets/stylesheets/breadcrumbs.less +24 -0
  42. data/vendor/assets/stylesheets/button-groups.less +229 -0
  43. data/vendor/assets/stylesheets/buttons.less +241 -0
  44. data/vendor/assets/stylesheets/carousel.less +158 -0
  45. data/vendor/assets/stylesheets/close.less +32 -0
  46. data/vendor/assets/stylesheets/code.less +61 -0
  47. data/vendor/assets/stylesheets/component-animations.less +22 -0
  48. data/vendor/assets/stylesheets/dropdowns.less +248 -0
  49. data/vendor/assets/stylesheets/forms.less +690 -0
  50. data/vendor/assets/stylesheets/grid.less +21 -0
  51. data/vendor/assets/stylesheets/hero-unit.less +25 -0
  52. data/vendor/assets/stylesheets/labels-badges.less +84 -0
  53. data/vendor/assets/stylesheets/layouts.less +16 -0
  54. data/vendor/assets/stylesheets/media.less +55 -0
  55. data/vendor/assets/stylesheets/mixins.less +702 -0
  56. data/vendor/assets/stylesheets/modals.less +95 -0
  57. data/vendor/assets/stylesheets/navbar.less +497 -0
  58. data/vendor/assets/stylesheets/navs.less +409 -0
  59. data/vendor/assets/stylesheets/pager.less +43 -0
  60. data/vendor/assets/stylesheets/pagination.less +123 -0
  61. data/vendor/assets/stylesheets/popovers.less +133 -0
  62. data/vendor/assets/stylesheets/progress-bars.less +122 -0
  63. data/vendor/assets/stylesheets/reset.less +216 -0
  64. data/vendor/assets/stylesheets/responsive-1200px-min.less +28 -0
  65. data/vendor/assets/stylesheets/responsive-767px-max.less +193 -0
  66. data/vendor/assets/stylesheets/responsive-768px-979px.less +19 -0
  67. data/vendor/assets/stylesheets/responsive-navbar.less +189 -0
  68. data/vendor/assets/stylesheets/responsive-utilities.less +59 -0
  69. data/vendor/assets/stylesheets/responsive.less +48 -0
  70. data/vendor/assets/stylesheets/scaffolding.less +53 -0
  71. data/vendor/assets/stylesheets/sprites.less +197 -0
  72. data/vendor/assets/stylesheets/tables.less +244 -0
  73. data/vendor/assets/stylesheets/thumbnails.less +53 -0
  74. data/vendor/assets/stylesheets/tooltip.less +70 -0
  75. data/vendor/assets/stylesheets/type.less +247 -0
  76. data/vendor/assets/stylesheets/utilities.less +30 -0
  77. data/vendor/assets/stylesheets/variables.less +301 -0
  78. data/vendor/assets/stylesheets/wells.less +29 -0
  79. metadata +78 -1
@@ -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,25 @@
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
+ .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
+ }
@@ -0,0 +1,84 @@
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
+ .border-radius(3px);
23
+ }
24
+ .badge {
25
+ padding-left: 9px;
26
+ padding-right: 9px;
27
+ .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
+ .label,
53
+ .badge {
54
+ // Important (red)
55
+ &-important { background-color: @errorText; }
56
+ &-important[href] { background-color: darken(@errorText, 10%); }
57
+ // Warnings (orange)
58
+ &-warning { background-color: @orange; }
59
+ &-warning[href] { background-color: darken(@orange, 10%); }
60
+ // Success (green)
61
+ &-success { background-color: @successText; }
62
+ &-success[href] { background-color: darken(@successText, 10%); }
63
+ // Info (turquoise)
64
+ &-info { background-color: @infoText; }
65
+ &-info[href] { background-color: darken(@infoText, 10%); }
66
+ // Inverse (black)
67
+ &-inverse { background-color: @grayDark; }
68
+ &-inverse[href] { background-color: darken(@grayDark, 10%); }
69
+ }
70
+
71
+ // Quick fix for labels/badges in buttons
72
+ .btn {
73
+ .label,
74
+ .badge {
75
+ position: relative;
76
+ top: -1px;
77
+ }
78
+ }
79
+ .btn-mini {
80
+ .label,
81
+ .badge {
82
+ top: 0;
83
+ }
84
+ }
@@ -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,55 @@
1
+ // Media objects
2
+ // Source: http://stubbornella.org/content/?p=497
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Common styles
7
+ // -------------------------
8
+
9
+ // Clear the floats
10
+ .media,
11
+ .media-body {
12
+ overflow: hidden;
13
+ *overflow: visible;
14
+ zoom: 1;
15
+ }
16
+
17
+ // Proper spacing between instances of .media
18
+ .media,
19
+ .media .media {
20
+ margin-top: 15px;
21
+ }
22
+ .media:first-child {
23
+ margin-top: 0;
24
+ }
25
+
26
+ // For images and videos, set to block
27
+ .media-object {
28
+ display: block;
29
+ }
30
+
31
+ // Reset margins on headings for tighter default spacing
32
+ .media-heading {
33
+ margin: 0 0 5px;
34
+ }
35
+
36
+
37
+ // Media image alignment
38
+ // -------------------------
39
+
40
+ .media > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ .media > .pull-right {
44
+ margin-left: 10px;
45
+ }
46
+
47
+
48
+ // Media list variation
49
+ // -------------------------
50
+
51
+ // Undo default ul/ol styles
52
+ .media-list {
53
+ margin-left: 0;
54
+ list-style: none;
55
+ }
@@ -0,0 +1,702 @@
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: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
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
+ .control-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
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
187
+ .box-shadow(@shadow);
188
+ }
189
+ }
190
+ // Give a small background color for input-prepend/-append
191
+ .input-prepend .add-on,
192
+ .input-append .add-on {
193
+ color: @textColor;
194
+ background-color: @backgroundColor;
195
+ border-color: @textColor;
196
+ }
197
+ }
198
+
199
+
200
+
201
+ // CSS3 PROPERTIES
202
+ // --------------------------------------------------
203
+
204
+ // Border Radius
205
+ .border-radius(@radius) {
206
+ -webkit-border-radius: @radius;
207
+ -moz-border-radius: @radius;
208
+ border-radius: @radius;
209
+ }
210
+
211
+ // Single Corner Border Radius
212
+ .border-top-left-radius(@radius) {
213
+ -webkit-border-top-left-radius: @radius;
214
+ -moz-border-radius-topleft: @radius;
215
+ border-top-left-radius: @radius;
216
+ }
217
+ .border-top-right-radius(@radius) {
218
+ -webkit-border-top-right-radius: @radius;
219
+ -moz-border-radius-topright: @radius;
220
+ border-top-right-radius: @radius;
221
+ }
222
+ .border-bottom-right-radius(@radius) {
223
+ -webkit-border-bottom-right-radius: @radius;
224
+ -moz-border-radius-bottomright: @radius;
225
+ border-bottom-right-radius: @radius;
226
+ }
227
+ .border-bottom-left-radius(@radius) {
228
+ -webkit-border-bottom-left-radius: @radius;
229
+ -moz-border-radius-bottomleft: @radius;
230
+ border-bottom-left-radius: @radius;
231
+ }
232
+
233
+ // Single Side Border Radius
234
+ .border-top-radius(@radius) {
235
+ .border-top-right-radius(@radius);
236
+ .border-top-left-radius(@radius);
237
+ }
238
+ .border-right-radius(@radius) {
239
+ .border-top-right-radius(@radius);
240
+ .border-bottom-right-radius(@radius);
241
+ }
242
+ .border-bottom-radius(@radius) {
243
+ .border-bottom-right-radius(@radius);
244
+ .border-bottom-left-radius(@radius);
245
+ }
246
+ .border-left-radius(@radius) {
247
+ .border-top-left-radius(@radius);
248
+ .border-bottom-left-radius(@radius);
249
+ }
250
+
251
+ // Drop shadows
252
+ .box-shadow(@shadow) {
253
+ -webkit-box-shadow: @shadow;
254
+ -moz-box-shadow: @shadow;
255
+ box-shadow: @shadow;
256
+ }
257
+
258
+ // Transitions
259
+ .transition(@transition) {
260
+ -webkit-transition: @transition;
261
+ -moz-transition: @transition;
262
+ -o-transition: @transition;
263
+ transition: @transition;
264
+ }
265
+ .transition-delay(@transition-delay) {
266
+ -webkit-transition-delay: @transition-delay;
267
+ -moz-transition-delay: @transition-delay;
268
+ -o-transition-delay: @transition-delay;
269
+ transition-delay: @transition-delay;
270
+ }
271
+ .transition-duration(@transition-duration) {
272
+ -webkit-transition-duration: @transition-duration;
273
+ -moz-transition-duration: @transition-duration;
274
+ -o-transition-duration: @transition-duration;
275
+ transition-duration: @transition-duration;
276
+ }
277
+
278
+ // Transformations
279
+ .rotate(@degrees) {
280
+ -webkit-transform: rotate(@degrees);
281
+ -moz-transform: rotate(@degrees);
282
+ -ms-transform: rotate(@degrees);
283
+ -o-transform: rotate(@degrees);
284
+ transform: rotate(@degrees);
285
+ }
286
+ .scale(@ratio) {
287
+ -webkit-transform: scale(@ratio);
288
+ -moz-transform: scale(@ratio);
289
+ -ms-transform: scale(@ratio);
290
+ -o-transform: scale(@ratio);
291
+ transform: scale(@ratio);
292
+ }
293
+ .translate(@x, @y) {
294
+ -webkit-transform: translate(@x, @y);
295
+ -moz-transform: translate(@x, @y);
296
+ -ms-transform: translate(@x, @y);
297
+ -o-transform: translate(@x, @y);
298
+ transform: translate(@x, @y);
299
+ }
300
+ .skew(@x, @y) {
301
+ -webkit-transform: skew(@x, @y);
302
+ -moz-transform: skew(@x, @y);
303
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
304
+ -o-transform: skew(@x, @y);
305
+ transform: skew(@x, @y);
306
+ -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
307
+ }
308
+ .translate3d(@x, @y, @z) {
309
+ -webkit-transform: translate3d(@x, @y, @z);
310
+ -moz-transform: translate3d(@x, @y, @z);
311
+ -o-transform: translate3d(@x, @y, @z);
312
+ transform: translate3d(@x, @y, @z);
313
+ }
314
+
315
+ // Backface visibility
316
+ // Prevent browsers from flickering when using CSS 3D transforms.
317
+ // Default value is `visible`, but can be changed to `hidden
318
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
319
+ .backface-visibility(@visibility){
320
+ -webkit-backface-visibility: @visibility;
321
+ -moz-backface-visibility: @visibility;
322
+ backface-visibility: @visibility;
323
+ }
324
+
325
+ // Background clipping
326
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
327
+ .background-clip(@clip) {
328
+ -webkit-background-clip: @clip;
329
+ -moz-background-clip: @clip;
330
+ background-clip: @clip;
331
+ }
332
+
333
+ // Background sizing
334
+ .background-size(@size) {
335
+ -webkit-background-size: @size;
336
+ -moz-background-size: @size;
337
+ -o-background-size: @size;
338
+ background-size: @size;
339
+ }
340
+
341
+
342
+ // Box sizing
343
+ .box-sizing(@boxmodel) {
344
+ -webkit-box-sizing: @boxmodel;
345
+ -moz-box-sizing: @boxmodel;
346
+ box-sizing: @boxmodel;
347
+ }
348
+
349
+ // User select
350
+ // For selecting text on the page
351
+ .user-select(@select) {
352
+ -webkit-user-select: @select;
353
+ -moz-user-select: @select;
354
+ -ms-user-select: @select;
355
+ -o-user-select: @select;
356
+ user-select: @select;
357
+ }
358
+
359
+ // Resize anything
360
+ .resizable(@direction) {
361
+ resize: @direction; // Options: horizontal, vertical, both
362
+ overflow: auto; // Safari fix
363
+ }
364
+
365
+ // CSS3 Content Columns
366
+ .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
367
+ -webkit-column-count: @columnCount;
368
+ -moz-column-count: @columnCount;
369
+ column-count: @columnCount;
370
+ -webkit-column-gap: @columnGap;
371
+ -moz-column-gap: @columnGap;
372
+ column-gap: @columnGap;
373
+ }
374
+
375
+ // Optional hyphenation
376
+ .hyphens(@mode: auto) {
377
+ word-wrap: break-word;
378
+ -webkit-hyphens: @mode;
379
+ -moz-hyphens: @mode;
380
+ -ms-hyphens: @mode;
381
+ -o-hyphens: @mode;
382
+ hyphens: @mode;
383
+ }
384
+
385
+ // Opacity
386
+ .opacity(@opacity) {
387
+ opacity: @opacity / 100;
388
+ filter: ~"alpha(opacity=@{opacity})";
389
+ }
390
+
391
+
392
+
393
+ // BACKGROUNDS
394
+ // --------------------------------------------------
395
+
396
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
397
+ #translucent {
398
+ .background(@color: @white, @alpha: 1) {
399
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
400
+ }
401
+ .border(@color: @white, @alpha: 1) {
402
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
403
+ .background-clip(padding-box);
404
+ }
405
+ }
406
+
407
+ // Gradient Bar Colors for buttons and alerts
408
+ .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
409
+ color: @textColor;
410
+ text-shadow: @textShadow;
411
+ #gradient > .vertical(@primaryColor, @secondaryColor);
412
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
413
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
414
+ }
415
+
416
+ // Gradients
417
+ #gradient {
418
+ .horizontal(@startColor: #555, @endColor: #333) {
419
+ background-color: @endColor;
420
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
421
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
422
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
423
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
424
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
425
+ background-repeat: repeat-x;
426
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
427
+ }
428
+ .vertical(@startColor: #555, @endColor: #333) {
429
+ background-color: mix(@startColor, @endColor, 60%);
430
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
431
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
432
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
433
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
434
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
435
+ background-repeat: repeat-x;
436
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
437
+ }
438
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
439
+ background-color: @endColor;
440
+ background-repeat: repeat-x;
441
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
442
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
443
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
444
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
445
+ }
446
+ .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
447
+ background-color: mix(@midColor, @endColor, 80%);
448
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
449
+ background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
450
+ background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
451
+ background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
452
+ background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
453
+ background-repeat: no-repeat;
454
+ 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
455
+ }
456
+
457
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
458
+ background-color: mix(@midColor, @endColor, 80%);
459
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
460
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
461
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
462
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
463
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
464
+ background-repeat: no-repeat;
465
+ 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
466
+ }
467
+ .radial(@innerColor: #555, @outerColor: #333) {
468
+ background-color: @outerColor;
469
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
470
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
471
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
472
+ background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
473
+ background-repeat: no-repeat;
474
+ }
475
+ .striped(@color: #555, @angle: 45deg) {
476
+ background-color: @color;
477
+ 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));
478
+ 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);
479
+ 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);
480
+ 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);
481
+ 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);
482
+ }
483
+ }
484
+ // Reset filters for IE
485
+ .reset-filter() {
486
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
487
+ }
488
+
489
+
490
+
491
+ // COMPONENT MIXINS
492
+ // --------------------------------------------------
493
+
494
+ // Horizontal dividers
495
+ // -------------------------
496
+ // Dividers (basically an hr) within dropdowns and nav lists
497
+ .nav-divider(@top: #e5e5e5, @bottom: @white) {
498
+ // IE7 needs a set width since we gave a height. Restricting just
499
+ // to IE7 to keep the 1px left/right space in other browsers.
500
+ // It is unclear where IE is getting the extra space that we need
501
+ // to negative-margin away, but so it goes.
502
+ *width: 100%;
503
+ height: 1px;
504
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
505
+ *margin: -5px 0 5px;
506
+ overflow: hidden;
507
+ background-color: @top;
508
+ border-bottom: 1px solid @bottom;
509
+ }
510
+
511
+ // Button backgrounds
512
+ // ------------------
513
+ .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
514
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
515
+ .gradientBar(@startColor, @endColor, @textColor, @textShadow);
516
+ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
517
+ .reset-filter();
518
+
519
+ // in these cases the gradient won't cover the background, so we override
520
+ &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
521
+ color: @textColor;
522
+ background-color: @endColor;
523
+ *background-color: darken(@endColor, 5%);
524
+ }
525
+
526
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
527
+ &:active,
528
+ &.active {
529
+ background-color: darken(@endColor, 10%) e("\9");
530
+ }
531
+ }
532
+
533
+ // Navbar vertical align
534
+ // -------------------------
535
+ // Vertically center elements in the navbar.
536
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
537
+ .navbarVerticalAlign(@elementHeight) {
538
+ margin-top: (@navbarHeight - @elementHeight) / 2;
539
+ }
540
+
541
+
542
+
543
+ // Grid System
544
+ // -----------
545
+
546
+ // Centered container element
547
+ .container-fixed() {
548
+ margin-right: auto;
549
+ margin-left: auto;
550
+ .clearfix();
551
+ }
552
+
553
+ // Table columns
554
+ .tableColumns(@columnSpan: 1) {
555
+ float: none; // undo default grid column styles
556
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
557
+ margin-left: 0; // undo default grid column styles
558
+ }
559
+
560
+ // Make a Grid
561
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
562
+ .makeRow() {
563
+ margin-left: @gridGutterWidth * -1;
564
+ .clearfix();
565
+ }
566
+ .makeColumn(@columns: 1, @offset: 0) {
567
+ float: left;
568
+ margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
569
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
570
+ }
571
+
572
+ // The Grid
573
+ #grid {
574
+
575
+ .core (@gridColumnWidth, @gridGutterWidth) {
576
+
577
+ .spanX (@index) when (@index > 0) {
578
+ .span@{index} { .span(@index); }
579
+ .spanX(@index - 1);
580
+ }
581
+ .spanX (0) {}
582
+
583
+ .offsetX (@index) when (@index > 0) {
584
+ .offset@{index} { .offset(@index); }
585
+ .offsetX(@index - 1);
586
+ }
587
+ .offsetX (0) {}
588
+
589
+ .offset (@columns) {
590
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
591
+ }
592
+
593
+ .span (@columns) {
594
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
595
+ }
596
+
597
+ .row {
598
+ margin-left: @gridGutterWidth * -1;
599
+ .clearfix();
600
+ }
601
+
602
+ [class*="span"] {
603
+ float: left;
604
+ min-height: 1px; // prevent collapsing columns
605
+ margin-left: @gridGutterWidth;
606
+ }
607
+
608
+ // Set the container width, and override it for fixed navbars in media queries
609
+ .container,
610
+ .navbar-static-top .container,
611
+ .navbar-fixed-top .container,
612
+ .navbar-fixed-bottom .container { .span(@gridColumns); }
613
+
614
+ // generate .spanX and .offsetX
615
+ .spanX (@gridColumns);
616
+ .offsetX (@gridColumns);
617
+
618
+ }
619
+
620
+ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
621
+
622
+ .spanX (@index) when (@index > 0) {
623
+ .span@{index} { .span(@index); }
624
+ .spanX(@index - 1);
625
+ }
626
+ .spanX (0) {}
627
+
628
+ .offsetX (@index) when (@index > 0) {
629
+ .offset@{index} { .offset(@index); }
630
+ .offset@{index}:first-child { .offsetFirstChild(@index); }
631
+ .offsetX(@index - 1);
632
+ }
633
+ .offsetX (0) {}
634
+
635
+ .offset (@columns) {
636
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
637
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
638
+ }
639
+
640
+ .offsetFirstChild (@columns) {
641
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
642
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
643
+ }
644
+
645
+ .span (@columns) {
646
+ width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
647
+ *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
648
+ }
649
+
650
+ .row-fluid {
651
+ width: 100%;
652
+ .clearfix();
653
+ [class*="span"] {
654
+ .input-block-level();
655
+ float: left;
656
+ margin-left: @fluidGridGutterWidth;
657
+ *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
658
+ }
659
+ [class*="span"]:first-child {
660
+ margin-left: 0;
661
+ }
662
+
663
+ // Space grid-sized controls properly if multiple per line
664
+ .controls-row [class*="span"] + [class*="span"] {
665
+ margin-left: @fluidGridGutterWidth;
666
+ }
667
+
668
+ // generate .spanX and .offsetX
669
+ .spanX (@gridColumns);
670
+ .offsetX (@gridColumns);
671
+ }
672
+
673
+ }
674
+
675
+ .input(@gridColumnWidth, @gridGutterWidth) {
676
+
677
+ .spanX (@index) when (@index > 0) {
678
+ input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
679
+ .spanX(@index - 1);
680
+ }
681
+ .spanX (0) {}
682
+
683
+ .span(@columns) {
684
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
685
+ }
686
+
687
+ input,
688
+ textarea,
689
+ .uneditable-input {
690
+ margin-left: 0; // override margin-left from core grid system
691
+ }
692
+
693
+ // Space grid-sized controls properly if multiple per line
694
+ .controls-row [class*="span"] + [class*="span"] {
695
+ margin-left: @gridGutterWidth;
696
+ }
697
+
698
+ // generate .spanX
699
+ .spanX (@gridColumns);
700
+
701
+ }
702
+ }