From 5a78819c01c9d6fae1216fa94a7f64a353afad05 Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Mon, 16 Apr 2018 12:37:20 +0100 Subject: rake update[v4.1.0] --- assets/stylesheets/_bootstrap-grid.scss | 2 +- assets/stylesheets/_bootstrap-reboot.scss | 2 +- assets/stylesheets/_bootstrap.scss | 2 +- assets/stylesheets/bootstrap/_breadcrumb.scss | 15 ++- assets/stylesheets/bootstrap/_button-group.scss | 8 +- assets/stylesheets/bootstrap/_buttons.scss | 1 + assets/stylesheets/bootstrap/_card.scss | 35 +++++- assets/stylesheets/bootstrap/_carousel.scss | 52 ++++++++- assets/stylesheets/bootstrap/_custom-forms.scss | 129 ++++++++++++++++++++- assets/stylesheets/bootstrap/_dropdown.scss | 37 +++++- assets/stylesheets/bootstrap/_forms.scss | 4 +- assets/stylesheets/bootstrap/_functions.scss | 2 +- assets/stylesheets/bootstrap/_input-group.scss | 4 +- assets/stylesheets/bootstrap/_mixins.scss | 1 - assets/stylesheets/bootstrap/_modal.scss | 4 +- assets/stylesheets/bootstrap/_navbar.scss | 12 -- assets/stylesheets/bootstrap/_pagination.scss | 3 +- assets/stylesheets/bootstrap/_print.scss | 12 +- assets/stylesheets/bootstrap/_progress.scss | 1 + assets/stylesheets/bootstrap/_reboot.scss | 6 +- assets/stylesheets/bootstrap/_tables.scss | 14 ++- assets/stylesheets/bootstrap/_transitions.scss | 22 +--- assets/stylesheets/bootstrap/_utilities.scss | 1 + assets/stylesheets/bootstrap/_variables.scss | 116 +++++++++++------- assets/stylesheets/bootstrap/mixins/_caret.scss | 1 + assets/stylesheets/bootstrap/mixins/_forms.scss | 2 +- .../stylesheets/bootstrap/mixins/_gradients.scss | 14 +-- assets/stylesheets/bootstrap/mixins/_hover.scss | 4 +- .../stylesheets/bootstrap/mixins/_list-group.scss | 2 +- .../stylesheets/bootstrap/mixins/_nav-divider.scss | 4 +- .../bootstrap/mixins/_navbar-align.scss | 10 -- .../bootstrap/mixins/_screen-reader.scss | 4 +- .../stylesheets/bootstrap/mixins/_text-hide.scss | 2 + .../stylesheets/bootstrap/mixins/_transition.scss | 4 + assets/stylesheets/bootstrap/utilities/_flex.scss | 5 + .../stylesheets/bootstrap/utilities/_position.scss | 1 + .../stylesheets/bootstrap/utilities/_shadows.scss | 6 + assets/stylesheets/bootstrap/utilities/_text.scss | 8 +- 38 files changed, 413 insertions(+), 139 deletions(-) delete mode 100644 assets/stylesheets/bootstrap/mixins/_navbar-align.scss create mode 100644 assets/stylesheets/bootstrap/utilities/_shadows.scss (limited to 'assets/stylesheets') diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index 68e0000..1763c6a 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v4.0.0 (https://getbootstrap.com) + * Bootstrap Grid v4.1.0 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss index 4c36143..8edc240 100644 --- a/assets/stylesheets/_bootstrap-reboot.scss +++ b/assets/stylesheets/_bootstrap-reboot.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Reboot v4.0.0 (https://getbootstrap.com) + * Bootstrap Reboot v4.1.0 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index 082e67b..4ccfa1e 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0 (https://getbootstrap.com) + * Bootstrap v4.1.0 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss index 25b9d85..be30950 100644 --- a/assets/stylesheets/bootstrap/_breadcrumb.scss +++ b/assets/stylesheets/bootstrap/_breadcrumb.scss @@ -5,17 +5,20 @@ margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; - @include border-radius($border-radius); + @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; + + .breadcrumb-item { padding-left: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } } // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index c1b8265..5495170 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -76,9 +76,15 @@ padding-right: $btn-padding-x * .75; padding-left: $btn-padding-x * .75; - &::after { + &::after, + .dropup &::after, + .dropright &::after { margin-left: 0; } + + .dropleft &::before { + margin-right: 0; + } } .btn-sm + .dropdown-toggle-split { diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index da6d879..70a55f3 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -100,6 +100,7 @@ fieldset:disabled a.btn { &:disabled, &.disabled { color: $btn-link-disabled-color; + pointer-events: none; } // No need for an active state here diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 4c4845c..28d7e62 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -153,7 +153,7 @@ .card { display: flex; - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; @@ -183,7 +183,7 @@ // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-bottom: 0; @@ -261,6 +261,8 @@ @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; + orphans: 1; + widows: 1; .card { display: inline-block; // Don't let them vertically span multiple columns @@ -268,3 +270,32 @@ } } } + + +// +// Accordion +// + +.accordion { + .card:not(:first-of-type):not(:last-of-type) { + border-bottom: 0; + border-radius: 0; + } + + .card:not(:first-of-type) { + .card-header:first-child { + border-radius: 0; + } + } + + .card:first-of-type { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .card:last-of-type { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index 72a5034..6274fc4 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -1,4 +1,13 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 1. The .carousel-item-left and .carousel-item-right is used to indicate where +// the active slide is heading. +// 2. .active.carousel-item is the current slide. +// 3. .active.carousel-item-left and .active.carousel-item-right is the current +// slide in its in-transition state. Only one of these occurs at a time. +// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// is the upcoming slide in transition. + .carousel { position: relative; } @@ -31,7 +40,6 @@ top: 0; } -// CSS3 transforms when supported by the browser .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0); @@ -60,6 +68,42 @@ } +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-duration: .6s; + transition-property: opacity; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + opacity: 0; + } + + .carousel-item-next, + .carousel-item-prev, + .carousel-item.active, + .active.carousel-item-left, + .active.carousel-item-prev { + transform: translateX(0); + + @supports (transform-style: preserve-3d) { + transform: translate3d(0, 0, 0); + } + } +} + + // // Left/right controls for nav // @@ -91,13 +135,13 @@ .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index 2d83f7e..54fa875 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -157,7 +157,7 @@ // Select // // Replaces the browser default select with a custom one, mostly pulled from -// http://primercss.io. +// https://primer.github.io/. // .custom-select { @@ -247,11 +247,11 @@ margin: 0; opacity: 0; - &:focus ~ .custom-file-control { + &:focus ~ .custom-file-label { border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; - &::before { + &::after { border-color: $custom-file-focus-border-color; } } @@ -295,3 +295,126 @@ @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } + +// Range +// +// Style range inputs the same across browsers. Vendor-specific rules for psuedo +// elements cannot be mixed. As such, there are no shared styles for focus or +// active states on prefixed selectors. + +.custom-range { + width: 100%; + padding-left: 0; // Firefox specific + background-color: transparent; + appearance: none; + + &:focus { + outline: none; + } + + &::-moz-focus-outer { + border: 0; + } + + &::-webkit-slider-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: -($custom-range-thumb-width * .25); // Webkit specific? + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + appearance: none; + + &:focus { + outline: none; + box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility + } + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-webkit-slider-runnable-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; // Why? + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-moz-range-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + appearance: none; + + &:focus { + outline: none; + box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility + } + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-moz-range-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; // Firefox specific? + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + appearance: none; + + &:focus { + outline: none; + box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility + } + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-ms-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: transparent; + border-color: transparent; + border-width: ($custom-range-thumb-height * .5); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-fill-lower { + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &::-ms-fill-upper { + margin-right: 15px; // arbitrary? + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } +} diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index a9d4cfe..ee6f658 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -1,6 +1,8 @@ // The dropdown wrapper (`
`) .dropup, -.dropdown { +.dropright, +.dropdown, +.dropleft { position: relative; } @@ -31,10 +33,17 @@ @include box-shadow($dropdown-box-shadow); } +.dropdown-menu-right { + right: 0; + left: auto; +} + // Allow for dropdowns to go bottom up (aka, dropup-menu) // Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { + top: auto; + bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -46,6 +55,9 @@ .dropright { .dropdown-menu { + top: 0; + right: auto; + left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } @@ -60,6 +72,9 @@ .dropleft { .dropdown-menu { + top: 0; + right: 100%; + left: auto; margin-top: 0; margin-right: $dropdown-spacer; } @@ -72,6 +87,19 @@ } } +// When enabled Popper.js, reset basic dropdown position +// stylelint-disable no-duplicate-selectors +.dropdown-menu { + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } +} +// stylelint-enable no-duplicate-selectors + // Dividers (basically an `
`) within the dropdown .dropdown-divider { @include nav-divider($dropdown-divider-bg); @@ -129,3 +157,10 @@ color: $dropdown-header-color; white-space: nowrap; // as with > li > a } + +// Dropdown text +.dropdown-item-text { + display: block; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + color: $dropdown-link-color; +} diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index b0954f8..c079bd5 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -121,6 +121,7 @@ select.form-control { padding-bottom: $input-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-line-height; + color: $input-plaintext-color; background-color: transparent; border: solid transparent; border-width: $input-border-width 0; @@ -302,7 +303,8 @@ select.form-control-lg { display: inline-block; } - .input-group { + .input-group, + .custom-select { width: auto; } diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss index 1266d34..b44d7d9 100644 --- a/assets/stylesheets/bootstrap/_functions.scss +++ b/assets/stylesheets/bootstrap/_functions.scss @@ -79,7 +79,7 @@ // Request a theme color level @function theme-color-level($color-name: "primary", $level: 0) { $color: theme-color($color-name); - $color-base: if($level > 0, #000, #fff); + $color-base: if($level > 0, $black, $white); $level: abs($level); @return mix($color-base, $color, $level * $theme-color-interval); diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss index 2f7b05d..78d7bc9 100644 --- a/assets/stylesheets/bootstrap/_input-group.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -46,9 +46,9 @@ align-items: center; &:not(:last-child) .custom-file-label, - &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); } + &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } &:not(:first-child) .custom-file-label, - &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); } + &:not(:first-child) .custom-file-label::after { @include border-left-radius(0); } } } diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index d9a1774..8710166 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_mixins.scss @@ -36,7 +36,6 @@ // // Layout @import "mixins/clearfix"; -// @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; @import "mixins/float"; diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index edda836..fea8112 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -67,7 +67,7 @@ background-color: $modal-content-bg; background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; - @include border-radius($border-radius-lg); + @include border-radius($modal-content-border-radius); @include box-shadow($modal-content-box-shadow-xs); // Remove focus outline from opened modal outline: 0; @@ -96,7 +96,7 @@ 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 border-top-radius($border-radius-lg); + @include border-top-radius($modal-content-border-radius); .close { padding: $modal-header-padding; diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 8d68c6c..0502527 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -162,11 +162,6 @@ position: absolute; } - .dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` - } - .nav-link { padding-right: $navbar-nav-link-padding-x; padding-left: $navbar-nav-link-padding-x; @@ -189,13 +184,6 @@ .navbar-toggler { display: none; } - - .dropup { - .dropdown-menu { - top: auto; - bottom: 100%; - } - } } } } diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index 959b2eb..9349f3f 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -15,6 +15,7 @@ border: $pagination-border-width solid $pagination-border-color; &:hover { + z-index: 2; color: $pagination-hover-color; text-decoration: none; background-color: $pagination-hover-bg; @@ -23,7 +24,7 @@ &:focus { z-index: 2; - outline: 0; + outline: $pagination-focus-outline; box-shadow: $pagination-focus-box-shadow; } diff --git a/assets/stylesheets/bootstrap/_print.scss b/assets/stylesheets/bootstrap/_print.scss index 5e2ce3a..410216d 100644 --- a/assets/stylesheets/bootstrap/_print.scss +++ b/assets/stylesheets/bootstrap/_print.scss @@ -5,7 +5,7 @@ // ========================================================================== // Print styles. // Inlined to avoid the additional HTTP request: -// http://www.phpied.com/delay-loading-your-print-css/ +// https://www.phpied.com/delay-loading-your-print-css/ // ========================================================================== @if $enable-print-styles { @@ -14,7 +14,7 @@ *::before, *::after { // Bootstrap specific; comment out `color` and `background` - //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953 + //color: $black !important; // Black prints faster text-shadow: none !important; //background: transparent !important; box-shadow: none !important; @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } @@ -101,7 +101,7 @@ display: none; } .badge { - border: $border-width solid #000; + border: $border-width solid $black; } .table { @@ -109,13 +109,13 @@ td, th { - background-color: #fff !important; + background-color: $white !important; } } .table-bordered { th, td { - border: 1px solid #ddd !important; + border: 1px solid $gray-300 !important; } } diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss index a581116..0ac3e0c 100644 --- a/assets/stylesheets/bootstrap/_progress.scss +++ b/assets/stylesheets/bootstrap/_progress.scss @@ -19,6 +19,7 @@ justify-content: center; color: $progress-bar-color; text-align: center; + white-space: nowrap; background-color: $progress-bar-bg; @include transition($progress-bar-transition); } diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index c79fa47..dd23f16 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -30,7 +30,7 @@ html { -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6 + -webkit-tap-highlight-color: rgba($black, 0); // 6 } // IE10+ doesn't honor `` in some cases. @@ -290,7 +290,7 @@ table { caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; - color: $text-muted; + color: $table-caption-color; text-align: left; caption-side: bottom; } @@ -309,7 +309,7 @@ th { label { // Allow labels to use `margin` for spacing. display: inline-block; - margin-bottom: .5rem; + margin-bottom: $label-margin-bottom; } // Remove the default `border-radius` that macOS Chrome adds. diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index 0e3b119..b32732f 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -42,9 +42,9 @@ } -// Bordered version +// Border versions // -// Add borders all around the table and between all the columns. +// Add or remove borders all around the table and between all the columns. .table-bordered { border: $table-border-width solid $table-border-color; @@ -62,13 +62,21 @@ } } +.table-borderless { + th, + td, + thead th, + tbody + tbody { + border: 0; + } +} // Zebra-striping // // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { - tbody tr:nth-of-type(odd) { + tbody tr:nth-of-type(#{$table-striped-order}) { background-color: $table-accent-bg; } } diff --git a/assets/stylesheets/bootstrap/_transitions.scss b/assets/stylesheets/bootstrap/_transitions.scss index df5744b..c8d91e2 100644 --- a/assets/stylesheets/bootstrap/_transitions.scss +++ b/assets/stylesheets/bootstrap/_transitions.scss @@ -1,30 +1,16 @@ // stylelint-disable selector-no-qualifying-type .fade { - opacity: 0; @include transition($transition-fade); - &.show { - opacity: 1; + &:not(.show) { + opacity: 0; } } .collapse { - display: none; - &.show { - display: block; - } -} - -tr { - &.collapse.show { - display: table-row; - } -} - -tbody { - &.collapse.show { - display: table-row-group; + &:not(.show) { + display: none; } } diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index 7b2a1eb..6c7a7cd 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_utilities.scss @@ -8,6 +8,7 @@ @import "utilities/float"; @import "utilities/position"; @import "utilities/screenreaders"; +@import "utilities/shadows"; @import "utilities/sizing"; @import "utilities/spacing"; @import "utilities/text"; diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index be580de..1e17429 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -88,11 +88,11 @@ $theme-colors: map-merge(( $theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // @@ -132,7 +132,8 @@ $sizes: map-merge(( 25: 25%, 50: 50%, 75: 75%, - 100: 100% + 100: 100%, + auto: auto ), $sizes); // stylelint-enable @@ -211,6 +212,10 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; +$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; + $component-active-color: $white !default; $component-active-bg: theme-color("primary") !default; @@ -317,6 +322,9 @@ $table-dark-hover-bg: rgba($white, .075) !default; $table-dark-border-color: lighten($gray-900, 7.5%) !default; $table-dark-color: $body-bg !default; +$table-striped-order: odd !default; + +$table-caption-color: $text-muted !default; // Buttons + Forms // @@ -380,6 +388,8 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease // Forms +$label-margin-bottom: .5rem !default; + $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-line-height: $input-btn-line-height !default; @@ -411,6 +421,7 @@ $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; @@ -449,7 +460,7 @@ $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +$custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; @@ -465,22 +476,22 @@ $custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: 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-indicator-checked-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-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: 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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: 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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: 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-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; +$custom-select-padding-x: .75rem !default; $custom-select-height: $input-height !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-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $white !default; +$custom-select-bg: $input-bg !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: $gray-800 !default; @@ -498,6 +509,22 @@ $custom-select-height-sm: $input-height-sm !default; $custom-select-font-size-lg: 125% !default; $custom-select-height-lg: $input-height-lg !default; +$custom-range-track-width: 100% !default; +$custom-range-track-height: .5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; + $custom-file-height: $input-height !default; $custom-file-focus-border-color: $input-focus-border-color !default; $custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; @@ -585,6 +612,9 @@ $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: ($spacer / 2) !default; + // Navbar $navbar-padding-y: ($spacer / 2) !default; @@ -633,6 +663,7 @@ $pagination-border-width: $border-width !default; $pagination-border-color: $gray-300 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; @@ -676,19 +707,19 @@ $card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: .25rem !default; +$tooltip-padding-x: .5rem !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers @@ -734,26 +765,27 @@ $badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; +$modal-inner-padding: 1rem !default; -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !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: 1rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: $gray-200 !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: 1rem !default; $modal-lg: 800px !default; $modal-md: 500px !default; @@ -842,7 +874,9 @@ $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-divider: quote("/") !default; + +$breadcrumb-border-radius: $border-radius !default; // Carousel @@ -864,7 +898,7 @@ $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='M5.25 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='M2.75 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-transition: transform .6s ease !default; +$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitons (e.g., `transform 2s ease, opacity .5s ease-out`) // Close diff --git a/assets/stylesheets/bootstrap/mixins/_caret.scss b/assets/stylesheets/bootstrap/mixins/_caret.scss index 40478e4..82aea42 100644 --- a/assets/stylesheets/bootstrap/mixins/_caret.scss +++ b/assets/stylesheets/bootstrap/mixins/_caret.scss @@ -14,6 +14,7 @@ @mixin caret-right { border-top: $caret-width solid transparent; + border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 2290682..dec18ba 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -45,7 +45,7 @@ margin-top: .1rem; font-size: .875rem; line-height: 1; - color: #fff; + color: $white; background-color: rgba($color, .8); border-radius: .2rem; } diff --git a/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss index ecd01f7..88c4d64 100644 --- a/assets/stylesheets/bootstrap/mixins/_gradients.scss +++ b/assets/stylesheets/bootstrap/mixins/_gradients.scss @@ -11,7 +11,7 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } @@ -19,27 +19,27 @@ // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } -@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { +@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } -@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-radial($inner-color: #555, $outer-color: #333) { +@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } -@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { +@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss index ec2e328..57823e3 100644 --- a/assets/stylesheets/bootstrap/mixins/_hover.scss +++ b/assets/stylesheets/bootstrap/mixins/_hover.scss @@ -1,9 +1,7 @@ -// stylelint-disable indentation - // Hover mixin and `$enable-hover-media-query` are deprecated. // // Origally added during our alphas and maintained during betas, this mixin was -// designed to prevent `:hover` stickiness on iOS—an issue where hover styles +// designed to prevent `:hover` stickiness on iOS-an issue where hover styles // would persist after initial touch. // // For backward compatibility, we've kept these mixins and updated them to diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index 607ffcb..cd47a4e 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss @@ -12,7 +12,7 @@ } &.active { - color: #fff; + color: $white; background-color: $color; border-color: $color; } diff --git a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss index 493de03..4fb37b6 100644 --- a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +++ b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss @@ -2,9 +2,9 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5) { +@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { height: 0; - margin: ($spacer / 2) 0; + margin: $margin-y 0; overflow: hidden; border-top: 1px solid $color; } diff --git a/assets/stylesheets/bootstrap/mixins/_navbar-align.scss b/assets/stylesheets/bootstrap/mixins/_navbar-align.scss deleted file mode 100644 index b351660..0000000 --- a/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Navbar vertical align -// -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` -// to calculate the appropriate top margin. - -// @mixin navbar-vertical-align($element-height) { -// margin-top: (($navbar-height - $element-height) / 2); -// margin-bottom: (($navbar-height - $element-height) / 2); -// } diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss index 8f3eb1b..812591b 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss @@ -1,6 +1,6 @@ // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { @@ -11,7 +11,6 @@ overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; - clip-path: inset(50%); border: 0; } @@ -30,6 +29,5 @@ overflow: visible; clip: auto; white-space: normal; - clip-path: none; } } diff --git a/assets/stylesheets/bootstrap/mixins/_text-hide.scss b/assets/stylesheets/bootstrap/mixins/_text-hide.scss index aa551fd..4b8f218 100644 --- a/assets/stylesheets/bootstrap/mixins/_text-hide.scss +++ b/assets/stylesheets/bootstrap/mixins/_text-hide.scss @@ -6,4 +6,6 @@ text-shadow: none; background-color: transparent; border: 0; + + @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5."; } diff --git a/assets/stylesheets/bootstrap/mixins/_transition.scss b/assets/stylesheets/bootstrap/mixins/_transition.scss index 7e33dee..f853821 100644 --- a/assets/stylesheets/bootstrap/mixins/_transition.scss +++ b/assets/stylesheets/bootstrap/mixins/_transition.scss @@ -6,4 +6,8 @@ transition: $transition; } } + + @media screen and (prefers-reduced-motion: reduce) { + transition: none; + } } diff --git a/assets/stylesheets/bootstrap/utilities/_flex.scss b/assets/stylesheets/bootstrap/utilities/_flex.scss index 8e47038..3d4266e 100644 --- a/assets/stylesheets/bootstrap/utilities/_flex.scss +++ b/assets/stylesheets/bootstrap/utilities/_flex.scss @@ -16,6 +16,11 @@ .flex#{$infix}-wrap { flex-wrap: wrap !important; } .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex#{$infix}-fill { flex: 1 1 auto !important; } + .flex#{$infix}-grow-0 { flex-grow: 0 !important; } + .flex#{$infix}-grow-1 { flex-grow: 1 !important; } + .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } + .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } .justify-content#{$infix}-start { justify-content: flex-start !important; } .justify-content#{$infix}-end { justify-content: flex-end !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_position.scss b/assets/stylesheets/bootstrap/utilities/_position.scss index ef962ed..9ecdeeb 100644 --- a/assets/stylesheets/bootstrap/utilities/_position.scss +++ b/assets/stylesheets/bootstrap/utilities/_position.scss @@ -3,6 +3,7 @@ // Common values // Sass list not in variables since it's not intended for customization. +// stylelint-disable-next-line scss/dollar-variable-default $positions: static, relative, absolute, fixed, sticky; @each $position in $positions { diff --git a/assets/stylesheets/bootstrap/utilities/_shadows.scss b/assets/stylesheets/bootstrap/utilities/_shadows.scss new file mode 100644 index 0000000..f5d03fc --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_shadows.scss @@ -0,0 +1,6 @@ +// stylelint-disable declaration-no-important + +.shadow-sm { box-shadow: $box-shadow-sm !important; } +.shadow { box-shadow: $box-shadow !important; } +.shadow-lg { box-shadow: $box-shadow-lg !important; } +.shadow-none { box-shadow: none !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index f4b6e65..4f6eba5 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/utilities/_text.scss @@ -4,6 +4,8 @@ // Text // +.text-monospace { font-family: $font-family-monospace; } + // Alignment .text-justify { text-align: justify !important; } @@ -37,14 +39,18 @@ // Contextual colors -.text-white { color: #fff !important; } +.text-white { color: $white !important; } @each $color, $value in $theme-colors { @include text-emphasis-variant(".text-#{$color}", $value); } +.text-body { color: $body-color !important; } .text-muted { color: $text-muted !important; } +.text-black-50 { color: rgba($black, .5) !important; } +.text-white-50 { color: rgba($white, .5) !important; } + // Misc .text-hide { -- cgit v1.2.3