diff options
Diffstat (limited to 'assets/stylesheets/bootstrap')
-rw-r--r-- | assets/stylesheets/bootstrap/_navbar.scss | 70 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/_variables.scss | 8 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_grid-framework.scss | 27 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_grid.scss | 13 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_hover.scss | 19 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_tab-focus.scss | 6 | ||||
-rw-r--r-- | assets/stylesheets/bootstrap/utilities/_flex.scss | 1 |
7 files changed, 104 insertions, 40 deletions
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 6c4e9ef..8d8352c 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -117,28 +117,6 @@ } } -// scss-lint:disable ImportantRule -// Custom override for -.navbar-toggleable { - &-xs { - @include media-breakpoint-up(sm) { - display: block !important; - } - } - &-sm { - @include media-breakpoint-up(md) { - display: block !important; - } - } - &-md { - @include media-breakpoint-up(lg) { - display: block !important; - } - } -} -// scss-lint:enable ImportantRule - - // Navigation // // Custom navbar navigation built on the base `.nav` styles. @@ -230,3 +208,51 @@ background-color: rgba(255,255,255,.075); } } + + +// Navbar toggleable +// +// Custom override for collapse plugin in navbar. + +// scss-lint:disable ImportantRule +.navbar-toggleable { + &-xs { + @include clearfix; + @include media-breakpoint-down(xs) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(sm) { + display: block !important; + } + } + + &-sm { + @include clearfix; + @include media-breakpoint-down(sm) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(md) { + display: block !important; + } + } + + &-md { + @include clearfix; + @include media-breakpoint-down(md) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(lg) { + display: block !important; + } + } +} +// scss-lint:enable ImportantRule diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index d129f9f..da9f5ef 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -21,7 +21,11 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num != null and $prev-num >= $num { + @if $prev-num == null { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; } $prev-key: $key; @@ -154,7 +158,7 @@ $grid-gutter-width: 30px !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index cb25be9..efe923a 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -4,10 +4,33 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + + // Common properties for all breakpoints + %grid-column { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + @if $enable-flex { + width: 100%; + } + } + $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } + } + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns @if $enable-flex { .col-#{$breakpoint} { position: relative; @@ -15,8 +38,8 @@ flex-grow: 1; max-width: 100%; min-height: 1px; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 3ba4f43..87f1122 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -33,12 +33,21 @@ margin-right: ($gutter / -2); } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; - min-height: 1px; + min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); padding-left: ($gutter / 2); + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + @if $enable-flex { + width: 100%; + } +} + +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss index 3a11254..4a648a5 100644 --- a/assets/stylesheets/bootstrap/mixins/_hover.scss +++ b/assets/stylesheets/bootstrap/mixins/_hover.scss @@ -1,14 +1,15 @@ @mixin hover { - @if $enable-hover-media-query { - // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover - // Currently shimmed by https://github.com/twbs/mq4-hover-shim - @media (hover: hover) { - &:hover { @content } - } - } - @else { + // TODO: re-enable along with mq4-hover-shim +// @if $enable-hover-media-query { +// // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover +// // Currently shimmed by https://github.com/twbs/mq4-hover-shim +// @media (hover: hover) { +// &:hover { @content } +// } +// } +// @else { &:hover { @content } - } +// } } @mixin hover-focus { diff --git a/assets/stylesheets/bootstrap/mixins/_tab-focus.scss b/assets/stylesheets/bootstrap/mixins/_tab-focus.scss index 7df0ae7..f16ed64 100644 --- a/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +++ b/assets/stylesheets/bootstrap/mixins/_tab-focus.scss @@ -1,9 +1,9 @@ // WebKit-style focus @mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } diff --git a/assets/stylesheets/bootstrap/utilities/_flex.scss b/assets/stylesheets/bootstrap/utilities/_flex.scss index a61135c..502885a 100644 --- a/assets/stylesheets/bootstrap/utilities/_flex.scss +++ b/assets/stylesheets/bootstrap/utilities/_flex.scss @@ -8,6 +8,7 @@ @include media-breakpoint-up($breakpoint) { .flex-#{$breakpoint}-first { order: -1; } .flex-#{$breakpoint}-last { order: 1; } + .flex-#{$breakpoint}-unordered { order: 0; } } // Alignment for every item |