bootstrap-sass 2.0.2 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of bootstrap-sass might be problematic. Click here for more details.
- data/README.md +26 -10
- data/lib/bootstrap-sass.rb +24 -13
- data/lib/bootstrap-sass/{compass_extensions.rb → compass_functions.rb} +0 -0
- data/lib/bootstrap-sass/engine.rb +0 -2
- data/lib/bootstrap-sass/{config/sass_extentions.rb → rails_functions.rb} +0 -0
- 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 +45 -26
- 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 +24 -10
- data/vendor/assets/stylesheets/_bootstrap-responsive.scss +100 -68
- data/vendor/assets/stylesheets/_bootstrap.scss +11 -2
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +5 -0
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +51 -31
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +15 -11
- data/vendor/assets/stylesheets/bootstrap/_close.scss +12 -1
- data/vendor/assets/stylesheets/bootstrap/_code.scss +4 -4
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +4 -4
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +16 -22
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +58 -37
- data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -1
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +99 -73
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +61 -40
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +27 -26
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +15 -6
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +3 -3
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +25 -5
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +17 -6
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +14 -0
- data/vendor/assets/stylesheets/bootstrap/_type.scss +7 -6
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +52 -9
- metadata +10 -22
- data/vendor/assets/stylesheets/bootstrap/_badges.scss +0 -36
- data/vendor/assets/stylesheets/bootstrap/_labels.scss +0 -38
@@ -0,0 +1,50 @@
|
|
1
|
+
// LABELS & BADGES
|
2
|
+
// ---------------
|
3
|
+
|
4
|
+
// Base classes
|
5
|
+
.label, .badge {
|
6
|
+
font-size: $baseFontSize * .846;
|
7
|
+
font-weight: bold;
|
8
|
+
line-height: 14px; // ensure proper line-height if floated
|
9
|
+
color: $white;
|
10
|
+
vertical-align: baseline;
|
11
|
+
white-space: nowrap;
|
12
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
13
|
+
background-color: $grayLight;
|
14
|
+
}
|
15
|
+
// Set unique padding and border-radii
|
16
|
+
.label {
|
17
|
+
padding: 1px 4px 2px;
|
18
|
+
@include border-radius(3px);
|
19
|
+
}
|
20
|
+
.badge {
|
21
|
+
padding: 1px 9px 2px;
|
22
|
+
@include border-radius(9px);
|
23
|
+
}
|
24
|
+
|
25
|
+
// Hover state, but only for links
|
26
|
+
a {
|
27
|
+
&.label:hover, &.badge:hover {
|
28
|
+
color: $white;
|
29
|
+
text-decoration: none;
|
30
|
+
cursor: pointer;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Colors
|
35
|
+
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
|
36
|
+
// Important (red)
|
37
|
+
.label-important, .badge-important { background-color: $errorText; }
|
38
|
+
.label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
|
39
|
+
// Warnings (orange)
|
40
|
+
.label-warning, .badge-warning { background-color: $orange; }
|
41
|
+
.label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
|
42
|
+
// Success (green)
|
43
|
+
.label-success, .badge-success { background-color: $successText; }
|
44
|
+
.label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
|
45
|
+
// Info (turquoise)
|
46
|
+
.label-info, .badge-info { background-color: $infoText; }
|
47
|
+
.label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
|
48
|
+
// Inverse (black)
|
49
|
+
.label-inverse, .badge-inverse { background-color: $grayDark; }
|
50
|
+
.label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
|
@@ -71,11 +71,11 @@
|
|
71
71
|
|
72
72
|
// Sizing shortcuts
|
73
73
|
// -------------------------
|
74
|
-
@mixin size($height
|
74
|
+
@mixin size($height, $width) {
|
75
75
|
width: $width;
|
76
76
|
height: $height;
|
77
77
|
}
|
78
|
-
@mixin square($size
|
78
|
+
@mixin square($size) {
|
79
79
|
@include size($size, $size);
|
80
80
|
}
|
81
81
|
|
@@ -98,26 +98,28 @@
|
|
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
|
@mixin 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
|
@mixin font-family-serif() {
|
114
|
-
font-family:
|
116
|
+
font-family: $serifFontFamily;
|
115
117
|
}
|
116
118
|
@mixin font-family-sans-serif() {
|
117
|
-
font-family:
|
119
|
+
font-family: $sansFontFamily;
|
118
120
|
}
|
119
121
|
@mixin font-family-monospace() {
|
120
|
-
font-family:
|
122
|
+
font-family: $monoFontFamily;
|
121
123
|
}
|
122
124
|
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
123
125
|
font-size: $size;
|
@@ -145,9 +147,8 @@
|
|
145
147
|
@mixin input-block-level() {
|
146
148
|
display: block;
|
147
149
|
width: 100%;
|
148
|
-
min-height: 28px;
|
149
|
-
|
150
|
-
@include box-sizing(border-box);
|
150
|
+
min-height: 28px; // Make inputs at least the height of their button counterpart
|
151
|
+
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
151
152
|
}
|
152
153
|
|
153
154
|
|
@@ -179,14 +180,14 @@
|
|
179
180
|
// --------------------------------------------------
|
180
181
|
|
181
182
|
// Border Radius
|
182
|
-
@mixin border-radius($radius
|
183
|
+
@mixin border-radius($radius) {
|
183
184
|
-webkit-border-radius: $radius;
|
184
185
|
-moz-border-radius: $radius;
|
185
186
|
border-radius: $radius;
|
186
187
|
}
|
187
188
|
|
188
189
|
// Drop shadows
|
189
|
-
@mixin box-shadow($shadow
|
190
|
+
@mixin box-shadow($shadow) {
|
190
191
|
-webkit-box-shadow: $shadow;
|
191
192
|
-moz-box-shadow: $shadow;
|
192
193
|
box-shadow: $shadow;
|
@@ -216,7 +217,7 @@
|
|
216
217
|
-o-transform: scale($ratio);
|
217
218
|
transform: scale($ratio);
|
218
219
|
}
|
219
|
-
@mixin translate($x
|
220
|
+
@mixin translate($x, $y) {
|
220
221
|
-webkit-transform: translate($x, $y);
|
221
222
|
-moz-transform: translate($x, $y);
|
222
223
|
-ms-transform: translate($x, $y);
|
@@ -224,7 +225,7 @@
|
|
224
225
|
transform: translate($x, $y);
|
225
226
|
}
|
226
227
|
|
227
|
-
@mixin skew($x
|
228
|
+
@mixin skew($x, $y) {
|
228
229
|
-webkit-transform: skew($x, $y);
|
229
230
|
-moz-transform: skew($x, $y);
|
230
231
|
-ms-transform: skew($x, $y);
|
@@ -232,7 +233,7 @@
|
|
232
233
|
transform: skew($x, $y);
|
233
234
|
}
|
234
235
|
|
235
|
-
@mixin translate3d($x
|
236
|
+
@mixin translate3d($x, $y, $z) {
|
236
237
|
-webkit-transform: translate($x, $y, $z);
|
237
238
|
-moz-transform: translate($x, $y, $z);
|
238
239
|
-ms-transform: translate($x, $y, $z);
|
@@ -240,6 +241,17 @@
|
|
240
241
|
transform: translate($x, $y, $z);
|
241
242
|
}
|
242
243
|
|
244
|
+
// Backface visibility
|
245
|
+
// Prevent browsers from flickering when using CSS 3D transforms.
|
246
|
+
// Default value is `visible`, but can be changed to `hidden
|
247
|
+
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
248
|
+
@mixin backface-visibility($visibility){
|
249
|
+
-webkit-backface-visibility: $visibility;
|
250
|
+
-moz-backface-visibility: $visibility;
|
251
|
+
-ms-backface-visibility: $visibility;
|
252
|
+
backface-visibility: $visibility;
|
253
|
+
}
|
254
|
+
|
243
255
|
// Background clipping
|
244
256
|
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
245
257
|
@mixin background-clip($clip) {
|
@@ -270,18 +282,19 @@
|
|
270
282
|
@mixin user-select($select) {
|
271
283
|
-webkit-user-select: $select;
|
272
284
|
-moz-user-select: $select;
|
285
|
+
-ms-user-select: $select;
|
273
286
|
-o-user-select: $select;
|
274
287
|
user-select: $select;
|
275
288
|
}
|
276
289
|
|
277
290
|
// Resize anything
|
278
|
-
@mixin resizable($direction
|
291
|
+
@mixin resizable($direction) {
|
279
292
|
resize: $direction; // Options: horizontal, vertical, both
|
280
293
|
overflow: auto; // Safari fix
|
281
294
|
}
|
282
295
|
|
283
296
|
// CSS3 Content Columns
|
284
|
-
@mixin content-columns($columnCount, $columnGap: $
|
297
|
+
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
285
298
|
-webkit-column-count: $columnCount;
|
286
299
|
-moz-column-count: $columnCount;
|
287
300
|
column-count: $columnCount;
|
@@ -293,7 +306,7 @@
|
|
293
306
|
// Opacity
|
294
307
|
@mixin opacity($opacity: 1) {
|
295
308
|
opacity: $opacity;
|
296
|
-
|
309
|
+
filter: alpha(opacity=#{$opacity * 100});
|
297
310
|
}
|
298
311
|
|
299
312
|
|
@@ -391,18 +404,17 @@
|
|
391
404
|
// -------------------
|
392
405
|
// Dividers (basically an hr) within dropdowns and nav lists
|
393
406
|
@mixin nav-divider() {
|
394
|
-
height: 1px;
|
395
|
-
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
396
|
-
overflow: hidden;
|
397
|
-
background-color: #e5e5e5;
|
398
|
-
border-bottom: 1px solid $white;
|
399
|
-
|
400
407
|
// IE7 needs a set width since we gave a height. Restricting just
|
401
408
|
// to IE7 to keep the 1px left/right space in other browsers.
|
402
409
|
// It is unclear where IE is getting the extra space that we need
|
403
410
|
// to negative-margin away, but so it goes.
|
404
411
|
*width: 100%;
|
412
|
+
height: 1px;
|
413
|
+
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
405
414
|
*margin: -5px 0 5px;
|
415
|
+
overflow: hidden;
|
416
|
+
background-color: #e5e5e5;
|
417
|
+
border-bottom: 1px solid $white;
|
406
418
|
}
|
407
419
|
|
408
420
|
// Button backgrounds
|
@@ -410,11 +422,13 @@
|
|
410
422
|
@mixin buttonBackground($startColor, $endColor) {
|
411
423
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
412
424
|
@include gradientBar($startColor, $endColor);
|
425
|
+
*background-color: $endColor; // Darken IE7 buttons by default so they stand out more given they won't have borders
|
413
426
|
@include reset-filter();
|
414
427
|
|
415
428
|
// in these cases the gradient won't cover the background, so we override
|
416
429
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
417
430
|
background-color: $endColor;
|
431
|
+
*background-color: darken($endColor, 5%);
|
418
432
|
}
|
419
433
|
|
420
434
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
@@ -472,8 +486,8 @@
|
|
472
486
|
|
473
487
|
// Centered container element
|
474
488
|
@mixin container-fixed() {
|
475
|
-
margin-left: auto;
|
476
489
|
margin-right: auto;
|
490
|
+
margin-left: auto;
|
477
491
|
@include clearfix();
|
478
492
|
}
|
479
493
|
|
@@ -490,83 +504,95 @@
|
|
490
504
|
margin-left: $gridGutterWidth * -1;
|
491
505
|
@include clearfix();
|
492
506
|
}
|
493
|
-
@mixin makeColumn($columns: 1) {
|
507
|
+
@mixin makeColumn($columns: 1, $offset: 0) {
|
494
508
|
float: left;
|
495
|
-
margin-left: $gridGutterWidth;
|
509
|
+
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
|
496
510
|
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
497
511
|
}
|
498
512
|
|
499
513
|
// The Grid
|
500
|
-
@mixin gridCore($
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
}
|
505
|
-
|
506
|
-
@for $i from 1 through $gridColumns {
|
507
|
-
.span#{$i} { @include gridCoreSpan($i, $gridColumnWidth, $gridGutterWidth) }
|
514
|
+
@mixin gridCore($columnWidth, $gutterWidth) {
|
515
|
+
.row {
|
516
|
+
margin-left: $gutterWidth * -1;
|
517
|
+
@include clearfix();
|
508
518
|
}
|
509
519
|
|
510
|
-
|
511
|
-
|
520
|
+
[class*="span"] {
|
521
|
+
float: left;
|
522
|
+
margin-left: $gutterWidth;
|
512
523
|
}
|
513
524
|
|
514
|
-
|
515
|
-
|
516
|
-
@include clearfix();
|
517
|
-
}
|
525
|
+
// Set the container width, and override it for fixed navbars in media queries
|
526
|
+
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }
|
518
527
|
|
519
|
-
|
520
|
-
|
528
|
+
@include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
|
529
|
+
@include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
|
530
|
+
}
|
531
|
+
@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
|
532
|
+
@for $i from 1 through $cols {
|
533
|
+
.span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
|
521
534
|
}
|
522
535
|
}
|
523
|
-
|
524
|
-
|
525
|
-
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
536
|
+
@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
|
537
|
+
width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
|
526
538
|
}
|
527
|
-
|
528
|
-
@
|
529
|
-
|
539
|
+
@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
|
540
|
+
@for $i from 1 through $cols {
|
541
|
+
.offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
|
542
|
+
}
|
543
|
+
}
|
544
|
+
@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
|
545
|
+
margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
|
530
546
|
}
|
531
547
|
|
532
|
-
@mixin gridFluid($
|
548
|
+
@mixin gridFluid($columnWidth, $gutterWidth) {
|
533
549
|
.row-fluid {
|
534
550
|
width: 100%;
|
535
551
|
@include clearfix();
|
536
|
-
|
552
|
+
[class*="span"] {
|
553
|
+
@include input-block-level();
|
537
554
|
float: left;
|
538
|
-
margin-left: $
|
555
|
+
margin-left: $gutterWidth;
|
556
|
+
*margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
|
539
557
|
}
|
540
|
-
|
558
|
+
[class*="span"]:first-child {
|
541
559
|
margin-left: 0;
|
542
560
|
}
|
543
|
-
@for $i from 1 through $gridColumns {
|
544
|
-
> .span#{$i} { @include gridFluidSpan($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
|
545
|
-
}
|
546
|
-
}
|
547
|
-
}
|
548
561
|
|
549
|
-
|
550
|
-
|
562
|
+
// generate .spanX
|
563
|
+
@include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
|
564
|
+
}
|
551
565
|
}
|
552
|
-
|
553
|
-
@
|
554
|
-
|
555
|
-
input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $gridColumnWidth, $gridGutterWidth); }
|
566
|
+
@mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
|
567
|
+
@for $i from 1 through $cols {
|
568
|
+
.span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
|
556
569
|
}
|
570
|
+
}
|
571
|
+
@mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
|
572
|
+
width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
|
573
|
+
*width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
|
574
|
+
}
|
557
575
|
|
576
|
+
@mixin gridInput($columnWidth, $gutterWidth) {
|
558
577
|
input, textarea, .uneditable-input {
|
559
578
|
margin-left: 0; // override margin-left from core grid system
|
560
579
|
}
|
561
|
-
}
|
562
580
|
|
563
|
-
|
564
|
-
|
581
|
+
// generate .spanX
|
582
|
+
@include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
|
583
|
+
}
|
584
|
+
@mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
|
585
|
+
@for $i from 1 through $cols {
|
586
|
+
input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
|
587
|
+
}
|
588
|
+
}
|
589
|
+
@mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
|
590
|
+
width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
|
565
591
|
}
|
566
592
|
|
567
|
-
@mixin makeFluidColumn($columns) {
|
593
|
+
@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
|
568
594
|
// This isn't perfect, but it's better than nothing.
|
569
595
|
float: left;
|
570
|
-
margin-left: $
|
571
|
-
@include gridFluidSpan($columns, $
|
596
|
+
margin-left: $gutterWidth;
|
597
|
+
@include gridFluidSpan($columns, $columnWidth, $gutterWidth);
|
572
598
|
}
|
@@ -16,12 +16,12 @@
|
|
16
16
|
|
17
17
|
// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
|
18
18
|
.navbar-inner {
|
19
|
+
min-height: $navbarHeight;
|
19
20
|
padding-left: 20px;
|
20
21
|
padding-right: 20px;
|
21
22
|
@include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
|
22
23
|
@include border-radius(4px);
|
23
|
-
|
24
|
-
@include box-shadow($shadow);
|
24
|
+
@include box-shadow(#{0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)});
|
25
25
|
}
|
26
26
|
|
27
27
|
// Set width to auto for default container
|
@@ -30,28 +30,6 @@
|
|
30
30
|
width: auto;
|
31
31
|
}
|
32
32
|
|
33
|
-
// Navbar button for toggling navbar items in responsive layouts
|
34
|
-
.btn-navbar {
|
35
|
-
display: none;
|
36
|
-
float: right;
|
37
|
-
padding: 7px 10px;
|
38
|
-
margin-left: 5px;
|
39
|
-
margin-right: 5px;
|
40
|
-
@include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
|
41
|
-
$shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
42
|
-
@include box-shadow($shadow);
|
43
|
-
}
|
44
|
-
.btn-navbar .icon-bar {
|
45
|
-
display: block;
|
46
|
-
width: 18px;
|
47
|
-
height: 2px;
|
48
|
-
background-color: #f5f5f5;
|
49
|
-
@include border-radius(1px);
|
50
|
-
@include box-shadow(0 1px 0 rgba(0,0,0,.25));
|
51
|
-
}
|
52
|
-
.btn-navbar .icon-bar + .icon-bar {
|
53
|
-
margin-top: 3px;
|
54
|
-
}
|
55
33
|
// Override the default collapsed state
|
56
34
|
.nav-collapse.collapse {
|
57
35
|
height: auto;
|
@@ -69,24 +47,33 @@
|
|
69
47
|
.brand {
|
70
48
|
float: left;
|
71
49
|
display: block;
|
72
|
-
|
50
|
+
// Vertically center the text given $navbarHeight
|
51
|
+
$elementHeight: 20px;
|
52
|
+
padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
|
73
53
|
margin-left: -20px; // negative indent to left-align the text down the page
|
74
54
|
font-size: 20px;
|
75
55
|
font-weight: 200;
|
76
56
|
line-height: 1;
|
77
|
-
color: $
|
57
|
+
color: $navbarBrandColor;
|
78
58
|
}
|
79
59
|
// Plain text in topbar
|
80
60
|
.navbar-text {
|
81
61
|
margin-bottom: 0;
|
82
62
|
line-height: $navbarHeight;
|
83
63
|
}
|
64
|
+
// Janky solution for now to account for links outside the .nav
|
65
|
+
.navbar-link {
|
66
|
+
color: $navbarLinkColor;
|
67
|
+
&:hover {
|
68
|
+
color: $navbarLinkColorHover;
|
69
|
+
}
|
70
|
+
}
|
84
71
|
// Buttons in navbar
|
85
72
|
.btn, .btn-group {
|
86
73
|
@include navbarVerticalAlign(30px); // Vertically center in navbar
|
87
74
|
}
|
88
75
|
.btn-group .btn {
|
89
|
-
margin
|
76
|
+
margin: 0; // then undo the margin here so we don't accidentally double it
|
90
77
|
}
|
91
78
|
}
|
92
79
|
|
@@ -125,8 +112,7 @@
|
|
125
112
|
color: $white;
|
126
113
|
background-color: $navbarSearchBackground;
|
127
114
|
border: 1px solid $navbarSearchBorder;
|
128
|
-
|
129
|
-
@include box-shadow($shadow);
|
115
|
+
@include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)});
|
130
116
|
@include transition(none);
|
131
117
|
|
132
118
|
// Placeholder text gets special styles; can't be a grouped selector
|
@@ -198,12 +184,29 @@
|
|
198
184
|
// Links
|
199
185
|
.navbar .nav > li > a {
|
200
186
|
float: none;
|
201
|
-
|
187
|
+
// Vertically center the text given $navbarHeight
|
188
|
+
$elementHeight: 20px;
|
189
|
+
padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
|
202
190
|
line-height: 19px;
|
203
191
|
color: $navbarLinkColor;
|
204
192
|
text-decoration: none;
|
205
193
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
206
194
|
}
|
195
|
+
// Buttons
|
196
|
+
.navbar .btn {
|
197
|
+
display: inline-block;
|
198
|
+
padding: 4px 10px 4px;
|
199
|
+
// Vertically center the button given $navbarHeight
|
200
|
+
$elementHeight: 20px;
|
201
|
+
margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
|
202
|
+
line-height: $baseLineHeight;
|
203
|
+
}
|
204
|
+
.navbar .btn-group {
|
205
|
+
margin: 0;
|
206
|
+
// Vertically center the button given @navbarHeight
|
207
|
+
$elementHeight: 28px;
|
208
|
+
padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
|
209
|
+
}
|
207
210
|
// Hover
|
208
211
|
.navbar .nav > li > a:hover {
|
209
212
|
background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from :active
|
@@ -234,22 +237,40 @@
|
|
234
237
|
margin-right: 0;
|
235
238
|
}
|
236
239
|
|
237
|
-
|
240
|
+
// Navbar button for toggling navbar items in responsive layouts
|
241
|
+
// These definitions need to come after '.navbar .btn'
|
242
|
+
.navbar .btn-navbar {
|
243
|
+
display: none;
|
244
|
+
float: right;
|
245
|
+
padding: 7px 10px;
|
246
|
+
margin-left: 5px;
|
247
|
+
margin-right: 5px;
|
248
|
+
@include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
|
249
|
+
@include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
|
250
|
+
}
|
251
|
+
.navbar .btn-navbar .icon-bar {
|
252
|
+
display: block;
|
253
|
+
width: 18px;
|
254
|
+
height: 2px;
|
255
|
+
background-color: #f5f5f5;
|
256
|
+
@include border-radius(1px);
|
257
|
+
@include box-shadow(0 1px 0 rgba(0,0,0,.25));
|
258
|
+
}
|
259
|
+
.btn-navbar .icon-bar + .icon-bar {
|
260
|
+
margin-top: 3px;
|
261
|
+
}
|
238
262
|
|
239
263
|
// Dropdown menus
|
240
264
|
// --------------
|
241
265
|
|
242
266
|
// Menu position and menu carets
|
243
267
|
.navbar .dropdown-menu {
|
244
|
-
margin-top: 1px;
|
245
|
-
@include border-radius(4px);
|
246
268
|
&:before {
|
247
269
|
content: '';
|
248
270
|
display: inline-block;
|
249
271
|
border-left: 7px solid transparent;
|
250
272
|
border-right: 7px solid transparent;
|
251
|
-
border-bottom: 7px solid
|
252
|
-
border-bottom-color: $dropdownBackground;
|
273
|
+
border-bottom: 7px solid $dropdownBorder;
|
253
274
|
position: absolute;
|
254
275
|
top: -7px;
|
255
276
|
left: 9px;
|
@@ -284,27 +305,27 @@
|
|
284
305
|
}
|
285
306
|
|
286
307
|
// Dropdown toggle caret
|
287
|
-
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open
|
308
|
+
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
|
288
309
|
border-top-color: $white;
|
289
310
|
border-bottom-color: $white;
|
290
311
|
}
|
291
|
-
.navbar .nav .active .caret {
|
312
|
+
.navbar .nav li.dropdown.active .caret {
|
292
313
|
@include opacity(1);
|
293
314
|
}
|
294
315
|
|
295
316
|
// Remove background color from open dropdown
|
296
|
-
.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
|
317
|
+
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
297
318
|
background-color: transparent;
|
298
319
|
}
|
299
320
|
|
300
321
|
// Dropdown link on hover
|
301
|
-
.navbar .nav .active > .dropdown-toggle:hover {
|
322
|
+
.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
|
302
323
|
color: $white;
|
303
324
|
}
|
304
325
|
|
305
326
|
// Right aligned menus need alt position
|
306
327
|
// TODO: rejigger this at some point to simplify the selectors
|
307
|
-
.navbar .
|
328
|
+
.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
|
308
329
|
left: auto;
|
309
330
|
right: 0;
|
310
331
|
&:before {
|