bootstrap-sass 2.0.2 → 2.0.3
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.
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 {
|