diff options
| author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-10-12 22:16:02 +0300 |
|---|---|---|
| committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-10-12 22:16:02 +0300 |
| commit | 6b9114249aedf7b83fa2289aeb6df1ff1bc412c0 (patch) | |
| tree | 54bfefd86349a6f559609c9e3b320acaa078393f /assets/stylesheets | |
| parent | cd13fec7856d98c1e9eb267724ba9cacc10f4c24 (diff) | |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets')
53 files changed, 796 insertions, 630 deletions
diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index 603ea96..16d5eef 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -8,7 +8,7 @@ // @at-root { - @-ms-viewport { width: device-width; } + @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix } html { diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index d58a4c8..bb1bb10 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -8,6 +8,7 @@ @import "bootstrap/functions"; @import "bootstrap/variables"; @import "bootstrap/mixins"; +@import "bootstrap/root"; @import "bootstrap/print"; @import "bootstrap/reboot"; @import "bootstrap/type"; diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss index 3dfd13f..66fba24 100644 --- a/assets/stylesheets/bootstrap/_alert.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -3,6 +3,7 @@ // .alert { + position: relative; padding: $alert-padding-y $alert-padding-x; margin-bottom: $alert-margin-bottom; border: $alert-border-width solid transparent; @@ -28,9 +29,9 @@ .alert-dismissible { // Adjust close link position .close { - position: relative; - top: -$alert-padding-y; - right: -$alert-padding-x; + position: absolute; + top: 0; + right: 0; padding: $alert-padding-y $alert-padding-x; color: inherit; } diff --git a/assets/stylesheets/bootstrap/_badge.scss b/assets/stylesheets/bootstrap/_badge.scss index fea10eb..b87a1b0 100644 --- a/assets/stylesheets/bootstrap/_badge.scss +++ b/assets/stylesheets/bootstrap/_badge.scss @@ -12,7 +12,7 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - @include border-radius(); + @include border-radius($badge-border-radius); // Empty badges collapse automatically &:empty { diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss index 5d77eea..25b9d85 100644 --- a/assets/stylesheets/bootstrap/_breadcrumb.scss +++ b/assets/stylesheets/bootstrap/_breadcrumb.scss @@ -27,6 +27,7 @@ + .breadcrumb-item:hover::before { text-decoration: underline; } + // stylelint-disable-next-line no-duplicate-selectors + .breadcrumb-item:hover::before { text-decoration: none; } diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index 4063506..1a373f3 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// stylelint-disable selector-no-qualifying-type // Make the div behave like a button .btn-group, @@ -47,7 +47,8 @@ border-radius: 0; } -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +// Set corners individual because sometimes a single button can be in a .btn-group +// and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; @@ -55,13 +56,15 @@ @include border-right-radius(0); } } -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu +// immediately after it .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { @include border-left-radius(0); } -// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +// Custom edits for including btn-groups within btn-groups (useful for including +// dropdown buttons within a btn-group) .btn-group > .btn-group { float: left; } @@ -152,14 +155,14 @@ &:not(:first-child):not(:last-child) { border-radius: 0; } - } - &:first-child:not(:last-child) { - @include border-bottom-radius(0); - } + &:first-child:not(:last-child) { + @include border-bottom-radius(0); + } - &:last-child:not(:first-child) { - @include border-top-radius(0); + &:last-child:not(:first-child) { + @include border-top-radius(0); + } } > .btn-group:not(:first-child):not(:last-child) > .btn { diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index c6dbb5d..72fc5f3 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// stylelint-disable selector-no-qualifying-type // // Base styles @@ -32,8 +32,8 @@ @include box-shadow(none); } - &:active, - &.active { + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { background-image: none; @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); } @@ -76,7 +76,6 @@ fieldset[disabled] a.btn { font-weight: $font-weight-normal; color: $link-color; background-color: transparent; - border-radius: 0; @include hover { color: $link-hover-color; diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 40fa425..a739f19 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -12,6 +12,23 @@ background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group:first-child { + .list-group-item:first-child { + @include border-top-radius($card-border-radius); + } + } + + > .list-group:last-child { + .list-group-item:last-child { + @include border-bottom-radius($card-border-radius); + } + } } .card-body { @@ -44,25 +61,6 @@ } } -.card { - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); - } - } - - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); - } - } - - .card-header + .list-group > .list-group-item:first-child { - border-top: 0; - } -} - - // // Optional textual caps // @@ -76,6 +74,12 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } + + + .list-group { + .list-group-item:first-child { + border-top: 0; + } + } } .card-footer { @@ -149,6 +153,7 @@ .card { display: flex; + // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; @@ -175,6 +180,7 @@ flex-flow: row wrap; .card { + // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored flex: 1 0 0%; margin-bottom: 0; @@ -207,7 +213,18 @@ } } - &:not(:first-child):not(:last-child) { + &:only-child { + @include border-radius($card-border-radius); + + .card-img-top { + @include border-top-radius($card-border-radius); + } + .card-img-bottom { + @include border-bottom-radius($card-border-radius); + } + } + + &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; .card-img-top, diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss index f181490..897d486 100644 --- a/assets/stylesheets/bootstrap/_close.scss +++ b/assets/stylesheets/bootstrap/_close.scss @@ -19,11 +19,11 @@ // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -// scss-lint:disable QualifyingElement +// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type button.close { padding: 0; background: transparent; border: 0; -webkit-appearance: none; } -// scss-lint:enable QualifyingElement +// stylelint-enable diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index 1bf268b..41dae4d 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -1,5 +1,3 @@ -// scss-lint:disable PropertyCount, VendorPrefix - // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open @@ -139,7 +137,6 @@ color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-clip: padding-box; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -165,6 +162,11 @@ } } + &[multiple] { + height: auto; + background-image: none; + } + &:disabled { color: $custom-select-disabled-color; background-color: $custom-select-disabled-bg; @@ -216,13 +218,11 @@ z-index: 5; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; - overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; user-select: none; background-color: $custom-file-bg; - background-clip: padding-box; border: $custom-file-border-width solid $custom-file-border-color; @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -235,8 +235,9 @@ &::before { position: absolute; - top: 0; - right: 0; + top: -$custom-file-border-width; + right: -$custom-file-border-width; + bottom: -$custom-file-border-width; z-index: 6; display: block; height: $custom-file-height; @@ -244,7 +245,8 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; - border-left: $custom-file-border-width solid $custom-file-border-color; + border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index 05e8b16..1782d5b 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -6,37 +6,7 @@ .dropdown-toggle { // Generate the caret automatically - &::after { - display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; - content: ""; - border-top: $caret-width solid; - border-right: $caret-width solid transparent; - border-left: $caret-width solid transparent; - } - - &:empty::after { - margin-left: 0; - } -} - -// 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 { - margin-top: 0; - margin-bottom: $dropdown-spacer; - } - - .dropdown-toggle { - &::after { - border-top: 0; - border-bottom: $caret-width solid; - } - } + @include caret; } // The dropdown menu @@ -61,6 +31,19 @@ @include box-shadow($dropdown-box-shadow); } +// 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 { + margin-top: 0; + margin-bottom: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(up); + } +} + // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { @include nav-divider($dropdown-divider-bg); @@ -105,14 +88,6 @@ } } -// Open state for the dropdown -.show { - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - .dropdown-menu.show { display: block; } diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index fb3dc55..0ece186 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement, VendorPrefix +// stylelint-disable selector-no-qualifying-type // // Textual form controls @@ -88,21 +88,24 @@ 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: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); + padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); margin-bottom: 0; // Override the `<label>` default + line-height: $input-btn-line-height; } .col-form-label-lg { - padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); + padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); font-size: $font-size-lg; + line-height: $input-btn-line-height-lg; } .col-form-label-sm { - padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); + padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); font-size: $font-size-sm; + line-height: $input-btn-line-height-sm; } @@ -255,28 +258,6 @@ select.form-control-lg { // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for // server side validation. -.invalid-feedback { - display: none; - margin-top: .25rem; - font-size: .875rem; - color: $form-feedback-invalid-color; -} - -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - width: 250px; - padding: .5rem; - margin-top: .1rem; - font-size: .875rem; - line-height: 1; - color: #fff; - background-color: rgba($form-feedback-invalid-color,.8); - border-radius: .2rem; -} - @include form-validation-state("valid", $form-feedback-valid-color); @include form-validation-state("invalid", $form-feedback-invalid-color); diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss index a63680a..5d43b57 100644 --- a/assets/stylesheets/bootstrap/_functions.scss +++ b/assets/stylesheets/bootstrap/_functions.scss @@ -80,11 +80,7 @@ @function theme-color-level($color-name: "primary", $level: 0) { $color: theme-color($color-name); $color-base: if($level > 0, #000, #fff); + $level: abs($level); - @if $level < 0 { - // Lighter values need a quick double negative for the Sass math to work - @return mix($color-base, $color, $level * -1 * $theme-color-interval); - } @else { - @return mix($color-base, $color, $level * $theme-color-interval); - } + @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 95b17be..a1d16e3 100644 --- a/assets/stylesheets/bootstrap/_input-group.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -1,3 +1,5 @@ +// stylelint-disable selector-no-qualifying-type + // // Base styles // @@ -5,7 +7,7 @@ .input-group { position: relative; display: flex; - align-items: center; + align-items: stretch; width: 100%; .form-control { @@ -29,6 +31,8 @@ .input-group-addon, .input-group-btn, .input-group .form-control { + display: flex; + align-items: center; &:not(:first-child):not(:last-child) { @include border-radius(0); } @@ -70,7 +74,6 @@ color: $input-group-addon-color; text-align: center; background-color: $input-group-addon-bg; - background-clip: padding-box; border: $input-btn-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); @@ -87,13 +90,11 @@ @include border-radius($input-border-radius-lg); } - // scss-lint:disable QualifyingElement // Nuke default margins from checkboxes and radios to vertically center within. input[type="radio"], input[type="checkbox"] { margin-top: 0; } - // scss-lint:enable QualifyingElement } @@ -132,6 +133,7 @@ .input-group-btn { position: relative; + align-items: stretch; // Jankily prevent input button groups from wrapping with `white-space` and // `font-size` in combination with `inline-block` on buttons. font-size: 0; @@ -141,8 +143,6 @@ // element above the siblings. > .btn { position: relative; - background-clip: padding-box; - border: $input-btn-border-width solid $input-group-btn-border-color; + .btn { margin-left: (-$input-btn-border-width); @@ -154,6 +154,10 @@ } } + &:first-child > .btn + .btn { + margin-left: 0; + } + // Negative margin to only have a single, shared border between the two &:not(:last-child) { > .btn, @@ -165,7 +169,14 @@ > .btn, > .btn-group { z-index: 2; - margin-left: (-$input-btn-border-width); + // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. + margin-left: 0; + + // When input is first, overlap the right side of it with the button(-group) + &:first-child { + margin-left: (-$input-btn-border-width); + } + // Because specificity @include hover-focus-active { z-index: 3; diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 7e0b19e..ce3876b 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -86,8 +86,13 @@ .list-group-flush { .list-group-item { border-right: 0; + border-bottom: 0; border-left: 0; border-radius: 0; + + &:first-child { + border-top: 0; + } } &:first-child { diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index 09035bf..d9a1774 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_mixins.scss @@ -19,6 +19,7 @@ // // Components @import "mixins/alert"; @import "mixins/buttons"; +@import "mixins/caret"; @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index a563e6f..e655850 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -82,13 +82,16 @@ // Top section of the modal w/ title and dismiss .modal-header { display: flex; - align-items: center; // vertically center it + align-items: flex-start; // so the close btn always stays on the upper right corner 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); .close { - margin-left: auto; // Force icon to the right even when there's no .modal-title + padding: $modal-header-padding; + // auto on the left force icon to the right even when there is no .modal-title + margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; } } diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index ed5d76b..14e76c9 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -74,12 +74,12 @@ .nav-pills { .nav-link { @include border-radius($nav-pills-border-radius); + } - &.active, - .show > & { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; - } + .nav-link.active, + .show > .nav-link { + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; } } diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index ed49b76..6b023e8 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -98,6 +98,7 @@ // on the `.navbar` parent. .navbar-collapse { flex-basis: 100%; + flex-grow: 1; // For always expanded or extra full navbars, ensure content aligns itself // properly vertically. Can be easily overridden with flex utilities. align-items: center; @@ -146,8 +147,7 @@ } @include media-breakpoint-up($next) { - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; justify-content: flex-start; .navbar-nav { @@ -174,15 +174,23 @@ flex-wrap: nowrap; } - // scss-lint:disable ImportantRule .navbar-collapse { - display: flex !important; + display: flex !important; // stylelint-disable-line declaration-no-important + + // Changes flex-bases to auto because of an IE10 bug + flex-basis: auto; } - // scss-lint:enable ImportantRule .navbar-toggler { display: none; } + + .dropup { + .dropdown-menu { + top: auto; + bottom: 100%; + } + } } } } @@ -235,6 +243,13 @@ .navbar-text { color: $navbar-light-color; + a { + color: $navbar-light-active-color; + + @include hover-focus { + color: $navbar-light-active-color; + } + } } } @@ -280,5 +295,12 @@ .navbar-text { color: $navbar-dark-color; + a { + color: $navbar-dark-active-color; + + @include hover-focus { + color: $navbar-dark-active-color; + } + } } } diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index 4ef1442..69a36ff 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -1,8 +1,6 @@ .pagination { display: flex; - // 1-2: Disable browser default list styles - padding-left: 0; // 1 - list-style: none; // 2 + @include list-unstyled(); @include border-radius(); } diff --git a/assets/stylesheets/bootstrap/_print.scss b/assets/stylesheets/bootstrap/_print.scss index 7f8d990..6505d3e 100644 --- a/assets/stylesheets/bootstrap/_print.scss +++ b/assets/stylesheets/bootstrap/_print.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// stylelint-disable declaration-no-important, selector-no-qualifying-type // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css @@ -14,8 +14,7 @@ *::before, *::after { // Bootstrap specific; comment out `color` and `background` - //color: #000 !important; // Black prints faster: - // http://www.sanbeiji.com/archives/953 + //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953 text-shadow: none !important; //background: transparent !important; box-shadow: none !important; diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 41f084b..3055cc3 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix +// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // Reboot // @@ -35,13 +35,17 @@ html { // IE10+ doesn't honor `<meta name="viewport">` in some cases. @at-root { - @-ms-viewport { width: device-width; } + @-ms-viewport { + width: device-width; + } } +// stylelint-disable selector-list-comma-newline-after // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } +// stylelint-enable selector-list-comma-newline-after // Body // @@ -91,10 +95,12 @@ hr { // // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. +// stylelint-disable selector-list-comma-newline-after h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: .5rem; + margin-bottom: $headings-margin-bottom; } +// stylelint-enable selector-list-comma-newline-after // Reset margins on paragraphs // @@ -157,10 +163,12 @@ dfn { font-style: italic; // Add the correct font style in Android 4.3- } +// stylelint-disable font-weight-notation b, strong { font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari } +// stylelint-enable font-weight-notation small { font-size: 80%; // Add the correct font size in all browsers @@ -224,6 +232,7 @@ a:not([href]):not([tabindex]) { // Code // +// stylelint-disable font-family-no-duplicate-names pre, code, kbd, @@ -231,6 +240,7 @@ samp { font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. font-size: 1em; // Correct the odd `em` font sizing in all browsers. } +// stylelint-enable font-family-no-duplicate-names pre { // Remove browser default top margin @@ -239,6 +249,9 @@ pre { margin-bottom: 1rem; // Don't allow content to break outside overflow: auto; + // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so + // we force a non-overlapping, non-auto-hiding scrollbar to counteract. + -ms-overflow-style: scrollbar; } @@ -273,14 +286,14 @@ svg:not(:root) { // However, they DO support removing the click delay via `touch-action: manipulation`. // See: // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action +// * https://caniuse.com/#feat=css-touch-action // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay a, area, button, [role="button"], -input:not([type=range]), +input:not([type="range"]), label, select, summary, @@ -322,6 +335,13 @@ label { margin-bottom: .5rem; } +// Remove the default `border-radius` that macOS Chrome adds. +// +// Details at https://github.com/twbs/bootstrap/issues/24093 +button { + border-radius: 0; +} + // Work around a Firefox/IE bug where the transparent `button` background // results in a loss of the default `button` focus styles. // diff --git a/assets/stylesheets/bootstrap/_root.scss b/assets/stylesheets/bootstrap/_root.scss new file mode 100644 index 0000000..78ac039 --- /dev/null +++ b/assets/stylesheets/bootstrap/_root.scss @@ -0,0 +1,16 @@ +:root { + @each $color, $value in $colors { + --#{$color}: $value; + } + + @each $color, $value in $theme-colors { + --#{$color}: $value; + } + + @each $bp, $value in $grid-breakpoints { + --breakpoint-#{$bp}: $value; + } + + --font-family-sans-serif: $font-family-sans-serif; + --font-family-monospace: $font-family-monospace; +} diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index 3238439..6bd0b91 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -103,6 +103,7 @@ // // Same table markup, but inverted color scheme: dark background and light text. +// stylelint-disable-next-line no-duplicate-selectors .table { .thead-dark { th { diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index fe97fbb..7b5db1c 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_tooltip.scss @@ -21,6 +21,12 @@ height: $tooltip-arrow-height; } + .arrow::before { + position: absolute; + border-color: transparent; + border-style: solid; + } + &.bs-tooltip-top { padding: $tooltip-arrow-width 0; .arrow { @@ -88,12 +94,6 @@ @extend .bs-tooltip-left; } } - - .arrow::before { - position: absolute; - border-color: transparent; - border-style: solid; - } } // Wrapper for the tooltip content diff --git a/assets/stylesheets/bootstrap/_transitions.scss b/assets/stylesheets/bootstrap/_transitions.scss index 86c04a5..df5744b 100644 --- a/assets/stylesheets/bootstrap/_transitions.scss +++ b/assets/stylesheets/bootstrap/_transitions.scss @@ -1,3 +1,5 @@ +// stylelint-disable selector-no-qualifying-type + .fade { opacity: 0; @include transition($transition-fade); diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss index 8928341..b1b8f61 100644 --- a/assets/stylesheets/bootstrap/_type.scss +++ b/assets/stylesheets/bootstrap/_type.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important, selector-list-comma-newline-after + // // Headings // diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index c0b5494..1808e4b 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -8,7 +8,8 @@ // Color system // -$white: #fff !default; +// stylelint-disable +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -18,19 +19,19 @@ $gray-600: #868e96 !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; $grays: () !default; $grays: map-merge(( - 100: $gray-100, - 200: $gray-200, - 300: $gray-300, - 400: $gray-400, - 500: $gray-500, - 600: $gray-600, - 700: $gray-700, - 800: $gray-800, - 900: $gray-900 + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 ), $grays); $blue: #007bff !default; @@ -46,41 +47,43 @@ $cyan: #17a2b8 !default; $colors: () !default; $colors: map-merge(( - blue: $blue, - indigo: $indigo, - purple: $purple, - pink: $pink, - red: $red, - orange: $orange, - yellow: $yellow, - green: $green, - teal: $teal, - cyan: $cyan, - white: $white, - gray: $gray-600, - gray-dark: $gray-800 + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 ), $colors); $theme-colors: () !default; $theme-colors: map-merge(( - primary: $blue, - secondary: $gray-600, - success: $green, - info: $cyan, - warning: $yellow, - danger: $red, - light: $gray-100, - dark: $gray-800 + "primary": $blue, + "secondary": $gray-600, + "success": $green, + "info": $cyan, + "warning": $yellow, + "danger": $red, + "light": $gray-100, + "dark": $gray-800 ), $theme-colors); +// stylelint-enable // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // Options // // Quickly modify global styling by enabling or disabling optional features. +$enable-caret: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; @@ -118,23 +121,23 @@ $sizes: ( // // Settings for the `<body>` element. -$body-bg: $white !default; -$body-color: $gray-900 !default; +$body-bg: $white !default; +$body-color: $gray-900 !default; // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: 1rem !default; +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints @@ -149,6 +152,7 @@ $grid-breakpoints: ( lg: 992px, xl: 1200px ) !default; + @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); @@ -163,6 +167,7 @@ $container-max-widths: ( lg: 960px, xl: 1140px ) !default; + @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -170,97 +175,99 @@ $container-max-widths: ( // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; // Components // // Define common padding and border radius sizes and more. -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; -$border-width: 1px !default; -$border-color: $gray-200 !default; +$border-width: 1px !default; +$border-color: $gray-200 !default; -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; -$caret-width: .3em !default; +$caret-width: .3em !default; -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; // 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, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; +// stylelint-disable value-keyword-case +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; +// stylelint-enable value-keyword-case -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: 1.25rem !default; +$font-size-sm: .875rem !default; -$font-weight-light: 300 !default; -$font-weight-normal: normal !default; -$font-weight-bold: bold !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; -$h1-font-size: 2.5rem !default; -$h2-font-size: 2rem !default; -$h3-font-size: 1.75rem !default; -$h4-font-size: 1.5rem !default; -$h5-font-size: 1.25rem !default; -$h6-font-size: 1rem !default; +$h1-font-size: 2.5rem !default; +$h2-font-size: 2rem !default; +$h3-font-size: 1.75rem !default; +$h4-font-size: 1.5rem !default; +$h5-font-size: 1.25rem !default; +$h6-font-size: 1rem !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; +$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-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; +$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; +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; -$small-font-size: 80% !default; +$small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; -$hr-border-color: rgba($black,.1) !default; -$hr-border-width: $border-width !default; +$hr-border-color: rgba($black,.1) !default; +$hr-border-width: $border-width !default; -$mark-padding: .2em !default; +$mark-padding: .2em !default; -$dt-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; -$nested-kbd-font-weight: $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; +$list-inline-padding: 5px !default; $mark-bg: #fcf8e3 !default; @@ -269,180 +276,179 @@ $mark-bg: #fcf8e3 !default; // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding: .75rem !default; -$table-cell-padding-sm: .3rem !default; +$table-cell-padding: .75rem !default; +$table-cell-padding-sm: .3rem !default; -$table-bg: transparent !default; -$table-accent-bg: rgba($black,.05) !default; -$table-hover-bg: rgba($black,.075) !default; -$table-active-bg: $table-hover-bg !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black,.05) !default; +$table-hover-bg: rgba($black,.075) !default; +$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-200 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-200 !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$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-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; // Buttons // // For each of Bootstrap's buttons, define text, background and border color. -$input-btn-padding-y: .5rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: 1.25 !default; +$input-btn-padding-y: .375rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-line-height: $line-height-base !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: 1.5 !default; +$input-btn-padding-y-sm: .25rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; -$input-btn-padding-y-lg: .5rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: 1.5 !default; +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !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 3px rgba(theme-color("primary"), .25) !default; -$btn-active-box-shadow: inset 0 3px 5px rgba($black,.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 3px rgba(theme-color("primary"), .25) !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; -$btn-link-disabled-color: $gray-600 !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem !default; +$btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; -$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Forms -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-color: $gray-700 !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($black,.075) !default; +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-btn-border-width: $border-width !default; // For form controls and buttons +$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-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; -$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; -$input-focus-color: $input-color !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; +$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; +$input-focus-color: $input-color !default; -$input-placeholder-color: $gray-600 !default; +$input-placeholder-color: $gray-600 !default; -$input-height-border: $input-btn-border-width * 2 !default; +$input-height-border: $input-btn-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; -$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; -$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; -$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; +$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; -$form-text-margin-top: .25rem !default; +$form-text-margin-top: .25rem !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-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-check-inline-margin-x: .75rem !default; -$form-group-margin-bottom: 1rem !default; +$form-group-margin-bottom: 1rem !default; -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: $gray-200 !default; -$input-group-addon-border-color: $input-border-color !default; -$input-group-btn-border-color: $input-border-color !default; +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-y: .25rem !default; -$custom-control-spacer-x: 1rem !default; +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-y: .25rem !default; +$custom-control-spacer-x: 1rem !default; -$custom-control-indicator-size: 1rem !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($black,.1) !default; +$custom-control-indicator-size: 1rem !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($black,.1) !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-description-disabled-color: $gray-600 !default; +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-description-disabled-color: $gray-600 !default; -$custom-control-indicator-checked-color: $white !default; -$custom-control-indicator-checked-bg: theme-color("primary") !default; -$custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-checked-color: $white !default; +$custom-control-indicator-checked-bg: theme-color("primary") !default; +$custom-control-indicator-checked-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default; -$custom-control-indicator-active-color: $white !default; -$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; -$custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-color: $white !default; +$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; +$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-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: theme-color("primary") !default; +$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !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-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-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-height: $input-height !default; +$custom-select-padding-y: .375rem !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-disabled-bg: $gray-200 !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: #333 !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: lighten(theme-color("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-font-size-sm: 75% !default; -$custom-select-height-sm: $input-height-sm !default; - -$custom-file-height: $input-height !default; -$custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; - -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; -$custom-file-color: $input-color !default; -$custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; -$custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $input-border-radius !default; -$custom-file-box-shadow: $input-box-shadow !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $input-group-addon-bg !default; +$custom-select-bg: $white !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: #333 !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: lighten(theme-color("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-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-file-height: $input-height !default; +$custom-file-width: 14rem !default; +$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( placeholder: ( en: "Choose file..." @@ -454,36 +460,36 @@ $custom-file-text: ( // Form validation -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-color: theme-color("danger") !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black,.15) !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: .125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black,.15) !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; -$dropdown-link-disabled-color: $gray-600 !default; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; +$dropdown-item-padding-y: .25rem !default; +$dropdown-item-padding-x: 1.5rem !default; -$dropdown-header-color: $gray-600 !default; +$dropdown-header-color: $gray-600 !default; // Z-index master list @@ -491,31 +497,31 @@ $dropdown-header-color: $gray-600 !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navs -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: #ddd !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 !default; -$nav-tabs-link-active-color: $gray-700 !default; -$nav-tabs-link-active-bg: $body-bg !default; -$nav-tabs-link-active-border-color: #ddd !default; +$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: #ddd !default; -$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-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; // Navbar @@ -528,285 +534,286 @@ $nav-link-height: $navbar-brand-font-size * $line-height-base $navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; $navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; -$navbar-toggler-padding-y: .25rem !default; -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; -$navbar-toggler-border-radius: $btn-border-radius !default; +$navbar-toggler-padding-y: .25rem !default; +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-dark-color: rgba($white,.5) !default; $navbar-dark-hover-color: rgba($white,.75) !default; -$navbar-dark-active-color: rgba($white,1) !default; +$navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white,.25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-dark-toggler-border-color: 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-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black,.1) !default; // Pagination -$pagination-padding-y: .5rem !default; -$pagination-padding-x: .75rem !default; -$pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-sm: .5rem !default; -$pagination-padding-y-lg: .75rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; +$pagination-padding-y: .5rem !default; +$pagination-padding-x: .75rem !default; +$pagination-padding-y-sm: .25rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: #ddd !default; +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: #ddd !default; -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: #ddd !default; +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: #ddd !default; -$pagination-active-color: $white !default; -$pagination-active-bg: theme-color("primary") !default; -$pagination-active-border-color: theme-color("primary") !default; +$pagination-active-color: $white !default; +$pagination-active-bg: theme-color("primary") !default; +$pagination-active-border-color: theme-color("primary") !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: #ddd !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: #ddd !default; // Jumbotron -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-200 !default; +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; // Cards -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black,.125) !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-bg: $white !default; +$card-spacer-y: .75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black,.125) !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-cap-bg: rgba($black, .03) !default; +$card-bg: $white !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: 1.25rem !default; -$card-group-margin: ($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !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: $white !default; -$tooltip-bg: $black !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: 3px !default; -$tooltip-padding-x: 8px !default; -$tooltip-margin: 0 !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: 3px !default; +$tooltip-padding-x: 8px !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: 5px !default; -$tooltip-arrow-height: 5px !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-arrow-width: 5px !default; +$tooltip-arrow-height: 5px !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers -$popover-inner-padding: 1px !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba($black,.2) !default; -$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; +$popover-inner-padding: 1px !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black,.2) !default; +$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; -$popover-header-bg: darken($popover-bg, 3%) !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: 8px !default; -$popover-header-padding-x: 14px !default; +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 8px !default; +$popover-header-padding-x: 14px !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: 9px !default; -$popover-body-padding-x: 14px !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: 9px !default; +$popover-body-padding-x: 14px !default; -$popover-arrow-width: 10px !default; -$popover-arrow-height: 5px !default; -$popover-arrow-color: $popover-bg !default; +$popover-arrow-width: 10px !default; +$popover-arrow-height: 5px !default; +$popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .4em !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: .25em !default; +$badge-padding-x: .4em !default; +$badge-border-radius: $border-radius !default; -$badge-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. -$badge-pill-border-radius: 10rem !default; +$badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 15px !default; +$modal-inner-padding: 15px !default; -$modal-dialog-margin: 10px !default; -$modal-dialog-margin-y-sm-up: 30px !default; +$modal-dialog-margin: 10px !default; +$modal-dialog-margin-y-sm-up: 30px !default; -$modal-title-line-height: $line-height-base !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 3px 9px rgba($black,.5) !default; -$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !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 3px 9px rgba($black,.5) !default; +$modal-content-box-shadow-sm-up: 0 5px 15px 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: 15px !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: 15px !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; -$modal-transition: transform .3s ease-out !default; +$modal-transition: transform .3s ease-out !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: .75rem !default; -$alert-padding-x: 1.25rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; +$alert-padding-y: .75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; // Progress bars -$progress-height: 1rem !default; -$progress-font-size: .75rem !default; -$progress-bg: $gray-200 !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: theme-color("primary") !default; -$progress-bar-animation-timing: 1s linear infinite !default; -$progress-bar-transition: width .6s ease !default; +$progress-height: 1rem !default; +$progress-font-size: .75rem !default; +$progress-bg: $gray-200 !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: theme-color("primary") !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; // List group -$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-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-y: .75rem !default; -$list-group-item-padding-x: 1.25rem !default; +$list-group-item-padding-y: .75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; -$list-group-action-active-color: $body-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem !default; -$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($black,.075) !default; -$thumbnail-transition: all .2s ease-in-out !default; +$thumbnail-padding: .25rem !default; +$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($black,.075) !default; +$thumbnail-transition: all .2s ease-in-out !default; // Figures -$figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-600 !default; +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; +$breadcrumb-padding-y: .75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: .5rem !default; -$breadcrumb-margin-bottom: 1rem !default; +$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-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: "/" !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !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-color: $white !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; -$carousel-control-icon-width: 20px !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-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; // Close -$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; +$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 -$code-font-size: 90% !default; -$code-padding-y: .2rem !default; -$code-padding-x: .4rem !default; -$code-color: #bd4147 !default; -$code-bg: $gray-100 !default; +$code-font-size: 90% !default; +$code-padding-y: .2rem !default; +$code-padding-x: .4rem !default; +$code-color: #bd4147 !default; +$code-bg: $gray-100 !default; -$kbd-color: $white !default; -$kbd-bg: $gray-900 !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; -$pre-color: $gray-900 !default; -$pre-scrollable-max-height: 340px !default; +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss index 54a734d..5860d73 100644 --- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss +++ b/assets/stylesheets/bootstrap/mixins/_background-variant.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Contextual backgrounds @mixin bg-variant($parent, $color) { diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index 082c5f9..a9866bd 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -81,8 +81,18 @@ $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); - @media (min-width: $min) and (max-width: $max) { - @content; + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($lower) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($upper) { + @content; + } } } diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index 44ce4f7..7ce8fef 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -32,8 +32,8 @@ border-color: $border; } - &:active, - &.active, + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active, .show > &.dropdown-toggle { background-color: $active-background; background-image: none; // Remove the gradient for the pressed/active state @@ -65,8 +65,8 @@ background-color: transparent; } - &:active, - &.active, + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active, .show > &.dropdown-toggle { color: $color-hover; background-color: $color; diff --git a/assets/stylesheets/bootstrap/mixins/_caret.scss b/assets/stylesheets/bootstrap/mixins/_caret.scss new file mode 100644 index 0000000..daab9d0 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_caret.scss @@ -0,0 +1,35 @@ +@mixin caret-down { + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-bottom: 0; + border-left: $caret-width solid transparent; +} + +@mixin caret-up { + border-top: 0; + border-right: $caret-width solid transparent; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; +} + +@mixin caret($direction: down) { + @if $enable-caret { + &::after { + display: inline-block; + width: 0; + height: 0; + margin-left: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @if $direction == down { + @include caret-down; + } @else if $direction == up { + @include caret-up; + } + } + + &:empty::after { + margin-left: 0; + } + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_float.scss b/assets/stylesheets/bootstrap/mixins/_float.scss index b43116f..48fa8b6 100644 --- a/assets/stylesheets/bootstrap/mixins/_float.scss +++ b/assets/stylesheets/bootstrap/mixins/_float.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + @mixin float-left { float: left !important; } diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 67e198c..6403f46 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -1,7 +1,7 @@ // Form control focus state // // Generate a customized focus state and for any input with the specified color, -// which defaults to the `@input-border-color-focus` variable. +// which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on @@ -23,6 +23,28 @@ @mixin form-validation-state($state, $color) { + .#{$state}-feedback { + display: none; + margin-top: .25rem; + font-size: .875rem; + color: $color; + } + + .#{$state}-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + width: 250px; + padding: .5rem; + margin-top: .1rem; + font-size: .875rem; + line-height: 1; + color: #fff; + background-color: rgba($color,.8); + border-radius: .2rem; + } + .form-control, .custom-select { .was-validated &:#{$state}, diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index a9e7c75..41bdf46 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -10,7 +10,7 @@ width: 100%; min-height: 1px; // Prevent columns from collapsing when empty padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-left: ($gutter / 2); } @each $breakpoint in map-keys($breakpoints) { @@ -46,6 +46,10 @@ } } + .order#{$infix}-first { + order: -1; + } + @for $i from 1 through $columns { .order#{$infix}-#{$i} { order: $i; @@ -56,7 +60,7 @@ @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { - @include make-col-offset($i, $columns) + @include make-col-offset($i, $columns); } } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 584c78b..b75ebcb 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -4,10 +4,10 @@ @mixin make-container() { width: 100%; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); margin-right: auto; margin-left: auto; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); } @@ -24,7 +24,7 @@ display: flex; flex-wrap: wrap; margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-left: ($grid-gutter-width / -2); } @mixin make-col-ready() { @@ -35,7 +35,7 @@ width: 100%; min-height: 1px; // Prevent collapsing padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); } @mixin make-col($size, $columns: $grid-columns) { @@ -47,5 +47,6 @@ } @mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); + $num: $size / $columns; + margin-left: if($num == 0, 0, percentage($num)); } diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss index 4aa4b1d..fd2f1e2 100644 --- a/assets/stylesheets/bootstrap/mixins/_hover.scss +++ b/assets/stylesheets/bootstrap/mixins/_hover.scss @@ -1,3 +1,4 @@ +// stylelint-disable indentation @mixin hover { // TODO: re-enable along with mq4-hover-shim // @if $enable-hover-media-query { @@ -8,21 +9,21 @@ // } // } // @else { -// scss-lint:disable Indentation - &:hover { @content } -// scss-lint:enable Indentation + &:hover { @content; } // } } @mixin hover-focus { @if $enable-hover-media-query { - &:focus { @content } - @include hover { @content } + &:focus { + @content; + } + @include hover { @content; } } @else { &:focus, &:hover { - @content + @content; } } } @@ -31,14 +32,14 @@ @if $enable-hover-media-query { &, &:focus { - @content + @content; } - @include hover { @content } + @include hover { @content; } } @else { &, &:focus, &:hover { - @content + @content; } } } @@ -47,14 +48,14 @@ @if $enable-hover-media-query { &:focus, &:active { - @content + @content; } - @include hover { @content } + @include hover { @content; } } @else { &:focus, &:active, &:hover { - @content + @content; } } } diff --git a/assets/stylesheets/bootstrap/mixins/_image.scss b/assets/stylesheets/bootstrap/mixins/_image.scss index c2b45f2..0544f0d 100644 --- a/assets/stylesheets/bootstrap/mixins/_image.scss +++ b/assets/stylesheets/bootstrap/mixins/_image.scss @@ -20,15 +20,15 @@ // // Short retina mixin for setting background-image and -size. +// stylelint-disable indentation, media-query-list-comma-newline-after @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. - // Compatibility info: http://caniuse.com/#feat=css-media-resolution - @media - only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx + // Compatibility info: https://caniuse.com/#feat=css-media-resolution + @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index ba27b50..278787b 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss @@ -6,7 +6,6 @@ background-color: $background; } - //scss-lint:disable QualifyingElement a.list-group-item-#{$state}, button.list-group-item-#{$state} { color: $color; @@ -22,5 +21,4 @@ border-color: $color; } } - // scss-lint:enable QualifyingElement } diff --git a/assets/stylesheets/bootstrap/mixins/_navbar-align.scss b/assets/stylesheets/bootstrap/mixins/_navbar-align.scss index c454a4f..b351660 100644 --- a/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +++ b/assets/stylesheets/bootstrap/mixins/_navbar-align.scss @@ -1,7 +1,8 @@ // 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. +// 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); diff --git a/assets/stylesheets/bootstrap/mixins/_reset-text.scss b/assets/stylesheets/bootstrap/mixins/_reset-text.scss index 4cf9e79..71edb00 100644 --- a/assets/stylesheets/bootstrap/mixins/_reset-text.scss +++ b/assets/stylesheets/bootstrap/mixins/_reset-text.scss @@ -1,4 +1,3 @@ -// scss-lint:disable DuplicateProperty @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. @@ -6,7 +5,7 @@ font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported - text-align: start; + text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties text-decoration: none; text-shadow: none; text-transform: none; diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss index a5fa51c..31fb68a 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss @@ -1,7 +1,7 @@ // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content -// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ +// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { position: absolute; diff --git a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss index 9cd4b6a..58db3e0 100644 --- a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +++ b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Typography @mixin text-emphasis-variant($parent, $color) { diff --git a/assets/stylesheets/bootstrap/mixins/_visibility.scss b/assets/stylesheets/bootstrap/mixins/_visibility.scss index f67fc1c..fe523d0 100644 --- a/assets/stylesheets/bootstrap/mixins/_visibility.scss +++ b/assets/stylesheets/bootstrap/mixins/_visibility.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Visibility @mixin invisible($visibility) { diff --git a/assets/stylesheets/bootstrap/utilities/_align.scss b/assets/stylesheets/bootstrap/utilities/_align.scss index 4dbbbc2..8b7df9f 100644 --- a/assets/stylesheets/bootstrap/utilities/_align.scss +++ b/assets/stylesheets/bootstrap/utilities/_align.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + .align-baseline { vertical-align: baseline !important; } // Browser default .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_background.scss b/assets/stylesheets/bootstrap/utilities/_background.scss index 1ef34fd..3d2e07d 100644 --- a/assets/stylesheets/bootstrap/utilities/_background.scss +++ b/assets/stylesheets/bootstrap/utilities/_background.scss @@ -1,6 +1,13 @@ +// stylelint-disable declaration-no-important + @each $color, $value in $theme-colors { - @include bg-variant('.bg-#{$color}', $value); + @include bg-variant(".bg-#{$color}", $value); +} + +.bg-white { + background-color: $white !important; } -.bg-white { background-color: $white !important; } -.bg-transparent { background-color: transparent !important; } +.bg-transparent { + background-color: transparent !important; +} diff --git a/assets/stylesheets/bootstrap/utilities/_borders.scss b/assets/stylesheets/bootstrap/utilities/_borders.scss index 3ff603c..ba02f04 100644 --- a/assets/stylesheets/bootstrap/utilities/_borders.scss +++ b/assets/stylesheets/bootstrap/utilities/_borders.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // // Border // diff --git a/assets/stylesheets/bootstrap/utilities/_display.scss b/assets/stylesheets/bootstrap/utilities/_display.scss index 4535362..893b638 100644 --- a/assets/stylesheets/bootstrap/utilities/_display.scss +++ b/assets/stylesheets/bootstrap/utilities/_display.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // // Utilities for common `display` values // @@ -11,6 +13,7 @@ .d#{$infix}-inline-block { display: inline-block !important; } .d#{$infix}-block { display: block !important; } .d#{$infix}-table { display: table !important; } + .d#{$infix}-table-row { display: table-row !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 b28c0b9..8e47038 100644 --- a/assets/stylesheets/bootstrap/utilities/_flex.scss +++ b/assets/stylesheets/bootstrap/utilities/_flex.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Flex variation // // Custom styles for additional flex alignment options. diff --git a/assets/stylesheets/bootstrap/utilities/_position.scss b/assets/stylesheets/bootstrap/utilities/_position.scss index bddae21..ef962ed 100644 --- a/assets/stylesheets/bootstrap/utilities/_position.scss +++ b/assets/stylesheets/bootstrap/utilities/_position.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Common values // Sass list not in variables since it's not intended for customization. diff --git a/assets/stylesheets/bootstrap/utilities/_sizing.scss b/assets/stylesheets/bootstrap/utilities/_sizing.scss index a7dc3e4..e95a4db 100644 --- a/assets/stylesheets/bootstrap/utilities/_sizing.scss +++ b/assets/stylesheets/bootstrap/utilities/_sizing.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Width and height @each $prop, $abbrev in (width: w, height: h) { diff --git a/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss index 150d316..b2e2354 100644 --- a/assets/stylesheets/bootstrap/utilities/_spacing.scss +++ b/assets/stylesheets/bootstrap/utilities/_spacing.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // Margin and Padding @each $breakpoint in map-keys($grid-breakpoints) { diff --git a/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index 7573f29..f4b6e65 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/utilities/_text.scss @@ -1,3 +1,5 @@ +// stylelint-disable declaration-no-important + // // Text // @@ -38,7 +40,7 @@ .text-white { color: #fff !important; } @each $color, $value in $theme-colors { - @include text-emphasis-variant('.text-#{$color}', $value); + @include text-emphasis-variant(".text-#{$color}", $value); } .text-muted { color: $text-muted !important; } |