diff options
author | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
---|---|---|
committer | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
commit | f82164992580fca0c3e3dde7d6d097784a514e5b (patch) | |
tree | bb3ff36c326d696623203563a53cab5982970ad8 /assets/stylesheets | |
parent | 023043a2da9098e7b8521a2ac62b7b5a470c40d9 (diff) |
rake update[v4.0.0-alpha.6]
Diffstat (limited to 'assets/stylesheets')
66 files changed, 1518 insertions, 1809 deletions
diff --git a/assets/stylesheets/_bootstrap-flex.scss b/assets/stylesheets/_bootstrap-flex.scss deleted file mode 100644 index 60dd03a..0000000 --- a/assets/stylesheets/_bootstrap-flex.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Bootstrap with Flexbox enabled -// -// Includes all the imports from the standard Bootstrap project, but enables -// the flexbox variable. - -$enable-flex: true; - -@import "bootstrap"; diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index b132ee0..4c57cc6 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -1,14 +1,32 @@ // Bootstrap Grid only // -// Includes relevant variables and mixins for the regular (non-flexbox) grid -// system, as well as the generated predefined classes (e.g., `.col-4-sm`). +// Includes relevant variables and mixins for the flexbox grid +// system, as well as the generated predefined classes (e.g., `.col-sm-4`). + +// +// Box sizing, responsive, and more +// + +@at-root { + @-ms-viewport { width: device-width; } +} + +html { + box-sizing: border-box; + -ms-overflow-style: scrollbar; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} // // Variables // -@import "bootstrap/custom"; @import "bootstrap/variables"; // @@ -20,4 +38,6 @@ @import "bootstrap/mixins/grid-framework"; @import "bootstrap/mixins/grid"; +@import "bootstrap/custom"; + @import "bootstrap/grid"; diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss index cbba413..2c8a185 100644 --- a/assets/stylesheets/_bootstrap-reboot.scss +++ b/assets/stylesheets/_bootstrap-reboot.scss @@ -2,10 +2,9 @@ // // Includes only Normalize and our custom Reboot reset. -@import "bootstrap/custom"; @import "bootstrap/variables"; -@import "bootstrap/mixins/hover"; -@import "bootstrap/mixins/tab-focus"; +@import "bootstrap/mixins"; +@import "bootstrap/custom"; @import "bootstrap/normalize"; @import "bootstrap/reboot"; diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index b17b05c..2abc609 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,14 +1,14 @@ /*! - * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com) - * Copyright 2011-2016 The Bootstrap Authors - * Copyright 2011-2016 Twitter, Inc. + * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) + * Copyright 2011-2017 The Bootstrap Authors + * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins -@import "bootstrap/custom"; @import "bootstrap/variables"; @import "bootstrap/mixins"; +@import "bootstrap/custom"; // Reset and dependencies @import "bootstrap/normalize"; @@ -25,7 +25,7 @@ @import "bootstrap/buttons"; // Components -@import "bootstrap/animation"; +@import "bootstrap/transitions"; @import "bootstrap/dropdown"; @import "bootstrap/button-group"; @import "bootstrap/input-group"; @@ -35,7 +35,7 @@ @import "bootstrap/card"; @import "bootstrap/breadcrumb"; @import "bootstrap/pagination"; -@import "bootstrap/tags"; +@import "bootstrap/badge"; @import "bootstrap/jumbotron"; @import "bootstrap/alert"; @import "bootstrap/progress"; diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss index 260ce20..d9b4e9b 100644 --- a/assets/stylesheets/bootstrap/_alert.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -4,7 +4,7 @@ .alert { padding: $alert-padding-y $alert-padding-x; - margin-bottom: $spacer-y; + margin-bottom: $alert-margin-bottom; border: $alert-border-width solid transparent; @include border-radius($alert-border-radius); } @@ -26,13 +26,12 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding-x * 2); - // Adjust close link position .close { position: relative; - top: -.125rem; + top: -$alert-padding-y; right: -$alert-padding-x; + padding: $alert-padding-y $alert-padding-x; color: inherit; } } diff --git a/assets/stylesheets/bootstrap/_badge.scss b/assets/stylesheets/bootstrap/_badge.scss new file mode 100644 index 0000000..e5a3298 --- /dev/null +++ b/assets/stylesheets/bootstrap/_badge.scss @@ -0,0 +1,77 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + color: $badge-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius(); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// scss-lint:disable QualifyingElement +// Add hover effects, but only for links +a.badge { + @include hover-focus { + color: $badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} +// scss-lint:enable QualifyingElement + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +.badge-default { + @include badge-variant($badge-default-bg); +} + +.badge-primary { + @include badge-variant($badge-primary-bg); +} + +.badge-success { + @include badge-variant($badge-success-bg); +} + +.badge-info { + @include badge-variant($badge-info-bg); +} + +.badge-warning { + @include badge-variant($badge-warning-bg); +} + +.badge-danger { + @include badge-variant($badge-danger-bg); +} diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index 0e63ecc..584ed15 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -4,28 +4,26 @@ .btn-group, .btn-group-vertical { position: relative; - display: inline-block; + display: inline-flex; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; - float: left; - margin-bottom: 0; + flex: 0 1 auto; - // Bring the "active" button to the front + // Bring the hover, focused, and "active" buttons to the fron to overlay + // the borders properly + @include hover { + z-index: 2; + } &:focus, &:active, &.active { z-index: 2; } - @include hover { - z-index: 2; - } } -} -// Prevent double borders when buttons are next to each other -.btn-group { + // Prevent double borders when buttons are next to each other .btn + .btn, .btn + .btn-group, .btn-group + .btn, @@ -36,18 +34,11 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-left: -$btn-toolbar-margin; // Offset the first child's margin - @include clearfix(); + display: flex; + justify-content: flex-start; - .btn-group, .input-group { - float: left; - } - - > .btn, - > .btn-group, - > .input-group { - margin-left: $btn-toolbar-margin; + width: auto; } } @@ -137,43 +128,19 @@ } -// Reposition the caret -.btn .caret { - margin-left: 0; -} -// Carets in other button sizes -.btn-lg .caret { - border-width: $caret-width-lg $caret-width-lg 0; - border-bottom-width: 0; -} -// Upside down carets for .dropup -.dropup .btn-lg .caret { - border-width: 0 $caret-width-lg $caret-width-lg; -} - - - // // Vertical button groups // .btn-group-vertical { - > .btn, - > .btn-group, - > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - } + display: inline-flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; - // Clear floats so dropdown menus can be properly placed - > .btn-group { - @include clearfix(); - - > .btn { - float: none; - } + .btn, + .btn-group { + width: 100%; } > .btn + .btn, diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index 119cf1c..e36ff0f 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -11,41 +11,34 @@ text-align: center; white-space: nowrap; vertical-align: middle; - cursor: pointer; user-select: none; border: $input-btn-border-width solid transparent; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); - @include transition(all .2s ease-in-out); - - &, - &:active, - &.active { - &:focus, - &.focus { - @include tab-focus(); - } - } + @include transition($btn-transition); + // Share hover and focus styles @include hover-focus { text-decoration: none; } + &:focus, &.focus { - text-decoration: none; - } - - &:active, - &.active { - background-image: none; outline: 0; - @include box-shadow($btn-active-box-shadow); + box-shadow: $btn-focus-box-shadow; } + // Disabled comes first so active can properly restyle &.disabled, &:disabled { cursor: $cursor-disabled; opacity: .65; @include box-shadow(none); } + + &:active, + &.active { + background-image: none; + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } } // Future-proof disabling of clicks on `<a>` elements @@ -105,7 +98,7 @@ fieldset[disabled] a.btn { // Make a button look and behave like a link .btn-link { - font-weight: normal; + font-weight: $font-weight-normal; color: $link-color; border-radius: 0; @@ -130,8 +123,9 @@ fieldset[disabled] a.btn { background-color: transparent; } &:disabled { + color: $btn-link-disabled-color; + @include hover-focus { - color: $btn-link-disabled-color; text-decoration: none; } } diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 01a5733..9fe70e8 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -4,16 +4,17 @@ .card { position: relative; - display: block; - margin-bottom: $card-spacer-y; + display: flex; + flex-direction: column; background-color: $card-bg; - // border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); } .card-block { - @include clearfix; + // Enable `flex-grow: 1` for decks and groups so that card blocks take up + // as much space as possible, ensuring footers are aligned to the bottom. + flex: 1 1 auto; padding: $card-spacer-x; } @@ -30,14 +31,6 @@ margin-bottom: 0; } -// .card-actions { -// padding: $card-spacer-y $card-spacer-x; - -// .card-link + .card-link { -// margin-left: $card-spacer-x; -// } -// } - .card-link { @include hover { text-decoration: none; @@ -68,7 +61,6 @@ // .card-header { - @include clearfix; padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of <hN> background-color: $card-cap-bg; @@ -80,7 +72,6 @@ } .card-footer { - @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -191,77 +182,39 @@ } -// Card set -// -// Heads up! We do some funky style resetting here for margins across our two -// variations (one flex, one table). Individual cards have margin-bottom by -// default, but they're ignored due to table styles. For a consistent design, -// we've done the same to the flex variation. -// -// Those changes are noted by `// Margin balancing`. +// Card deck -@if $enable-flex { - @include media-breakpoint-up(sm) { - .card-deck { +@include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + + .card { display: flex; - flex-flow: row wrap; - margin-right: -$card-deck-margin; - margin-bottom: $card-spacer-y; // Margin balancing - margin-left: -$card-deck-margin; - - .card { - flex: 1 0 0; - margin-right: $card-deck-margin; - margin-bottom: 0; // Margin balancing - margin-left: $card-deck-margin; - } - } - } -} @else { - @include media-breakpoint-up(sm) { - $space-between-cards: (2 * $card-deck-margin); - .card-deck { - display: table; - width: 100%; - margin-bottom: $card-spacer-y; // Margin balancing - table-layout: fixed; - border-spacing: $space-between-cards 0; - - .card { - display: table-cell; - margin-bottom: 0; // Margin balancing - vertical-align: top; - } - } - .card-deck-wrapper { - margin-right: (-$space-between-cards); - margin-left: (-$space-between-cards); + flex: 1 0 0; + flex-direction: column; + + // Selectively apply horizontal margins to cards to avoid doing the + // negative margin dance like our grid. This differs from the grid + // due to the use of margins as gutters instead of padding. + &:not(:first-child) { margin-left: $card-deck-margin; } + &:not(:last-child) { margin-right: $card-deck-margin; } } } } + // // Card groups // @include media-breakpoint-up(sm) { .card-group { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - } @else { - display: table; - width: 100%; - table-layout: fixed; - } + display: flex; + flex-flow: row wrap; .card { - @if $enable-flex { - flex: 1 0 0; - } @else { - display: table-cell; - vertical-align: top; - } + flex: 1 0 0; + .card { margin-left: 0; @@ -306,17 +259,18 @@ // -// Card +// Columns // @include media-breakpoint-up(sm) { .card-columns { - column-count: 3; - column-gap: $card-columns-sm-up-column-gap; + column-count: $card-columns-count; + column-gap: $card-columns-gap; .card { display: inline-block; // Don't let them vertically span multiple columns - width: 100%; // Don't let them exceed the column width + width: 100%; // Don't let their width change + margin-bottom: $card-columns-margin; } } } diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index 9386983..54478e4 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -7,77 +7,47 @@ position: relative; width: 100%; overflow: hidden; +} - > .carousel-item { - position: relative; - display: none; - transition: .6s ease-in-out left; - - // Account for jankitude on images - > img, - > a > img { - @extend .img-fluid; - line-height: 1; - } +.carousel-item { + position: relative; + display: none; + width: 100%; - // WebKit CSS3 transforms for supported devices - @media all and (transform-3d), (-webkit-transform-3d) { - transition: transform .6s ease-in-out; - backface-visibility: hidden; - perspective: 1000px; - - &.next, - &.active.right { - left: 0; - transform: translate3d(100%, 0, 0); - } - &.prev, - &.active.left { - left: 0; - transform: translate3d(-100%, 0, 0); - } - &.next.left, - &.prev.right, - &.active { - left: 0; - transform: translate3d(0, 0, 0); - } - } + @include if-supports-3d-transforms() { + @include transition($carousel-transition); + backface-visibility: hidden; + perspective: 1000px; } +} - > .active, - > .next, - > .prev { - display: block; - } +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: flex; +} - > .active { - left: 0; - } +.carousel-item-next, +.carousel-item-prev { + position: absolute; + top: 0; +} - > .next, - > .prev { - position: absolute; - top: 0; - width: 100%; +// CSS3 transforms when supported by the browser +@include if-supports-3d-transforms() { + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); } - > .next { - left: 100%; - } - > .prev { - left: -100%; - } - > .next.left, - > .prev.right { - left: 0; + .carousel-item-next, + .active.carousel-item-right { + transform: translate3d(100%, 0, 0); } - > .active.left { - left: -100%; - } - > .active.right { - left: 100%; + .carousel-item-prev, + .active.carousel-item-left { + transform: translate3d(-100%, 0, 0); } } @@ -86,30 +56,22 @@ // Left/right controls for nav // -.carousel-control { +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; - left: 0; + // Use flex for alignment (1-3) + display: flex; // 1. allow flex styles + align-items: center; // 2. vertically center contents + justify-content: center; // 3. horizontally center contents width: $carousel-control-width; - font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; - text-shadow: $carousel-text-shadow; opacity: $carousel-control-opacity; - // We can't have this transition here because WebKit cancels the carousel + // We can't have a transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. - // Set gradients for backgrounds - &.left { - @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); - } - &.right { - right: 0; - left: auto; - @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); - } - // Hover/focus state @include hover-focus { color: $carousel-control-color; @@ -117,79 +79,83 @@ outline: 0; opacity: .9; } +} +.carousel-control-prev { + left: 0; +} +.carousel-control-next { + right: 0; +} - // Toggles - .icon-prev, - .icon-next { - position: absolute; - top: 50%; - z-index: 5; - display: inline-block; - width: $carousel-icon-width; - height: $carousel-icon-width; - margin-top: -($carousel-icon-width / 2); - font-family: serif; - line-height: 1; - } - .icon-prev { - left: 50%; - margin-left: -($carousel-icon-width / 2); - } - .icon-next { - right: 50%; - margin-right: -($carousel-icon-width / 2); - } - - .icon-prev { - &::before { - content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) - } - } - .icon-next { - &::before { - content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) - } - } +// Icons for within +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: $carousel-control-icon-width; + height: $carousel-control-icon-width; + background: transparent no-repeat center center; + background-size: 100% 100%; +} +.carousel-control-prev-icon { + background-image: $carousel-control-prev-icon-bg; +} +.carousel-control-next-icon { + background-image: $carousel-control-next-icon-bg; } // Optional indicator pips // -// Add an unordered list with the following class and add a list item for each +// Add an ordered list with the following class and add a list item for each // slide your carousel holds. .carousel-indicators { position: absolute; + right: 0; bottom: 10px; - left: 50%; + left: 0; z-index: 15; - width: $carousel-indicators-width; - padding-left: 0; - margin-left: -($carousel-indicators-width / 2); - text-align: center; + display: flex; + justify-content: center; + padding-left: 0; // override <ol> default + // Use the .carousel-control's width as margin so we don't overlay those + margin-right: $carousel-control-width; + margin-left: $carousel-control-width; list-style: none; li { - display: inline-block; - width: $carousel-indicator-size; - height: $carousel-indicator-size; - margin: 1px; + position: relative; + flex: 1 0 auto; + max-width: $carousel-indicator-width; + height: $carousel-indicator-height; + margin-right: $carousel-indicator-spacer; + margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - // IE9 hack for event handling - // - // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`, - // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent. - // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer - background-color: rgba(0,0,0,0); // IE9 - border: 1px solid $carousel-indicator-border-color; - border-radius: $carousel-indicator-size; + background-color: rgba($carousel-indicator-active-bg, .5); + + // Use pseudo classes to increase the hit area by 10px on top and bottom. + &::before { + position: absolute; + top: -10px; + left: 0; + display: inline-block; + width: 100%; + height: 10px; + content: ""; + } + &::after { + position: absolute; + bottom: -10px; + left: 0; + display: inline-block; + width: 100%; + height: 10px; + content: ""; + } } .active { - width: $carousel-indicator-active-size; - height: $carousel-indicator-active-size; - margin: 0; background-color: $carousel-indicator-active-bg; } } @@ -197,7 +163,7 @@ // Optional captions // -// Hidden by default for smaller viewports. +// .carousel-caption { position: absolute; @@ -209,45 +175,4 @@ padding-bottom: 20px; color: $carousel-caption-color; text-align: center; - text-shadow: $carousel-text-shadow; - - .btn { - text-shadow: none; // No shadow for button elements in carousel-caption - } -} - - -// -// Responsive variations -// - -@include media-breakpoint-up(sm) { - // Scale up the controls a smidge - .carousel-control { - .icon-prev, - .icon-next { - width: $carousel-control-sm-up-size; - height: $carousel-control-sm-up-size; - margin-top: -($carousel-control-sm-up-size / 2); - font-size: $carousel-control-sm-up-size; - } - .icon-prev { - margin-left: -($carousel-control-sm-up-size / 2); - } - .icon-next { - margin-right: -($carousel-control-sm-up-size / 2); - } - } - - // Show and left align the captions - .carousel-caption { - right: ((100% - $carousel-caption-sm-up-width) / 2); - left: ((100% - $carousel-caption-sm-up-width) / 2); - padding-bottom: 30px; - } - - // Move up the indicators - .carousel-indicators { - bottom: 20px; - } } diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss index f98d4c1..859990e 100644 --- a/assets/stylesheets/bootstrap/_close.scss +++ b/assets/stylesheets/bootstrap/_close.scss @@ -1,17 +1,17 @@ .close { float: right; - font-size: ($font-size-base * 1.5); + font-size: $close-font-size; font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - opacity: .2; + opacity: .5; @include hover-focus { color: $close-color; text-decoration: none; cursor: pointer; - opacity: .5; + opacity: .75; } } diff --git a/assets/stylesheets/bootstrap/_code.scss b/assets/stylesheets/bootstrap/_code.scss index ea660bc..759da15 100644 --- a/assets/stylesheets/bootstrap/_code.scss +++ b/assets/stylesheets/bootstrap/_code.scss @@ -13,6 +13,13 @@ code { color: $code-color; background-color: $code-bg; @include border-radius($border-radius); + + // Streamline the style when inside anchors to avoid broken underline and more + a > & { + padding: 0; + color: inherit; + background-color: inherit; + } } // User input typically entered via keyboard diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index e74f5c7..ef2aab3 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -11,13 +11,11 @@ .custom-control { position: relative; - display: inline-block; + display: inline-flex; + min-height: (1rem * $line-height-base); padding-left: $custom-control-gutter; + margin-right: $custom-control-spacer-x; cursor: pointer; - - + .custom-control { - margin-left: $custom-control-spacer-x; - } } .custom-control-input { @@ -61,7 +59,7 @@ .custom-control-indicator { position: absolute; - top: .25rem; + top: (($line-height-base - $custom-control-indicator-size) / 2); left: 0; display: block; width: $custom-control-indicator-size; @@ -116,9 +114,11 @@ // set. Use these optional classes to tweak the layout. .custom-controls-stacked { + display: flex; + flex-direction: column; + .custom-control { - float: left; - clear: left; + margin-bottom: $custom-control-spacer-y; + .custom-control { margin-left: 0; @@ -132,19 +132,17 @@ // Replaces the browser default select with a custom one, mostly pulled from // http://primercss.io. // -// Includes IE9-specific hacks (noted by ` \9`). .custom-select { display: inline-block; max-width: 100%; $select-border-width: ($border-width * 2); - height: calc(#{$input-height} - #{$select-border-width}); + height: calc(#{$input-height} + #{$select-border-width}); padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; - padding-right: $custom-select-padding-x \9; + line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-image: none \9; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius); @@ -201,12 +199,14 @@ display: inline-block; max-width: 100%; height: $custom-file-height; + margin-bottom: 0; cursor: pointer; } .custom-file-input { min-width: $custom-file-width; max-width: 100%; + height: $custom-file-height; margin: 0; filter: alpha(opacity = 0); opacity: 0; @@ -226,6 +226,7 @@ padding: $custom-file-padding-x $custom-file-padding-y; line-height: $custom-file-line-height; color: $custom-file-color; + pointer-events: none; user-select: none; background-color: $custom-file-bg; border: $custom-file-border-width solid $custom-file-border-color; diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index 47702e7..1c2741a 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -44,7 +44,7 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-margin-top 0 0; // override default ul - font-size: $font-size-base; + font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues color: $body-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; @@ -68,7 +68,7 @@ width: 100%; // For `<button>`s padding: 3px $dropdown-item-padding-x; clear: both; - font-weight: normal; + font-weight: $font-weight-normal; color: $dropdown-link-color; text-align: inherit; // For `<button>`s white-space: nowrap; // prevent links from randomly breaking onto new lines @@ -81,37 +81,27 @@ background-color: $dropdown-link-hover-bg; } - // Active state - &.active { - @include plain-hover-focus { - color: $dropdown-link-active-color; - text-decoration: none; - background-color: $dropdown-link-active-bg; - outline: 0; - } + &.active, + &:active { + color: $dropdown-link-active-color; + text-decoration: none; + background-color: $dropdown-link-active-bg; } - // Disabled state - // - // Gray out text and ensure the hover/focus state remains gray - &.disabled { - @include plain-hover-focus { - color: $dropdown-link-disabled-color; - } - - // Nuke hover/focus effects - @include hover-focus { - text-decoration: none; - cursor: $cursor-disabled; - background-color: transparent; - background-image: none; // Remove CSS gradient - @include reset-filter(); + &.disabled, + &:disabled { + color: $dropdown-link-disabled-color; + cursor: $cursor-disabled; + background-color: transparent; + // Remove CSS gradients if they're enabled + @if $enable-gradients { + background-image: none; } } } // Open state for the dropdown -.open { +.show { // Show the menu > .dropdown-menu { display: block; @@ -160,17 +150,8 @@ // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set. -// TODO: abstract this so that the navbar fixed styles are not placed here? - -.dropup, -.navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - content: ""; - border-top: 0; - border-bottom: $caret-width solid; - } +.dropup { // Different positioning for bottom up menu .dropdown-menu { top: auto; diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index be19a07..7be62bd 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -29,7 +29,7 @@ } @include box-shadow($input-box-shadow); - @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + @include transition($input-transition); // Unstyle the caret on `<select>`s in IE10+. &::-ms-expand { @@ -67,7 +67,7 @@ select.form-control { &:not([size]):not([multiple]) { $select-border-width: ($border-width * 2); - height: calc(#{$input-height} - #{$select-border-width}); + height: calc(#{$input-height} + #{$select-border-width}); } &:focus::-ms-value { @@ -95,20 +95,20 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. .col-form-label { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); margin-bottom: 0; // Override the `<label>` default } .col-form-label-lg { - padding-top: $input-padding-y-lg; - padding-bottom: $input-padding-y-lg; + padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); font-size: $font-size-lg; } .col-form-label-sm { - padding-top: $input-padding-y-sm; - padding-bottom: $input-padding-y-sm; + padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); font-size: $font-size-sm; } @@ -135,9 +135,10 @@ select.form-control { .form-control-static { padding-top: $input-padding-y; padding-bottom: $input-padding-y; + margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-line-height; border: solid transparent; - border-width: 1px 0; + border-width: $input-btn-border-width 0; &.form-control-sm, &.form-control-lg { @@ -191,7 +192,7 @@ select.form-control-lg { .form-text { display: block; - margin-top: ($spacer * .25); + margin-top: $form-text-margin-top; } @@ -202,12 +203,7 @@ select.form-control-lg { .form-check { position: relative; display: block; - margin-bottom: ($spacer * .75); - - // Move up sibling radios or checkboxes for tighter spacing - + .form-check { - margin-top: -.25rem; - } + margin-bottom: $form-check-margin-bottom; &.disabled { .form-check-label { @@ -218,15 +214,15 @@ select.form-control-lg { } .form-check-label { - padding-left: 1.25rem; + padding-left: $form-check-input-gutter; margin-bottom: 0; // Override default `<label>` bottom margin cursor: pointer; } .form-check-input { position: absolute; - margin-top: .25rem; - margin-left: -1.25rem; + margin-top: $form-check-input-margin-y; + margin-left: -$form-check-input-gutter; &:only-child { position: static; @@ -235,20 +231,14 @@ select.form-control-lg { // Radios and checkboxes on same line .form-check-inline { - position: relative; display: inline-block; - padding-left: 1.25rem; - margin-bottom: 0; // Override default `<label>` bottom margin - vertical-align: middle; - cursor: pointer; - + .form-check-inline { - margin-left: .75rem; + .form-check-label { + vertical-align: middle; } - &.disabled { - color: $text-muted; - cursor: $cursor-disabled; + + .form-check-inline { + margin-left: $form-check-inline-margin-x; } } @@ -258,7 +248,7 @@ select.form-control-lg { // Apply contextual and semantic states to individual form controls. .form-control-feedback { - margin-top: ($spacer * .25); + margin-top: $form-feedback-margin-top; } .form-control-success, @@ -306,14 +296,33 @@ select.form-control-lg { // default HTML form controls and our custom form controls (e.g., input groups). .form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) + + // Because we use flex, the initial sizing of checkboxes is collapsed and + // doesn't occupy the full-width (which is what we want for xs grid tier), + // so we force that here. + .form-check { + width: 100%; + } // Kick in the inline @include media-breakpoint-up(sm) { + label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + // Inline-block all the things for "inline" .form-group { - display: inline-block; + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; margin-bottom: 0; - vertical-align: middle; } // Allow folks to *not* use `.form-group` @@ -329,20 +338,7 @@ select.form-control-lg { } .input-group { - display: inline-table; width: auto; - vertical-align: middle; - - .input-group-addon, - .input-group-btn, - .form-control { - width: auto; - } - } - - // Input groups need that 100% width though - .input-group > .form-control { - width: 100%; } .form-control-label { @@ -353,19 +349,37 @@ select.form-control-lg { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. .form-check { - display: inline-block; + display: flex; + align-items: center; + justify-content: center; + width: auto; margin-top: 0; margin-bottom: 0; - vertical-align: middle; } .form-check-label { padding-left: 0; } .form-check-input { position: relative; + margin-top: 0; + margin-right: $form-check-input-margin-x; margin-left: 0; } + // Custom form controls + .custom-control { + display: flex; + align-items: center; + justify-content: center; + padding-left: 0; + } + .custom-control-indicator { + position: static; + display: inline-block; + margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate. + vertical-align: text-bottom; + } + // Re-override the feedback icon. .has-feedback .form-control-feedback { top: 0; diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss index 24cf74d..8c7a9ee 100644 --- a/assets/stylesheets/bootstrap/_grid.scss +++ b/assets/stylesheets/bootstrap/_grid.scss @@ -28,6 +28,19 @@ .row { @include make-row(); } + + // Remove the negative margin from default .row, then the horizontal padding + // from all immediate children columns (to prevent runaway style inheritance). + .no-gutters { + margin-right: 0; + margin-left: 0; + + > .col, + > [class*="col-"] { + padding-right: 0; + padding-left: 0; + } + } } // Columns diff --git a/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss index 3cdedc4..a8135a6 100644 --- a/assets/stylesheets/bootstrap/_images.scss +++ b/assets/stylesheets/bootstrap/_images.scss @@ -16,7 +16,7 @@ background-color: $thumbnail-bg; border: $thumbnail-border-width solid $thumbnail-border-color; @include border-radius($thumbnail-border-radius); - transition: all .2s ease-in-out; + @include transition($thumbnail-transition); @include box-shadow($thumbnail-box-shadow); // Keep them at most 100% wide @@ -39,5 +39,5 @@ .figure-caption { font-size: $figure-caption-font-size; - color: $gray-light; + color: $figure-caption-color; } diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss index b447a32..ab44883 100644 --- a/assets/stylesheets/bootstrap/_input-group.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -4,45 +4,34 @@ .input-group { position: relative; + display: flex; width: 100%; - @if $enable-flex { - display: flex; - } @else { - display: table; - // Prevent input groups from inheriting border styles from table cells when - // placed within a table. - border-collapse: separate; - } - .form-control { // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; z-index: 2; + flex: 1 1 auto; + // Add width 1% and flex-basis auto to ensure that button will not wrap out + // the column. Applies to IE Edge+ and Firefox. Chrome does not require this. + width: 1%; + margin-bottom: 0; + // Bring the "active" form control to the front @include hover-focus-active { z-index: 3; } - @if $enable-flex { - flex: 1; - } @else { - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; - width: 100%; - } - margin-bottom: 0; } } .input-group-addon, .input-group-btn, .input-group .form-control { - @if not $enable-flex { - display: table-cell; - } + // Vertically centers the content of the addons within the input group + display: flex; + flex-direction: column; + justify-content: center; &:not(:first-child):not(:last-child) { @include border-radius(0); @@ -51,9 +40,6 @@ .input-group-addon, .input-group-btn { - @if not $enable-flex { - width: 1%; - } white-space: nowrap; vertical-align: middle; // Match the inputs } @@ -83,8 +69,8 @@ .input-group-addon { padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom - font-size: $font-size-base; - font-weight: normal; + font-size: $font-size-base; // Match inputs + font-weight: $font-weight-normal; line-height: $input-line-height; color: $input-color; text-align: center; @@ -158,9 +144,13 @@ // element above the siblings. > .btn { position: relative; + // Vertically stretch the button and center its content + flex: 1; + + .btn { margin-left: (-$input-btn-border-width); } + // Bring the "active" button to the front @include hover-focus-active { z-index: 3; diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 1e0d112..ec813c8 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -3,19 +3,52 @@ // Easily usable on <ul>, <ol>, or <div>. .list-group { + display: flex; + flex-direction: column; + // No need to set list-style: none; since .list-group-item is block level padding-left: 0; // reset padding because ul and ol margin-bottom: 0; } +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. + +.list-group-item-action { + width: 100%; // For `<button>`s (anchors become 100% by default though) + color: $list-group-link-color; + text-align: inherit; // For `<button>`s (anchors inherit) + + .list-group-item-heading { + color: $list-group-link-heading-color; + } + + // Hover state + @include hover-focus { + color: $list-group-link-hover-color; + text-decoration: none; + background-color: $list-group-hover-bg; + } + + &:active { + color: $list-group-link-active-color; + background-color: $list-group-link-active-bg; + } +} + + // Individual list items // // Use on `li`s or `div`s within the `.list-group` parent. .list-group-item { position: relative; - display: block; + display: flex; + flex-flow: row wrap; + align-items: center; padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; @@ -31,71 +64,68 @@ @include border-bottom-radius($list-group-border-radius); } - &.disabled { - @include plain-hover-focus { - color: $list-group-disabled-color; - cursor: $cursor-disabled; - background-color: $list-group-disabled-bg; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: $list-group-disabled-text-color; - } + @include hover-focus { + text-decoration: none; + } + + &.disabled, + &:disabled { + color: $list-group-disabled-color; + cursor: $cursor-disabled; + background-color: $list-group-disabled-bg; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-disabled-text-color; } } + // Include both here for `<a>`s and `<button>`s &.active { - @include plain-hover-focus { - z-index: 2; // Place active items above their siblings for proper border styling - color: $list-group-active-color; - text-decoration: none; // Repeat here because it inherits global a:hover otherwise - background-color: $list-group-active-bg; - border-color: $list-group-active-border; - - // Force color to inherit for custom content - .list-group-item-heading, - .list-group-item-heading > small, - .list-group-item-heading > .small { - color: inherit; - } - .list-group-item-text { - color: $list-group-active-text-color; - } + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading, + .list-group-item-heading > small, + .list-group-item-heading > .small { + color: inherit; + } + + .list-group-item-text { + color: $list-group-active-text-color; } } } + +// Flush list items +// +// Remove borders and border-radius to keep list group items edge-to-edge. Most +// useful within other components (e.g., cards). + .list-group-flush { .list-group-item { border-right: 0; border-left: 0; border-radius: 0; } -} - -// Interactive list items -// -// Use anchor or button elements instead of `li`s or `div`s to create interactive -// list items. Includes an extra `.active` modifier class for selected items. - -.list-group-item-action { - width: 100%; // For `<button>`s (anchors become 100% by default though) - color: $list-group-link-color; - text-align: inherit; // For `<button>`s (anchors inherit) - - .list-group-item-heading { - color: $list-group-link-heading-color; + &:first-child { + .list-group-item:first-child { + border-top: 0; + } } - // Hover state - @include hover-focus { - color: $list-group-link-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + } } } @@ -109,17 +139,3 @@ @include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); - - -// Custom content options -// -// Extra classes for creating well-formatted content within `.list-group-item`s. - -.list-group-item-heading { - margin-top: 0; - margin-bottom: $list-group-item-heading-margin-bottom; -} -.list-group-item-text { - margin-bottom: 0; - line-height: 1.3; -} diff --git a/assets/stylesheets/bootstrap/_media.scss b/assets/stylesheets/bootstrap/_media.scss index d1ebbcd..b573052 100644 --- a/assets/stylesheets/bootstrap/_media.scss +++ b/assets/stylesheets/bootstrap/_media.scss @@ -1,81 +1,8 @@ -@if $enable-flex { - .media { - display: flex; - } - .media-body { - flex: 1; - } - .media-middle { - align-self: center; - } - .media-bottom { - align-self: flex-end; - } -} @else { - .media, - .media-body { - overflow: hidden; - } - .media-body { - width: 10000px; - } - .media-left, - .media-right, - .media-body { - display: table-cell; - vertical-align: top; - } - .media-middle { - vertical-align: middle; - } - .media-bottom { - vertical-align: bottom; - } +.media { + display: flex; + align-items: flex-start; } - -// -// Images/elements as the media anchor -// - -.media-object { - display: block; - - // Fix collapse in webkit from max-width: 100% and display: table-cell. - &.img-thumbnail { - max-width: none; - } -} - - -// -// Alignment -// - -.media-right { - padding-left: $media-alignment-padding-x; -} - -.media-left { - padding-right: $media-alignment-padding-x; -} - - -// -// Headings -// - -.media-heading { - margin-top: 0; - margin-bottom: $media-heading-margin-bottom; -} - - -// -// Media list variation -// - -.media-list { - padding-left: 0; - list-style: none; +.media-body { + flex: 1; } diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index e53ab34..da47382 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_mixins.scss @@ -10,7 +10,11 @@ @mixin transition($transition...) { @if $enable-transitions { - transition: $transition; + @if length($transition) == 0 { + transition: $transition-base; + } @else { + transition: $transition; + } } } @@ -18,16 +22,16 @@ @import "mixins/breakpoints"; @import "mixins/hover"; @import "mixins/image"; -@import "mixins/tag"; -@import "mixins/reset-filter"; +@import "mixins/badge"; @import "mixins/resize"; @import "mixins/screen-reader"; @import "mixins/size"; -@import "mixins/tab-focus"; @import "mixins/reset-text"; @import "mixins/text-emphasis"; @import "mixins/text-hide"; @import "mixins/text-truncate"; +@import "mixins/transforms"; +@import "mixins/visibility"; // // Components @import "mixins/alert"; @@ -38,7 +42,6 @@ @import "mixins/list-group"; @import "mixins/nav-divider"; @import "mixins/forms"; -@import "mixins/progress"; @import "mixins/table-row"; // // Skins diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index c326d56..9d2a867 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -28,10 +28,10 @@ // When fading in the modal, animate it to slide down &.fade .modal-dialog { - transition: transform .3s ease-out; + @include transition($modal-transition); transform: translate(0, -25%); } - &.in .modal-dialog { transform: translate(0, 0); } + &.show .modal-dialog { transform: translate(0, 0); } } .modal-open .modal { overflow-x: hidden; @@ -48,6 +48,8 @@ // Actual modal .modal-content { position: relative; + display: flex; + flex-direction: column; background-color: $modal-content-bg; background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; @@ -64,29 +66,27 @@ right: 0; bottom: 0; left: 0; - z-index: $zindex-modal-bg; + z-index: $zindex-modal-backdrop; background-color: $modal-backdrop-bg; // Fade for backdrop &.fade { opacity: 0; } - &.in { opacity: $modal-backdrop-opacity; } + &.show { opacity: $modal-backdrop-opacity; } } // Modal header // Top section of the modal w/ title and dismiss .modal-header { - padding: $modal-title-padding; + display: flex; + align-items: center; // vertically center it + justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends + padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; - @include clearfix; -} -// Close icon -.modal-header .close { - margin-top: -2px; } // Title text within header .modal-title { - margin: 0; + margin-bottom: 0; line-height: $modal-title-line-height; } @@ -94,15 +94,23 @@ // Where all modal content resides (sibling of .modal-header and .modal-footer) .modal-body { position: relative; + // Enable `flex-grow: 1` so that the body take up as much space as possible + // when should there be a fixed height on `.modal-dialog`. + flex: 1 1 auto; padding: $modal-inner-padding; } // Footer (for actions) .modal-footer { + display: flex; + align-items: center; // vertically center + justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding; - text-align: right; // right align buttons border-top: $modal-footer-border-width solid $modal-footer-border-color; - @include clearfix(); // clear it in case folks use .pull-* classes on buttons + + // Easily place margin between footer elements + > :not(:first-child) { margin-left: .25rem; } + > :not(:last-child) { margin-right: .25rem; } } // Measure scrollbar width for padding body during modal show/hide diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index 640956c..eb316bb 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -4,13 +4,15 @@ // `<nav>`s or `<ul>`s. .nav { + display: flex; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { - display: inline-block; + display: block; + padding: $nav-link-padding; @include hover-focus { text-decoration: none; @@ -19,26 +21,7 @@ // Disabled state lightens text and removes hover/tab effects &.disabled { color: $nav-disabled-link-color; - - @include plain-hover-focus { - color: $nav-disabled-link-hover-color; - cursor: $cursor-disabled; - background-color: $nav-disabled-link-hover-bg; - } - } -} - - -// Nav inline - -.nav-inline { - .nav-item { - display: inline-block; - } - - .nav-item + .nav-item, - .nav-link + .nav-link { - margin-left: $nav-item-inline-spacer; + cursor: $cursor-disabled; } } @@ -49,21 +32,12 @@ .nav-tabs { border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; - @include clearfix(); .nav-item { - float: left; - // Make the list-items overlay the bottom border margin-bottom: -$nav-tabs-border-width; - - + .nav-item { - margin-left: $nav-item-margin; - } } .nav-link { - display: block; - padding: $nav-link-padding; border: $nav-tabs-border-width solid transparent; @include border-top-radius($nav-tabs-border-radius); @@ -72,21 +46,17 @@ } &.disabled { - @include plain-hover-focus { - color: $nav-disabled-link-color; - background-color: transparent; - border-color: transparent; - } + color: $nav-disabled-link-color; + background-color: transparent; + border-color: transparent; } } .nav-link.active, - .nav-item.open .nav-link { - @include plain-hover-focus { - color: $nav-tabs-active-link-hover-color; - background-color: $nav-tabs-active-link-hover-bg; - border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent; - } + .nav-item.show .nav-link { + color: $nav-tabs-active-link-hover-color; + background-color: $nav-tabs-active-link-hover-bg; + border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg; } .dropdown-menu { @@ -103,50 +73,42 @@ // .nav-pills { - @include clearfix(); - - .nav-item { - float: left; - - + .nav-item { - margin-left: $nav-item-margin; - } - } - .nav-link { - display: block; - padding: $nav-link-padding; @include border-radius($nav-pills-border-radius); } .nav-link.active, - .nav-item.open .nav-link { - @include plain-hover-focus { - color: $nav-pills-active-link-color; - cursor: default; - background-color: $nav-pills-active-link-bg; - } + .nav-item.show .nav-link { + color: $nav-pills-active-link-color; + cursor: default; + background-color: $nav-pills-active-link-bg; } } -.nav-stacked { + +// +// Justified variants +// + +.nav-fill { .nav-item { - display: block; - float: none; + flex: 1 1 auto; + text-align: center; + } +} - + .nav-item { - margin-top: $nav-item-margin; - margin-left: 0; - } +.nav-justified { + .nav-item { + flex: 1 1 100%; + text-align: center; } } -// // Tabbable tabs // - // Hide tabbable panes to start, show them when `.active` + .tab-content { > .tab-pane { display: none; diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 7dc2a2b..80beec8 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -1,79 +1,40 @@ -// Wrapper and base class +// Contents +// +// Navbar +// Navbar brand +// Navbar nav +// Navbar text +// Navbar divider +// Responsive navbar +// Navbar position +// Navbar themes + + +// Navbar // // Provide a static navbar from which we expand to create full-width, fixed, and // other navbar variations. .navbar { position: relative; + display: flex; + flex-direction: column; padding: $navbar-padding-y $navbar-padding-x; - @include clearfix; - - @include media-breakpoint-up(sm) { - @include border-radius($navbar-border-radius); - } } -// Navbar alignment options -// -// Display the navbar across the entirety of the page or fixed it to the top or -// bottom of the page. - -// A static, full width modifier with no rounded corners. -.navbar-full { - z-index: $zindex-navbar; - - @include media-breakpoint-up(sm) { - @include border-radius(0); - } -} - -// Fix the top/bottom navbars when screen real estate supports it -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; - - // Undo the rounded corners - @include media-breakpoint-up(sm) { - @include border-radius(0); - } -} - -.navbar-fixed-top { - top: 0; -} - -.navbar-fixed-bottom { - bottom: 0; -} - -.navbar-sticky-top { - position: sticky; - top: 0; - z-index: $zindex-navbar-sticky; - width: 100%; - - // Undo the rounded corners - @include media-breakpoint-up(sm) { - @include border-radius(0); - } -} - - -// -// Brand/project name +// Navbar brand // +// Used for brand, project, or site names. .navbar-brand { - float: left; - padding-top: $navbar-brand-padding-y; - padding-bottom: $navbar-brand-padding-y; - margin-right: 1rem; + display: inline-block; + padding-top: .25rem; + padding-bottom: .25rem; + margin-right: $navbar-padding-x; font-size: $font-size-lg; line-height: inherit; + white-space: nowrap; @include hover-focus { text-decoration: none; @@ -81,17 +42,20 @@ } -.navbar-divider { - float: left; - width: $border-width; - padding-top: $navbar-divider-padding-y; - padding-bottom: $navbar-divider-padding-y; - margin-right: $navbar-padding-x; - margin-left: $navbar-padding-x; - overflow: hidden; +// Navbar nav +// +// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). + +.navbar-nav { + display: flex; + flex-direction: column; // cannot use `inherit` to get the `.navbar`s value + padding-left: 0; + margin-bottom: 0; + list-style: none; - &::before { - content: "\00a0"; + .nav-link { + padding-right: 0; + padding-left: 0; } } @@ -107,20 +71,19 @@ } -// Navbar toggle +// Responsive navbar // -// Custom button for toggling the `.navbar-collapse`, powered by the collapse -// Bootstrap JavaScript plugin. +// Custom styles for responsive collapsing and toggling of navbar contents. +// Powered by the collapse Bootstrap JavaScript plugin. +// Button for toggling the navbar when in its collapsed state .navbar-toggler { - width: 2.5em; - height: 2em; + align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; - background: transparent no-repeat center center; - background-size: 24px 24px; - border: $border-width solid transparent; + background: transparent; // remove default button style + border: $border-width solid transparent; // remove default button style @include border-radius($navbar-toggler-border-radius); @include hover-focus { @@ -128,66 +91,92 @@ } } -// scss-lint:disable ImportantRule +// Keep as a separate element so folks can easily override it with another icon +// or image file as needed. +.navbar-toggler-icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + content: ""; + background: no-repeat center center; + background-size: 100% 100%; +} + +// Use `position` on the toggler to prevent it from being auto placed as a flex +// item and allow easy placement. +.navbar-toggler-left { + position: absolute; + left: $navbar-padding-x; +} +.navbar-toggler-right { + position: absolute; + right: $navbar-padding-x; +} + +// Generate series of `.navbar-toggleable-*` responsive classes for configuring +// where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - &-#{$breakpoint} { - @include clearfix; - + &#{$infix} { @include media-breakpoint-down($breakpoint) { - .navbar-brand { - display: block; - float: none; - margin-top: .5rem; - margin-right: 0; - } - .navbar-nav { - margin-top: .5rem; - margin-bottom: .5rem; - .dropdown-menu { position: static; float: none; } } + + > .container { + padding-right: 0; + padding-left: 0; + } } @include media-breakpoint-up($next) { - display: block; - } - } - } -} -// scss-lint:enable ImportantRule + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + .navbar-nav { + flex-direction: row; -// Navigation -// -// Custom navbar navigation built on the base `.nav` styles. + .nav-link { + padding-right: .5rem; + padding-left: .5rem; + } + } -.navbar-nav { - .nav-item { - float: left; - } + // For nesting containers, have to redeclare for alignment purposes + > .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + } - .nav-link { - display: block; - padding-top: .425rem; - padding-bottom: .425rem; + // scss-lint:disable ImportantRule + .navbar-collapse { + display: flex !important; + width: 100%; + } + // scss-lint:enable ImportantRule - + .nav-link { - margin-left: 1rem; + .navbar-toggler { + display: none; + } + } } } - - .nav-item + .nav-item { - margin-left: 1rem; - } } + +// Navbar themes +// +// Styles for switching between navbars with light or dark background. + // Dark links against a light background .navbar-light { .navbar-brand, @@ -206,45 +195,54 @@ @include hover-focus { color: $navbar-light-hover-color; } + + &.disabled { + color: $navbar-light-disabled-color; + } } .open > .nav-link, .active > .nav-link, .nav-link.open, .nav-link.active { - @include plain-hover-focus { - color: $navbar-light-active-color; - } + color: $navbar-light-active-color; } } .navbar-toggler { - background-image: $navbar-light-toggler-bg; border-color: $navbar-light-toggler-border; } - .navbar-divider { - background-color: rgba(0,0,0,.075); + .navbar-toggler-icon { + background-image: $navbar-light-toggler-bg; + } + + .navbar-text { + color: $navbar-light-color; } } // White links against a dark background -.navbar-dark { +.navbar-inverse { .navbar-brand, .navbar-toggler { - color: $navbar-dark-active-color; + color: $navbar-inverse-active-color; @include hover-focus { - color: $navbar-dark-active-color; + color: $navbar-inverse-active-color; } } .navbar-nav { .nav-link { - color: $navbar-dark-color; + color: $navbar-inverse-color; @include hover-focus { - color: $navbar-dark-hover-color; + color: $navbar-inverse-hover-color; + } + + &.disabled { + color: $navbar-inverse-disabled-color; } } @@ -252,64 +250,19 @@ .active > .nav-link, .nav-link.open, .nav-link.active { - @include plain-hover-focus { - color: $navbar-dark-active-color; - } + color: $navbar-inverse-active-color; } } .navbar-toggler { - background-image: $navbar-dark-toggler-bg; - border-color: $navbar-dark-toggler-border; + border-color: $navbar-inverse-toggler-border; } - .navbar-divider { - background-color: rgba(255,255,255,.075); + .navbar-toggler-icon { + background-image: $navbar-inverse-toggler-bg; } -} - -// Navbar toggleable -// -// Custom override for collapse plugin in navbar. - -.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; - } + .navbar-text { + color: $navbar-inverse-color; } } diff --git a/assets/stylesheets/bootstrap/_normalize.scss b/assets/stylesheets/bootstrap/_normalize.scss index 827b7f3..6bafd53 100644 --- a/assets/stylesheets/bootstrap/_normalize.scss +++ b/assets/stylesheets/bootstrap/_normalize.scss @@ -1,11 +1,15 @@ -/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ // // 1. Change the default font family in all browsers (opinionated). // 2. Correct the line height in all browsers. -// 3. Prevent adjustments of font size after orientation changes in IE and iOS. +// 3. Prevent adjustments of font size after orientation changes in +// IE on Windows Phone and in iOS. // +// Document +// ========================================================================== + html { font-family: sans-serif; // 1 line-height: 1.15; // 2 @@ -13,6 +17,9 @@ html { -webkit-text-size-adjust: 100%; // 3 } +// Sections +// ========================================================================== + // // Remove the margin in all browsers (opinionated). // @@ -21,69 +28,73 @@ body { margin: 0; } -// HTML5 display definitions -// ========================================================================== - // // Add the correct display in IE 9-. -// 1. Add the correct display in Edge, IE, and Firefox. -// 2. Add the correct display in IE. // article, aside, -details, // 1 -figcaption, -figure, footer, header, -main, // 2 -menu, nav, -section, -summary { // 1 +section { display: block; } // +// Correct the font size and margin on `h1` elements within `section` and +// `article` contexts in Chrome, Firefox, and Safari. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// Grouping content +// ========================================================================== + +// // Add the correct display in IE 9-. +// 1. Add the correct display in IE. // -audio, -canvas, -progress, -video { - display: inline-block; +figcaption, +figure, +main { // 1 + display: block; } // -// Add the correct display in iOS 4-7. +// Add the correct margin in IE 8. // -audio:not([controls]) { - display: none; - height: 0; +figure { + margin: 1em 40px; } // -// Add the correct vertical alignment in Chrome, Firefox, and Opera. +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. // -progress { - vertical-align: baseline; +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 } // -// Add the correct display in IE 10-. -// 1. Add the correct display in IE. +// 1. Correct the inheritance and scaling of font size in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. // -template, // 1 -[hidden] { - display: none; +pre { + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } -// Links +// Text-level semantics // ========================================================================== // @@ -106,9 +117,6 @@ a:hover { outline-width: 0; } -// Text-level semantics -// ========================================================================== - // // 1. Remove the bottom border in Firefox 39-. // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. @@ -139,21 +147,23 @@ strong { } // -// Add the correct font style in Android 4.3-. +// 1. Correct the inheritance and scaling of font size in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. // -dfn { - font-style: italic; +code, +kbd, +samp { + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } // -// Correct the font size and margin on `h1` elements within `section` and -// `article` contexts in Chrome, Firefox, and Safari. +// Add the correct font style in Android 4.3-. // -h1 { - font-size: 2em; - margin: 0.67em 0; +dfn { + font-style: italic; } // @@ -198,61 +208,44 @@ sup { // ========================================================================== // -// Remove the border on images inside links in IE 10-. -// - -img { - border-style: none; -} - -// -// Hide the overflow in IE. +// Add the correct display in IE 9-. // -svg:not(:root) { - overflow: hidden; +audio, +video { + display: inline-block; } -// Grouping content -// ========================================================================== - // -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. +// Add the correct display in iOS 4-7. // -code, -kbd, -pre, -samp { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 +audio:not([controls]) { + display: none; + height: 0; } // -// Add the correct margin in IE 8. +// Remove the border on images inside links in IE 10-. // -figure { - margin: 1em 40px; +img { + border-style: none; } // -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. +// Hide the overflow in IE. // -hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 +svg:not(:root) { + overflow: hidden; } // Forms // ========================================================================== // -// 1. Change font properties to `inherit` in all browsers (opinionated). +// 1. Change the font styles in all browsers (opinionated). // 2. Remove the margin in Firefox and Safari. // @@ -261,19 +254,13 @@ input, optgroup, select, textarea { - font: inherit; // 1 + font-family: sans-serif; // 1 + font-size: 100%; // 1 + line-height: 1.15; // 1 margin: 0; // 2 } // -// Restore the font weight unset by the previous rule. -// - -optgroup { - font-weight: bold; -} - -// // Show the overflow in IE. // 1. Show the overflow in Edge. // @@ -356,6 +343,16 @@ legend { } // +// 1. Add the correct display in IE 9-. +// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. +// + +progress { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// // Remove the default vertical scrollbar in IE. // @@ -394,7 +391,7 @@ textarea { } // -// Remove the inner padding and cancel buttons in Chrome and Safari on OS X. +// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. // [type="search"]::-webkit-search-cancel-button, @@ -403,15 +400,6 @@ textarea { } // -// Correct the text style of placeholders in Chrome, Edge, and Safari. -// - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -// // 1. Correct the inability to style clickable types in iOS and Safari. // 2. Change font properties to `inherit` in Safari. // @@ -420,3 +408,54 @@ textarea { -webkit-appearance: button; // 1 font: inherit; // 2 } + +// Interactive +// ========================================================================== + +// +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// + +details, // 1 +menu { + display: block; +} + +// +// Add the correct display in all browsers. +// + +summary { + display: list-item; +} + +// Scripting +// ========================================================================== + +// +// Add the correct display in IE 9-. +// + +canvas { + display: inline-block; +} + +// +// Add the correct display in IE. +// + +template { + display: none; +} + +// Hidden +// ========================================================================== + +// +// Add the correct display in IE 10-. +// + +[hidden] { + display: none; +} diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index 5f40a7f..24aa028 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -1,14 +1,12 @@ .pagination { - display: inline-block; - padding-left: 0; - margin-top: $spacer-y; - margin-bottom: $spacer-y; + display: flex; + // 1-2: Disable browser default list styles + padding-left: 0; // 1 + list-style: none; // 2 @include border-radius(); } .page-item { - display: inline; // Remove list-style and block-level defaults - &:first-child { .page-link { margin-left: 0; @@ -22,38 +20,34 @@ } &.active .page-link { - @include plain-hover-focus { - z-index: 2; - color: $pagination-active-color; - cursor: default; - background-color: $pagination-active-bg; - border-color: $pagination-active-border; - } + z-index: 2; + color: $pagination-active-color; + background-color: $pagination-active-bg; + border-color: $pagination-active-border; } &.disabled .page-link { - @include plain-hover-focus { - color: $pagination-disabled-color; - pointer-events: none; - cursor: $cursor-disabled; - background-color: $pagination-disabled-bg; - border-color: $pagination-disabled-border; - } + color: $pagination-disabled-color; + pointer-events: none; + cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback. + background-color: $pagination-disabled-bg; + border-color: $pagination-disabled-border; } } .page-link { position: relative; - float: left; // Collapse white-space + display: block; padding: $pagination-padding-y $pagination-padding-x; margin-left: -1px; + line-height: $pagination-line-height; color: $pagination-color; - text-decoration: none; background-color: $pagination-bg; border: $pagination-border-width solid $pagination-border-color; @include hover-focus { color: $pagination-hover-color; + text-decoration: none; background-color: $pagination-hover-bg; border-color: $pagination-hover-border; } diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss index 86b489a..1b63634 100644 --- a/assets/stylesheets/bootstrap/_popover.scss +++ b/assets/stylesheets/bootstrap/_popover.scss @@ -130,12 +130,12 @@ // Offset the popover to account for the popover arrow .popover-title { padding: $popover-title-padding-y $popover-title-padding-x; - margin: 0; // reset heading margin + margin-bottom: 0; // Reset the default from Reboot font-size: $font-size-base; background-color: $popover-title-bg; border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); - $offset-border-width: ($border-width / $font-size-root); - @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0); + $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); + @include border-top-radius($offset-border-width); &:empty { display: none; diff --git a/assets/stylesheets/bootstrap/_print.scss b/assets/stylesheets/bootstrap/_print.scss index bd41328..e20219a 100644 --- a/assets/stylesheets/bootstrap/_print.scss +++ b/assets/stylesheets/bootstrap/_print.scss @@ -13,7 +13,10 @@ *, *::before, *::after, - *::first-letter, + p::first-letter, + div::first-letter, + blockquote::first-letter, + li::first-letter, p::first-line, div::first-line, blockquote::first-line, @@ -92,13 +95,7 @@ .navbar { display: none; } - .btn, - .dropup > .btn { - > .caret { - border-top-color: #000 !important; - } - } - .tag { + .badge { border: $border-width solid #000; } diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss index c2364fe..02e4c3b 100644 --- a/assets/stylesheets/bootstrap/_progress.scss +++ b/assets/stylesheets/bootstrap/_progress.scss @@ -1,145 +1,32 @@ -// // Progress animations -// - @keyframes progress-bar-stripes { - from { background-position: $spacer-y 0; } + from { background-position: $progress-height 0; } to { background-position: 0 0; } } - -// // Basic progress bar -// - .progress { - display: block; - width: 100%; - height: $spacer-y; // todo: make a new var for this - margin-bottom: $spacer-y; -} -.progress[value] { - // Set overall background - background-color: $progress-bg; - // Remove Firefox and Opera border - border: 0; - // Reset the default appearance - appearance: none; - // Set overall border radius - @include border-radius($progress-border-radius); -} - -// Filled-in portion of the bar -.progress[value]::-ms-fill { - background-color: $progress-bar-color; - // Remove right-hand border of value bar from IE10+/Edge - border: 0; -} -.progress[value]::-moz-progress-bar { - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); -} -.progress[value]::-webkit-progress-value { - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); -} -// Tweaks for full progress bar -.progress[value="100"]::-moz-progress-bar { - @include border-right-radius($progress-border-radius); -} -.progress[value="100"]::-webkit-progress-value { - @include border-right-radius($progress-border-radius); -} - -// Unfilled portion of the bar -.progress[value]::-webkit-progress-bar { + display: flex; + overflow: hidden; // force rounded corners by cropping it + font-size: $progress-font-size; + line-height: $progress-height; + text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); } -base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only -.progress[value] { - background-color: $progress-bg; - @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); -} - -// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. -@media screen and (min-width:0\0) { - .progress { - background-color: $progress-bg; - @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); - } - .progress-bar { - display: inline-block; - height: $spacer-y; - text-indent: -999rem; // Simulate hiding of value as in native `<progress>` - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); - } - .progress[width="100%"] { - @include border-right-radius($progress-border-radius); - } +.progress-bar { + height: $progress-height; + color: $progress-bar-color; + background-color: $progress-bar-bg; } - -// // Striped -// - -.progress-striped[value]::-webkit-progress-value { +.progress-bar-striped { @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-moz-progress-bar { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-ms-fill { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -// IE9 -@media screen and (min-width:0\0) { - .progress-bar-striped { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; - } + background-size: $progress-height $progress-height; } - -// // Animated -// - -.progress-animated[value]::-webkit-progress-value { - animation: progress-bar-stripes 2s linear infinite; -} -.progress-animated[value]::-moz-progress-bar { - animation: progress-bar-stripes 2s linear infinite; -} -// IE9 -@media screen and (min-width:0\0) { - .progress-animated .progress-bar-striped { - animation: progress-bar-stripes 2s linear infinite; - } -} - - -// -// Variations -// - -.progress-success { - @include progress-variant($progress-bar-success-bg); -} -.progress-info { - @include progress-variant($progress-bar-info-bg); -} -.progress-warning { - @include progress-variant($progress-bar-warning-bg); -} -.progress-danger { - @include progress-variant($progress-bar-danger-bg); +.progress-bar-animated { + animation: progress-bar-stripes $progress-bar-animation-timing; } diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 461ca40..557829f 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -55,23 +55,27 @@ html { // html { - // Sets a specific default `font-size` for user with `rem` type scales. - font-size: $font-size-root; + // We assume no initial pixel `font-size` for accessibility reasons. This + // allows web visitors to customize their browser default font-size, making + // your project more inclusive and accessible to everyone. + // As a side-effect of setting the @viewport above, // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, // thus making it hard to click on stuff near the right edge of the page. // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. // See https://github.com/twbs/bootstrap/issues/18543 + // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ -ms-overflow-style: scrollbar; + // Changes the default tap highlight to be completely transparent in iOS. -webkit-tap-highlight-color: rgba(0,0,0,0); } body { - // Make the `body` use the `font-size-root` font-family: $font-family-base; font-size: $font-size-base; + font-weight: $font-weight-base; line-height: $line-height-base; // Go easy on the eyes and use something other than `#000` for text color: $body-color; @@ -111,12 +115,11 @@ p { margin-bottom: 1rem; } -// Abbreviations and acronyms +// Abbreviations abbr[title], // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted $abbr-border-color; } address { @@ -165,10 +168,6 @@ a { color: $link-hover-color; text-decoration: $link-hover-decoration; } - - &:focus { - @include tab-focus(); - } } // And undo these styles for placeholder links/named anchors (without href) @@ -187,7 +186,7 @@ a:not([href]):not([tabindex]) { } &:focus { - outline: none; + outline: 0; } } @@ -335,8 +334,8 @@ input[type="month"] { // Remove the default appearance of temporal inputs to avoid a Mobile Safari // bug where setting a custom line-height prevents text from being vertically // centered within the input. - // - // Bug report: https://github.com/twbs/bootstrap/issues/11266 + // See https://bugs.webkit.org/show_bug.cgi?id=139848 + // and https://github.com/twbs/bootstrap/issues/11266 -webkit-appearance: listbox; } @@ -346,9 +345,11 @@ textarea { } fieldset { - // Chrome and Firefox set a `min-width: min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. + // Browsers set a default `min-width: min-content;` on fieldsets, + // unlike e.g. `<div>`s, which have `min-width: 0;` by default. + // So we reset that to ensure fieldsets behave more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359 + // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements min-width: 0; // Reset the default outline behavior of fieldsets so they don't affect page layout. padding: 0; diff --git a/assets/stylesheets/bootstrap/_responsive-embed.scss b/assets/stylesheets/bootstrap/_responsive-embed.scss index 2443219..d3362b6 100644 --- a/assets/stylesheets/bootstrap/_responsive-embed.scss +++ b/assets/stylesheets/bootstrap/_responsive-embed.scss @@ -3,10 +3,15 @@ .embed-responsive { position: relative; display: block; - height: 0; + width: 100%; padding: 0; overflow: hidden; + &::before { + display: block; + content: ""; + } + .embed-responsive-item, iframe, embed, @@ -23,17 +28,25 @@ } .embed-responsive-21by9 { - padding-bottom: percentage(9 / 21); + &::before { + padding-top: percentage(9 / 21); + } } .embed-responsive-16by9 { - padding-bottom: percentage(9 / 16); + &::before { + padding-top: percentage(9 / 16); + } } .embed-responsive-4by3 { - padding-bottom: percentage(3 / 4); + &::before { + padding-top: percentage(3 / 4); + } } .embed-responsive-1by1 { - padding-bottom: percentage(1 / 1); + &::before { + padding-top: percentage(1 / 1); + } } diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index aeedf0b..47be2c5 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -105,26 +105,26 @@ .thead-inverse { th { - color: #fff; - background-color: $gray-dark; + color: $table-inverse-color; + background-color: $table-inverse-bg; } } .thead-default { th { - color: $gray; - background-color: $gray-lighter; + color: $table-head-color; + background-color: $table-head-bg; } } .table-inverse { - color: $gray-lighter; - background-color: $gray-dark; + color: $table-inverse-color; + background-color: $table-inverse-bg; th, td, thead th { - border-color: $gray; + border-color: $body-bg; } &.table-bordered { @@ -136,61 +136,18 @@ // Responsive tables // -// Wrap your tables in `.table-responsive` and we'll make them mobile friendly -// by enabling horizontal scrolling. Only applies <768px. Everything above that +// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by +// enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. .table-responsive { display: block; width: 100%; - min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) overflow-x: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 - // TODO: find out if we need this still. - // - // border: $table-border-width solid $table-border-color; - // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 -} - - -.table-reflow { - thead { - float: left; - } - - tbody { - display: block; - white-space: nowrap; - } - - th, - td { - border-top: $table-border-width solid $table-border-color; - border-left: $table-border-width solid $table-border-color; - - &:last-child { - border-right: $table-border-width solid $table-border-color; - } - } - - thead, - tbody, - tfoot { - &:last-child { - tr:last-child th, - tr:last-child td { - border-bottom: $table-border-width solid $table-border-color; - } - } - } - - tr { - float: left; - - th, - td { - display: block !important; - border: $table-border-width solid $table-border-color; - } + // Prevent double border on horizontal scroll due to use of `display: block;` + &.table-bordered { + border: 0; } } diff --git a/assets/stylesheets/bootstrap/_tags.scss b/assets/stylesheets/bootstrap/_tags.scss deleted file mode 100644 index dee9ed9..0000000 --- a/assets/stylesheets/bootstrap/_tags.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. - -.tag { - display: inline-block; - padding: $tag-padding-y $tag-padding-x; - font-size: $tag-font-size; - font-weight: $tag-font-weight; - line-height: 1; - color: $tag-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - @include border-radius(); - - // Empty tags collapse automatically - &:empty { - display: none; - } -} - -// Quick fix for tags in buttons -.btn .tag { - position: relative; - top: -1px; -} - -// scss-lint:disable QualifyingElement -// Add hover effects, but only for links -a.tag { - @include hover-focus { - color: $tag-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} -// scss-lint:enable QualifyingElement - -// Pill tags -// -// Make them extra rounded with a modifier to replace v3's badges. - -.tag-pill { - padding-right: $tag-pill-padding-x; - padding-left: $tag-pill-padding-x; - @include border-radius($tag-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked tags get darker on :hover). - -.tag-default { - @include tag-variant($tag-default-bg); -} - -.tag-primary { - @include tag-variant($tag-primary-bg); -} - -.tag-success { - @include tag-variant($tag-success-bg); -} - -.tag-info { - @include tag-variant($tag-info-bg); -} - -.tag-warning { - @include tag-variant($tag-warning-bg); -} - -.tag-danger { - @include tag-variant($tag-danger-bg); -} diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index 57ba8cf..24e198d 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_tooltip.scss @@ -11,7 +11,7 @@ word-wrap: break-word; opacity: 0; - &.in { opacity: $tooltip-opacity; } + &.show { opacity: $tooltip-opacity; } &.tooltip-top, &.bs-tether-element-attached-bottom { diff --git a/assets/stylesheets/bootstrap/_animation.scss b/assets/stylesheets/bootstrap/_transitions.scss index f0dfff8..86c04a5 100644 --- a/assets/stylesheets/bootstrap/_animation.scss +++ b/assets/stylesheets/bootstrap/_transitions.scss @@ -1,27 +1,27 @@ .fade { opacity: 0; - transition: opacity .15s linear; + @include transition($transition-fade); - &.in { + &.show { opacity: 1; } } .collapse { display: none; - &.in { + &.show { display: block; } } tr { - &.collapse.in { + &.collapse.show { display: table-row; } } tbody { - &.collapse.in { + &.collapse.show { display: table-row-group; } } @@ -30,7 +30,5 @@ tbody { position: relative; height: 0; overflow: hidden; - transition-timing-function: ease; - transition-duration: .35s; - transition-property: height; + @include transition($transition-collapse); } diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss index ff71140..13a64b0 100644 --- a/assets/stylesheets/bootstrap/_type.scss +++ b/assets/stylesheets/bootstrap/_type.scss @@ -27,18 +27,22 @@ h6, .h6 { font-size: $font-size-h6; } .display-1 { font-size: $display1-size; font-weight: $display1-weight; + line-height: $display-line-height; } .display-2 { font-size: $display2-size; font-weight: $display2-weight; + line-height: $display-line-height; } .display-3 { font-size: $display3-size; font-weight: $display3-weight; + line-height: $display-line-height; } .display-4 { font-size: $display4-size; font-weight: $display4-weight; + line-height: $display-line-height; } @@ -61,7 +65,7 @@ hr { small, .small { font-size: $small-font-size; - font-weight: normal; + font-weight: $font-weight-normal; } mark, @@ -137,14 +141,3 @@ mark, content: "\00A0 \2014"; // nbsp, em dash } } - -@if not $enable-flex { - // Clean up some horizontal `<dl>`s built with grids - // scss-lint:disable QualifyingElement - dl.row { - > dd + dt { - clear: left; - } - } - // scss-lint:enable QualifyingElement -} diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index c63e506..7d08ff2 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_utilities.scss @@ -5,7 +5,9 @@ @import "utilities/display"; @import "utilities/flex"; @import "utilities/float"; +@import "utilities/position"; @import "utilities/screenreaders"; +@import "utilities/sizing"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 13432f2..36dc429 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -16,6 +16,30 @@ // Grid columns // Fonts // Components +// Tables +// Buttons +// Forms +// Dropdowns +// Z-index master list +// Navbar +// Navs +// Pagination +// Jumbotron +// Form states and alerts +// Cards +// Tooltips +// Popovers +// Badges +// Modals +// Alerts +// Progress bars +// List group +// Image thumbnails +// Figures +// Breadcrumbs +// Carousel +// Close +// Code @mixin _assert-ascending($map, $map-name) { $prev-key: null; @@ -33,6 +57,31 @@ } } +// Replace `$search` with `$replace` in `$string` +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +@mixin _assert-starts-at-zero($map) { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + } +} + + // General variable structure // // Variable format should follow the `$component-modifier-state-property` order. @@ -42,17 +91,31 @@ // // Grayscale and brand colors for use across Bootstrap. -$gray-dark: #373a3c !default; -$gray: #55595c !default; -$gray-light: #818a91 !default; +// Start with assigning color names to specific hex values. +$white: #fff !default; +$black: #000 !default; +$red: #d9534f !default; +$orange: #f0ad4e !default; +$yellow: #ffd500 !default; +$green: #5cb85c !default; +$blue: #0275d8 !default; +$teal: #5bc0de !default; +$pink: #ff5b77 !default; +$purple: #613d7c !default; + +// Create grayscale +$gray-dark: #292b2c !default; +$gray: #464a4c !default; +$gray-light: #636c72 !default; $gray-lighter: #eceeef !default; $gray-lightest: #f7f7f9 !default; -$brand-primary: #0275d8 !default; -$brand-success: #5cb85c !default; -$brand-info: #5bc0de !default; -$brand-warning: #f0ad4e !default; -$brand-danger: #d9534f !default; +// Reassign color vars to semantic color scheme +$brand-primary: $blue !default; +$brand-success: $green !default; +$brand-info: $teal !default; +$brand-warning: $orange !default; +$brand-danger: $red !default; $brand-inverse: $gray-dark !default; @@ -60,11 +123,10 @@ $brand-inverse: $gray-dark !default; // // Quickly modify global styling by enabling or disabling optional features. -$enable-flex: false !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; -$enable-transitions: false !default; +$enable-transitions: true !default; $enable-hover-media-query: false !default; $enable-grid-classes: true !default; $enable-print-styles: true !default; @@ -85,27 +147,44 @@ $spacers: ( y: 0 ), 1: ( + x: ($spacer-x * .25), + y: ($spacer-y * .25) + ), + 2: ( + x: ($spacer-x * .5), + y: ($spacer-y * .5) + ), + 3: ( x: $spacer-x, y: $spacer-y ), - 2: ( + 4: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), - 3: ( + 5: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default; $border-width: 1px !default; +// This variable affects the `.h-*` and `.w-*` classes. +$sizes: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% +) !default; // Body // // Settings for the `<body>` element. -$body-bg: #fff !default; -$body-color: $gray-dark !default; +$body-bg: $white !default; +$body-color: $gray-dark !default; +$inverse-bg: $gray-dark !default; +$inverse-color: $gray-lighter !default; // Links @@ -131,6 +210,7 @@ $grid-breakpoints: ( xl: 1200px ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints); // Grid containers @@ -160,23 +240,24 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; -// Typography +// Fonts // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, system-ui, 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; -// Pixel value used to responsively scale all typography. Applied to the `<html>` element. -$font-size-root: 16px !default; - -$font-size-base: 1rem !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; $font-size-xs: .75rem !default; +$font-weight-normal: normal !default; +$font-weight-bold: bold !default; + +$font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !default; $font-size-h1: 2.5rem !default; @@ -186,22 +267,23 @@ $font-size-h4: 1.5rem !default; $font-size-h5: 1.25rem !default; $font-size-h6: 1rem !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; - $headings-margin-bottom: ($spacer / 2) !default; $headings-font-family: inherit !default; $headings-font-weight: 500 !default; $headings-line-height: 1.1 !default; $headings-color: inherit !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; + $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; @@ -216,15 +298,15 @@ $blockquote-font-size: ($font-size-base * 1.25) !default; $blockquote-border-color: $gray-lighter !default; $blockquote-border-width: .25rem !default; -$hr-border-color: rgba(0,0,0,.1) !default; +$hr-border-color: rgba($black,.1) !default; $hr-border-width: $border-width !default; $mark-padding: .2em !default; -$dt-font-weight: bold !default; +$dt-font-weight: $font-weight-bold !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; -$nested-kbd-font-weight: bold !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: 5px !default; @@ -240,11 +322,14 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; -$component-active-color: #fff !default; +$component-active-color: $white !default; $component-active-bg: $brand-primary !default; $caret-width: .3em !default; -$caret-width-lg: $caret-width !default; + +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; // Tables @@ -255,10 +340,17 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; -$table-bg-accent: rgba(0,0,0,.05) !default; -$table-bg-hover: rgba(0,0,0,.075) !default; + +$table-inverse-bg: $gray-dark !default; +$table-inverse-color: $body-bg !default; + +$table-bg-accent: rgba($black,.05) !default; +$table-bg-hover: rgba($black,.075) !default; $table-bg-active: $table-bg-hover !default; +$table-head-bg: $gray-lighter !default; +$table-head-color: $gray !default; + $table-border-width: $border-width !default; $table-border-color: $gray-lighter !default; @@ -270,31 +362,32 @@ $table-border-color: $gray-lighter !default; $btn-padding-x: 1rem !default; $btn-padding-y: .5rem !default; $btn-line-height: 1.25 !default; -$btn-font-weight: normal !default; -$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; -$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; +$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; -$btn-primary-color: #fff !default; +$btn-primary-color: $white !default; $btn-primary-bg: $brand-primary !default; $btn-primary-border: $btn-primary-bg !default; $btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: #fff !default; +$btn-secondary-bg: $white !default; $btn-secondary-border: #ccc !default; -$btn-info-color: #fff !default; +$btn-info-color: $white !default; $btn-info-bg: $brand-info !default; $btn-info-border: $btn-info-bg !default; -$btn-success-color: #fff !default; +$btn-success-color: $white !default; $btn-success-bg: $brand-success !default; $btn-success-border: $btn-success-bg !default; -$btn-warning-color: #fff !default; +$btn-warning-color: $white !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: $btn-warning-bg !default; -$btn-danger-color: #fff !default; +$btn-danger-color: $white !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: $btn-danger-bg !default; @@ -314,6 +407,8 @@ $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; +$btn-transition: all .2s ease-in-out !default; + // Forms @@ -321,24 +416,24 @@ $input-padding-x: .75rem !default; $input-padding-y: .5rem !default; $input-line-height: 1.25 !default; -$input-bg: #fff !default; +$input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; $input-color: $gray !default; -$input-border-color: rgba(0,0,0,.15) !default; +$input-border-color: rgba($black,.15) !default; $input-btn-border-width: $border-width !default; // For form controls and buttons -$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-bg-focus: $input-bg !default; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default; +$input-border-focus: lighten($brand-primary, 25%) !default; +$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default; $input-color-focus: $input-color !default; -$input-color-placeholder: #999 !default; +$input-color-placeholder: $gray-light !default; $input-padding-x-sm: .5rem !default; $input-padding-y-sm: .25rem !default; @@ -346,10 +441,22 @@ $input-padding-y-sm: .25rem !default; $input-padding-x-lg: 1.5rem !default; $input-padding-y-lg: .75rem !default; -$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; +$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; + +$form-text-margin-top: .25rem !default; +$form-feedback-margin-top: $form-text-margin-top !default; + +$form-check-margin-bottom: .5rem !default; +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: .25rem !default; +$form-check-input-margin-x: .25rem !default; + +$form-check-inline-margin-x: .75rem !default; + $form-group-margin-bottom: $spacer-y !default; $input-group-addon-bg: $gray-lighter !default; @@ -362,70 +469,72 @@ $custom-control-spacer-x: 1rem !default; $custom-control-spacer-y: .25rem !default; $custom-control-indicator-size: 1rem !default; +$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default; $custom-control-indicator-bg: #ddd !default; $custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; +$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; $custom-control-disabled-cursor: $cursor-disabled !default; -$custom-control-disabled-indicator-bg: #eee !default; -$custom-control-disabled-description-color: #767676 !default; +$custom-control-disabled-indicator-bg: $gray-lighter !default; +$custom-control-disabled-description-color: $gray-light !default; -$custom-control-checked-indicator-color: #fff !default; -$custom-control-checked-indicator-bg: #0074d9 !default; +$custom-control-checked-indicator-color: $white !default; +$custom-control-checked-indicator-bg: $brand-primary !default; $custom-control-checked-indicator-box-shadow: none !default; -$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; -$custom-control-active-indicator-color: #fff !default; -$custom-control-active-indicator-bg: #84c6ff !default; +$custom-control-active-indicator-color: $white !default; +$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default; $custom-control-active-indicator-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; +$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indeterminate-bg: #0074d9 !default; +$custom-checkbox-indeterminate-bg: $brand-primary !default; $custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; -$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default; +$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; -$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default; +$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-light !default; -$custom-select-bg: #fff !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-light !default; +$custom-select-bg: $white !default; $custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: #333 !default; -$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; +$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: #51a7e8 !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; +$custom-select-focus-border-color: lighten($brand-primary, 25%) !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; -$custom-select-sm-padding-y: .2rem !default; -$custom-select-sm-font-size: 75% !default; +$custom-select-sm-padding-y: .2rem !default; +$custom-select-sm-font-size: 75% !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; $custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; $custom-file-line-height: 1.5 !default; -$custom-file-color: #555 !default; -$custom-file-bg: #fff !default; +$custom-file-color: $gray !default; +$custom-file-bg: $white !default; $custom-file-border-width: $border-width !default; -$custom-file-border-color: #ddd !default; +$custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; +$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; $custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: #eee !default; +$custom-file-button-bg: $gray-lighter !default; $custom-file-text: ( placeholder: ( en: "Choose file..." @@ -438,13 +547,13 @@ $custom-file-text: ( // Form validation icons $form-icon-success-color: $brand-success !default; -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; +$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default; $form-icon-warning-color: $brand-warning !default; -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; +$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default; $form-icon-danger-color: $brand-danger !default; -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; +$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default; // Dropdowns @@ -454,15 +563,15 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www $dropdown-min-width: 10rem !default; $dropdown-padding-y: .5rem !default; $dropdown-margin-top: .125rem !default; -$dropdown-bg: #fff !default; -$dropdown-border-color: rgba(0,0,0,.15) !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black,.15) !default; $dropdown-border-width: $border-width !default; -$dropdown-divider-bg: #e5e5e5 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default; +$dropdown-divider-bg: $gray-lighter !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; -$dropdown-link-hover-bg: #f5f5f5 !default; +$dropdown-link-hover-bg: $gray-lightest !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; @@ -480,14 +589,14 @@ $dropdown-header-color: $gray-light !default; // of components dependent on the z-axis and are designed to all work together. $zindex-dropdown-backdrop: 990 !default; -$zindex-navbar: 1000 !default; -$zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; -$zindex-navbar-fixed: 1030 !default; -$zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; -$zindex-modal: 1050 !default; +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-fixed: 1030 !default; +$zindex-sticky: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navbar @@ -498,28 +607,24 @@ $navbar-padding-y: ($spacer / 2) !default; $navbar-brand-padding-y: .25rem !default; -$navbar-divider-padding-y: .425rem !default; - $navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-padding-y: .5rem !default; +$navbar-toggler-padding-y: .25rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-padding-y: .5rem !default; - -$navbar-dark-color: rgba(255,255,255,.5) !default; -$navbar-dark-hover-color: rgba(255,255,255,.75) !default; -$navbar-dark-active-color: rgba(255,255,255,1) !default; -$navbar-dark-disabled-color: rgba(255,255,255,.25) !default; -$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; -$navbar-dark-toggler-border: rgba(255,255,255,.1) !default; - -$navbar-light-color: rgba(0,0,0,.5) !default; -$navbar-light-hover-color: rgba(0,0,0,.7) !default; -$navbar-light-active-color: rgba(0,0,0,.9) !default; -$navbar-light-disabled-color: rgba(0,0,0,.3) !default; -$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; -$navbar-light-toggler-border: rgba(0,0,0,.1) !default; + +$navbar-inverse-color: rgba($white,.5) !default; +$navbar-inverse-hover-color: rgba($white,.75) !default; +$navbar-inverse-active-color: rgba($white,1) !default; +$navbar-inverse-disabled-color: rgba($white,.25) !default; +$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-inverse-toggler-border: rgba($white,.1) !default; + +$navbar-light-color: rgba($black,.5) !default; +$navbar-light-hover-color: rgba($black,.7) !default; +$navbar-light-active-color: rgba($black,.9) !default; +$navbar-light-disabled-color: rgba($black,.3) !default; +$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-border: rgba($black,.1) !default; // Navs @@ -528,8 +633,6 @@ $nav-item-inline-spacer: 1rem !default; $nav-link-padding: .5em 1em !default; $nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default; -$nav-disabled-link-hover-color: $gray-light !default; -$nav-disabled-link-hover-bg: transparent !default; $nav-tabs-border-color: #ddd !default; $nav-tabs-border-width: $border-width !default; @@ -550,14 +653,14 @@ $nav-pills-active-link-bg: $component-active-bg !default; $pagination-padding-x: .75rem !default; $pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .75rem !default; -$pagination-padding-y-sm: .275rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-sm: .25rem !default; $pagination-padding-x-lg: 1.5rem !default; $pagination-padding-y-lg: .75rem !default; - +$pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; -$pagination-bg: #fff !default; +$pagination-bg: $white !default; $pagination-border-width: $border-width !default; $pagination-border-color: #ddd !default; @@ -565,12 +668,12 @@ $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-lighter !default; $pagination-hover-border: #ddd !default; -$pagination-active-color: #fff !default; +$pagination-active-color: $white !default; $pagination-active-bg: $brand-primary !default; $pagination-active-border: $brand-primary !default; $pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: #fff !default; +$pagination-disabled-bg: $white !default; $pagination-disabled-border: #ddd !default; @@ -603,29 +706,32 @@ $state-danger-border: darken($state-danger-bg, 5%) !default; // Cards + $card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; -$card-border-color: rgba(0,0,0,.125) !default; +$card-border-color: rgba($black,.125) !default; $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: #f5f5f5 !default; -$card-bg: #fff !default; +$card-cap-bg: $gray-lightest !default; +$card-bg: $white !default; -$card-link-hover-color: #fff !default; +$card-link-hover-color: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-deck-margin: .625rem !default; +$card-deck-margin: ($grid-gutter-width-base / 2) !default; -$card-columns-sm-up-column-gap: 1.25rem !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips $tooltip-max-width: 200px !default; -$tooltip-color: #fff !default; -$tooltip-bg: #000 !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: 3px !default; $tooltip-padding-x: 8px !default; @@ -638,11 +744,11 @@ $tooltip-arrow-color: $tooltip-bg !default; // Popovers $popover-inner-padding: 1px !default; -$popover-bg: #fff !default; +$popover-bg: $white !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; -$popover-border-color: rgba(0,0,0,.2) !default; -$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default; +$popover-border-color: rgba($black,.2) !default; +$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; $popover-title-bg: darken($popover-bg, 3%) !default; $popover-title-padding-x: 14px !default; @@ -658,26 +764,27 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -// Tags +// Badges -$tag-default-bg: $gray-light !default; -$tag-primary-bg: $brand-primary !default; -$tag-success-bg: $brand-success !default; -$tag-info-bg: $brand-info !default; -$tag-warning-bg: $brand-warning !default; -$tag-danger-bg: $brand-danger !default; +$badge-default-bg: $gray-light !default; +$badge-primary-bg: $brand-primary !default; +$badge-success-bg: $brand-success !default; +$badge-info-bg: $brand-info !default; +$badge-warning-bg: $brand-warning !default; +$badge-danger-bg: $brand-danger !default; -$tag-color: #fff !default; -$tag-link-hover-color: #fff !default; -$tag-font-size: 75% !default; -$tag-font-weight: bold !default; -$tag-padding-x: .4em !default; -$tag-padding-y: .25em !default; +$badge-color: $white !default; +$badge-link-hover-color: $white !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-x: .4em !default; +$badge-padding-y: .25em !default; -$tag-pill-padding-x: .6em !default; +$badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$tag-pill-border-radius: 10rem !default; +$badge-pill-border-radius: 10rem !default; + // Modals @@ -687,26 +794,28 @@ $modal-inner-padding: 15px !default; $modal-dialog-margin: 10px !default; $modal-dialog-sm-up-margin-y: 30px !default; -$modal-title-padding: 15px !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: #fff !default; -$modal-content-border-color: rgba(0,0,0,.2) !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black,.2) !default; $modal-content-border-width: $border-width !default; -$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; -$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; +$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default; +$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default; -$modal-backdrop-bg: #000 !default; +$modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: #e5e5e5 !default; +$modal-header-border-color: $gray-lighter !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 15px !default; -$modal-lg: 900px !default; -$modal-md: 600px !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; $modal-sm: 300px !default; +$modal-transition: transform .3s ease-out !default; + // Alerts // @@ -714,8 +823,9 @@ $modal-sm: 300px !default; $alert-padding-x: 1.25rem !default; $alert-padding-y: .75rem !default; +$alert-margin-bottom: $spacer-y !default; $alert-border-radius: $border-radius !default; -$alert-link-font-weight: bold !default; +$alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; $alert-success-bg: $state-success-bg !default; @@ -737,42 +847,42 @@ $alert-danger-border: $state-danger-border !default; // Progress bars -$progress-bg: #eee !default; -$progress-bar-color: #0074d9 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; - -$progress-bar-bg: $brand-primary !default; -$progress-bar-success-bg: $brand-success !default; -$progress-bar-warning-bg: $brand-warning !default; -$progress-bar-danger-bg: $brand-danger !default; -$progress-bar-info-bg: $brand-info !default; - +$progress-height: 1rem !default; +$progress-font-size: .75rem !default; +$progress-bg: $gray-lighter !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: $brand-primary !default; +$progress-bar-animation-timing: 1s linear infinite !default; // List group -$list-group-bg: #fff !default; -$list-group-border-color: #ddd !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; +$list-group-color: $body-color !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black,.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; + +$list-group-item-padding-x: 1.25rem !default; +$list-group-item-padding-y: .75rem !default; -$list-group-hover-bg: #f5f5f5 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; +$list-group-hover-bg: $gray-lightest !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border: $list-group-active-bg !default; +$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default; $list-group-disabled-color: $gray-light !default; -$list-group-disabled-bg: $gray-lighter !default; +$list-group-disabled-bg: $list-group-bg !default; $list-group-disabled-text-color: $list-group-disabled-color !default; -$list-group-link-color: #555 !default; -$list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; +$list-group-link-color: $gray !default; +$list-group-link-heading-color: $gray-dark !default; +$list-group-link-hover-color: $list-group-link-color !default; -$list-group-item-padding-x: 1.25rem !default; -$list-group-item-padding-y: .75rem !default; -$list-group-item-heading-margin-bottom: 5px !default; +$list-group-link-active-color: $list-group-color !default; +$list-group-link-active-bg: $gray-lighter !default; // Image thumbnails @@ -782,12 +892,14 @@ $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; $thumbnail-border-color: #ddd !default; $thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default; +$thumbnail-transition: all .2s ease-in-out !default; // Figures $figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-light !default; // Breadcrumbs @@ -802,42 +914,34 @@ $breadcrumb-active-color: $gray-light !default; $breadcrumb-divider: "/" !default; -// Media objects - -$media-margin-top: 15px !default; -$media-heading-margin-bottom: 5px !default; -$media-alignment-padding-x: 10px !default; - - // Carousel -$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; - -$carousel-control-color: #fff !default; +$carousel-control-color: $white !default; $carousel-control-width: 15% !default; -$carousel-control-sm-up-size: 30px !default; $carousel-control-opacity: .5 !default; -$carousel-control-font-size: 20px !default; - -$carousel-indicators-width: 60% !default; -$carousel-indicator-size: 10px !default; -$carousel-indicator-active-size: 12px !default; -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; $carousel-caption-width: 70% !default; -$carousel-caption-sm-up-width: 60% !default; -$carousel-caption-color: #fff !default; +$carousel-caption-color: $white !default; + +$carousel-control-icon-width: 20px !default; + +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-icon-width: 20px !default; +$carousel-transition: transform .6s ease-in-out !default; // Close -$close-font-weight: bold !default; -$close-color: #000 !default; -$close-text-shadow: 0 1px 0 #fff !default; +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code @@ -846,12 +950,12 @@ $code-font-size: 90% !default; $code-padding-x: .4rem !default; $code-padding-y: .2rem !default; $code-color: #bd4147 !default; -$code-bg: #f7f7f9 !default; +$code-bg: $gray-lightest !default; -$kbd-color: #fff !default; -$kbd-bg: #333 !default; +$kbd-color: $white !default; +$kbd-bg: $gray-dark !default; -$pre-bg: #f7f7f9 !default; +$pre-bg: $gray-lightest !default; $pre-color: $gray-dark !default; $pre-border-color: #ccc !default; $pre-scrollable-max-height: 340px !default; diff --git a/assets/stylesheets/bootstrap/mixins/_tag.scss b/assets/stylesheets/bootstrap/mixins/_badge.scss index 900c54e..9fa44b6 100644 --- a/assets/stylesheets/bootstrap/mixins/_tag.scss +++ b/assets/stylesheets/bootstrap/mixins/_badge.scss @@ -1,6 +1,6 @@ -// Tags +// Badges -@mixin tag-variant($color) { +@mixin badge-variant($color) { background-color: $color; &[href] { diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index a868833..6fd2e8e 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 544px, md: 768px) +// (xs: 0, sm: 576px, md: 768px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,7 +10,7 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // md @@ -21,8 +21,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) -// 544px +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) +// 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -31,13 +31,24 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} + // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { @@ -64,17 +75,6 @@ } } -// Media between the breakpoint's minimum and maximum widths. -// No minimum for the smallest breakpoint, and no maximum for the largest one. -// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($name, $breakpoints) { - @include media-breakpoint-down($name, $breakpoints) { - @content; - } - } -} - // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { @@ -84,3 +84,12 @@ } } } + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + @include media-breakpoint-between($name, $name, $breakpoints) { + @content; + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index 5196ab6..f9981e3 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -12,96 +12,69 @@ border-color: $border; @include box-shadow($btn-box-shadow); + // Hover and focus styles are shared @include hover { color: $color; background-color: $active-background; - border-color: $active-border; + border-color: $active-border; } - &:focus, &.focus { - color: $color; - background-color: $active-background; - border-color: $active-border; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5); + } @else { + box-shadow: 0 0 0 2px rgba($border, .5); + } + } + + // Disabled comes first so active can properly restyle + &.disabled, + &:disabled { + background-color: $background; + border-color: $border; } &:active, &.active, - .open > &.dropdown-toggle { + .show > &.dropdown-toggle { color: $color; background-color: $active-background; - border-color: $active-border; - // Remove the gradient for the pressed/active state - background-image: none; + background-image: none; // Remove the gradient for the pressed/active state + border-color: $active-border; @include box-shadow($btn-active-box-shadow); - - &:hover, - &:focus, - &.focus { - color: $color; - background-color: darken($background, 17%); - border-color: darken($border, 25%); - } - } - - &.disabled, - &:disabled { - &:focus, - &.focus { - background-color: $background; - border-color: $border; - } - @include hover { - background-color: $background; - border-color: $border; - } } } -@mixin button-outline-variant($color) { +@mixin button-outline-variant($color, $color-hover: #fff) { color: $color; background-image: none; background-color: transparent; border-color: $color; @include hover { - color: #fff; + color: $color-hover; background-color: $color; - border-color: $color; + border-color: $color; } &:focus, &.focus { - color: #fff; - background-color: $color; - border-color: $color; + box-shadow: 0 0 0 2px rgba($color, .5); + } + + &.disabled, + &:disabled { + color: $color; + background-color: transparent; } &:active, &.active, - .open > &.dropdown-toggle { - color: #fff; + .show > &.dropdown-toggle { + color: $color-hover; background-color: $color; - border-color: $color; - - &:hover, - &:focus, - &.focus { - color: #fff; - background-color: darken($color, 17%); - border-color: darken($color, 25%); - } - } - - &.disabled, - &:disabled { - &:focus, - &.focus { - border-color: lighten($color, 20%); - } - @include hover { - border-color: lighten($color, 20%); - } + border-color: $color; } } diff --git a/assets/stylesheets/bootstrap/mixins/_cards.scss b/assets/stylesheets/bootstrap/mixins/_cards.scss index 574349a..4b1232d 100644 --- a/assets/stylesheets/bootstrap/mixins/_cards.scss +++ b/assets/stylesheets/bootstrap/mixins/_cards.scss @@ -20,8 +20,11 @@ // @mixin card-inverse { + color: rgba(255,255,255,.65); + .card-header, .card-footer { + background-color: transparent; border-color: rgba(255,255,255,.2); } .card-header, diff --git a/assets/stylesheets/bootstrap/mixins/_clearfix.scss b/assets/stylesheets/bootstrap/mixins/_clearfix.scss index d0ae125..b72cf27 100644 --- a/assets/stylesheets/bootstrap/mixins/_clearfix.scss +++ b/assets/stylesheets/bootstrap/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { + display: block; content: ""; - display: table; clear: both; } } diff --git a/assets/stylesheets/bootstrap/mixins/_float.scss b/assets/stylesheets/bootstrap/mixins/_float.scss index b30cf14..b43116f 100644 --- a/assets/stylesheets/bootstrap/mixins/_float.scss +++ b/assets/stylesheets/bootstrap/mixins/_float.scss @@ -4,3 +4,6 @@ @mixin float-right { float: right !important; } +@mixin float-none { + float: none !important; +} diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 39851b8..c8aea96 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -7,8 +7,8 @@ // Color the label and help text .form-control-feedback, .form-control-label, + .col-form-label, .form-check-label, - .form-check-inline, .custom-control { color: $color; } @@ -17,10 +17,8 @@ .form-control { border-color: $color; - @if $enable-rounded { - &:focus { - box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%); - } + &:focus { + @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%)); } } diff --git a/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss index ac96efe..8bfd97c 100644 --- a/assets/stylesheets/bootstrap/mixins/_gradients.scss +++ b/assets/stylesheets/bootstrap/mixins/_gradients.scss @@ -3,21 +3,17 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -// Color stops are not available in IE9. @mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -// Color stops are not available in IE9. @mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { @@ -27,12 +23,10 @@ @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback } @mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback } @mixin gradient-radial($inner-color: #555, $outer-color: #333) { background-image: radial-gradient(circle, $inner-color, $outer-color); @@ -40,4 +34,4 @@ } @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); -}
\ No newline at end of file +} diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index 35ccd92..0aa814a 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -7,50 +7,46 @@ // Common properties for all breakpoints %grid-column { position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - - @if $enable-flex { - width: 100%; - } + width: 100%; + min-height: 1px; // Prevent columns from collapsing when empty @include make-gutters($gutters); } - $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { - $breakpoint-counter: ($breakpoint-counter + 1); + $infix: breakpoint-infix($breakpoint, $breakpoints); // Allow columns to stretch full width below their breakpoints - .col-#{$breakpoint} { - @extend %grid-column; - } - @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { + .col#{$infix}-#{$i} { @extend %grid-column; } } + .col#{$infix} { + @extend %grid-column; + } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns - @if $enable-flex { - .col-#{$breakpoint} { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } + .col#{$infix} { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col#{$infix}-auto { + flex: 0 0 auto; + width: auto; } @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { + .col#{$infix}-#{$i} { @include make-col($i, $columns); } } @each $modifier in (pull, push) { @for $i from 0 through $columns { - .#{$modifier}-#{$breakpoint}-#{$i} { + .#{$modifier}#{$infix}-#{$i} { @include make-col-modifier($modifier, $i, $columns) } } @@ -58,8 +54,8 @@ // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { - @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0 - .offset-#{$breakpoint}-#{$i} { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0 + .offset#{$infix}-#{$i} { @include make-col-modifier(offset, $i, $columns) } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 88cbd24..9cd8c7b 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -2,13 +2,17 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width-base) { +@mixin make-container($gutters: $grid-gutter-widths) { + position: relative; margin-left: auto; margin-right: auto; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - @if not $enable-flex { - @include clearfix(); + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } } } @@ -34,12 +38,8 @@ } @mixin make-row($gutters: $grid-gutter-widths) { - @if $enable-flex { - display: flex; - flex-wrap: wrap; - } @else { - @include clearfix(); - } + display: flex; + flex-wrap: wrap; @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { @@ -52,14 +52,11 @@ @mixin make-col-ready($gutters: $grid-gutter-widths) { position: relative; - min-height: 1px; // Prevent collapsing - // 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%; - } + width: 100%; + min-height: 1px; // Prevent collapsing @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { @@ -71,16 +68,12 @@ } @mixin make-col($size, $columns: $grid-columns) { - @if $enable-flex { - flex: 0 0 percentage($size / $columns); - // Add a `max-width` to ensure content within each column does not blow out - // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari - // do not appear to require this. - max-width: percentage($size / $columns); - } @else { - float: left; - width: percentage($size / $columns); - } + flex: 0 0 percentage($size / $columns); + // width: percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) { diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index 81b0f16..3db5b09 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss @@ -20,11 +20,9 @@ } &.active { - @include plain-hover-focus { - color: #fff; - background-color: $color; - border-color: $color; - } + color: #fff; + background-color: $color; + border-color: $color; } } } diff --git a/assets/stylesheets/bootstrap/mixins/_progress.scss b/assets/stylesheets/bootstrap/mixins/_progress.scss deleted file mode 100644 index 9622d79..0000000 --- a/assets/stylesheets/bootstrap/mixins/_progress.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Progress bars - -@mixin progress-variant($color) { - &[value]::-webkit-progress-value { - background-color: $color; - } - - &[value]::-moz-progress-bar { - background-color: $color; - } - - // IE10+, Microsoft Edge - &[value]::-ms-fill { - background-color: $color; - } - - // IE9 - @media screen and (min-width:0\0) { - .progress-bar { - background-color: $color; - } - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_reset-filter.scss b/assets/stylesheets/bootstrap/mixins/_reset-filter.scss deleted file mode 100644 index 044b349..0000000 --- a/assets/stylesheets/bootstrap/mixins/_reset-filter.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Reset filters for IE -// -// When you need to remove a gradient background, do not forget to use this to reset -// the IE filter for IE9. - -@mixin reset-filter() { - filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; -} diff --git a/assets/stylesheets/bootstrap/mixins/_reset-text.scss b/assets/stylesheets/bootstrap/mixins/_reset-text.scss index bb882f2..b952730 100644 --- a/assets/stylesheets/bootstrap/mixins/_reset-text.scss +++ b/assets/stylesheets/bootstrap/mixins/_reset-text.scss @@ -2,7 +2,7 @@ font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; - font-weight: normal; + font-weight: $font-weight-normal; letter-spacing: normal; line-break: auto; line-height: $line-height-base; diff --git a/assets/stylesheets/bootstrap/mixins/_tab-focus.scss b/assets/stylesheets/bootstrap/mixins/_tab-focus.scss deleted file mode 100644 index f16ed64..0000000 --- a/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +++ /dev/null @@ -1,9 +0,0 @@ -// WebKit-style focus - -@mixin tab-focus() { - // 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/mixins/_transforms.scss b/assets/stylesheets/bootstrap/mixins/_transforms.scss new file mode 100644 index 0000000..4005c9d --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_transforms.scss @@ -0,0 +1,14 @@ +// Applies the given styles only when the browser support CSS3 3D transforms. +@mixin if-supports-3d-transforms() { + @media (-webkit-transform-3d) { + // Old Safari, Old Android + // http://caniuse.com/#feat=css-featurequeries + // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d + @content; + } + + @supports (transform: translate3d(0,0,0)) { + // The Proper Way: Using a CSS feature query + @content; + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_visibility.scss b/assets/stylesheets/bootstrap/mixins/_visibility.scss new file mode 100644 index 0000000..88c50b0 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_visibility.scss @@ -0,0 +1,5 @@ +// Visibility + +@mixin invisible { + visibility: hidden !important; +} diff --git a/assets/stylesheets/bootstrap/utilities/_align.scss b/assets/stylesheets/bootstrap/utilities/_align.scss index 4886e05..4dbbbc2 100644 --- a/assets/stylesheets/bootstrap/utilities/_align.scss +++ b/assets/stylesheets/bootstrap/utilities/_align.scss @@ -1,6 +1,6 @@ -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } +.align-baseline { vertical-align: baseline !important; } // Browser default +.align-top { vertical-align: top !important; } +.align-middle { vertical-align: middle !important; } +.align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-text-top { vertical-align: text-top !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_background.scss b/assets/stylesheets/bootstrap/utilities/_background.scss index a81dcff..b9ac295 100644 --- a/assets/stylesheets/bootstrap/utilities/_background.scss +++ b/assets/stylesheets/bootstrap/utilities/_background.scss @@ -3,7 +3,7 @@ // .bg-faded { - background-color: $gray-lightest; + background-color: darken($body-bg, 3%); } @include bg-variant('.bg-primary', $brand-primary); diff --git a/assets/stylesheets/bootstrap/utilities/_borders.scss b/assets/stylesheets/bootstrap/utilities/_borders.scss index b2e70aa..b256881 100644 --- a/assets/stylesheets/bootstrap/utilities/_borders.scss +++ b/assets/stylesheets/bootstrap/utilities/_borders.scss @@ -1,9 +1,12 @@ // -// Border-width +// Border // -// TBD...? - +.border-0 { border: 0 !important; } +.border-top-0 { border-top: 0 !important; } +.border-right-0 { border-right: 0 !important; } +.border-bottom-0 { border-bottom: 0 !important; } +.border-left-0 { border-left: 0 !important; } // // Border-radius @@ -28,3 +31,7 @@ .rounded-circle { border-radius: 50%; } + +.rounded-0 { + border-radius: 0; +} diff --git a/assets/stylesheets/bootstrap/utilities/_display.scss b/assets/stylesheets/bootstrap/utilities/_display.scss index d74049b..ae942a6 100644 --- a/assets/stylesheets/bootstrap/utilities/_display.scss +++ b/assets/stylesheets/bootstrap/utilities/_display.scss @@ -2,12 +2,17 @@ // Display utilities // -.d-block { - display: block !important; -} -.d-inline-block { - display: inline-block !important; -} -.d-inline { - display: inline !important; +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .d#{$infix}-none { display: none !important; } + .d#{$infix}-inline { display: inline !important; } + .d#{$infix}-inline-block { display: inline-block !important; } + .d#{$infix}-block { display: block !important; } + .d#{$infix}-table { display: table !important; } + .d#{$infix}-table-cell { display: table-cell !important; } + .d#{$infix}-flex { display: flex !important; } + .d#{$infix}-inline-flex { display: inline-flex !important; } + } } diff --git a/assets/stylesheets/bootstrap/utilities/_flex.scss b/assets/stylesheets/bootstrap/utilities/_flex.scss index 502885a..1b98aaa 100644 --- a/assets/stylesheets/bootstrap/utilities/_flex.scss +++ b/assets/stylesheets/bootstrap/utilities/_flex.scss @@ -2,36 +2,47 @@ // // Custom styles for additional flex alignment options. -@if $enable-flex { - @each $breakpoint in map-keys($grid-breakpoints) { - // Flex column reordering - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - .flex-#{$breakpoint}-unordered { order: 0; } - } - - // Alignment for every item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-top { align-items: flex-start; } - .flex-items-#{$breakpoint}-middle { align-items: center; } - .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - } - - // Alignment per item - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-top { align-self: flex-start; } - .flex-#{$breakpoint}-middle { align-self: center; } - .flex-#{$breakpoint}-bottom { align-self: flex-end; } - } - - // Horizontal alignment of item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-left { justify-content: flex-start; } - .flex-items-#{$breakpoint}-center { justify-content: center; } - .flex-items-#{$breakpoint}-right { justify-content: flex-end; } - .flex-items-#{$breakpoint}-around { justify-content: space-around; } - .flex-items-#{$breakpoint}-between { justify-content: space-between; } - } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .flex#{$infix}-first { order: -1; } + .flex#{$infix}-last { order: 1; } + .flex#{$infix}-unordered { order: 0; } + + .flex#{$infix}-row { flex-direction: row !important; } + .flex#{$infix}-column { flex-direction: column !important; } + .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } + .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; } + + .flex#{$infix}-wrap { flex-wrap: wrap !important; } + .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } + .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } + + .justify-content#{$infix}-start { justify-content: flex-start !important; } + .justify-content#{$infix}-end { justify-content: flex-end !important; } + .justify-content#{$infix}-center { justify-content: center !important; } + .justify-content#{$infix}-between { justify-content: space-between !important; } + .justify-content#{$infix}-around { justify-content: space-around !important; } + + .align-items#{$infix}-start { align-items: flex-start !important; } + .align-items#{$infix}-end { align-items: flex-end !important; } + .align-items#{$infix}-center { align-items: center !important; } + .align-items#{$infix}-baseline { align-items: baseline !important; } + .align-items#{$infix}-stretch { align-items: stretch !important; } + + .align-content#{$infix}-start { align-content: flex-start !important; } + .align-content#{$infix}-end { align-content: flex-end !important; } + .align-content#{$infix}-center { align-content: center !important; } + .align-content#{$infix}-between { align-content: space-between !important; } + .align-content#{$infix}-around { align-content: space-around !important; } + .align-content#{$infix}-stretch { align-content: stretch !important; } + + .align-self#{$infix}-auto { align-self: auto !important; } + .align-self#{$infix}-start { align-self: flex-start !important; } + .align-self#{$infix}-end { align-self: flex-end !important; } + .align-self#{$infix}-center { align-self: center !important; } + .align-self#{$infix}-baseline { align-self: baseline !important; } + .align-self#{$infix}-stretch { align-self: stretch !important; } } } diff --git a/assets/stylesheets/bootstrap/utilities/_float.scss b/assets/stylesheets/bootstrap/utilities/_float.scss index eea34bf..01655e9 100644 --- a/assets/stylesheets/bootstrap/utilities/_float.scss +++ b/assets/stylesheets/bootstrap/utilities/_float.scss @@ -1,13 +1,9 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .float-#{$breakpoint}-left { - @include float-left(); - } - .float-#{$breakpoint}-right { - @include float-right(); - } - .float-#{$breakpoint}-none { - float: none !important; - } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .float#{$infix}-left { @include float-left; } + .float#{$infix}-right { @include float-right; } + .float#{$infix}-none { @include float-none; } } } diff --git a/assets/stylesheets/bootstrap/utilities/_position.scss b/assets/stylesheets/bootstrap/utilities/_position.scss new file mode 100644 index 0000000..2cf08bf --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_position.scss @@ -0,0 +1,23 @@ +// Positioning + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-fixed; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-fixed; +} + +.sticky-top { + position: sticky; + top: 0; + z-index: $zindex-sticky; +} diff --git a/assets/stylesheets/bootstrap/utilities/_sizing.scss b/assets/stylesheets/bootstrap/utilities/_sizing.scss new file mode 100644 index 0000000..a7dc3e4 --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_sizing.scss @@ -0,0 +1,10 @@ +// Width and height + +@each $prop, $abbrev in (width: w, height: h) { + @each $size, $length in $sizes { + .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + } +} + +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss index 99c98f8..6056e2b 100644 --- a/assets/stylesheets/bootstrap/utilities/_spacing.scss +++ b/assets/stylesheets/bootstrap/utilities/_spacing.scss @@ -1,44 +1,43 @@ -// Width and height - -.w-100 { width: 100% !important; } -.h-100 { height: 100% !important; } - // Margin and Padding -.mx-auto { - margin-right: auto !important; - margin-left: auto !important; -} - -@each $prop, $abbrev in (margin: m, padding: p) { - @each $size, $lengths in $spacers { - $length-x: map-get($lengths, x); - $length-y: map-get($lengths, y); - - .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $lengths in $spacers { + $length-x: map-get($lengths, x); + $length-y: map-get($lengths, y); + + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; } + .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}y#{$infix}-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; + } + } + } - // Axes - .#{$abbrev}x-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; + // Some special margin utils + .m#{$infix}-auto { margin: auto !important; } + .mt#{$infix}-auto { margin-top: auto !important; } + .mr#{$infix}-auto { margin-right: auto !important; } + .mb#{$infix}-auto { margin-bottom: auto !important; } + .ml#{$infix}-auto { margin-left: auto !important; } + .mx#{$infix}-auto { + margin-right: auto !important; + margin-left: auto !important; } - .#{$abbrev}y-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; + .my#{$infix}-auto { + margin-top: auto !important; + margin-bottom: auto !important; } } } - -// Positioning - -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} diff --git a/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index b4468e9..4ac9053 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/utilities/_text.scss @@ -4,31 +4,33 @@ // Alignment -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-truncate { @include text-truncate; } +.text-justify { text-align: justify !important; } +.text-nowrap { white-space: nowrap !important; } +.text-truncate { @include text-truncate; } // Responsive alignment @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .text-#{$breakpoint}-left { text-align: left !important; } - .text-#{$breakpoint}-right { text-align: right !important; } - .text-#{$breakpoint}-center { text-align: center !important; } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .text#{$infix}-left { text-align: left !important; } + .text#{$infix}-right { text-align: right !important; } + .text#{$infix}-center { text-align: center !important; } } } // Transformation -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } +.text-lowercase { text-transform: lowercase !important; } +.text-uppercase { text-transform: uppercase !important; } +.text-capitalize { text-transform: capitalize !important; } // Weight and italics -.font-weight-normal { font-weight: normal; } -.font-weight-bold { font-weight: bold; } -.font-italic { font-style: italic; } +.font-weight-normal { font-weight: $font-weight-normal; } +.font-weight-bold { font-weight: $font-weight-bold; } +.font-italic { font-style: italic; } // Contextual colors diff --git a/assets/stylesheets/bootstrap/utilities/_visibility.scss b/assets/stylesheets/bootstrap/utilities/_visibility.scss index cdb1428..fcedc9c 100644 --- a/assets/stylesheets/bootstrap/utilities/_visibility.scss +++ b/assets/stylesheets/bootstrap/utilities/_visibility.scss @@ -3,7 +3,7 @@ // .invisible { - visibility: hidden !important; + @include invisible(); } // Responsive visibility utilities |