anjlab-bootstrap-rails 2.0.2.1 → 2.0.3.rc
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
}
|