anjlab-bootstrap-rails 2.0.2.1 → 2.0.3.rc
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.
- data/Rakefile +36 -25
- data/lib/bootstrap-rails/version.rb +1 -1
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
- data/vendor/assets/javascripts/bootstrap-button.js +29 -33
- data/vendor/assets/javascripts/bootstrap-carousel.js +27 -19
- data/vendor/assets/javascripts/bootstrap-collapse.js +44 -25
- data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
- data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
- data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
- data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
- data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
- data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
- data/vendor/assets/javascripts/bootstrap-typeahead.js +25 -11
- data/vendor/assets/stylesheets/accordion.scss +5 -0
- data/vendor/assets/stylesheets/bootstrap.scss +2 -3
- data/vendor/assets/stylesheets/button-groups.scss +55 -36
- data/vendor/assets/stylesheets/buttons.scss +15 -11
- data/vendor/assets/stylesheets/close.scss +12 -1
- data/vendor/assets/stylesheets/code.scss +4 -4
- data/vendor/assets/stylesheets/component-animations.scss +5 -5
- data/vendor/assets/stylesheets/dropdowns.scss +15 -20
- data/vendor/assets/stylesheets/forms.scss +58 -30
- data/vendor/assets/stylesheets/labels-badges.scss +54 -0
- data/vendor/assets/stylesheets/layouts.scss +1 -1
- data/vendor/assets/stylesheets/mixins.scss +58 -46
- data/vendor/assets/stylesheets/modals.scss +1 -1
- data/vendor/assets/stylesheets/navbar.scss +64 -41
- data/vendor/assets/stylesheets/navs.scss +36 -36
- data/vendor/assets/stylesheets/progress-bars.scss +14 -6
- data/vendor/assets/stylesheets/reset.scss +3 -3
- data/vendor/assets/stylesheets/responsive-1200px-min.scss +26 -0
- data/vendor/assets/stylesheets/responsive-767px-max.scss +149 -0
- data/vendor/assets/stylesheets/responsive-768px-979px.scss +17 -0
- data/vendor/assets/stylesheets/responsive-navbar.scss +146 -0
- data/vendor/assets/stylesheets/responsive-utilities.scss +41 -0
- data/vendor/assets/stylesheets/responsive.scss +14 -337
- data/vendor/assets/stylesheets/sprites.scss +37 -5
- data/vendor/assets/stylesheets/tables.scss +22 -5
- data/vendor/assets/stylesheets/thumbnails.scss +14 -2
- data/vendor/assets/stylesheets/type.scss +7 -6
- data/vendor/assets/stylesheets/variables.scss +10 -6
- metadata +43 -16
- data/vendor/assets/stylesheets/badges.scss +0 -36
- data/vendor/assets/stylesheets/labels.scss +0 -38
@@ -27,14 +27,14 @@ pre {
|
|
27
27
|
margin: 0 0 $baseLineHeight / 2;
|
28
28
|
font-size: $baseFontSize * .925; // 13px to 12px
|
29
29
|
line-height: $baseLineHeight;
|
30
|
+
word-break: break-all;
|
31
|
+
word-wrap: break-word;
|
32
|
+
white-space: pre;
|
33
|
+
white-space: pre-wrap;
|
30
34
|
background-color: #f5f5f5;
|
31
35
|
border: 1px solid #ccc; // fallback for IE7-8
|
32
36
|
border: 1px solid rgba(0,0,0,.15);
|
33
37
|
@include border-radius(4px);
|
34
|
-
white-space: pre;
|
35
|
-
white-space: pre-wrap;
|
36
|
-
word-break: break-all;
|
37
|
-
word-wrap: break-word;
|
38
38
|
|
39
39
|
// Make prettyprint styles more spaced out for readability
|
40
40
|
&.prettyprint {
|
@@ -2,18 +2,18 @@
|
|
2
2
|
// --------------------
|
3
3
|
|
4
4
|
.fade {
|
5
|
+
@include opacity(0);
|
5
6
|
@include transition(opacity .15s linear);
|
6
|
-
opacity: 0;
|
7
7
|
&.in {
|
8
|
-
opacity
|
8
|
+
@include opacity(100);
|
9
9
|
}
|
10
10
|
}
|
11
11
|
|
12
12
|
.collapse {
|
13
|
-
|
14
|
-
position:relative;
|
15
|
-
overflow:hidden;
|
13
|
+
position: relative;
|
16
14
|
height: 0;
|
15
|
+
overflow: hidden;
|
16
|
+
@include transition(height .35s ease);
|
17
17
|
&.in {
|
18
18
|
height: auto;
|
19
19
|
}
|
@@ -2,6 +2,7 @@
|
|
2
2
|
// --------------
|
3
3
|
|
4
4
|
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
5
|
+
.dropup,
|
5
6
|
.dropdown {
|
6
7
|
position: relative;
|
7
8
|
}
|
@@ -21,11 +22,11 @@
|
|
21
22
|
width: 0;
|
22
23
|
height: 0;
|
23
24
|
vertical-align: top;
|
24
|
-
border-left: 4px solid transparent;
|
25
|
-
border-right: 4px solid transparent;
|
26
25
|
border-top: 4px solid $black;
|
27
|
-
|
26
|
+
border-right: 4px solid transparent;
|
27
|
+
border-left: 4px solid transparent;
|
28
28
|
content: "";
|
29
|
+
@include opacity(30);
|
29
30
|
}
|
30
31
|
|
31
32
|
// Place the caret
|
@@ -34,7 +35,7 @@
|
|
34
35
|
margin-left: 2px;
|
35
36
|
}
|
36
37
|
.dropdown:hover .caret,
|
37
|
-
.open
|
38
|
+
.open .caret {
|
38
39
|
@include opacity(100);
|
39
40
|
}
|
40
41
|
|
@@ -45,24 +46,22 @@
|
|
45
46
|
top: 100%;
|
46
47
|
left: 0;
|
47
48
|
z-index: $zindexDropdown;
|
48
|
-
float: left;
|
49
49
|
display: none; // none by default, but block on "open" of the menu
|
50
|
+
float: left;
|
50
51
|
min-width: 160px;
|
51
52
|
padding: 4px 0;
|
52
|
-
margin: 0; // override default ul
|
53
|
+
margin: 1px 0 0; // override default ul
|
53
54
|
list-style: none;
|
54
55
|
background-color: $dropdownBackground;
|
55
|
-
border
|
56
|
-
border
|
57
|
-
border-
|
58
|
-
border-width:
|
59
|
-
@include border-radius(
|
56
|
+
border: 1px solid #ccc;
|
57
|
+
border: 1px solid rgba(0,0,0,.2);
|
58
|
+
*border-right-width: 2px;
|
59
|
+
*border-bottom-width: 2px;
|
60
|
+
@include border-radius(5px);
|
60
61
|
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
61
62
|
-webkit-background-clip: padding-box;
|
62
63
|
-moz-background-clip: padding;
|
63
64
|
background-clip: padding-box;
|
64
|
-
*border-right-width: 2px;
|
65
|
-
*border-bottom-width: 2px;
|
66
65
|
|
67
66
|
// Aligns the dropdown menu to right
|
68
67
|
&.pull-right {
|
@@ -99,25 +98,21 @@
|
|
99
98
|
|
100
99
|
// Open state for the dropdown
|
101
100
|
// ---------------------------
|
102
|
-
.
|
101
|
+
.open {
|
103
102
|
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
104
103
|
// make the menu appear below buttons that appeared later on the page
|
105
104
|
*z-index: $zindexDropdown;
|
106
105
|
|
107
|
-
.dropdown-toggle {
|
108
|
-
color: $white;
|
109
|
-
background: #ccc;
|
110
|
-
background: rgba(0,0,0,.3);
|
111
|
-
}
|
112
106
|
.dropdown-menu {
|
113
107
|
display: block;
|
114
108
|
}
|
115
109
|
}
|
116
110
|
|
117
111
|
// Right aligned dropdowns
|
112
|
+
// ---------------------------
|
118
113
|
.pull-right .dropdown-menu {
|
119
|
-
left: auto;
|
120
114
|
right: 0;
|
115
|
+
left: auto;
|
121
116
|
}
|
122
117
|
|
123
118
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
@@ -71,8 +71,9 @@ select,
|
|
71
71
|
font-size: $baseFontSize;
|
72
72
|
line-height: $baseLineHeight;
|
73
73
|
color: $gray;
|
74
|
+
background-color: $inputBackground;
|
74
75
|
border: 1px solid $inputBorder;
|
75
|
-
@include border-radius(
|
76
|
+
@include border-radius($inputBorderRadius);
|
76
77
|
}
|
77
78
|
.uneditable-textarea {
|
78
79
|
width: auto;
|
@@ -97,8 +98,8 @@ input[type="radio"] {
|
|
97
98
|
*margin-top: 0; /* IE7 */
|
98
99
|
line-height: normal;
|
99
100
|
cursor: pointer;
|
100
|
-
@include border-radius(0);
|
101
101
|
border: 0 \9; /* IE9 and down */
|
102
|
+
@include border-radius(0);
|
102
103
|
}
|
103
104
|
input[type="image"] {
|
104
105
|
border: 0;
|
@@ -109,9 +110,9 @@ input[type="file"] {
|
|
109
110
|
width: auto;
|
110
111
|
padding: initial;
|
111
112
|
line-height: initial;
|
112
|
-
border: initial;
|
113
113
|
background-color: $inputBackground;
|
114
114
|
background-color: initial;
|
115
|
+
border: initial;
|
115
116
|
@include box-shadow(none);
|
116
117
|
}
|
117
118
|
|
@@ -171,6 +172,7 @@ input[type="hidden"] {
|
|
171
172
|
// Indent the labels to position radios/checkboxes as hanging
|
172
173
|
.radio,
|
173
174
|
.checkbox {
|
175
|
+
min-height: 18px; // clear the floating input if there is no label text
|
174
176
|
padding-left: 18px;
|
175
177
|
}
|
176
178
|
.radio input[type="radio"],
|
@@ -213,17 +215,16 @@ textarea {
|
|
213
215
|
input:focus,
|
214
216
|
textarea:focus {
|
215
217
|
border-color: rgba(82,168,236,.8);
|
216
|
-
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
217
|
-
@include box-shadow($shadow);
|
218
218
|
outline: 0;
|
219
219
|
outline: thin dotted \9; /* IE6-9 */
|
220
|
+
@include box-shadow((inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)));
|
220
221
|
}
|
221
222
|
input[type="file"]:focus,
|
222
223
|
input[type="radio"]:focus,
|
223
224
|
input[type="checkbox"]:focus,
|
224
225
|
select:focus {
|
225
|
-
@include box-shadow(none); // override for file inputs
|
226
226
|
@include tab-focus();
|
227
|
+
@include box-shadow(none); // override for file inputs
|
227
228
|
}
|
228
229
|
|
229
230
|
|
@@ -243,7 +244,12 @@ select:focus {
|
|
243
244
|
input[class*="span"],
|
244
245
|
select[class*="span"],
|
245
246
|
textarea[class*="span"],
|
246
|
-
.uneditable-input
|
247
|
+
.uneditable-input[class*="span"],
|
248
|
+
// Redeclare since the fluid row class is more specific
|
249
|
+
.row-fluid input[class*="span"],
|
250
|
+
.row-fluid select[class*="span"],
|
251
|
+
.row-fluid textarea[class*="span"],
|
252
|
+
.row-fluid .uneditable-input[class*="span"] {
|
247
253
|
float: none;
|
248
254
|
margin-left: 0;
|
249
255
|
}
|
@@ -269,9 +275,16 @@ textarea[disabled],
|
|
269
275
|
input[readonly],
|
270
276
|
select[readonly],
|
271
277
|
textarea[readonly] {
|
278
|
+
cursor: not-allowed;
|
272
279
|
background-color: $inputDisabledBackground;
|
273
280
|
border-color: #ddd;
|
274
|
-
|
281
|
+
}
|
282
|
+
// Explicitly reset the colors here
|
283
|
+
input[type="radio"][disabled],
|
284
|
+
input[type="checkbox"][disabled],
|
285
|
+
input[type="radio"][readonly],
|
286
|
+
input[type="checkbox"][readonly] {
|
287
|
+
background-color: transparent;
|
275
288
|
}
|
276
289
|
|
277
290
|
|
@@ -315,18 +328,19 @@ select:focus:required:invalid {
|
|
315
328
|
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
316
329
|
margin-top: $baseLineHeight;
|
317
330
|
margin-bottom: $baseLineHeight;
|
318
|
-
background-color: $
|
331
|
+
background-color: $formActionsBackground;
|
319
332
|
border-top: 1px solid #ddd;
|
320
333
|
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
321
334
|
}
|
322
335
|
|
323
336
|
// For text that needs to appear as an input but should not be an input
|
324
337
|
.uneditable-input {
|
325
|
-
|
338
|
+
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
339
|
+
white-space: nowrap;
|
340
|
+
cursor: not-allowed;
|
326
341
|
background-color: $inputBackground;
|
327
342
|
border-color: #eee;
|
328
343
|
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
329
|
-
cursor: not-allowed;
|
330
344
|
}
|
331
345
|
|
332
346
|
// Placeholder text gets special styles; can't be bundled together though for some reason
|
@@ -366,10 +380,13 @@ select:focus:required:invalid {
|
|
366
380
|
input,
|
367
381
|
select,
|
368
382
|
.uneditable-input {
|
383
|
+
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
384
|
+
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
369
385
|
*margin-left: 0;
|
370
|
-
|
386
|
+
vertical-align: middle;
|
387
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
388
|
+
// Make input on top when focused so blue border and shadow always show
|
371
389
|
&:focus {
|
372
|
-
position: relative;
|
373
390
|
z-index: 2;
|
374
391
|
}
|
375
392
|
}
|
@@ -379,8 +396,8 @@ select:focus:required:invalid {
|
|
379
396
|
.add-on {
|
380
397
|
display: inline-block;
|
381
398
|
width: auto;
|
382
|
-
min-width: 16px;
|
383
399
|
height: $baseLineHeight;
|
400
|
+
min-width: 16px;
|
384
401
|
padding: 4px 5px;
|
385
402
|
font-weight: normal;
|
386
403
|
line-height: $baseLineHeight;
|
@@ -392,7 +409,8 @@ select:focus:required:invalid {
|
|
392
409
|
}
|
393
410
|
.add-on,
|
394
411
|
.btn {
|
395
|
-
|
412
|
+
margin-left: -1px;
|
413
|
+
@include border-radius(0);
|
396
414
|
}
|
397
415
|
.active {
|
398
416
|
background-color: lighten($green, 30);
|
@@ -404,21 +422,24 @@ select:focus:required:invalid {
|
|
404
422
|
.btn {
|
405
423
|
margin-right: -1px;
|
406
424
|
}
|
425
|
+
.add-on:first-child,
|
426
|
+
.btn:first-child {
|
427
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
428
|
+
}
|
407
429
|
}
|
408
430
|
.input-append {
|
409
431
|
input,
|
410
|
-
select
|
432
|
+
select,
|
411
433
|
.uneditable-input {
|
412
|
-
@include border-radius(
|
434
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
413
435
|
}
|
414
436
|
.uneditable-input {
|
415
|
-
border-left-color: #eee;
|
416
437
|
border-right-color: #ccc;
|
438
|
+
border-left-color: #eee;
|
417
439
|
}
|
418
|
-
.add-on,
|
419
|
-
.btn {
|
420
|
-
|
421
|
-
@include border-radius(0 3px 3px 0);
|
440
|
+
.add-on:last-child,
|
441
|
+
.btn:last-child {
|
442
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
422
443
|
}
|
423
444
|
}
|
424
445
|
// Remove all border-radius for inputs with both prepend and append
|
@@ -431,12 +452,12 @@ select:focus:required:invalid {
|
|
431
452
|
.add-on:first-child,
|
432
453
|
.btn:first-child {
|
433
454
|
margin-right: -1px;
|
434
|
-
@include border-radius(
|
435
|
-
|
455
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
456
|
+
}
|
436
457
|
.add-on:last-child,
|
437
458
|
.btn:last-child {
|
438
459
|
margin-left: -1px;
|
439
|
-
@include border-radius(0
|
460
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
440
461
|
}
|
441
462
|
}
|
442
463
|
|
@@ -446,8 +467,10 @@ select:focus:required:invalid {
|
|
446
467
|
// -----------
|
447
468
|
|
448
469
|
.search-query {
|
449
|
-
padding-left: 14px;
|
450
470
|
padding-right: 14px;
|
471
|
+
padding-right: 4px \9;
|
472
|
+
padding-left: 14px;
|
473
|
+
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
451
474
|
margin-bottom: 0; // remove the default margin on all inputs
|
452
475
|
@include border-radius(14px);
|
453
476
|
}
|
@@ -471,6 +494,7 @@ select:focus:required:invalid {
|
|
471
494
|
.input-prepend,
|
472
495
|
.input-append {
|
473
496
|
display: inline-block;
|
497
|
+
@include ie7-inline-block();
|
474
498
|
margin-bottom: 0;
|
475
499
|
}
|
476
500
|
// Re-hide hidden elements due to specifity
|
@@ -504,8 +528,8 @@ select:focus:required:invalid {
|
|
504
528
|
.form-inline .radio input[type="radio"],
|
505
529
|
.form-inline .checkbox input[type="checkbox"] {
|
506
530
|
float: left;
|
507
|
-
margin-left: 0;
|
508
531
|
margin-right: 3px;
|
532
|
+
margin-left: 0;
|
509
533
|
}
|
510
534
|
|
511
535
|
|
@@ -538,11 +562,15 @@ legend + .control-group {
|
|
538
562
|
}
|
539
563
|
// Move over all input controls and content
|
540
564
|
.controls {
|
541
|
-
|
542
|
-
|
565
|
+
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
566
|
+
// don't inherit the margin of the parent, in this case .controls
|
543
567
|
*display: inline-block;
|
544
|
-
*margin-left: 0;
|
545
568
|
*padding-left: 20px;
|
569
|
+
margin-left: 160px;
|
570
|
+
*margin-left: 0;
|
571
|
+
&:first-child {
|
572
|
+
*padding-left: 160px;
|
573
|
+
}
|
546
574
|
}
|
547
575
|
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
548
576
|
.help-block {
|
@@ -0,0 +1,54 @@
|
|
1
|
+
// LABELS & BADGES
|
2
|
+
// ---------------
|
3
|
+
|
4
|
+
// Base classes
|
5
|
+
.label,
|
6
|
+
.badge {
|
7
|
+
font-size: $baseFontSize * .846;
|
8
|
+
font-weight: bold;
|
9
|
+
line-height: 14px; // ensure proper line-height if floated
|
10
|
+
color: $white;
|
11
|
+
vertical-align: baseline;
|
12
|
+
white-space: nowrap;
|
13
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
14
|
+
background-color: $grayLight;
|
15
|
+
}
|
16
|
+
// Set unique padding and border-radii
|
17
|
+
.label {
|
18
|
+
padding: 1px 4px 2px;
|
19
|
+
@include border-radius(3px);
|
20
|
+
}
|
21
|
+
.badge {
|
22
|
+
padding: 1px 9px 2px;
|
23
|
+
@include border-radius(9px);
|
24
|
+
}
|
25
|
+
|
26
|
+
// Hover state, but only for links
|
27
|
+
a {
|
28
|
+
&.label:hover,
|
29
|
+
&.badge:hover {
|
30
|
+
color: $white;
|
31
|
+
text-decoration: none;
|
32
|
+
cursor: pointer;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
// Colors
|
37
|
+
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
|
38
|
+
@each $widget in label, badge {
|
39
|
+
// Important (red)
|
40
|
+
.#{$widget}-important { background-color: $errorText; }
|
41
|
+
.#{$widget}-important[href] { background-color: darken($errorText, 10%); }
|
42
|
+
// Warnings (orange)
|
43
|
+
.#{$widget}-warning { background-color: $orange; }
|
44
|
+
.#{$widget}-warning[href] { background-color: darken($orange, 10%); }
|
45
|
+
// Success (green)
|
46
|
+
.#{$widget}-success { background-color: $successText; }
|
47
|
+
.#{$widget}-success[href] { background-color: darken($successText, 10%); }
|
48
|
+
// Info (turquoise)
|
49
|
+
.#{$widget}-info { background-color: $infoText; }
|
50
|
+
.#{$widget}-info[href] { background-color: darken($infoText, 10%); }
|
51
|
+
// Inverse (black)
|
52
|
+
.#{$widget}-inverse { background-color: $grayDark; }
|
53
|
+
.#{$widget}-inverse[href] { background-color: darken($grayDark, 10%); }
|
54
|
+
}
|
@@ -70,11 +70,11 @@
|
|
70
70
|
|
71
71
|
// Sizing shortcuts
|
72
72
|
// -------------------------
|
73
|
-
@mixin size($height
|
73
|
+
@mixin size($height, $width) {
|
74
74
|
width: $width;
|
75
75
|
height: $height;
|
76
76
|
}
|
77
|
-
@mixin square($size
|
77
|
+
@mixin square($size) {
|
78
78
|
@include size($size, $size);
|
79
79
|
}
|
80
80
|
|
@@ -98,47 +98,43 @@
|
|
98
98
|
white-space: nowrap;
|
99
99
|
}
|
100
100
|
|
101
|
-
//
|
101
|
+
// CSS image replacement
|
102
102
|
// -------------------------
|
103
|
-
// Source:
|
103
|
+
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
104
104
|
.hide-text {
|
105
|
-
|
106
|
-
|
107
|
-
|
105
|
+
font: 0/0 a;
|
106
|
+
color: transparent;
|
107
|
+
text-shadow: none;
|
108
|
+
background-color: transparent;
|
109
|
+
border: 0;
|
108
110
|
}
|
109
111
|
|
110
112
|
|
111
113
|
// FONTS
|
112
114
|
// --------------------------------------------------
|
113
115
|
|
114
|
-
@mixin font-family-serif
|
115
|
-
font-family:
|
116
|
+
@mixin font-family-serif {
|
117
|
+
font-family: $serifFontFamily;
|
116
118
|
}
|
117
|
-
|
118
|
-
|
119
|
-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
119
|
+
@mixin font-family-sans-serif {
|
120
|
+
font-family: $sansFontFamily;
|
120
121
|
}
|
121
|
-
|
122
|
-
|
123
|
-
font-family: Menlo, Monaco, "Courier New", monospace;
|
122
|
+
@mixin font-family-monospace {
|
123
|
+
font-family: $monoFontFamily;
|
124
124
|
}
|
125
|
-
|
126
125
|
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
127
126
|
font-size: $size;
|
128
127
|
font-weight: $weight;
|
129
128
|
line-height: $lineHeight;
|
130
129
|
}
|
131
|
-
|
132
130
|
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
133
131
|
@include font-family-serif;
|
134
132
|
@include font-shorthand($size, $weight, $lineHeight);
|
135
133
|
}
|
136
|
-
|
137
134
|
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
138
135
|
@include font-family-sans-serif;
|
139
136
|
@include font-shorthand($size, $weight, $lineHeight);
|
140
137
|
}
|
141
|
-
|
142
138
|
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
143
139
|
@include font-family-monospace;
|
144
140
|
@include font-shorthand($size, $weight, $lineHeight);
|
@@ -161,9 +157,8 @@
|
|
161
157
|
@mixin input-block-level {
|
162
158
|
display: block;
|
163
159
|
width: 100%;
|
164
|
-
min-height: 28px;
|
165
|
-
|
166
|
-
@include box-sizing(border-box);
|
160
|
+
min-height: 28px; // Make inputs at least the height of their button counterpart
|
161
|
+
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
167
162
|
}
|
168
163
|
|
169
164
|
// Mixin for form field states
|
@@ -200,14 +195,14 @@
|
|
200
195
|
// --------------------------------------------------
|
201
196
|
|
202
197
|
// Border Radius
|
203
|
-
@mixin border-radius($radius
|
198
|
+
@mixin border-radius($radius) {
|
204
199
|
-webkit-border-radius: $radius;
|
205
200
|
-moz-border-radius: $radius;
|
206
201
|
border-radius: $radius;
|
207
202
|
}
|
208
203
|
|
209
204
|
// Drop shadows
|
210
|
-
@mixin box-shadow($shadow
|
205
|
+
@mixin box-shadow($shadow) {
|
211
206
|
-webkit-box-shadow: $shadow;
|
212
207
|
-moz-box-shadow: $shadow;
|
213
208
|
box-shadow: $shadow;
|
@@ -237,21 +232,21 @@
|
|
237
232
|
-o-transform: scale($ratio);
|
238
233
|
transform: scale($ratio);
|
239
234
|
}
|
240
|
-
@mixin translate($x
|
235
|
+
@mixin translate($x, $y) {
|
241
236
|
-webkit-transform: translate($x, $y);
|
242
237
|
-moz-transform: translate($x, $y);
|
243
238
|
-ms-transform: translate($x, $y);
|
244
239
|
-o-transform: translate($x, $y);
|
245
240
|
transform: translate($x, $y);
|
246
241
|
}
|
247
|
-
@mixin skew($x
|
242
|
+
@mixin skew($x, $y) {
|
248
243
|
-webkit-transform: skew($x, $y);
|
249
244
|
-moz-transform: skew($x, $y);
|
250
245
|
-ms-transform: skew($x, $y);
|
251
246
|
-o-transform: skew($x, $y);
|
252
247
|
transform: skew($x, $y);
|
253
248
|
}
|
254
|
-
@mixin translate3d($x
|
249
|
+
@mixin translate3d($x, $y, $z) {
|
255
250
|
-webkit-transform: translate($x, $y, $z);
|
256
251
|
-moz-transform: translate($x, $y, $z);
|
257
252
|
-ms-transform: translate($x, $y, $z);
|
@@ -259,6 +254,17 @@
|
|
259
254
|
transform: translate($x, $y, $z);
|
260
255
|
}
|
261
256
|
|
257
|
+
// Backface visibility
|
258
|
+
// Prevent browsers from flickering when using CSS 3D transforms.
|
259
|
+
// Default value is `visible`, but can be changed to `hidden
|
260
|
+
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
261
|
+
@mixin backface-visibility($visibility){
|
262
|
+
-webkit-backface-visibility: $visibility;
|
263
|
+
-moz-backface-visibility: $visibility;
|
264
|
+
-ms-backface-visibility: $visibility;
|
265
|
+
backface-visibility: $visibility;
|
266
|
+
}
|
267
|
+
|
262
268
|
// Background clipping
|
263
269
|
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
264
270
|
@mixin background-clip($clip) {
|
@@ -280,18 +286,19 @@
|
|
280
286
|
@mixin user-select($select) {
|
281
287
|
-webkit-user-select: $select;
|
282
288
|
-moz-user-select: $select;
|
289
|
+
-ms-user-select: $select;
|
283
290
|
-o-user-select: $select;
|
284
291
|
user-select: $select;
|
285
292
|
}
|
286
293
|
|
287
294
|
// Resize anything
|
288
|
-
@mixin resizable($direction
|
295
|
+
@mixin resizable($direction) {
|
289
296
|
resize: $direction; // Options: horizontal, vertical, both
|
290
297
|
overflow: auto; // Safari fix
|
291
298
|
}
|
292
299
|
|
293
300
|
// CSS3 Content Columns
|
294
|
-
@mixin content-columns($columnCount, $columnGap: $
|
301
|
+
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
295
302
|
-webkit-column-count: $columnCount;
|
296
303
|
-moz-column-count: $columnCount;
|
297
304
|
column-count: $columnCount;
|
@@ -301,9 +308,9 @@
|
|
301
308
|
}
|
302
309
|
|
303
310
|
// Opacity
|
304
|
-
@mixin opacity($opacity
|
311
|
+
@mixin opacity($opacity) {
|
305
312
|
opacity: $opacity / 100;
|
306
|
-
|
313
|
+
filter: alpha(opacity=#{$opacity});
|
307
314
|
}
|
308
315
|
|
309
316
|
|
@@ -410,18 +417,17 @@
|
|
410
417
|
// -------------------------
|
411
418
|
// Dividers (basically an hr) within dropdowns and nav lists
|
412
419
|
@mixin nav-divider() {
|
413
|
-
height: 1px;
|
414
|
-
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
415
|
-
overflow: hidden;
|
416
|
-
background-color: #e5e5e5;
|
417
|
-
border-bottom: 1px solid $white;
|
418
|
-
|
419
420
|
// IE7 needs a set width since we gave a height. Restricting just
|
420
421
|
// to IE7 to keep the 1px left/right space in other browsers.
|
421
422
|
// It is unclear where IE is getting the extra space that we need
|
422
423
|
// to negative-margin away, but so it goes.
|
423
424
|
*width: 100%;
|
425
|
+
height: 1px;
|
426
|
+
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
424
427
|
*margin: -5px 0 5px;
|
428
|
+
overflow: hidden;
|
429
|
+
background-color: #e5e5e5;
|
430
|
+
border-bottom: 1px solid $white;
|
425
431
|
}
|
426
432
|
|
427
433
|
// Button backgrounds
|
@@ -429,11 +435,13 @@
|
|
429
435
|
@mixin button-background($startColor, $endColor) {
|
430
436
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
431
437
|
@include gradient-bar($startColor, $endColor);
|
438
|
+
*background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
432
439
|
@include reset-filter();
|
433
440
|
|
434
441
|
// in these cases the gradient won't cover the background, so we override
|
435
442
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
436
443
|
background-color: $endColor;
|
444
|
+
*background-color: darken($endColor, 5%);
|
437
445
|
}
|
438
446
|
|
439
447
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
@@ -492,8 +500,8 @@
|
|
492
500
|
|
493
501
|
// Centered container element
|
494
502
|
@mixin container-fixed() {
|
495
|
-
margin-left: auto;
|
496
503
|
margin-right: auto;
|
504
|
+
margin-left: auto;
|
497
505
|
@include clearfix();
|
498
506
|
}
|
499
507
|
|
@@ -510,19 +518,18 @@
|
|
510
518
|
margin-left: $gridGutterWidth * -1;
|
511
519
|
@include clearfix();
|
512
520
|
}
|
513
|
-
@mixin make-column($columns: 1) {
|
521
|
+
@mixin make-column($columns: 1, $offset: 0) {
|
514
522
|
float: left;
|
515
|
-
margin-left: $gridGutterWidth;
|
523
|
+
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
516
524
|
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
517
525
|
}
|
518
526
|
|
519
527
|
// The Grid
|
520
|
-
|
521
528
|
@mixin grid-core-span ($columns, $gridColumnWidth, $gridGutterWidth) {
|
522
529
|
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
523
530
|
}
|
524
|
-
@mixin grid-core-offset ($columns, $gridColumnWidth, $gridGutterWidth) {
|
525
|
-
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns
|
531
|
+
@mixin grid-core-offset ($columns, $gridColumnWidth, $gridGutterWidth) {
|
532
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
|
526
533
|
}
|
527
534
|
@mixin grid-core-span-x($columns, $gridColumnWidth, $gridGutterWidth) {
|
528
535
|
@for $i from 1 through $columns {
|
@@ -557,21 +564,25 @@
|
|
557
564
|
|
558
565
|
@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
559
566
|
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
567
|
+
//TODO: fix *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100 * 1%);
|
560
568
|
}
|
561
569
|
@mixin grid-fluid-span-x($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
562
570
|
@for $i from 1 through $columns {
|
563
|
-
|
571
|
+
.span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth) }
|
564
572
|
}
|
565
573
|
}
|
566
574
|
@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
|
567
575
|
.row-fluid {
|
568
576
|
width: 100%;
|
569
577
|
@include clearfix();
|
570
|
-
|
578
|
+
[class*="span"] {
|
579
|
+
@include input-block-level();
|
571
580
|
float: left;
|
572
581
|
margin-left: $fluidGridGutterWidth;
|
582
|
+
*margin-left: $fluidGridGutterWidth - percentage(.5 / $gridRowWidth * 100);
|
583
|
+
//TODO: fix *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100 * 1%);
|
573
584
|
}
|
574
|
-
|
585
|
+
[class*="span"]:first-child {
|
575
586
|
margin-left: 0;
|
576
587
|
}
|
577
588
|
|
@@ -579,6 +590,7 @@
|
|
579
590
|
@include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
|
580
591
|
}
|
581
592
|
}
|
593
|
+
|
582
594
|
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
|
583
595
|
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
584
596
|
}
|