diff options
Diffstat (limited to 'scss')
43 files changed, 368 insertions, 357 deletions
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 1a09bba20..2bc0e2086 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,6 +1,6 @@ .breadcrumb { padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $spacer-y; + margin-bottom: 1rem; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); diff --git a/scss/_button-group.scss b/scss/_button-group.scss index facecd37a..af74a55f1 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -99,8 +99,8 @@ // .btn + .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $input-btn-padding-x * .75; + padding-left: $input-btn-padding-x * .75; &::after { margin-left: 0; @@ -108,13 +108,13 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $input-btn-padding-x-sm * .75; + padding-left: $input-btn-padding-x-sm * .75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $input-btn-padding-x-lg * .75; + padding-left: $input-btn-padding-x-lg * .75; } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index e36ff0f1f..4a8ffcbe5 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -7,13 +7,12 @@ .btn { display: inline-block; font-weight: $btn-font-weight; - line-height: $btn-line-height; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: $input-btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); + @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius); @include transition($btn-transition); // Share hover and focus styles @@ -73,22 +72,22 @@ fieldset[disabled] a.btn { // Remove all backgrounds .btn-outline-primary { - @include button-outline-variant($btn-primary-bg); + @include button-outline-variant($btn-primary-bg, $btn-primary-color); } .btn-outline-secondary { - @include button-outline-variant($btn-secondary-border); + @include button-outline-variant($btn-secondary-border, $btn-secondary-color); } .btn-outline-info { - @include button-outline-variant($btn-info-bg); + @include button-outline-variant($btn-info-bg, $btn-info-color); } .btn-outline-success { - @include button-outline-variant($btn-success-bg); + @include button-outline-variant($btn-success-bg, $btn-success-color); } .btn-outline-warning { - @include button-outline-variant($btn-warning-bg); + @include button-outline-variant($btn-warning-bg, $btn-warning-color); } .btn-outline-danger { - @include button-outline-variant($btn-danger-bg); + @include button-outline-variant($btn-danger-bg, $btn-danger-color); } @@ -137,12 +136,11 @@ fieldset[disabled] a.btn { // .btn-lg { - // line-height: ensure even-numbered height of button next to large input - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); } + .btn-sm { - // line-height: ensure proper height of button next to small input - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); } diff --git a/scss/_card.scss b/scss/_card.scss index 9fe70e8cf..2c74c0c97 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -158,10 +158,6 @@ } // Card image -.card-img { - // margin: -1.325rem; - @include border-radius($card-border-radius-inner); -} .card-img-overlay { position: absolute; top: 0; @@ -171,13 +167,19 @@ padding: $card-img-overlay-padding; } - +.card-img { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch + @include border-radius($card-border-radius-inner); +} // Card image caps .card-img-top { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-border-radius-inner); } + .card-img-bottom { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-border-radius-inner); } @@ -188,17 +190,15 @@ .card-deck { display: flex; flex-flow: row wrap; + margin-right: -$card-deck-margin; + margin-left: -$card-deck-margin; .card { display: flex; flex: 1 0 0; flex-direction: column; - - // Selectively apply horizontal margins to cards to avoid doing the - // negative margin dance like our grid. This differs from the grid - // due to the use of margins as gutters instead of padding. - &:not(:first-child) { margin-left: $card-deck-margin; } - &:not(:last-child) { margin-right: $card-deck-margin; } + margin-right: $card-deck-margin; + margin-left: $card-deck-margin; } } } diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 39f164822..d303c48d0 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable PropertyCount +// scss-lint:disable PropertyCount, VendorPrefix // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. @@ -229,7 +229,7 @@ @include box-shadow($custom-file-box-shadow); @each $lang, $text in map-get($custom-file-text, placeholder) { - &:lang(#{$lang})::after { + &:lang(#{$lang}):empty::after { content: $text; } } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1c2741a2e..090fdf1c1 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -18,9 +18,8 @@ border-left: $caret-width solid transparent; } - // Prevent the focus on the dropdown toggle when closing dropdowns - &:focus { - outline: 0; + &:empty::after { + margin-left: 0; } } @@ -66,7 +65,7 @@ .dropdown-item { display: block; width: 100%; // For `<button>`s - padding: 3px $dropdown-item-padding-x; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; clear: both; font-weight: $font-weight-normal; color: $dropdown-link-color; diff --git a/scss/_forms.scss b/scss/_forms.scss index 85180aa7f..11fa94a25 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// scss-lint:disable QualifyingElement, VendorPrefix // // Textual form controls @@ -9,9 +9,9 @@ width: 100%; // // Make inputs at least the height of their button counterpart (base line-height + padding + border) // height: $input-height; - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; - line-height: $input-line-height; + line-height: $input-btn-line-height; color: $input-color; background-color: $input-bg; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. @@ -95,20 +95,20 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. .col-form-label { - padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); margin-bottom: 0; // Override the `<label>` default } .col-form-label-lg { - padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); + 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); font-size: $font-size-lg; } .col-form-label-sm { - padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); + 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); font-size: $font-size-sm; } @@ -120,8 +120,8 @@ select.form-control { // For use with horizontal and inline forms, when you need the legend text to // be the same size as regular labels, and to align with the form controls. .col-form-legend { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; font-size: $font-size-base; } @@ -133,10 +133,10 @@ select.form-control { // horizontal form layout. .form-control-static { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins - line-height: $input-line-height; + line-height: $input-btn-line-height; border: solid transparent; border-width: $input-btn-border-width 0; @@ -157,26 +157,30 @@ select.form-control { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; + line-height: $input-btn-line-height-sm; @include border-radius($input-border-radius-sm); } select.form-control-sm { &:not([size]):not([multiple]) { - height: $input-height-sm; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-sm} + #{$select-border-width}); } } .form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; + line-height: $input-btn-line-height-lg; @include border-radius($input-border-radius-lg); } select.form-control-lg { &:not([size]):not([multiple]) { - height: $input-height-lg; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-lg} + #{$select-border-width}); } } @@ -253,7 +257,7 @@ select.form-control-lg { .form-control-success, .form-control-warning, .form-control-danger { - padding-right: ($input-padding-x * 3); + padding-right: ($input-btn-padding-x * 3); background-repeat: no-repeat; background-position: center right ($input-height / 4); background-size: ($input-height / 2) ($input-height / 2); diff --git a/scss/_grid.scss b/scss/_grid.scss index 8c7a9ee31..9ab9ae02b 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -11,11 +11,12 @@ // Fluid container // -// Utilizes the mixin meant for fixed width containers, but without any defined -// width for fluid, full width layouts. +// Utilizes the mixin meant for fixed width containers, but with 100% width for +// fluid, full width layouts. @if $enable-grid-classes { .container-fluid { + width: 100%; @include make-container(); } } diff --git a/scss/_images.scss b/scss/_images.scss index a8135a6c3..50c56108a 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -33,7 +33,7 @@ } .figure-img { - margin-bottom: ($spacer-y / 2); + margin-bottom: ($spacer / 2); line-height: 1; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 49cdf2830..0b668bff3 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -66,11 +66,11 @@ // .input-group-addon { - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom font-size: $font-size-base; // Match inputs font-weight: $font-weight-normal; - line-height: $input-line-height; + line-height: $input-btn-line-height; color: $input-color; text-align: center; background-color: $input-group-addon-bg; @@ -79,12 +79,13 @@ // Sizing &.form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; @include border-radius($input-border-radius-sm); } + &.form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); } diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss index b12d465d9..7966bba1e 100644 --- a/scss/_jumbotron.scss +++ b/scss/_jumbotron.scss @@ -9,10 +9,6 @@ } } -.jumbotron-hr { - border-top-color: darken($jumbotron-bg, 10%); -} - .jumbotron-fluid { padding-right: 0; padding-left: 0; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index bb8a8d103..c4b5e2f92 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -42,9 +42,7 @@ .list-group-item { position: relative; - display: flex; - flex-flow: row wrap; - align-items: center; + display: block; padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index da4738297..13aad2487 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -2,22 +2,6 @@ // // Used in conjunction with global variables to enable certain theme features. -@mixin box-shadow($shadow...) { - @if $enable-shadows { - box-shadow: $shadow; - } -} - -@mixin transition($transition...) { - @if $enable-transitions { - @if length($transition) == 0 { - transition: $transition-base; - } @else { - transition: $transition; - } - } -} - // Utilities @import "mixins/breakpoints"; @import "mixins/hover"; @@ -47,7 +31,9 @@ // // Skins @import "mixins/background-variant"; @import "mixins/border-radius"; +@import "mixins/box-shadow"; @import "mixins/gradients"; +@import "mixins/transition"; // // Layout @import "mixins/clearfix"; diff --git a/scss/_nav.scss b/scss/_nav.scss index 7d902a7c0..2b6b2a7f3 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -13,7 +13,7 @@ .nav-link { display: block; - padding: $nav-link-padding; + padding: $nav-link-padding-y $nav-link-padding-x; @include hover-focus { text-decoration: none; @@ -26,7 +26,6 @@ } } - // // Tabs // @@ -76,12 +75,12 @@ .nav-pills { .nav-link { @include border-radius($nav-pills-border-radius); - } - .nav-link.active, - .nav-item.show .nav-link { - color: $nav-pills-active-link-color; - background-color: $nav-pills-active-link-bg; + &.active, + .show & { + color: $nav-pills-active-link-color; + background-color: $nav-pills-active-link-bg; + } } } @@ -99,7 +98,8 @@ .nav-justified { .nav-item { - flex: 1 1 100%; + flex-basis: 0; + flex-grow: 1; text-align: center; } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c31017dc..854e7df12 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -18,11 +18,22 @@ .navbar { position: relative; display: flex; - flex-direction: column; + flex-wrap: wrap; // allow us to do the line break for collapsing content + align-items: center; + justify-content: space-between; // space out brand from logo padding: $navbar-padding-y $navbar-padding-x; - @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { - > .container { + // Because flex properties aren't inherited, we need to redeclare these first + // few properities so that content nested within behave properly. + > .container, + > .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + + @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { + width: 100%; // prevent flex parent container from collapsing margin-right: 0; margin-left: 0; } @@ -36,11 +47,10 @@ .navbar-brand { display: inline-block; - align-self: flex-start; - padding-top: .25rem; - padding-bottom: .25rem; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; - font-size: $font-size-lg; + font-size: $navbar-brand-font-size; line-height: inherit; white-space: nowrap; @@ -74,8 +84,8 @@ .navbar-text { display: inline-block; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; } @@ -84,9 +94,15 @@ // Custom styles for responsive collapsing and toggling of navbar contents. // Powered by the collapse Bootstrap JavaScript plugin. +// When collapsed, prevent the toggleable navbar contents from appearing in +// the default flexbox row orienation. Requires the use of `flex-wrap: wrap` +// on the `.navbar` parent. +.navbar-collapse { + flex-basis: 100%; +} + // Button for toggling the navbar when in its collapsed state .navbar-toggler { - align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; @@ -111,23 +127,12 @@ background-size: 100% 100%; } -// Use `position` on the toggler to prevent it from being auto placed as a flex -// item and allow easy placement. -.navbar-toggler-left { - position: absolute; - left: $navbar-padding-x; -} -.navbar-toggler-right { - position: absolute; - right: $navbar-padding-x; -} - -// Generate series of `.navbar-toggleable-*` responsive classes for configuring +// Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. -.navbar-toggleable { +.navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { @include media-breakpoint-down($breakpoint) { @@ -138,7 +143,8 @@ } } - > .container { + > .container, + > .container-fluid { padding-right: 0; padding-left: 0; } @@ -147,11 +153,15 @@ @include media-breakpoint-up($next) { flex-direction: row; flex-wrap: nowrap; - align-items: center; + justify-content: flex-start; .navbar-nav { flex-direction: row; + .dropdown-menu { + position: absolute; + } + .nav-link { padding-right: .5rem; padding-left: .5rem; @@ -159,16 +169,14 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container { - display: flex; + > .container, + > .container-fluid { flex-wrap: nowrap; - align-items: center; } // scss-lint:disable ImportantRule .navbar-collapse { display: flex !important; - width: 100%; } // scss-lint:enable ImportantRule @@ -187,8 +195,7 @@ // Dark links against a light background .navbar-light { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-light-active-color; @include hover-focus { @@ -218,6 +225,7 @@ } .navbar-toggler { + color: $navbar-light-color; border-color: $navbar-light-toggler-border; } @@ -232,8 +240,7 @@ // White links against a dark background .navbar-inverse { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-inverse-active-color; @include hover-focus { @@ -263,6 +270,7 @@ } .navbar-toggler { + color: $navbar-inverse-color; border-color: $navbar-inverse-toggler-border; } diff --git a/scss/_popover.scss b/scss/_popover.scss index 1b6363405..82a335fa1 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -132,6 +132,7 @@ padding: $popover-title-padding-y $popover-title-padding-x; margin-bottom: 0; // Reset the default from Reboot font-size: $font-size-base; + color: $popover-title-color; background-color: $popover-title-bg; border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); @@ -144,6 +145,7 @@ .popover-content { padding: $popover-content-padding-y $popover-content-padding-x; + color: $popover-content-color; } diff --git a/scss/_progress.scss b/scss/_progress.scss index ccca51e8d..66571843c 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -18,6 +18,7 @@ line-height: $progress-height; color: $progress-bar-color; background-color: $progress-bar-bg; + @include transition($progress-bar-transition); } .progress-bar-striped { diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 78753af00..c52e6f887 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -22,8 +22,8 @@ html { box-sizing: border-box; // 1 font-family: sans-serif; // 2 line-height: 1.15; // 3 - -ms-text-size-adjust: 100%; // 4 -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 -ms-overflow-style: scrollbar; // 5 -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } diff --git a/scss/_tables.scss b/scss/_tables.scss index 47c3ac297..f041f6094 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -125,14 +125,27 @@ th, td, thead th { - border-color: $body-bg; + border-color: $table-inverse-border; } &.table-bordered { border: 0; } -} + &.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-inverse-bg-accent; + } + } + + &.table-hover { + tbody tr { + @include hover { + background-color: $table-inverse-bg-hover; + } + } + } +} // Responsive tables @@ -142,13 +155,15 @@ // will display normally. .table-responsive { - display: block; - width: 100%; - overflow-x: auto; - -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 - - // Prevent double border on horizontal scroll due to use of `display: block;` - &.table-bordered { - border: 0; + @include media-breakpoint-down(md) { + display: block; + width: 100%; + overflow-x: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 + + // Prevent double border on horizontal scroll due to use of `display: block;` + &.table-bordered { + border: 0; + } } } diff --git a/scss/_type.scss b/scss/_type.scss index 13a64b06f..fc9c791c4 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; } // hr { - margin-top: $spacer-y; - margin-bottom: $spacer-y; + margin-top: 1rem; + margin-bottom: 1rem; border: 0; border-top: $hr-border-width solid $hr-border-color; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 09ac11a9d..f517797fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,8 +21,8 @@ // Forms // Dropdowns // Z-index master list -// Navbar // Navs +// Navbar // Pagination // Jumbotron // Form states and alerts @@ -138,36 +138,15 @@ $enable-print-styles: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem !default; -$spacer-x: $spacer !default; -$spacer-y: $spacer !default; +$spacer: 1rem !default; $spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer-x * .25), - y: ($spacer-y * .25) - ), - 2: ( - x: ($spacer-x * .5), - y: ($spacer-y * .5) - ), - 3: ( - x: $spacer-x, - y: $spacer-y - ), - 4: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 5: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) ) !default; -$border-width: 1px !default; // This variable affects the `.h-*` and `.w-*` classes. $sizes: ( @@ -237,11 +216,35 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$border-width: 1px !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +$component-active-color: $white !default; +$component-active-bg: $brand-primary !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; + + // Fonts // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; @@ -305,27 +308,6 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: 5px !default; -// Components -// -// Define common padding and border radius sizes and more. - -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; - -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; - -$component-active-color: $white !default; -$component-active-bg: $brand-primary !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; - - // Tables // // Customizes the `.table` component with basic values, each used across all table variations. @@ -334,28 +316,40 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; - -$table-inverse-bg: $gray-dark !default; -$table-inverse-color: $body-bg !default; - $table-bg-accent: rgba($black,.05) !default; $table-bg-hover: rgba($black,.075) !default; $table-bg-active: $table-bg-hover !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-lighter !default; + $table-head-bg: $gray-lighter !default; $table-head-color: $gray !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; +$table-inverse-bg: $gray-dark !default; +$table-inverse-bg-accent: rgba($white, .05) !default; +$table-inverse-bg-hover: rgba($white, .075) !default; +$table-inverse-bg-active: $table-inverse-bg-hover !default; +$table-inverse-border: lighten($gray-dark, 7.5%) !default; +$table-inverse-color: $body-bg !default; // Buttons // // For each of Bootstrap's buttons, define text, background and border color. -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: 1rem !default; +$input-btn-line-height: 1.25 !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-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: 1.5 !default; + $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; $btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; @@ -387,12 +381,6 @@ $btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius @@ -405,10 +393,6 @@ $btn-transition: all .2s ease-in-out !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - $input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; @@ -428,15 +412,9 @@ $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -450,7 +428,7 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; -$form-group-margin-bottom: $spacer-y !default; +$form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border-color !default; @@ -458,8 +436,8 @@ $input-group-addon-border-color: $input-border-color !default; $cursor-disabled: not-allowed !default; $custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !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; @@ -491,10 +469,10 @@ $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; +$custom-select-padding-x: .75rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-line-height !default; +$custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-light !default; $custom-select-bg: $white !default; @@ -515,8 +493,8 @@ $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; -$custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; +$custom-file-padding-x: .5rem !default; $custom-file-line-height: 1.5 !default; $custom-file-color: $gray !default; $custom-file-bg: $white !default; @@ -569,6 +547,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; +$dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; @@ -588,13 +567,42 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; +// Navs + +$nav-item-margin: .2rem !default; +$nav-item-inline-spacer: 1rem !default; +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-hover-bg: $gray-lighter !default; +$nav-disabled-link-color: $gray-light !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-lighter !default; +$nav-tabs-active-link-color: $gray !default; +$nav-tabs-active-link-bg: $body-bg !default; +$nav-tabs-active-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-active-link-border-color: $body-bg !default; + +$nav-pills-border-radius: $border-radius !default; +$nav-pills-active-link-color: $component-active-color !default; +$nav-pills-active-link-bg: $component-active-bg !default; + // Navbar -$navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; + +$navbar-brand-font-size: $font-size-lg !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $navbar-brand-font-size * $line-height-base !default; +$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-x: .75rem !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; @@ -612,32 +620,14 @@ $navbar-light-disabled-color: rgba($black,.3) !default; $navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 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: rgba($black,.1) !default; -// Navs - -$nav-link-padding: .5em 1em !default; -$nav-disabled-link-color: $gray-light !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-lighter !default; -$nav-tabs-active-link-color: $gray !default; -$nav-tabs-active-link-bg: $body-bg !default; -$nav-tabs-active-link-border-color: #ddd !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; - - // Pagination -$pagination-padding-x: .75rem !default; $pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .5rem !default; +$pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-lg: 1.5rem !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; @@ -688,8 +678,8 @@ $state-danger-border: darken($state-danger-bg, 5%) !default; // Cards -$card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; +$card-spacer-x: 1.25rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; @@ -732,11 +722,13 @@ $popover-border-color: rgba($black,.2) !default; $popover-box-shadow: 0 5px 10px rgba($black,.2) !default; $popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; +$popover-title-color: $headings-color !default; $popover-title-padding-y: 8px !default; +$popover-title-padding-x: 14px !default; -$popover-content-padding-x: 14px !default; +$popover-content-color: $body-color !default; $popover-content-padding-y: 9px !default; +$popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; $popover-arrow-color: $popover-bg !default; @@ -758,8 +750,8 @@ $badge-color: $white !default; $badge-link-hover-color: $white !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; -$badge-padding-x: .4em !default; $badge-padding-y: .25em !default; +$badge-padding-x: .4em !default; $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when @@ -802,9 +794,9 @@ $modal-transition: transform .3s ease-out !default; // // Define alert colors, border radius, and padding. -$alert-padding-x: 1.25rem !default; $alert-padding-y: .75rem !default; -$alert-margin-bottom: $spacer-y !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; @@ -836,6 +828,7 @@ $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; $progress-bar-color: $white !default; $progress-bar-bg: $brand-primary !default; $progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; // List group @@ -845,8 +838,8 @@ $list-group-border-color: rgba($black,.125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-x: 1.25rem !default; $list-group-item-padding-y: .75rem !default; +$list-group-item-padding-x: 1.25rem !default; $list-group-hover-bg: $gray-lightest !default; $list-group-active-color: $component-active-color !default; @@ -924,8 +917,8 @@ $close-text-shadow: 0 1px 0 $white !default; // Code $code-font-size: 90% !default; -$code-padding-x: .4rem !default; $code-padding-y: .2rem !default; +$code-padding-x: .4rem !default; $code-color: #bd4147 !default; $code-bg: $gray-lightest !default; diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 6ed3a81ab..1e9307ebb 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,9 +1,9 @@ // Alerts @mixin alert-variant($background, $border, $body-color) { + color: $body-color; background-color: $background; border-color: $border; - color: $body-color; hr { border-top-color: darken($border, 5%); diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 54f29f41d..2024febcf 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -8,15 +8,15 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; border-top-left-radius: $radius; + border-top-right-radius: $radius; } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } } @@ -29,7 +29,7 @@ @mixin border-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; border-top-left-radius: $radius; + border-bottom-left-radius: $radius; } } diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss new file mode 100644 index 000000000..b2410e53a --- /dev/null +++ b/scss/mixins/_box-shadow.scss @@ -0,0 +1,5 @@ +@mixin box-shadow($shadow...) { + @if $enable-shadows { + box-shadow: $shadow; + } +} diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 904b60f7a..be1d034d8 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -78,10 +78,11 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($lower, $breakpoints) { - @include media-breakpoint-down($upper, $breakpoints) { - @content; - } + $min: breakpoint-max($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { + @content; } } @@ -89,7 +90,10 @@ // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-between($name, $name, $breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { @content; } } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f9981e326..47f2834ff 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -48,8 +48,8 @@ @mixin button-outline-variant($color, $color-hover: #fff) { color: $color; - background-image: none; background-color: transparent; + background-image: none; border-color: $color; @include hover { @@ -79,8 +79,9 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; + line-height: $line-height; @include border-radius($border-radius); } diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index b72cf2712..11a977b73 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { display: block; - content: ""; clear: both; + content: ""; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 9fde3a8a6..33b186a8d 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -27,8 +27,8 @@ // Set validation states also for addons .input-group-addon { color: $color; - border-color: $color; background-color: lighten($color, 40%); + border-color: $color; } } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 8bfd97c4d..bad79f961 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -17,8 +17,8 @@ } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { - background-repeat: repeat-x; background-image: linear-gradient($deg, $start-color, $end-color); + background-repeat: repeat-x; } @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 0aa814ab2..5459a86f4 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -22,7 +22,8 @@ @extend %grid-column; } } - .col#{$infix} { + .col#{$infix}, + .col#{$infix}-auto { @extend %grid-column; } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 9cd8c7bbb..87920e284 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -3,9 +3,8 @@ // Generate semantic grid columns with these mixins. @mixin make-container($gutters: $grid-gutter-widths) { - position: relative; - margin-left: auto; margin-right: auto; + margin-left: auto; @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { @@ -68,12 +67,7 @@ } @mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - // width: percentage($size / $columns); - // Add a `max-width` to ensure content within each column does not blow out - // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari - // do not appear to require this. - max-width: percentage($size / $columns); + width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) { diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 6dd55e705..4aa4b1d5d 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -8,16 +8,18 @@ // } // } // @else { +// scss-lint:disable Indentation &:hover { @content } +// scss-lint:enable Indentation // } } + @mixin hover-focus { @if $enable-hover-media-query { &:focus { @content } @include hover { @content } - } - @else { + } @else { &:focus, &:hover { @content @@ -32,8 +34,7 @@ @content } @include hover { @content } - } - @else { + } @else { &, &:focus, &:hover { @@ -49,8 +50,7 @@ @content } @include hover { @content } - } - @else { + } @else { &:focus, &:active, &:hover { diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 278787bbe..ba27b5041 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -6,6 +6,7 @@ background-color: $background; } + //scss-lint:disable QualifyingElement a.list-group-item-#{$state}, button.list-group-item-#{$state} { color: $color; @@ -21,4 +22,5 @@ border-color: $color; } } + // scss-lint:enable QualifyingElement } diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss index fb3d12e9f..493de03a3 100644 --- a/scss/mixins/_nav-divider.scss +++ b/scss/mixins/_nav-divider.scss @@ -3,8 +3,8 @@ // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($color: #e5e5e5) { - height: 1px; - margin: ($spacer-y / 2) 0; + height: 0; + margin: ($spacer / 2) 0; overflow: hidden; - background-color: $color; + border-top: 1px solid $color; } diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index b95273097..4cf9e79c7 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,17 +1,18 @@ +// scss-lint:disable DuplicateProperty @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; font-weight: $font-weight-normal; - letter-spacing: normal; - line-break: auto; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; text-shadow: none; text-transform: none; - white-space: normal; + letter-spacing: normal; word-break: normal; word-spacing: normal; + white-space: normal; + line-break: auto; } diff --git a/scss/mixins/_resize.scss b/scss/mixins/_resize.scss index 83fa63791..66f233a63 100644 --- a/scss/mixins/_resize.scss +++ b/scss/mixins/_resize.scss @@ -1,6 +1,6 @@ // Resize anything @mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` + resize: $direction; // Options: horizontal, vertical, both } diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index c20858324..a5fa51c5c 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -1,15 +1,17 @@ // 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/ @mixin sr-only { position: absolute; width: 1px; height: 1px; padding: 0; - margin: -1px; overflow: hidden; clip: rect(0,0,0,0); + white-space: nowrap; + clip-path: inset(50%); border: 0; } @@ -25,8 +27,9 @@ position: static; width: auto; height: auto; - margin: 0; overflow: visible; clip: auto; + white-space: normal; + clip-path: none; } } diff --git a/scss/mixins/_text-truncate.scss b/scss/mixins/_text-truncate.scss index 5a40bf533..3504bb1aa 100644 --- a/scss/mixins/_text-truncate.scss +++ b/scss/mixins/_text-truncate.scss @@ -5,4 +5,4 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -}
\ No newline at end of file +} diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss new file mode 100644 index 000000000..7e33dee31 --- /dev/null +++ b/scss/mixins/_transition.scss @@ -0,0 +1,9 @@ +@mixin transition($transition...) { + @if $enable-transitions { + @if length($transition) == 0 { + transition: $transition-base; + } @else { + transition: $transition; + } + } +} diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss index 88c50b05d..f67fc1c52 100644 --- a/scss/mixins/_visibility.scss +++ b/scss/mixins/_visibility.scss @@ -1,5 +1,5 @@ // Visibility -@mixin invisible { - visibility: hidden !important; +@mixin invisible($visibility) { + visibility: $visibility !important; } diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index ae942a6fb..45353620a 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -1,5 +1,5 @@ // -// Display utilities +// Utilities for common `display` values // @each $breakpoint in map-keys($grid-breakpoints) { @@ -16,3 +16,38 @@ .d#{$infix}-inline-flex { display: inline-flex !important; } } } + + +// +// Utilities for toggling `display` in print +// + +.d-print-block { + display: none !important; + + @media print { + display: block !important; + } +} + +.d-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} + +.d-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +.d-print-none { + @media print { + display: none !important; + } +} diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 6056e2b7e..c89816b5e 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -5,22 +5,20 @@ $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @each $prop, $abbrev in (margin: m, padding: p) { - @each $size, $lengths in $spacers { - $length-x: map-get($lengths, x); - $length-y: map-get($lengths, y); + @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; } - .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; } + .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; } + .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; } + .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; } .#{$abbrev}x#{$infix}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; + #{$prop}-right: $length !important; + #{$prop}-left: $length !important; } .#{$abbrev}y#{$infix}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; + #{$prop}-top: $length !important; + #{$prop}-bottom: $length !important; } } } diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss index fcedc9cb9..823406dc3 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -2,54 +2,10 @@ // Visibility utilities // -.invisible { - @include invisible(); -} - -// Responsive visibility utilities - -@each $bp in map-keys($grid-breakpoints) { - .hidden-#{$bp}-up { - @include media-breakpoint-up($bp) { - display: none !important; - } - } - .hidden-#{$bp}-down { - @include media-breakpoint-down($bp) { - display: none !important; - } - } +.visible { + @include invisible(visible); } - -// Print utilities -// -// Media queries are placed on the inside to be mixin-friendly. - -.visible-print-block { - display: none !important; - - @media print { - display: block !important; - } -} -.visible-print-inline { - display: none !important; - - @media print { - display: inline !important; - } -} -.visible-print-inline-block { - display: none !important; - - @media print { - display: inline-block !important; - } -} - -.hidden-print { - @media print { - display: none !important; - } +.invisible { + @include invisible(hidden); } |