diff options
author | XhmikosR <xhmikosr@gmail.com> | 2018-12-22 19:32:28 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-22 19:32:28 +0300 |
commit | 74a2d93517553cfd394526d789f6e23e99ace597 (patch) | |
tree | d012dc1591ad0903695c88da9a9e5d8eb4993b52 /scss | |
parent | f0e5cc3f417191f5823f426b1ae071c78f427475 (diff) | |
parent | dee3ab427cb9b73639e38a60e1cbb59dc99fedf4 (diff) |
Merge branch 'v4-dev' into stretched-link
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_alert.scss | 2 | ||||
-rw-r--r-- | scss/_badge.scss | 1 | ||||
-rw-r--r-- | scss/_card.scss | 10 | ||||
-rw-r--r-- | scss/_carousel.scss | 4 | ||||
-rw-r--r-- | scss/_custom-forms.scss | 57 | ||||
-rw-r--r-- | scss/_dropdown.scss | 2 | ||||
-rw-r--r-- | scss/_forms.scss | 9 | ||||
-rw-r--r-- | scss/_images.scss | 2 | ||||
-rw-r--r-- | scss/_input-group.scss | 2 | ||||
-rw-r--r-- | scss/_popover.scss | 42 | ||||
-rw-r--r-- | scss/_reboot.scss | 19 | ||||
-rw-r--r-- | scss/_tables.scss | 5 | ||||
-rw-r--r-- | scss/_toasts.scss | 17 | ||||
-rw-r--r-- | scss/_variables.scss | 107 | ||||
-rw-r--r-- | scss/bootstrap-grid.scss | 6 | ||||
-rw-r--r-- | scss/bootstrap-reboot.scss | 2 | ||||
-rw-r--r-- | scss/bootstrap.scss | 2 | ||||
-rw-r--r-- | scss/mixins/_badge.scss | 6 | ||||
-rw-r--r-- | scss/mixins/_grid-framework.scss | 4 | ||||
-rw-r--r-- | scss/mixins/_grid.scss | 18 | ||||
-rw-r--r-- | scss/mixins/_text-emphasis.scss | 8 | ||||
-rw-r--r-- | scss/utilities/_text.scss | 2 |
22 files changed, 194 insertions, 133 deletions
diff --git a/scss/_alert.scss b/scss/_alert.scss index dd43e2376a..da2a98af94 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -27,7 +27,7 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($close-font-size + $alert-padding-x * 2); + padding-right: $close-font-size + $alert-padding-x * 2; // Adjust close link position .close { diff --git a/scss/_badge.scss b/scss/_badge.scss index bdbe4b9cc8..c727ba5a2b 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -13,6 +13,7 @@ white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); + @include transition($badge-transition); @at-root a#{&} { @include hover-focus { diff --git a/scss/_card.scss b/scss/_card.scss index f3de02708b..377bec0f1a 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -43,7 +43,7 @@ } .card-subtitle { - margin-top: -($card-spacer-y / 2); + margin-top: -$card-spacer-y / 2; margin-bottom: 0; } @@ -99,15 +99,15 @@ // .card-header-tabs { - margin-right: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; margin-bottom: -$card-spacer-y; - margin-left: -($card-spacer-x / 2); + margin-left: -$card-spacer-x / 2; border-bottom: 0; } .card-header-pills { - margin-right: -($card-spacer-x / 2); - margin-left: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; + margin-left: -$card-spacer-x / 2; } // Card image diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 3ba447e300..8e6639ac07 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -187,9 +187,9 @@ .carousel-caption { position: absolute; - right: ((100% - $carousel-caption-width) / 2); + right: (100% - $carousel-caption-width) / 2; bottom: 20px; - left: ((100% - $carousel-caption-width) / 2); + left: (100% - $carousel-caption-width) / 2; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index e999daf0ca..e6bf7ad6f5 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -10,8 +10,8 @@ .custom-control { position: relative; display: block; - min-height: ($font-size-base * $line-height-base); - padding-left: $custom-control-gutter; + min-height: $font-size-base * $line-height-base; + padding-left: $custom-control-gutter + $custom-control-indicator-size; } .custom-control-inline { @@ -74,8 +74,8 @@ // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); - left: -$custom-control-gutter; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; @@ -89,8 +89,8 @@ // Foreground (icon) &::after { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); - left: -$custom-control-gutter; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; @@ -161,6 +161,47 @@ } +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: $custom-switch-width + $custom-control-gutter; + + .custom-control-label { + &::before { + left: -($custom-switch-width + $custom-control-gutter); + width: $custom-switch-width; + pointer-events: all; + border-radius: $custom-switch-indicator-border-radius; + } + + &::after { + top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); + left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); + width: $custom-switch-indicator-size; + height: $custom-switch-indicator-size; + background-color: $custom-control-indicator-border-color; + border-radius: $custom-switch-indicator-border-radius; + @include transition(transform .15s ease-in-out, $custom-forms-transition); + } + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-color: $custom-control-indicator-bg; + transform: translateX($custom-switch-width - $custom-control-indicator-size); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + + // Select // // Replaces the browser default select with a custom one, mostly pulled from @@ -346,7 +387,7 @@ &::-webkit-slider-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific + margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -421,7 +462,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: ($custom-range-thumb-height * .5); + border-width: $custom-range-thumb-height / 2; @include box-shadow($custom-range-track-box-shadow); } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 93c1d78e95..c6907c8a8c 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -118,7 +118,7 @@ // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y); } // Links, buttons, and more within the dropdown menu diff --git a/scss/_forms.scss b/scss/_forms.scss index a83e04d657..2db6d834cd 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -190,13 +190,13 @@ textarea.form-control { .form-row { display: flex; flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; + margin-right: -$form-grid-gutter-width / 2; + margin-left: -$form-grid-gutter-width / 2; > .col, > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; + padding-right: $form-grid-gutter-width / 2; + padding-left: $form-grid-gutter-width / 2; } } @@ -318,6 +318,7 @@ textarea.form-control { } .form-check-input { position: relative; + flex-shrink: 0; margin-top: 0; margin-right: $form-check-input-margin-x; margin-left: 0; diff --git a/scss/_images.scss b/scss/_images.scss index 2bce02f631..8e69b772f8 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -32,7 +32,7 @@ } .figure-img { - margin-bottom: ($spacer / 2); + margin-bottom: $spacer / 2; line-height: 1; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 6fb8c429b4..81b33077a6 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -163,7 +163,7 @@ .input-group-lg > .custom-select, .input-group-sm > .custom-select { - padding-right: ($custom-select-padding-x + $custom-select-indicator-padding); + padding-right: $custom-select-padding-x + $custom-select-indicator-padding; } diff --git a/scss/_popover.scss b/scss/_popover.scss index 3ef5f628bd..e9a1ea8575 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -38,21 +38,21 @@ .bs-popover-top { margin-bottom: $popover-arrow-height; - .arrow { + > .arrow { bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); } - .arrow::before, - .arrow::after { + > .arrow::before, + > .arrow::after { border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; } - .arrow::before { + > .arrow::before { bottom: 0; border-top-color: $popover-arrow-outer-color; } - .arrow::after { + > .arrow::after { bottom: $popover-border-width; border-top-color: $popover-arrow-color; } @@ -61,24 +61,24 @@ .bs-popover-right { margin-left: $popover-arrow-height; - .arrow { + > .arrow { left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners } - .arrow::before, - .arrow::after { + > .arrow::before, + > .arrow::after { border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; } - .arrow::before { + > .arrow::before { left: 0; border-right-color: $popover-arrow-outer-color; } - .arrow::after { + > .arrow::after { left: $popover-border-width; border-right-color: $popover-arrow-color; } @@ -87,21 +87,21 @@ .bs-popover-bottom { margin-top: $popover-arrow-height; - .arrow { + > .arrow { top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); } - .arrow::before, - .arrow::after { + > .arrow::before, + > .arrow::after { border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); } - .arrow::before { + > .arrow::before { top: 0; border-bottom-color: $popover-arrow-outer-color; } - .arrow::after { + > .arrow::after { top: $popover-border-width; border-bottom-color: $popover-arrow-color; } @@ -113,7 +113,7 @@ left: 50%; display: block; width: $popover-arrow-width; - margin-left: ($popover-arrow-width / -2); + margin-left: -$popover-arrow-width / 2; content: ""; border-bottom: $popover-border-width solid $popover-header-bg; } @@ -122,24 +122,24 @@ .bs-popover-left { margin-right: $popover-arrow-height; - .arrow { + > .arrow { right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners } - .arrow::before, - .arrow::after { + > .arrow::before, + > .arrow::after { border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; } - .arrow::before { + > .arrow::before { right: 0; border-left-color: $popover-arrow-outer-color; } - .arrow::after { + > .arrow::after { right: $popover-border-width; border-left-color: $popover-arrow-color; } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index ed4821a4d4..d4167cc8ec 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -14,9 +14,7 @@ // 2. Change the default font family in all browsers. // 3. Correct the line height in all browsers. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. +// 5. Change the default tap highlight to be completely transparent in iOS. *, *::before, @@ -28,15 +26,7 @@ html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba($black, 0); // 6 -} - -// IE10+ doesn't honor `<meta name="viewport">` in some cases. -@at-root { - @-ms-viewport { - width: device-width; - } + -webkit-tap-highlight-color: rgba($black, 0); // 5 } // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) @@ -161,7 +151,7 @@ blockquote { b, strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari + font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari } small { @@ -240,9 +230,6 @@ 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; } diff --git a/scss/_tables.scss b/scss/_tables.scss index 92d4ec9b5b..7d66208397 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -5,6 +5,7 @@ .table { width: 100%; margin-bottom: $spacer; + color: $table-color; background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, @@ -56,7 +57,7 @@ thead { th, td { - border-bottom-width: (2 * $table-border-width); + border-bottom-width: 2 * $table-border-width; } } } @@ -88,6 +89,7 @@ .table-hover { tbody tr { @include hover { + color: $table-hover-color; background-color: $table-hover-bg; } } @@ -152,6 +154,7 @@ &.table-hover { tbody tr { @include hover { + color: $table-dark-hover-color; background-color: $table-dark-hover-bg; } } diff --git a/scss/_toasts.scss b/scss/_toasts.scss index d6ba4ca141..e77cdaec7d 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,21 +1,30 @@ .toast { - display: none; max-width: $toast-max-width; overflow: hidden; // cheap rounded corners on nested items font-size: $toast-font-size; // knock it down to 14px background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; - border-radius: $toast-border-radius; box-shadow: $toast-box-shadow; backdrop-filter: blur(10px); + opacity: 0; + @include border-radius($toast-border-radius); - + .toast { - margin-top: $toast-padding-x; + &:not(:last-child) { + margin-bottom: $toast-padding-x; + } + + &.showing { + opacity: 1; } &.show { display: block; + opacity: 1; + } + + &.hide { + display: none; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 988624451b..26a2df81d6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -166,7 +166,7 @@ $body-color: $gray-900 !default; // // Style anchor elements. -$link-color: $primary !default; +$link-color: theme-color("primary") !default; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; @@ -250,7 +250,7 @@ $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; $component-active-color: $white !default; -$component-active-bg: $primary !default; +$component-active-bg: theme-color("primary") !default; $caret-width: .3em !default; @@ -275,7 +275,7 @@ $embed-responsive-aspect-ratios: join( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !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 @@ -300,7 +300,7 @@ $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2) !default; +$headings-margin-bottom: $spacer / 2 !default; $headings-font-family: inherit !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; @@ -352,21 +352,25 @@ $hr-margin-y: $spacer !default; $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; +$table-color: $body-color !default; $table-bg: transparent !default; $table-accent-bg: rgba($black, .05) !default; +$table-hover-color: $table-color !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-300 !default; +$table-border-color: $border-color !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; +$table-dark-color: $white !default; +$table-dark-bg: $gray-800 !default; $table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-color: $table-dark-color !default; $table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; $table-dark-color: $white !default; $table-striped-order: odd !default; @@ -506,6 +510,7 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; $form-check-inline-input-margin-x: .3125rem !default; +$form-grid-gutter-width: 10px !default; $form-group-margin-bottom: 1rem !default; $input-group-addon-color: $input-color !default; @@ -514,7 +519,7 @@ $input-group-addon-border-color: $input-border-color !default; $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$custom-control-gutter: 1.5rem !default; +$custom-control-gutter: .5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; @@ -530,7 +535,7 @@ $custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default; +$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; @@ -554,6 +559,10 @@ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicato $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%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-switch-width: $custom-control-indicator-size * 1.75 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; + $custom-select-padding-y: $input-btn-padding-y !default; $custom-select-padding-x: $input-btn-padding-x !default; $custom-select-height: $input-height !default; @@ -637,8 +646,8 @@ $custom-file-text: ( $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; -$form-feedback-valid-color: $success !default; -$form-feedback-invalid-color: $danger !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default; @@ -646,36 +655,6 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; -// Dropdowns -// -// 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-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-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-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; - -$dropdown-link-disabled-color: $gray-600 !default; - -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; - -$dropdown-header-color: $gray-600 !default; - - // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view @@ -709,19 +688,19 @@ $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; $nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: ($spacer / 2) !default; +$nav-divider-margin-y: $spacer / 2 !default; // Navbar -$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-y: $spacer / 2 !default; $navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !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: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; @@ -750,6 +729,37 @@ $navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !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-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-divider-margin-y: $nav-divider-margin-y !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-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: .25rem !default; +$dropdown-item-padding-x: 1.5rem !default; + +$dropdown-header-color: $gray-600 !default; + + // Pagination $pagination-padding-y: .5rem !default; @@ -801,7 +811,7 @@ $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: ($grid-gutter-width / 2) !default; +$card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; @@ -884,6 +894,9 @@ $badge-padding-y: .25em !default; $badge-padding-x: .4em !default; $badge-border-radius: $border-radius !default; +$badge-transition: $btn-transition !default; +$badge-focus-width: $input-btn-focus-width !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. @@ -909,7 +922,7 @@ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; +$modal-header-border-color: $border-color !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; @@ -951,7 +964,7 @@ $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: $primary !default; +$progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 16f5f0dfb9..9b3e77cb47 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -1,14 +1,10 @@ /*! - * Bootstrap Grid v4.1.3 (https://getbootstrap.com/) + * Bootstrap Grid v4.2.1 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -@at-root { - @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix -} - html { box-sizing: border-box; -ms-overflow-style: scrollbar; diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 75baeb713e..717417810c 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/) + * Bootstrap Reboot v4.2.1 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index c9795108c6..44b04b2931 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.1.3 (https://getbootstrap.com/) + * Bootstrap v4.2.1 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index cf99b3537a..64b29cb579 100644 --- a/scss/mixins/_badge.scss +++ b/scss/mixins/_badge.scss @@ -7,5 +7,11 @@ color: color-yiq($bg); background-color: darken($bg, 10%); } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); + } } } diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index ff7e1496a6..649c28bf77 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -8,8 +8,8 @@ %grid-column { position: relative; width: 100%; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @each $breakpoint in map-keys($breakpoints) { diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 254f0734c9..924eb0cfc0 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,10 +2,10 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container() { +@mixin make-container($gutter: $grid-gutter-width) { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; margin-right: auto; margin-left: auto; } @@ -20,21 +20,21 @@ } } -@mixin make-row() { +@mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: -$gutter / 2; + margin-left: -$gutter / 2; } -@mixin make-col-ready() { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @mixin make-col($size, $columns: $grid-columns) { diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss index 1819fb03df..155d6ca8cf 100644 --- a/scss/mixins/_text-emphasis.scss +++ b/scss/mixins/_text-emphasis.scss @@ -6,9 +6,11 @@ #{$parent} { color: $color !important; } - a#{$parent} { - @include hover-focus { - color: darken($color, $emphasized-link-hover-darken-percentage) !important; + @if $emphasized-link-hover-darken-percentage != 0 { + a#{$parent} { + @include hover-focus { + color: darken($color, $emphasized-link-hover-darken-percentage) !important; + } } } } diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 0edb8e58ba..a04fd097d7 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -62,6 +62,8 @@ .text-decoration-none { text-decoration: none !important; } +.text-break { word-break: break-word !important; } + // Reset .text-reset { color: inherit !important; } |