Skip to content

Commit

Permalink
fix: remove $enable-shadows SCSS flag (#2423)
Browse files Browse the repository at this point in the history
* refactor: fixed spacing calculations and box-shadows

* refactor: removed flag to switch shadows
  • Loading branch information
PKulkoRaccoonGang authored Sep 15, 2023
1 parent bf05cc3 commit 948e51e
Show file tree
Hide file tree
Showing 19 changed files with 89 additions and 119 deletions.
4 changes: 2 additions & 2 deletions src/Button/button-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/Code/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/Dropdown/dropdown-bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
49 changes: 14 additions & 35 deletions src/Form/_bootstrap-custom-forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -250,26 +241,15 @@
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)
);
}

@else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: var(--pgn-elevation-form-control-select-border-focus);
}
box-shadow: var(--pgn-elevation-form-control-select-border-focus);

&::-ms-value {
// For visual consistency with other platforms/browsers,
Expand Down Expand Up @@ -381,9 +361,9 @@
color: var(--pgn-color-form-control-file-base);
background-color: var(--pgn-color-form-control-file-bg-base);
border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base);
box-shadow: var(--pgn-elevation-form-control-file-base);

@include border-radius(var(--pgn-size-form-control-file-border-radius));
@include box-shadow(var(--pgn-elevation-form-control-file-base));

&::after {
content: "Browse";
Expand Down Expand Up @@ -448,10 +428,10 @@
border: var(--pgn-size-form-control-range-thumb-border-base);
appearance: none;
transition: var(--pgn-transition-form-control);
box-shadow: var(--pgn-elevation-form-control-range-thumb-base);

@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));

&:active {
@include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
Expand All @@ -465,9 +445,9 @@
cursor: var(--pgn-other-form-control-range-track-cursor);
background-color: var(--pgn-color-form-control-range-track-bg);
border-color: transparent;
box-shadow: var(--pgn-elevation-form-control-range-track);

@include border-radius(var(--pgn-size-form-control-range-track-border-radius));
@include box-shadow(var(--pgn-elevation-form-control-range-track));
}

&::-moz-range-thumb {
Expand All @@ -476,10 +456,10 @@
border: var(--pgn-size-form-control-range-thumb-border-base);
appearance: none;
transition: var(--pgn-transition-form-control);
box-shadow: var(--pgn-elevation-form-control-range-thumb-base);

@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));

&:active {
@include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
Expand All @@ -493,9 +473,9 @@
cursor: var(--pgn-other-form-control-range-track-cursor);
background-color: var(--pgn-color-form-control-range-track-bg);
border-color: transparent; // Firefox specific?
box-shadow: var(--pgn-elevation-form-control-range-track);

@include border-radius(var(--pgn-size-form-control-range-track-border-radius));
@include box-shadow(var(--pgn-elevation-form-control-range-track));
}

&::-ms-thumb {
Expand All @@ -507,10 +487,10 @@
border: var(--pgn-size-form-control-range-thumb-border-base);
appearance: none;
transition: var(--pgn-transition-form-control);
box-shadow: var(--pgn-elevation-form-control-range-thumb-base);

@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));

&:active {
@include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
Expand All @@ -525,8 +505,7 @@
background-color: transparent;
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));
box-shadow: var(--pgn-elevation-form-control-range-track);
}

&::-ms-fill-lower {
Expand Down
2 changes: 1 addition & 1 deletion src/Form/_bootstrap-forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 <select>s in some browsers, due to the limited stylability of `<select>`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 `<select>`s in IE10+.
&::-ms-expand {
Expand Down
10 changes: 1 addition & 9 deletions src/Form/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,7 @@
background-color: var(--pgn-color-form-input-focus-bg);
border-color: var(--pgn-color-form-input-focus-border);
outline: 0;

@if $enable-shadows {
@include box-shadow(var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-input-focus));
}

@else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: var(--pgn-elevation-form-input-focus);
}
box-shadow: var(--pgn-elevation-form-input-focus);
}

@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
Expand Down
2 changes: 1 addition & 1 deletion src/Image/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
padding: var(--pgn-spacing-image-thumbnail-padding);
background-color: var(--pgn-color-image-thumbnail-bg);
border: var(--pgn-size-image-thumbnail-border-width) solid var(--pgn-color-image-thumbnail-border);
box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow);

@include border-radius(var(--pgn-size-image-thumbnail-border-radius));
@include box-shadow(var(--pgn-elevation-image-thumbnail-box-shadow));

// Keep them at most 100% wide
@include img-fluid();
Expand Down
2 changes: 1 addition & 1 deletion src/Popover/popover-bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
background-color: var(--pgn-color-popover-bg);
background-clip: padding-box;
border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border);
box-shadow: var(--pgn-elevation-popover-box-shadow);

@include border-radius(var(--pgn-size-popover-border-radius));
@include box-shadow(var(--pgn-elevation-popover-box-shadow));

.arrow {
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion src/ProgressBar/bootstrap-progress.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
overflow: hidden;
line-height: 0;
background-color: var(--pgn-color-progress-bar-bg);
box-shadow: var(--pgn-elevation-progress-bar-box-shadow);

@include font-size(var(--pgn-typography-progress-bar-font-size));
@include border-radius(var(--pgn-size-progress-bar-border-radius));
@include box-shadow(var(--pgn-elevation-progress-bar-box-shadow));
}

.progress-bar {
Expand Down
20 changes: 10 additions & 10 deletions styles/css/core/variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -461,17 +461,17 @@
--pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
--pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
--pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
--pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem);
--pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem);
--pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem);
--pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem);
--pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem);
--pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem);
--pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem);
--pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem);
--pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
--pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
--pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
--pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
--pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
--pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
--pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
--pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
--pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
--pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem);
--pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem);
--pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
--pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
--pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
Expand Down
20 changes: 10 additions & 10 deletions styles/css/themes/light/variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@
--pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
--pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-image-thumbnail-box-shadow: none;
--pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
--pgn-elevation-icon-button-box-shadow-black-active: none;
--pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
Expand All @@ -244,24 +244,25 @@
--pgn-elevation-icon-button-box-shadow-secondary-active: none;
--pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
--pgn-elevation-icon-button-box-shadow-primary-active: none;
--pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
--pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
--pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
--pgn-elevation-form-control-select-border-base: none;
--pgn-elevation-form-control-range-thumb-base: none;
--pgn-elevation-form-control-range-track: none;
--pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
--pgn-elevation-form-control-indicator-active: none;
--pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
--pgn-elevation-form-control-indicator-checked-base: none;
--pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075);
--pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
--pgn-elevation-form-input-focus: none;
--pgn-elevation-form-input-base: none;
--pgn-elevation-code-kbd-box-shadow: none;
--pgn-elevation-btn-box-shadow-active: none;
--pgn-elevation-btn-box-shadow-base: none;
--pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
--pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
--pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
--pgn-elevation-progress-bar-box-shadow: none;
--pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
--pgn-elevation-popover-box-shadow: none;
--pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
--pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
--pgn-elevation-dropdown-box-shadow: none;
--pgn-color-action-default-accent-b: #FFE755FF;
--pgn-color-action-default-accent-a: #0095C6FF;
--pgn-color-action-default-dark-base: #142018FF;
Expand Down Expand Up @@ -600,6 +601,7 @@
--pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
--pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
--pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
--pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
--pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
--pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
--pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
Expand Down Expand Up @@ -1122,7 +1124,6 @@
--pgn-color-bg-active: var(--pgn-color-primary-500);
--pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
--pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
--pgn-elevation-form-input-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
--pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
--pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
--pgn-color-action-default-danger-900: #60161DFF;
Expand Down Expand Up @@ -1462,7 +1463,6 @@
--pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
--pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
--pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
--pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
--pgn-color-pagination-text-base: var(--pgn-color-link-base);
Expand Down
Loading

0 comments on commit 948e51e

Please sign in to comment.