diff --git a/src/Button/button-group.scss b/src/Button/button-group.scss index cfb13559c5f..89b4cd24bb6 100644 --- a/src/Button/button-group.scss +++ b/src/Button/button-group.scss @@ -78,10 +78,10 @@ } .btn-group.show .dropdown-toggle { - @include box-shadow(var(--pgn-elevation-btn-box-shadow-active)); + box-shadow: var(--pgn-elevation-btn-box-shadow-active); &.btn-link { - @include box-shadow(none); + box-shadow: none; } } diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 077d4f65bd6..7de34b6c91a 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -13,17 +13,17 @@ kbd { padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x); color: var(--pgn-color-code-kbd-base); background-color: var(--pgn-color-code-kbd-bg); + box-shadow: var(--pgn-elevation-code-kbd-box-shadow); @include font-size(var(--pgn-typography-code-kbd-font-size)); @include border-radius(var(--pgn-size-border-radius-sm)); - @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow)); kbd { padding: 0; font-weight: var(--pgn-typography-code-kbd-nested-font-weight); + box-shadow: none; @include font-size(100%); - @include box-shadow(none); } } diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss index 97f165b8c75..49a4c052f10 100644 --- a/src/Dropdown/dropdown-bootstrap.scss +++ b/src/Dropdown/dropdown-bootstrap.scss @@ -27,10 +27,10 @@ background-color: var(--pgn-color-dropdown-bg); background-clip: padding-box; border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border); + box-shadow: var(--pgn-elevation-dropdown-box-shadow); @include font-size(var(--pgn-typography-dropdown-font-size)); @include border-radius(var(--pgn-size-dropdown-border-radius-base)); - @include box-shadow(var(--pgn-elevation-dropdown-box-shadow)); &[x-placement^="top"], &[x-placement^="right"], diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index f1b7fb04b2e..475a5d7feb1 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -33,20 +33,13 @@ &:checked ~ .custom-control-label::before { color: var(--pgn-color-form-control-indicator-checked-base); border-color: var(--pgn-color-form-control-indicator-checked-border-base); + box-shadow: var(--pgn-elevation-form-control-indicator-checked-base); @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-base)); - @include box-shadow(var(--pgn-elevation-form-control-indicator-checked-base)); } &:focus ~ .custom-control-label::before { - // the mixin is not used here to make sure there is feedback - @if $enable-shadows { - box-shadow: var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-control-indicator-checked-focus); - } - - @else { - box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); - } + box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); } &:focus:not(:checked) ~ .custom-control-label::before { @@ -57,8 +50,7 @@ color: var(--pgn-color-form-control-indicator-active-base); background-color: var(--pgn-color-form-control-indicator-active-bg); border-color: var(--pgn-color-form-control-indicator-active-border); - - @include box-shadow(var(--pgn-elevation-form-control-indicator-active)); + box-shadow: var(--pgn-elevation-form-control-indicator-active); } // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 @@ -98,8 +90,7 @@ pointer-events: none; background-color: var(--pgn-color-form-control-indicator-bg-base); border: var(--pgn-size-form-control-indicator-border-width) solid var(--pgn-color-form-control-indicator-border); - - @include box-shadow(var(--pgn-elevation-form-control-indicator-base)); + box-shadow: var(--pgn-elevation-form-control-indicator-base); } // Foreground (icon) @@ -135,9 +126,9 @@ .custom-control-input:indeterminate ~ .custom-control-label { &::before { border-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-border); + box-shadow: var(--pgn-elevation-form-control-checkbox-indicator-indeterminate); @include gradient-bg(var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg)); - @include box-shadow(var(--pgn-elevation-form-control-checkbox-indicator-indeterminate)); } &::after { @@ -250,26 +241,28 @@ background: var(--pgn-color-form-control-select-bg-base) var(--pgn-other-content-form-control-select-bg); border: var(--pgn-size-form-control-select-border-width-base) solid var(--pgn-color-form-control-select-border-base); appearance: none; + box-shadow: var(--pgn-elevation-form-control-select-border-base); @include font-size(var(--pgn-typography-form-control-select-font-size-base)); @include border-radius(var(--pgn-size-form-control-select-border-radius),0); - @include box-shadow(var(--pgn-elevation-form-control-select-border-base)); &:focus { border-color: var(--pgn-color-form-control-select-border-focus); outline: 0; - @if $enable-shadows { - @include box-shadow( - var(--pgn-elevation-form-control-select-border-base), - var(--pgn-elevation-form-control-select-border-focus) - ); - } + // @if $enable-shadows { + // @include box-shadow( + // var(--pgn-elevation-form-control-select-border-base), + // var(--pgn-elevation-form-control-select-border-focus) + // ); + // } - @else { + box-shadow: var(--pgn-elevation-form-control-select-border-base), var(--pgn-elevation-form-control-select-border-focus); + + // @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: var(--pgn-elevation-form-control-select-border-focus); - } + // } &::-ms-value { // For visual consistency with other platforms/browsers, @@ -383,7 +376,8 @@ border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base); @include border-radius(var(--pgn-size-form-control-file-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-file-base)); + // @include box-shadow(var(--pgn-elevation-form-control-file-base)); + box-shadow: var(--pgn-elevation-form-control-file-base); &::after { content: "Browse"; @@ -451,7 +445,8 @@ @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base)); @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); &:active { @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active)); @@ -467,7 +462,8 @@ border-color: transparent; @include border-radius(var(--pgn-size-form-control-range-track-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-range-track)); + // @include box-shadow(var(--pgn-elevation-form-control-range-track)); + box-shadow: var(--pgn-elevation-form-control-range-track); } &::-moz-range-thumb { @@ -479,7 +475,8 @@ @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base)); @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); &:active { @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active)); @@ -495,7 +492,8 @@ border-color: transparent; // Firefox specific? @include border-radius(var(--pgn-size-form-control-range-track-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-range-track)); + // @include box-shadow(var(--pgn-elevation-form-control-range-track)); + box-shadow: var(--pgn-elevation-form-control-range-track); } &::-ms-thumb { @@ -510,7 +508,8 @@ @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base)); @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius)); - @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + // @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base)); + box-shadow: var(--pgn-elevation-form-control-range-thumb-base); &:active { @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active)); @@ -526,7 +525,8 @@ border-color: transparent; border-width: calc(var(--pgn-size-form-control-range-thumb-height) * .5); - @include box-shadow(var(--pgn-elevation-form-control-range-track)); + // @include box-shadow(var(--pgn-elevation-form-control-range-track)); + box-shadow: var(--pgn-elevation-form-control-range-track); } &::-ms-fill-lower { diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss index 42aa6766e37..f98cae533c2 100644 --- a/src/Form/_bootstrap-forms.scss +++ b/src/Form/_bootstrap-forms.scss @@ -21,10 +21,10 @@ background-clip: padding-box; border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-border); transition: var(--pgn-transition-form-input); + box-shadow: var(--pgn-elevation-form-input-base); // Note: This has no effect on `s in CSS. @include border-radius(var(--pgn-size-form-input-radius-border-base), 0); - @include box-shadow(var(--pgn-elevation-form-input-base)); // Unstyle the caret on `