Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BD-46] refactor: fixed spacing calculations and box-shadows #2423

Merged
merged 2 commits into from
Sep 15, 2023
Merged

[BD-46] refactor: fixed spacing calculations and box-shadows #2423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2695b87
refactor: fixed spacing calculations and box-shadows
PKulkoRaccoonGang Jul 5, 2023
daacf73
refactor: removed flag to switch shadows
PKulkoRaccoonGang Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Button/button-group.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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));
viktorrusakov marked this conversation as resolved.
Show resolved Hide resolved
}

@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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading