diff --git a/WebCms/Content/bootstrap/_alert.scss b/WebCms/Content/bootstrap/_alert.scss index da2a98a..4aa1fc2 100644 --- a/WebCms/Content/bootstrap/_alert.scss +++ b/WebCms/Content/bootstrap/_alert.scss @@ -34,6 +34,7 @@ position: absolute; top: 0; right: 0; + z-index: 2; padding: $alert-padding-y $alert-padding-x; color: inherit; } diff --git a/WebCms/Content/bootstrap/_breadcrumb.scss b/WebCms/Content/bootstrap/_breadcrumb.scss index d748894..9c204c7 100644 --- a/WebCms/Content/bootstrap/_breadcrumb.scss +++ b/WebCms/Content/bootstrap/_breadcrumb.scss @@ -15,7 +15,7 @@ padding-left: $breadcrumb-item-padding; &::before { - display: inline-block; // Suppress underlining of the separator in modern browsers + float: left; // Suppress inline spacings and underlining of the separator padding-right: $breadcrumb-item-padding; color: $breadcrumb-divider-color; content: escape-svg($breadcrumb-divider); diff --git a/WebCms/Content/bootstrap/_buttons.scss b/WebCms/Content/bootstrap/_buttons.scss index e87d339..6ee24ba 100644 --- a/WebCms/Content/bootstrap/_buttons.scss +++ b/WebCms/Content/bootstrap/_buttons.scss @@ -10,9 +10,9 @@ font-weight: $btn-font-weight; color: $body-color; text-align: center; + text-decoration: if($link-decoration == none, null, none); white-space: $btn-white-space; vertical-align: middle; - cursor: if($enable-pointer-cursor-for-buttons, pointer, null); user-select: none; background-color: transparent; border: $btn-border-width solid transparent; @@ -37,12 +37,16 @@ @include box-shadow(none); } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { - @include box-shadow($btn-active-box-shadow); + &:not(:disabled):not(.disabled) { + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); - &:focus { - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + &:active, + &.active { + @include box-shadow($btn-active-box-shadow); + + &:focus { + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } } } } @@ -89,7 +93,6 @@ fieldset:disabled a.btn { &:focus, &.focus { text-decoration: $link-hover-decoration; - box-shadow: none; } &:disabled, diff --git a/WebCms/Content/bootstrap/_card.scss b/WebCms/Content/bootstrap/_card.scss index d6759fd..a974163 100644 --- a/WebCms/Content/bootstrap/_card.scss +++ b/WebCms/Content/bootstrap/_card.scss @@ -19,16 +19,26 @@ margin-left: 0; } - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + @include border-top-radius($card-inner-border-radius); + } + + &:last-child { + border-bottom-width: 0; + @include border-bottom-radius($card-inner-border-radius); } } - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); - } + // Due to specificity of the above selector (`.card > .list-group`), we must + // use a child selector here to prevent double borders. + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; } } @@ -48,7 +58,7 @@ } .card-subtitle { - margin-top: -$card-spacer-y / 2; + margin-top: -$card-spacer-y * .5; margin-bottom: 0; } @@ -80,16 +90,11 @@ &: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 { padding: $card-spacer-y $card-spacer-x; + color: $card-cap-color; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -104,15 +109,15 @@ // .card-header-tabs { - margin-right: -$card-spacer-x / 2; + margin-right: -$card-spacer-x * .5; margin-bottom: -$card-spacer-y; - margin-left: -$card-spacer-x / 2; + margin-left: -$card-spacer-x * .5; border-bottom: 0; } .card-header-pills { - margin-right: -$card-spacer-x / 2; - margin-left: -$card-spacer-x / 2; + margin-right: -$card-spacer-x * .5; + margin-left: -$card-spacer-x * .5; } // Card image @@ -123,6 +128,7 @@ bottom: 0; left: 0; padding: $card-img-overlay-padding; + @include border-radius($card-inner-border-radius); } .card-img, @@ -200,12 +206,12 @@ .card-img-top, .card-header { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-top-right-radius: 0; } .card-img-bottom, .card-footer { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-bottom-right-radius: 0; } } @@ -215,12 +221,12 @@ .card-img-top, .card-header { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-top-left-radius: 0; } .card-img-bottom, .card-footer { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-bottom-left-radius: 0; } } @@ -258,6 +264,8 @@ // .accordion { + overflow-anchor: none; + > .card { overflow: hidden; diff --git a/WebCms/Content/bootstrap/_carousel.scss b/WebCms/Content/bootstrap/_carousel.scss index fb5e9f8..25aaf58 100644 --- a/WebCms/Content/bootstrap/_carousel.scss +++ b/WebCms/Content/bootstrap/_carousel.scss @@ -95,8 +95,11 @@ align-items: center; // 2. vertically center contents justify-content: center; // 3. horizontally center contents width: $carousel-control-width; + padding: 0; color: $carousel-control-color; text-align: center; + background: none; + border: 0; opacity: $carousel-control-opacity; @include transition($carousel-control-transition); @@ -127,7 +130,7 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: no-repeat 50% / 100% 100%; + background: 50% / 100% 100% no-repeat; } .carousel-control-prev-icon { background-image: escape-svg($carousel-control-prev-icon-bg); @@ -186,9 +189,9 @@ .carousel-caption { position: absolute; - right: (100% - $carousel-caption-width) / 2; + right: (100% - $carousel-caption-width) * .5; bottom: 20px; - left: (100% - $carousel-caption-width) / 2; + left: (100% - $carousel-caption-width) * .5; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/WebCms/Content/bootstrap/_close.scss b/WebCms/Content/bootstrap/_close.scss index 071aebe..82e9593 100644 --- a/WebCms/Content/bootstrap/_close.scss +++ b/WebCms/Content/bootstrap/_close.scss @@ -30,7 +30,6 @@ button.close { padding: 0; background-color: transparent; border: 0; - appearance: none; } // Future-proof disabling of clicks on `` elements diff --git a/WebCms/Content/bootstrap/_custom-forms.scss b/WebCms/Content/bootstrap/_custom-forms.scss index 21e72da..b3db8c4 100644 --- a/WebCms/Content/bootstrap/_custom-forms.scss +++ b/WebCms/Content/bootstrap/_custom-forms.scss @@ -9,9 +9,11 @@ .custom-control { position: relative; + z-index: 1; display: block; min-height: $font-size-base * $line-height-base; padding-left: $custom-control-gutter + $custom-control-indicator-size; + color-adjust: exact; // Keep themed appearance for print } .custom-control-inline { @@ -24,7 +26,7 @@ left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text width: $custom-control-indicator-size; - height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * .5; opacity: 0; &:checked ~ .custom-control-label::before { @@ -37,7 +39,7 @@ &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback @if $enable-shadows { - box-shadow: $input-box-shadow, $input-focus-box-shadow; + box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow; } @else { box-shadow: $custom-control-indicator-focus-box-shadow; } @@ -81,7 +83,7 @@ // Background-color and (when enabled) gradient &::before { position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5; left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; @@ -96,13 +98,13 @@ // Foreground (icon) &::after { position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5; left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background: no-repeat 50% / #{$custom-control-indicator-bg-size}; + background: 50% / #{$custom-control-indicator-bg-size} no-repeat; } } @@ -135,10 +137,10 @@ .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } &:indeterminate ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -149,7 +151,7 @@ .custom-radio { .custom-control-label::before { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: $custom-radio-indicator-border-radius; } @@ -161,7 +163,7 @@ .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -179,17 +181,17 @@ left: -($custom-switch-width + $custom-control-gutter); width: $custom-switch-width; pointer-events: all; - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: $custom-switch-indicator-border-radius; } &::after { - top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * .5, $custom-control-indicator-border-width * 2); left: add(-($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; - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: $custom-switch-indicator-border-radius; @include transition(transform .15s ease-in-out, $custom-forms-transition); } @@ -204,7 +206,7 @@ .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -237,8 +239,9 @@ border-color: $custom-select-focus-border-color; outline: 0; @if $enable-shadows { - box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $custom-select-focus-box-shadow; } @@ -312,6 +315,7 @@ width: 100%; height: $custom-file-height; margin: 0; + overflow: hidden; opacity: 0; &:focus ~ .custom-file-label { @@ -344,6 +348,7 @@ z-index: 1; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; + overflow: hidden; font-family: $custom-file-font-family; font-weight: $custom-file-font-weight; line-height: $custom-file-line-height; @@ -385,7 +390,7 @@ appearance: none; &:focus { - outline: none; + outline: 0; // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. @@ -401,7 +406,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) * .5; // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -476,7 +481,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: $custom-range-thumb-height / 2; + border-width: $custom-range-thumb-height * .5; @include box-shadow($custom-range-track-box-shadow); } diff --git a/WebCms/Content/bootstrap/_dropdown.scss b/WebCms/Content/bootstrap/_dropdown.scss index 76f33a4..f39de11 100644 --- a/WebCms/Content/bootstrap/_dropdown.scss +++ b/WebCms/Content/bootstrap/_dropdown.scss @@ -22,7 +22,7 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: $dropdown-min-width; - padding: $dropdown-padding-y 0; + padding: $dropdown-padding-y $dropdown-padding-x; margin: $dropdown-spacer 0 0; // override default ul @include font-size($dropdown-font-size); color: $dropdown-color; @@ -100,7 +100,7 @@ } } -// When enabled Popper.js, reset basic dropdown position +// When Popper is enabled, reset the basic dropdown position // stylelint-disable-next-line no-duplicate-selectors .dropdown-menu { &[x-placement^="top"], @@ -128,6 +128,7 @@ font-weight: $font-weight-normal; color: $dropdown-link-color; text-align: inherit; // For `