less-rails-bootstrap 1.3.0

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 (30) hide show
  1. data/.gitignore +4 -0
  2. data/CHANGELOG.md +8 -0
  3. data/Gemfile +2 -0
  4. data/README.md +99 -0
  5. data/Rakefile +1 -0
  6. data/less-rails-bootstrap.gemspec +18 -0
  7. data/lib/less-rails-bootstrap.rb +8 -0
  8. data/lib/less/rails/bootstrap.rb +2 -0
  9. data/lib/less/rails/bootstrap/engine.rb +14 -0
  10. data/lib/less/rails/bootstrap/version.rb +7 -0
  11. data/vendor/assets/javascripts/twitter/bootstrap.js +7 -0
  12. data/vendor/assets/javascripts/twitter/bootstrap/alerts.js +104 -0
  13. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +50 -0
  14. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +238 -0
  15. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +77 -0
  16. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +105 -0
  17. data/vendor/assets/javascripts/twitter/bootstrap/tabs.js +62 -0
  18. data/vendor/assets/javascripts/twitter/bootstrap/twipsy.js +307 -0
  19. data/vendor/assets/stylesheets/twitter/bootstrap.css.less +1 -0
  20. data/vendor/assets/stylesheets/twitter/bootstrap.less +1 -0
  21. data/vendor/assets/stylesheets/twitter/bootstrap/bootstrap.less +26 -0
  22. data/vendor/assets/stylesheets/twitter/bootstrap/forms.less +465 -0
  23. data/vendor/assets/stylesheets/twitter/bootstrap/mixins.less +217 -0
  24. data/vendor/assets/stylesheets/twitter/bootstrap/patterns.less +1005 -0
  25. data/vendor/assets/stylesheets/twitter/bootstrap/reset.less +141 -0
  26. data/vendor/assets/stylesheets/twitter/bootstrap/scaffolding.less +135 -0
  27. data/vendor/assets/stylesheets/twitter/bootstrap/tables.less +170 -0
  28. data/vendor/assets/stylesheets/twitter/bootstrap/type.less +187 -0
  29. data/vendor/assets/stylesheets/twitter/bootstrap/variables.less +60 -0
  30. metadata +111 -0
@@ -0,0 +1,217 @@
1
+ /* Variables.less
2
+ * Snippets of reusable CSS to develop faster and keep code readable
3
+ * ----------------------------------------------------------------- */
4
+
5
+
6
+ // Clearfix for clearing floats like a boss h5bp.com/q
7
+ .clearfix() {
8
+ zoom: 1;
9
+ &:before,
10
+ &:after {
11
+ display: table;
12
+ content: "";
13
+ zoom: 1;
14
+ *display: inline;
15
+ }
16
+ &:after {
17
+ clear: both;
18
+ }
19
+ }
20
+
21
+ // Center-align a block level element
22
+ .center-block() {
23
+ display: block;
24
+ margin-left: auto;
25
+ margin-right: auto;
26
+ }
27
+
28
+ // Sizing shortcuts
29
+ .size(@height: 5px, @width: 5px) {
30
+ height: @height;
31
+ width: @width;
32
+ }
33
+ .square(@size: 5px) {
34
+ .size(@size, @size);
35
+ }
36
+
37
+ // Input placeholder text
38
+ .placeholder(@color: @grayLight) {
39
+ :-moz-placeholder {
40
+ color: @color;
41
+ }
42
+ ::-webkit-input-placeholder {
43
+ color: @color;
44
+ }
45
+ }
46
+
47
+ // Font Stacks
48
+ #font {
49
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
50
+ font-size: @size;
51
+ font-weight: @weight;
52
+ line-height: @lineHeight;
53
+ }
54
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
55
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
56
+ font-size: @size;
57
+ font-weight: @weight;
58
+ line-height: @lineHeight;
59
+ }
60
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
61
+ font-family: "Georgia", Times New Roman, Times, serif;
62
+ font-size: @size;
63
+ font-weight: @weight;
64
+ line-height: @lineHeight;
65
+ }
66
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
67
+ font-family: "Monaco", Courier New, monospace;
68
+ font-size: @size;
69
+ font-weight: @weight;
70
+ line-height: @lineHeight;
71
+ }
72
+ }
73
+
74
+ // Grid System
75
+ .fixed-container() {
76
+ width: @siteWidth;
77
+ margin-left: auto;
78
+ margin-right: auto;
79
+ .clearfix();
80
+ }
81
+ .columns(@columnSpan: 1) {
82
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
83
+ }
84
+ .offset(@columnOffset: 1) {
85
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
86
+ }
87
+ // Necessary grid styles for every column to make them appear next to each other horizontally
88
+ .gridColumn() {
89
+ display: inline;
90
+ float: left;
91
+ margin-left: @gridGutterWidth;
92
+ }
93
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
94
+ .makeColumn(@columnSpan: 1) {
95
+ .gridColumn();
96
+ .columns(@columnSpan);
97
+ }
98
+
99
+ // Border Radius
100
+ .border-radius(@radius: 5px) {
101
+ -webkit-border-radius: @radius;
102
+ -moz-border-radius: @radius;
103
+ border-radius: @radius;
104
+ }
105
+
106
+ // Drop shadows
107
+ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
108
+ -webkit-box-shadow: @shadow;
109
+ -moz-box-shadow: @shadow;
110
+ box-shadow: @shadow;
111
+ }
112
+
113
+ // Transitions
114
+ .transition(@transition) {
115
+ -webkit-transition: @transition;
116
+ -moz-transition: @transition;
117
+ -ms-transition: @transition;
118
+ -o-transition: @transition;
119
+ transition: @transition;
120
+ }
121
+
122
+ // Background clipping
123
+ .background-clip(@clip) {
124
+ -webkit-background-clip: @clip;
125
+ -moz-background-clip: @clip;
126
+ background-clip: @clip;
127
+ }
128
+
129
+ // CSS3 Content Columns
130
+ .content-columns(@columnCount, @columnGap: 20px) {
131
+ -webkit-column-count: @columnCount;
132
+ -moz-column-count: @columnCount;
133
+ column-count: @columnCount;
134
+ -webkit-column-gap: @columnGap;
135
+ -moz-column-gap: @columnGap;
136
+ column-gap: @columnGap;
137
+ }
138
+
139
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
140
+ #translucent {
141
+ .background(@color: @white, @alpha: 1) {
142
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
143
+ }
144
+ .border(@color: @white, @alpha: 1) {
145
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
146
+ background-clip: padding-box;
147
+ }
148
+ }
149
+
150
+ // Gradient Bar Colors for buttons and allerts
151
+ .gradientBar(@primaryColor, @secondaryColor) {
152
+ #gradient > .vertical(@primaryColor, @secondaryColor);
153
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
154
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
155
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
156
+ }
157
+
158
+ // Gradients
159
+ #gradient {
160
+ .horizontal (@startColor: #555, @endColor: #333) {
161
+ background-color: @endColor;
162
+ background-repeat: repeat-x;
163
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
164
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
165
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
166
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
167
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
168
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
169
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
170
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
171
+ }
172
+ .vertical (@startColor: #555, @endColor: #333) {
173
+ background-color: @endColor;
174
+ background-repeat: repeat-x;
175
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
176
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
177
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
178
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
179
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
180
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
181
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
182
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
183
+ }
184
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
185
+ background-color: @endColor;
186
+ background-repeat: repeat-x;
187
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
188
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
189
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
190
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
191
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
192
+ }
193
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
194
+ background-color: @endColor;
195
+ background-repeat: no-repeat;
196
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
197
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
198
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
199
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
200
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
201
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
202
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
203
+ }
204
+ }
205
+
206
+ // Reset filters for IE
207
+ .reset-filter() {
208
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
209
+ }
210
+
211
+ // Opacity
212
+ .opacity(@opacity: 100) {
213
+ filter: e(%("alpha(opacity=%d)", @opacity));
214
+ -khtml-opacity: @opacity / 100;
215
+ -moz-opacity: @opacity / 100;
216
+ opacity: @opacity / 100;
217
+ }
@@ -0,0 +1,1005 @@
1
+ /* Patterns.less
2
+ * Repeatable UI elements outside the base styles provided from the scaffolding
3
+ * ---------------------------------------------------------------------------- */
4
+
5
+
6
+ // TOPBAR
7
+ // ------
8
+
9
+ // Topbar for Branding and Nav
10
+ .topbar {
11
+ height: 40px;
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ right: 0;
16
+ z-index: 10000;
17
+ overflow: visible;
18
+
19
+ // Links get text shadow
20
+ a {
21
+ color: @grayLight;
22
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
+ }
24
+
25
+ // Hover and active states
26
+ // h3 for backwards compatibility
27
+ h3 a:hover,
28
+ .brand a:hover,
29
+ ul .active > a {
30
+ background-color: #333;
31
+ background-color: rgba(255,255,255,.05);
32
+ color: @white;
33
+ text-decoration: none;
34
+ }
35
+
36
+ // Website name
37
+ // h3 left for backwards compatibility
38
+ h3 {
39
+ position: relative;
40
+ }
41
+ h3 a,
42
+ .brand {
43
+ float: left;
44
+ display: block;
45
+ padding: 8px 20px 12px;
46
+ margin-left: -20px; // negative indent to left-align the text down the page
47
+ color: @white;
48
+ font-size: 20px;
49
+ font-weight: 200;
50
+ line-height: 1;
51
+ }
52
+
53
+ // Plain text in topbar
54
+ p {
55
+ margin: 0;
56
+ line-height: 40px;
57
+ a:hover {
58
+ background-color: transparent;
59
+ color: @white;
60
+ }
61
+ }
62
+
63
+ // Search Form
64
+ form {
65
+ float: left;
66
+ margin: 5px 0 0 0;
67
+ position: relative;
68
+ .opacity(100);
69
+ }
70
+ // Todo: remove from v2.0 when ready, added for legacy
71
+ form.pull-right {
72
+ float: right;
73
+ }
74
+ input {
75
+ background-color: #444;
76
+ background-color: rgba(255,255,255,.3);
77
+ #font > .sans-serif(13px, normal, 1);
78
+ padding: 4px 9px;
79
+ color: @white;
80
+ color: rgba(255,255,255,.75);
81
+ border: 1px solid #111;
82
+ .border-radius(4px);
83
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
+ .box-shadow(@shadow);
85
+ .transition(none);
86
+
87
+ // Placeholder text gets special styles; can't be bundled together though for some reason
88
+ &:-moz-placeholder {
89
+ color: @grayLighter;
90
+ }
91
+ &::-webkit-input-placeholder {
92
+ color: @grayLighter;
93
+ }
94
+ // Hover states
95
+ &:hover {
96
+ background-color: @grayLight;
97
+ background-color: rgba(255,255,255,.5);
98
+ color: @white;
99
+ }
100
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
+ &:focus,
102
+ &.focused {
103
+ outline: 0;
104
+ background-color: @white;
105
+ color: @grayDark;
106
+ text-shadow: 0 1px 0 @white;
107
+ border: 0;
108
+ padding: 5px 10px;
109
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
110
+ }
111
+ }
112
+ }
113
+
114
+ // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
+ // For backwards compatibility, include .topbar .fill
116
+ .topbar-inner,
117
+ .topbar .fill {
118
+ background-color: #222;
119
+ #gradient > .vertical(#333, #222);
120
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
+ .box-shadow(@shadow);
122
+ }
123
+
124
+
125
+ // NAVIGATION
126
+ // ----------
127
+
128
+ // Topbar Nav
129
+ // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
+ // For backwards compatibility, leave in .topbar div > ul
131
+ .topbar div > ul,
132
+ .nav {
133
+ display: block;
134
+ float: left;
135
+ margin: 0 10px 0 0;
136
+ position: relative;
137
+ left: 0;
138
+ > li {
139
+ display: block;
140
+ float: left;
141
+ }
142
+ a {
143
+ display: block;
144
+ float: none;
145
+ padding: 10px 10px 11px;
146
+ line-height: 19px;
147
+ text-decoration: none;
148
+ &:hover {
149
+ color: @white;
150
+ text-decoration: none;
151
+ }
152
+ }
153
+ .active > a {
154
+ background-color: #222;
155
+ background-color: rgba(0,0,0,.5);
156
+ }
157
+
158
+ // Secondary (floated right) nav in topbar
159
+ &.secondary-nav {
160
+ float: right;
161
+ margin-left: 10px;
162
+ margin-right: 0;
163
+ // backwards compatibility
164
+ .menu-dropdown,
165
+ .dropdown-menu {
166
+ right: 0;
167
+ border: 0;
168
+ }
169
+ }
170
+ // Dropdowns within the .nav
171
+ // a.menu:hover and li.open .menu for backwards compatibility
172
+ a.menu:hover,
173
+ li.open .menu,
174
+ .dropdown-toggle:hover,
175
+ .dropdown.open .dropdown-toggle {
176
+ background: #444;
177
+ background: rgba(255,255,255,.05);
178
+ }
179
+ // .menu-dropdown for backwards compatibility
180
+ .menu-dropdown,
181
+ .dropdown-menu {
182
+ background-color: #333;
183
+ // a.menu for backwards compatibility
184
+ a.menu,
185
+ .dropdown-toggle {
186
+ color: @white;
187
+ &.open {
188
+ background: #444;
189
+ background: rgba(255,255,255,.05);
190
+ }
191
+ }
192
+ li a {
193
+ color: #999;
194
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
+ &:hover {
196
+ #gradient > .vertical(#292929,#191919);
197
+ color: @white;
198
+ }
199
+ }
200
+ .active a {
201
+ color: @white;
202
+ }
203
+ .divider {
204
+ background-color: #222;
205
+ border-color: #444;
206
+ }
207
+ }
208
+ }
209
+
210
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
+ .topbar ul .menu-dropdown li a,
212
+ .topbar ul .dropdown-menu li a {
213
+ padding: 4px 15px;
214
+ }
215
+
216
+ // Dropdown Menus
217
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
+ // li.menu for backwards compatibility
219
+ li.menu,
220
+ .dropdown {
221
+ position: relative;
222
+ }
223
+ // The link that is clicked to toggle the dropdown
224
+ // a.menu for backwards compatibility
225
+ a.menu:after,
226
+ .dropdown-toggle:after {
227
+ width: 0;
228
+ height: 0;
229
+ display: inline-block;
230
+ content: "&darr;";
231
+ text-indent: -99999px;
232
+ vertical-align: top;
233
+ margin-top: 8px;
234
+ margin-left: 4px;
235
+ border-left: 4px solid transparent;
236
+ border-right: 4px solid transparent;
237
+ border-top: 4px solid @white;
238
+ .opacity(50);
239
+ }
240
+ // The dropdown menu (ul)
241
+ // .menu-dropdown for backwards compatibility
242
+ .menu-dropdown,
243
+ .dropdown-menu {
244
+ background-color: @white;
245
+ float: left;
246
+ display: none; // None by default, but block on "open" of the menu
247
+ position: absolute;
248
+ top: 40px;
249
+ z-index: 900;
250
+ min-width: 160px;
251
+ max-width: 220px;
252
+ _width: 160px;
253
+ margin-left: 0; // override default ul styles
254
+ margin-right: 0;
255
+ padding: 6px 0;
256
+ zoom: 1; // do we need this?
257
+ border-color: #999;
258
+ border-color: rgba(0,0,0,.2);
259
+ border-style: solid;
260
+ border-width: 0 1px 1px;
261
+ .border-radius(0 0 6px 6px);
262
+ .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
+ .background-clip(padding-box);
264
+
265
+ // Unfloat any li's to make them stack
266
+ li {
267
+ float: none;
268
+ display: block;
269
+ background-color: none;
270
+ }
271
+ // Dividers (basically an hr) within the dropdown
272
+ .divider {
273
+ height: 1px;
274
+ margin: 5px 0;
275
+ overflow: hidden;
276
+ background-color: #eee;
277
+ border-bottom: 1px solid @white;
278
+ }
279
+ }
280
+
281
+ .topbar .dropdown-menu, .dropdown-menu {
282
+ // Links within the dropdown menu
283
+ a {
284
+ display: block;
285
+ padding: 4px 15px;
286
+ clear: both;
287
+ font-weight: normal;
288
+ line-height: 18px;
289
+ color: @gray;
290
+ text-shadow: 0 1px 0 @white;
291
+ // Hover state
292
+ &:hover {
293
+ #gradient > .vertical(#eeeeee, #dddddd);
294
+ color: @grayDark;
295
+ text-decoration: none;
296
+ @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
297
+ .box-shadow(@shadow);
298
+ }
299
+ }
300
+ }
301
+
302
+ // Open state for the dropdown
303
+ // .open for backwards compatibility
304
+ .open,
305
+ .dropdown.open {
306
+ // .menu for backwards compatibility
307
+ .menu,
308
+ .dropdown-toggle {
309
+ color: @white;
310
+ background: #ccc;
311
+ background: rgba(0,0,0,.3);
312
+ }
313
+ // .menu-dropdown for backwards compatibility
314
+ .menu-dropdown,
315
+ .dropdown-menu {
316
+ display: block;
317
+ }
318
+ }
319
+
320
+
321
+ // Tabs and Pills
322
+ .tabs,
323
+ .pills {
324
+ margin: 0 0 20px;
325
+ padding: 0;
326
+ list-style: none;
327
+ .clearfix();
328
+ > li {
329
+ float: left;
330
+ > a {
331
+ display: block;
332
+ }
333
+ }
334
+ }
335
+
336
+ // Basic Tabs
337
+ .tabs {
338
+ float: left;
339
+ width: 100%;
340
+ border-bottom: 1px solid #ddd;
341
+ > li {
342
+ position: relative; // For the dropdowns mostly
343
+ top: 1px;
344
+ > a {
345
+ padding: 0 15px;
346
+ margin-right: 2px;
347
+ line-height: @baseline * 2;
348
+ border: 1px solid transparent;
349
+ .border-radius(4px 4px 0 0);
350
+ &:hover {
351
+ text-decoration: none;
352
+ background-color: #eee;
353
+ border-color: #eee #eee #ddd;
354
+ }
355
+ }
356
+ &.active > a {
357
+ color: @gray;
358
+ background-color: @white;
359
+ border: 1px solid #ddd;
360
+ border-bottom-color: transparent;
361
+ }
362
+ }
363
+ // first one for backwards compatibility
364
+ .menu-dropdown,
365
+ .dropdown-menu {
366
+ top: 35px;
367
+ border-width: 1px;
368
+ .border-radius(0 6px 6px 6px);
369
+ }
370
+ // first one for backwards compatibility
371
+ a.menu:after,
372
+ .dropdown-toggle:after {
373
+ border-top-color: #999;
374
+ margin-top: 15px;
375
+ margin-left: 5px;
376
+ }
377
+ // first one for backwards compatibility
378
+ li.open.menu .menu,
379
+ .open.dropdown .dropdown-toggle {
380
+ border-color: #999;
381
+ }
382
+ // first one for backwards compatibility
383
+ li.open a.menu:after,
384
+ .dropdown.open .dropdown-toggle:after {
385
+ border-top-color: #555;
386
+ }
387
+ }
388
+ .tab-content {
389
+ clear: both;
390
+ }
391
+
392
+ // Basic pill nav
393
+ .pills {
394
+ a {
395
+ margin: 5px 3px 5px 0;
396
+ padding: 0 15px;
397
+ text-shadow: 0 1px 1px @white;
398
+ line-height: 30px;
399
+ .border-radius(15px);
400
+ &:hover {
401
+ background: @linkColorHover;
402
+ color: @white;
403
+ text-decoration: none;
404
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
405
+ }
406
+ }
407
+ .active a {
408
+ background: @linkColor;
409
+ color: @white;
410
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
411
+ }
412
+ }
413
+
414
+ .tab-content > *,
415
+ .pill-content > * {
416
+ display: none;
417
+ }
418
+
419
+ .tab-content > .active,
420
+ .pill-content > .active {
421
+ display:block;
422
+ }
423
+
424
+
425
+ // BREADCRUMBS
426
+ // -----------
427
+
428
+ .breadcrumb {
429
+ margin: 0 0 @baseline;
430
+ padding: 7px 14px;
431
+ #gradient > .vertical(#ffffff, #f5f5f5);
432
+ border: 1px solid #ddd;
433
+ .border-radius(3px);
434
+ .box-shadow(inset 0 1px 0 @white);
435
+ li {
436
+ display: inline;
437
+ text-shadow: 0 1px 0 @white;
438
+ }
439
+ .divider {
440
+ padding: 0 5px;
441
+ color: @grayLight;
442
+ }
443
+ a {
444
+ }
445
+ .active a {
446
+ color: @grayDark;
447
+ }
448
+ }
449
+
450
+
451
+ // PAGE HEADERS
452
+ // ------------
453
+
454
+ .hero-unit {
455
+ background-color: #f5f5f5;
456
+ margin-bottom: 30px;
457
+ padding: 60px;
458
+ .border-radius(6px);
459
+ h1 {
460
+ margin-bottom: 0;
461
+ font-size: 60px;
462
+ line-height: 1;
463
+ letter-spacing: -1px;
464
+ }
465
+ p {
466
+ font-size: 18px;
467
+ font-weight: 200;
468
+ line-height: @baseline * 1.5;
469
+ }
470
+ }
471
+ footer {
472
+ margin-top: @baseline - 1;
473
+ padding-top: @baseline - 1;
474
+ border-top: 1px solid #eee;
475
+ }
476
+
477
+
478
+ // PAGE HEADERS
479
+ // ------------
480
+
481
+ .page-header {
482
+ margin-bottom: @baseline - 1;
483
+ border-bottom: 1px solid #ddd;
484
+ .box-shadow(0 1px 0 rgba(255,255,255,.5));
485
+ h1 {
486
+ margin-bottom: (@baseline / 2) - 1px;
487
+ }
488
+ }
489
+
490
+
491
+ // BUTTON STYLES
492
+ // -------------
493
+
494
+ // Shared colors for buttons and alerts
495
+ .btn,
496
+ .alert-message {
497
+ // Set text color
498
+ &.danger,
499
+ &.danger:hover,
500
+ &.error,
501
+ &.error:hover,
502
+ &.success,
503
+ &.success:hover,
504
+ &.info,
505
+ &.info:hover {
506
+ color: @white
507
+ }
508
+ // Danger and error appear as red
509
+ &.danger,
510
+ &.error {
511
+ .gradientBar(#ee5f5b, #c43c35);
512
+ }
513
+ // Success appears as green
514
+ &.success {
515
+ .gradientBar(#62c462, #57a957);
516
+ }
517
+ // Info appears as a neutral blue
518
+ &.info {
519
+ .gradientBar(#5bc0de, #339bb9);
520
+ }
521
+ }
522
+
523
+ // Base .btn styles
524
+ .btn {
525
+ // Button Base
526
+ cursor: pointer;
527
+ display: inline-block;
528
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
+ padding: 5px 14px 6px;
530
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
+ color: #333;
532
+ font-size: @basefont;
533
+ line-height: normal;
534
+ border: 1px solid #ccc;
535
+ border-bottom-color: #bbb;
536
+ .border-radius(4px);
537
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
538
+ .box-shadow(@shadow);
539
+
540
+ &:hover {
541
+ background-position: 0 -15px;
542
+ color: #333;
543
+ text-decoration: none;
544
+ }
545
+
546
+ // Focus state for keyboard and accessibility
547
+ &:focus {
548
+ outline: 1px dotted #666;
549
+ }
550
+
551
+ // Primary Button Type
552
+ &.primary {
553
+ color: @white;
554
+ .gradientBar(@blue, @blueDark)
555
+ }
556
+
557
+ // Transitions
558
+ .transition(.1s linear all);
559
+
560
+ // Active and Disabled states
561
+ &:active {
562
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
+ .box-shadow(@shadow);
564
+ }
565
+ &.disabled {
566
+ cursor: default;
567
+ background-image: none;
568
+ .reset-filter();
569
+ .opacity(65);
570
+ .box-shadow(none);
571
+ }
572
+ &[disabled] {
573
+ // disabled pseudo can't be included with .disabled
574
+ // def because IE8 and below will drop it ;_;
575
+ cursor: default;
576
+ background-image: none;
577
+ .reset-filter();
578
+ .opacity(65);
579
+ .box-shadow(none);
580
+ }
581
+
582
+ // Button Sizes
583
+ &.large {
584
+ font-size: @basefont + 2px;
585
+ line-height: normal;
586
+ padding: 9px 14px 9px;
587
+ .border-radius(6px);
588
+ }
589
+ &.small {
590
+ padding: 7px 9px 7px;
591
+ font-size: @basefont - 2px;
592
+ }
593
+ }
594
+ // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
+ :root .alert-message,
596
+ :root .btn {
597
+ border-radius: 0 \0;
598
+ }
599
+
600
+ // Help Firefox not be a jerk about adding extra padding to buttons
601
+ button.btn,
602
+ input[type=submit].btn {
603
+ &::-moz-focus-inner {
604
+ padding: 0;
605
+ border: 0;
606
+ }
607
+ }
608
+
609
+
610
+ // CLOSE ICONS
611
+ // -----------
612
+ .close {
613
+ float: right;
614
+ color: @black;
615
+ font-size: 20px;
616
+ font-weight: bold;
617
+ line-height: @baseline * .75;
618
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
619
+ .opacity(20);
620
+ &:hover {
621
+ color: @black;
622
+ text-decoration: none;
623
+ .opacity(40);
624
+ }
625
+ }
626
+
627
+
628
+ // ERROR STYLES
629
+ // ------------
630
+
631
+ // Base alert styles
632
+ .alert-message {
633
+ position: relative;
634
+ padding: 7px 15px;
635
+ margin-bottom: @baseline;
636
+ color: @grayDark;
637
+ .gradientBar(#fceec1, #eedc94); // warning by default
638
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
639
+ border-width: 1px;
640
+ border-style: solid;
641
+ .border-radius(4px);
642
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
643
+
644
+ // Adjust close icon
645
+ .close {
646
+ *margin-top: 3px; /* IE7 spacing */
647
+ }
648
+
649
+ // Remove extra margin from content
650
+ h5 {
651
+ line-height: @baseline;
652
+ }
653
+ p {
654
+ margin-bottom: 0;
655
+ }
656
+ div {
657
+ margin-top: 5px;
658
+ margin-bottom: 2px;
659
+ line-height: 28px;
660
+ }
661
+ .btn {
662
+ // Provide actions with buttons
663
+ .box-shadow(0 1px 0 rgba(255,255,255,.25));
664
+ }
665
+
666
+ &.block-message {
667
+ background-image: none;
668
+ background-color: lighten(#fceec1, 5%);
669
+ .reset-filter();
670
+ padding: 14px;
671
+ border-color: #fceec1;
672
+ .box-shadow(none);
673
+ ul, p {
674
+ margin-right: 30px;
675
+ }
676
+ ul {
677
+ margin-bottom: 0;
678
+ }
679
+ li {
680
+ color: @grayDark;
681
+ }
682
+ .alert-actions {
683
+ margin-top: 5px;
684
+ }
685
+ &.error,
686
+ &.success,
687
+ &.info {
688
+ color: @grayDark;
689
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
690
+ }
691
+ &.error {
692
+ background-color: lighten(#f56a66, 25%);
693
+ border-color: lighten(#f56a66, 20%);
694
+ }
695
+ &.success {
696
+ background-color: lighten(#62c462, 30%);
697
+ border-color: lighten(#62c462, 25%);
698
+ }
699
+ &.info {
700
+ background-color: lighten(#6bd0ee, 25%);
701
+ border-color: lighten(#6bd0ee, 20%);
702
+ }
703
+ }
704
+ }
705
+
706
+
707
+ // PAGINATION
708
+ // ----------
709
+
710
+ .pagination {
711
+ height: @baseline * 2;
712
+ margin: @baseline 0;
713
+ ul {
714
+ float: left;
715
+ margin: 0;
716
+ border: 1px solid #ddd;
717
+ border: 1px solid rgba(0,0,0,.15);
718
+ .border-radius(3px);
719
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
720
+ }
721
+ li {
722
+ display: inline;
723
+ }
724
+ a {
725
+ float: left;
726
+ padding: 0 14px;
727
+ line-height: (@baseline * 2) - 2;
728
+ border-right: 1px solid;
729
+ border-right-color: #ddd;
730
+ border-right-color: rgba(0,0,0,.15);
731
+ *border-right-color: #ddd; /* IE6-7 */
732
+ text-decoration: none;
733
+ }
734
+ a:hover,
735
+ .active a {
736
+ background-color: lighten(@blue, 45%);
737
+ }
738
+ .disabled a,
739
+ .disabled a:hover {
740
+ background-color: transparent;
741
+ color: @grayLight;
742
+ }
743
+ .next a {
744
+ border: 0;
745
+ }
746
+ }
747
+
748
+
749
+ // WELLS
750
+ // -----
751
+
752
+ .well {
753
+ background-color: #f5f5f5;
754
+ margin-bottom: 20px;
755
+ padding: 19px;
756
+ min-height: 20px;
757
+ border: 1px solid #eee;
758
+ border: 1px solid rgba(0,0,0,.05);
759
+ .border-radius(4px);
760
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
761
+ blockquote {
762
+ border-color: #ddd;
763
+ border-color: rgba(0,0,0,.15);
764
+ }
765
+ }
766
+
767
+
768
+ // MODALS
769
+ // ------
770
+
771
+ .modal-backdrop {
772
+ background-color: @black;
773
+ position: fixed;
774
+ top: 0;
775
+ left: 0;
776
+ right: 0;
777
+ bottom: 0;
778
+ z-index: 10000;
779
+ // Fade for backdrop
780
+ &.fade { opacity: 0; }
781
+ }
782
+
783
+ .modal-backdrop, .modal-backdrop.fade.in {
784
+ .opacity(80);
785
+ }
786
+
787
+ .modal {
788
+ position: fixed;
789
+ top: 50%;
790
+ left: 50%;
791
+ z-index: 11000;
792
+ width: 560px;
793
+ margin: -250px 0 0 -250px;
794
+ background-color: @white;
795
+ border: 1px solid #999;
796
+ border: 1px solid rgba(0,0,0,.3);
797
+ *border: 1px solid #999; /* IE6-7 */
798
+ .border-radius(6px);
799
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
800
+ .background-clip(padding-box);
801
+ .close { margin-top: 7px; }
802
+ &.fade {
803
+ .transition(e('opacity .3s linear, top .3s ease-out'));
804
+ top: -25%;
805
+ }
806
+ &.fade.in { top: 50%; }
807
+ }
808
+ .modal-header {
809
+ border-bottom: 1px solid #eee;
810
+ padding: 5px 15px;
811
+ }
812
+ .modal-body {
813
+ padding: 15px;
814
+ }
815
+ .modal-footer {
816
+ background-color: #f5f5f5;
817
+ padding: 14px 15px 15px;
818
+ border-top: 1px solid #ddd;
819
+ .border-radius(0 0 6px 6px);
820
+ .box-shadow(inset 0 1px 0 @white);
821
+ .clearfix();
822
+ margin-bottom: 0;
823
+ .btn {
824
+ float: right;
825
+ margin-left: 5px;
826
+ }
827
+ }
828
+
829
+
830
+ // POPOVER ARROWS
831
+ // --------------
832
+
833
+ #popoverArrow {
834
+ .above(@arrowWidth: 5px) {
835
+ bottom: 0;
836
+ left: 50%;
837
+ margin-left: -@arrowWidth;
838
+ border-left: @arrowWidth solid transparent;
839
+ border-right: @arrowWidth solid transparent;
840
+ border-top: @arrowWidth solid @black;
841
+ }
842
+ .left(@arrowWidth: 5px) {
843
+ top: 50%;
844
+ right: 0;
845
+ margin-top: -@arrowWidth;
846
+ border-top: @arrowWidth solid transparent;
847
+ border-bottom: @arrowWidth solid transparent;
848
+ border-left: @arrowWidth solid @black;
849
+ }
850
+ .below(@arrowWidth: 5px) {
851
+ top: 0;
852
+ left: 50%;
853
+ margin-left: -@arrowWidth;
854
+ border-left: @arrowWidth solid transparent;
855
+ border-right: @arrowWidth solid transparent;
856
+ border-bottom: @arrowWidth solid @black;
857
+ }
858
+ .right(@arrowWidth: 5px) {
859
+ top: 50%;
860
+ left: 0;
861
+ margin-top: -@arrowWidth;
862
+ border-top: @arrowWidth solid transparent;
863
+ border-bottom: @arrowWidth solid transparent;
864
+ border-right: @arrowWidth solid @black;
865
+ }
866
+ }
867
+
868
+ // TWIPSY
869
+ // ------
870
+
871
+ .twipsy {
872
+ display: block;
873
+ position: absolute;
874
+ visibility: visible;
875
+ padding: 5px;
876
+ font-size: 11px;
877
+ z-index: 1000;
878
+ .opacity(80);
879
+ &.fade.in {
880
+ .opacity(80);
881
+ }
882
+ &.above .twipsy-arrow { #popoverArrow > .above(); }
883
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
884
+ &.below .twipsy-arrow { #popoverArrow > .below(); }
885
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
886
+ }
887
+ .twipsy-inner {
888
+ padding: 3px 8px;
889
+ background-color: @black;
890
+ color: white;
891
+ text-align: center;
892
+ max-width: 200px;
893
+ text-decoration: none;
894
+ .border-radius(4px);
895
+ }
896
+ .twipsy-arrow {
897
+ position: absolute;
898
+ width: 0;
899
+ height: 0;
900
+ }
901
+
902
+
903
+ // POPOVERS
904
+ // --------
905
+
906
+ .popover {
907
+ position: absolute;
908
+ top: 0;
909
+ left: 0;
910
+ z-index: 1000;
911
+ padding: 5px;
912
+ display: none;
913
+ &.above .arrow { #popoverArrow > .above(); }
914
+ &.right .arrow { #popoverArrow > .right(); }
915
+ &.below .arrow { #popoverArrow > .below(); }
916
+ &.left .arrow { #popoverArrow > .left(); }
917
+ .arrow {
918
+ position: absolute;
919
+ width: 0;
920
+ height: 0;
921
+ }
922
+ .inner {
923
+ background-color: @black;
924
+ background-color: rgba(0,0,0,.8);
925
+ padding: 3px;
926
+ overflow: hidden;
927
+ width: 280px;
928
+ .border-radius(6px);
929
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
930
+ }
931
+ .title {
932
+ background-color: #f5f5f5;
933
+ padding: 9px 15px;
934
+ line-height: 1;
935
+ .border-radius(3px 3px 0 0);
936
+ border-bottom:1px solid #eee;
937
+ }
938
+ .content {
939
+ background-color: @white;
940
+ padding: 14px;
941
+ .border-radius(0 0 3px 3px);
942
+ .background-clip(padding-box);
943
+ p, ul, ol {
944
+ margin-bottom: 0;
945
+ }
946
+ }
947
+ }
948
+
949
+
950
+ // PATTERN ANIMATIONS
951
+ // ------------------
952
+
953
+ .fade {
954
+ .transition(opacity .15s linear);
955
+ opacity: 0;
956
+ &.in {
957
+ opacity: 1;
958
+ }
959
+ }
960
+
961
+
962
+ // LABELS
963
+ // ------
964
+
965
+ .label {
966
+ padding: 1px 3px 2px;
967
+ background-color: @grayLight;
968
+ font-size: @basefont * .75;
969
+ font-weight: bold;
970
+ color: @white;
971
+ text-transform: uppercase;
972
+ .border-radius(3px);
973
+ &.important { background-color: #c43c35; }
974
+ &.warning { background-color: @orange; }
975
+ &.success { background-color: @green; }
976
+ &.notice { background-color: lighten(@blue, 25%); }
977
+ }
978
+
979
+
980
+ // MEDIA GRIDS
981
+ // -----------
982
+
983
+ .media-grid {
984
+ margin-left: -20px;
985
+ margin-bottom: 0;
986
+ .clearfix();
987
+ li {
988
+ display: inline;
989
+ }
990
+ a {
991
+ float: left;
992
+ padding: 4px;
993
+ margin: 0 0 20px 20px;
994
+ border: 1px solid #ddd;
995
+ .border-radius(4px);
996
+ .box-shadow(0 1px 1px rgba(0,0,0,.075));
997
+ img {
998
+ display: block;
999
+ }
1000
+ &:hover {
1001
+ border-color: @linkColor;
1002
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
1003
+ }
1004
+ }
1005
+ }