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

[BD-46] refactor: improve design tokens architecture #1874

Merged
merged 2 commits into from
Jan 6, 2023
Merged

[BD-46] refactor: improve design tokens architecture #1874

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
db822a6
refactor: update design tokens naming and add missing ones
PKulkoRaccoonGang Dec 27, 2022
89d3350
feat: expose replace vars script to CLI
viktorrusakov Dec 28, 2022
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 package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"module": "dist/index.js",
"license": "Apache-2.0",
"bin": {
"build-design-tokens": "./tokens/build-tokens.js"
"build-design-tokens": "./tokens/build-tokens.js",
"replace-scss-with-css": "./tokens/replace-variables.js"
},
"publishConfig": {
"access": "public"
Expand Down Expand Up @@ -49,7 +50,7 @@
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"build-types": "tsc --emitDeclarationOnly",
"build-tokens": "node tokens/build-tokens.js --build-dir scss/core/css/",
"build-tokens": "node tokens/build-tokens.js --build-dir ./scss/core/css/",
"replace-variables-usage-with-css": "node tokens/replace-variables.js -p src -t usage",
"replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition",
"build-scss-to-css-map": "node tokens/map-scss-to-css.js"
Expand Down
368 changes: 184 additions & 184 deletions scss/core/_variables.scss
View file
Open in desktop

Large diffs are not rendered by default.

694 changes: 345 additions & 349 deletions scss/core/css/variables.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Badge/Badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
transition: $badge-transition;

@include border-radius($badge-border-radius);
@include transition($badge-transition);

@at-root a#{&} {
&:hover,
Expand Down
4 changes: 2 additions & 2 deletions src/Breadcrumb/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ $breadcrumb-item-padding: var(--pgn-spacing-breadcrumb-padding-item) !default;
$breadcrumb-margin-bottom: var(--pgn-spacing-breadcrumb-margin-bottom) !default;
$breadcrumb-margin-left: var(--pgn-spacing-breadcrumb-margin-left) !default;

$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default;
$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default;
$breadcrumb-border-focus-axis-x: var(--pgn-size-breadcrumb-border-axis-x-focus) !default;
$breadcrumb-border-focus-axis-y: var(--pgn-size-breadcrumb-border-axis-y-focus) !default;

$breadcrumb-border-focus-width: var(--pgn-size-breadcrumb-border-width-focus) !default;

Expand Down
5 changes: 2 additions & 3 deletions src/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,9 @@
border: $btn-border-width solid var(--pgn-btn-border-color, transparent);
color: var(--pgn-btn-color, #{$body-color});
background-color: var(--pgn-btn-bg, transparent);
transition: $btn-transition;

@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size,
$btn-line-height, $btn-border-radius);
@include transition($btn-transition);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);

&:hover {
color: var(--pgn-btn-hover-color, #{$body-color});
Expand Down
54 changes: 27 additions & 27 deletions src/Button/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
$btn-padding-y: var(--pgn-btn-padding-y-base) !default;
$btn-padding-x: var(--pgn-btn-padding-x-base) !default;
$btn-font-family: var(--pgn-btn-font-family) !default;
$btn-font-size: var(--pgn-btn-font-size-base) !default;
$btn-line-height: var(--pgn-btn-line-height-base) !default;
$btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default;
$btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default;
$btn-font-family: var(--pgn-typography-btn-font-family) !default;
$btn-font-size: var(--pgn-typography-btn-font-size-base) !default;
$btn-line-height: var(--pgn-typography-btn-line-height-base) !default;

$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default;
$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default;
$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default;
$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default;
$btn-padding-y-sm: var(--pgn-spacing-btn-padding-y-sm) !default;
$btn-padding-x-sm: var(--pgn-spacing-btn-padding-x-sm) !default;
$btn-font-size-sm: var(--pgn-typography-btn-font-size-sm) !default;
$btn-line-height-sm: var(--pgn-typography-btn-line-height-sm) !default;

$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default;
$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default;
$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default;
$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default;
$btn-padding-y-lg: var(--pgn-spacing-btn-padding-y-lg) !default;
$btn-padding-x-lg: var(--pgn-spacing-btn-padding-x-lg) !default;
$btn-font-size-lg: var(--pgn-typography-btn-font-size-lg) !default;
$btn-line-height-lg: var(--pgn-typography-btn-line-height-lg) !default;

$btn-border-width: var(--pgn-btn-border-width) !default;
$btn-border-width: var(--pgn-size-btn-border-width) !default;

$btn-font-weight: var(--pgn-btn-font-weight) !default;
$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default;
$btn-focus-width: var(--pgn-btn-focus-width) !default;
$btn-focus-gap: var(--pgn-btn-focus-gap) !default;
$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default;
$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default;
$btn-font-weight: var(--pgn-typography-btn-font-weight) !default;
$btn-box-shadow: var(--pgn-elevation-btn-box-shadow-base) !default;
$btn-focus-width: var(--pgn-size-btn-focus-width) !default;
$btn-focus-gap: var(--pgn-spacing-btn-focus-gap) !default;
$btn-disabled-opacity: var(--pgn-other-btn-disabled-opacity) !default;
$btn-active-box-shadow: var(--pgn-elevation-btn-box-shadow-active) !default;

$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default;
$btn-link-disabled-color: var(--pgn-color-btn-disabled-link) !default;

$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default;
$btn-block-spacing-y: var(--pgn-spacing-btn-block-spacing-y) !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--pgn-btn-border-radius-base) !default;
$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default;
$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default;
$btn-border-radius: var(--pgn-size-btn-border-radius-base) !default;
$btn-border-radius-lg: var(--pgn-size-btn-border-radius-lg) !default;
$btn-border-radius-sm: var(--pgn-size-btn-border-radius-sm) !default;

$btn-transition: var(--pgn-btn-transition) !default;
$btn-transition: var(--pgn-transition-btn) !default;

// PRIMARY BUTTON VARIABLES
$btn-primary-bg: var(--pgn-color-btn-bg-primary) !default;
Expand Down Expand Up @@ -417,4 +417,4 @@ $btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inver
$btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default;
$btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default;
$btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default;
$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default;
$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default;
1 change: 1 addition & 0 deletions src/Card/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $card-border-radius: var(--pgn-size-card-border-radius-base) !default;
$card-border-color: var(--pgn-color-card-border-base) !default;
$card-border-focus-color: var(--pgn-color-card-border-focus) !default;

// TODO: Need to deleted this variable after refactoring Card component
// stylelint-disable-next-line max-line-length
$card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default;
$card-color: var(--pgn-color-card-base) !default;
Expand Down
2 changes: 2 additions & 0 deletions src/Card/card-bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
}
}

// TODO: This selector is not used in Paragon.
// It is necessary to delete it and the existing design token (`$card-color`).
.card-body {
flex: 1 1 auto;
min-height: 1px;
Expand Down
3 changes: 2 additions & 1 deletion src/Carousel/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$carousel-control-color: var(--pgn-color-carousel-control-base) !default;
$carousel-control-width: var(--pgn-size-carousel-control-width-base) !default;
$carousel-control-opacity: var(--pgn-color-carousel-control-opacity-base) !default;
$carousel-control-hover-opacity: var(--pgn-color-carousel-control-opacity-hover) !default;
Expand All @@ -18,4 +19,4 @@ $carousel-control-prev-icon-bg: var(--pgn-content-carousel-control-bg-prev-icon)
$carousel-control-next-icon-bg: var(--pgn-content-carousel-control-bg-next-icon) !default;

// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-transition: transform var(--pgn-transition-carousel-duration) ease-in-out !default;
$carousel-transition: var(--pgn-transition-carousel-base) !default;
14 changes: 5 additions & 9 deletions src/Carousel/carousel-bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
width: 100%;
margin-right: -100%;
backface-visibility: hidden;

@include transition($carousel-transition);
transition: $carousel-transition;
}

.carousel-item.active,
Expand Down Expand Up @@ -60,8 +59,7 @@
.active.carousel-item-right {
z-index: 0;
opacity: 0;

@include transition(opacity 0s var(--pgn-carousel-transition-base));
transition: opacity 0s $carousel-transition;
}
}

Expand All @@ -78,13 +76,12 @@
justify-content: center;
width: $carousel-control-width;
padding: 0;
color: var(--pgn-carousel-control-color);
color: $carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;

@include transition($carousel-control-transition);
transition: $carousel-control-transition;

@include hover-focus() {
color: var(--pgn-carousel-control-color);
Expand Down Expand Up @@ -160,8 +157,7 @@
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;

@include transition($carousel-indicator-transition);
transition: $carousel-indicator-transition;
}

.active {
Expand Down
2 changes: 1 addition & 1 deletion src/Chip/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $chip-padding-to-icon: var(--pgn-spacing-chip-padding-to-icon) !default;
$chip-icon-padding: var(--pgn-spacing-chip-padding-icon) !default;
$chip-margin: var(--pgn-spacing-chip-margin) !default;
$chip-border-radius: var(--pgn-size-chip-border-radius) !default;
$chip-disable-opacity: var(--pgn-color-chip-opacity-disabled) !default;
$chip-disable-opacity: var(--pgn-other-chip-opacity-disabled) !default;
$chip-icon-size: var(--pgn-size-chip-icon) !default;

$chip-light-bg: var(--pgn-color-chip-bg-light) !default;
Expand Down
11 changes: 5 additions & 6 deletions src/Form/_bootstrap-custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,7 @@
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;

@include transition(transform .15s ease-in-out, $custom-forms-transition);
transition: transform .15s ease-in-out, $custom-forms-transition;
}
}

Expand Down Expand Up @@ -429,11 +428,11 @@
margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
Expand All @@ -457,11 +456,11 @@
height: $custom-range-thumb-height;
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
Expand All @@ -488,11 +487,11 @@
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
Expand Down Expand Up @@ -550,5 +549,5 @@
.custom-control-label::before,
.custom-file-label,
.custom-select {
@include transition($custom-forms-transition);
transition: $custom-forms-transition;
}
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 @@ -20,11 +20,11 @@
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
transition: $input-transition;

// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);

// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
Expand Down
10 changes: 4 additions & 6 deletions src/Form/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ $input-focus-color: var(--pgn-color-form-input-focus-base) !default;
$input-focus-width: var(--pgn-size-form-input-width-focus) !default;
$input-focus-box-shadow: var(--pgn-elevation-form-input-focus) !default;

$input-placeholder-color: var(--pgn-color-form-input-plaintext) !default;
$input-plaintext-color: var(--pgn-body-color) !default;
$input-placeholder-color: var(--pgn-color-form-input-placeholder) !default;
$input-plaintext-color: var(--pgn-color-form-input-plaintext) !default;

$input-height-border: var(--pgn-size-form-input-height-border) !default;

Expand Down Expand Up @@ -153,8 +153,7 @@ $custom-select-indicator-color: var(--pgn-color-form-control-select-indicator-ba
$custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default;

// Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-background: $custom-select-indicator no-repeat right
var(--pgn-form-input-padding-y-base) center / var(--pgn-form-custom-select-bg-size) !default;
$custom-select-background: var(--pgn-other-content-form-control-select-bg) !default;

$custom-select-feedback-icon-padding-right: var(--pgn-spacing-form-control-select-feedback-icon-padding-right) !default;
$custom-select-feedback-icon-position: var(--pgn-spacing-form-control-select-feedback-icon-position) !default;
Expand Down Expand Up @@ -228,7 +227,6 @@ $form-feedback-valid-color: var(--pgn-color-form-feedback-valid) !default;
$form-feedback-invalid-color: var(--pgn-color-form-feedback-invalid) !default;

$form-feedback-tooltip-valid-color: var(--pgn-color-form-feedback-tooltip-valid) !default;
$form-feedback-tooltip-invalid-color: var(--pgn-color-form-feedback-tooltip-invalid) !default;
$form-feedback-tooltip-valid-bg: var(--pgn-color-form-feedback-tooltip-bg-valid) !default;
$form-feedback-tooltip-invalid-bg: var(--pgn-color-form-feedback-tooltip-bg-invalid) !default;

Expand Down Expand Up @@ -270,7 +268,7 @@ $form-feedback-tooltip-padding-y: var(--pgn-spacing-form-control-select-feedback
$form-feedback-tooltip-padding-x: var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x) !default;
$form-feedback-tooltip-font-size: var(--pgn-typography-form-feedback-tooltip-font-size) !default;
$form-feedback-tooltip-line-height: var(--pgn-typography-form-feedback-tooltip-line-height) !default;
$form-feedback-tooltip-opacity: var(--pgn-color-form-feedback-tooltip-opacity) !default;
$form-feedback-tooltip-opacity: var(--pgn-other-form-feedback-tooltip-opacity) !default;
$form-feedback-tooltip-border-radius: var(--pgn-size-form-feedback-tooltip-border-radius) !default;

$form-control-icon-width: var(--pgn-size-form-control-icon-width) !default;
Expand Down
4 changes: 2 additions & 2 deletions src/IconButton/IconButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
display: inline-flex;
justify-content: center;
border: none;
background-color: var(--pgn-icon-button-bg, transparent);
color: var(--pgn-icon-button-color, inherit);
background-color: $btn-icon-bg;
color: $btn-icon-accent-color;

&.btn-icon-sm {
@include btn-icon-size($btn-icon-diameter-sm);
Expand Down
2 changes: 1 addition & 1 deletion src/Modal/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $modal-content-inner-border-radius: calc(#{var(--pgn-size-modal-content-border-r
$modal-content-box-shadow-sm-up: var(--pgn-elevation-modal-content-box-shadow-sm-up) !default;

$modal-backdrop-bg: var(--pgn-color-modal-backdrop-bg) !default;
$modal-backdrop-opacity: var(--pgn-elevation-modal-backdrop-opacity) !default;
$modal-backdrop-opacity: var(--pgn-other-modal-opacity) !default;
$modal-header-padding-y: var(--pgn-spacing-modal-header-padding-y) !default;

$modal-close-container-top: var(--pgn-spacing-dropdown-close-container-top) !default;
Expand Down
4 changes: 0 additions & 4 deletions src/Pagination/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@ $pagination-padding-x-sm: var(--pgn-spacing-pagination-padding-x-sm) !default;
$pagination-padding-y-lg: var(--pgn-spacing-pagination-padding-y-lg) !default;
$pagination-padding-x-lg: var(--pgn-spacing-pagination-padding-x-lg) !default;
$pagination-margin-x: var(--pgn-spacing-pagination-margin-x) !default;
$pagination-margin-y: var(--pgn-spacing-pagination-margin-y) !default;
$pagination-line-height: var(--pgn-typography-pagination-line-height) !default;
$pagination-font-size-sm: var(--pgn-typography-pagination-font-size-sm) !default;

$pagination-icon-size: var(--pgn-size-pagination-icon-base) !default;
$pagination-icon-size-sm: var(--pgn-size-pagination-icon-sm) !default;
$pagination-icon-width: var(--pgn-size-pagination-icon-width) !default;
$pagination-icon-height: var(--pgn-size-pagination-icon-height) !default;
$pagination-padding-icon: var(--pgn-spacing-pagination-padding-icon) !default;
$pagination-toggle-border: var(--pgn-size-pagination-toggle-border-base) !default;
$pagination-toggle-border-sm: var(--pgn-size-pagination-toggle-border-sm) !default;
$pagination-secondary-height: var(--pgn-size-pagination-secondary-height-base) !default;
Expand Down
1 change: 0 additions & 1 deletion src/Popover/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ $popover-icon-height: var(--pgn-size-popover-icon-height) !default;
$popover-icon-width: var(--pgn-size-popover-icon-width) !default;

$popover-header-bg: var(--pgn-color-popover-header-bg) !default;
$popover-header-bg-dark: var(--pgn-color-popover-header-bg-dark) !default;

$popover-header-color: var(--pgn-color-popover-header-text) !default;
$popover-header-padding-y: var(--pgn-spacing-popover-header-padding-y) !default;
Expand Down
4 changes: 2 additions & 2 deletions src/ProductTour/Checkpoint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement

&::after {
border-bottom: solid $checkpoint-arrow-border-bottom;
border-bottom: solid $checkpoint-arrow-border-transparent $checkpoint-border-color;
border-top: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-left: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-right: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
Expand Down Expand Up @@ -145,7 +145,7 @@
left: calc(-2 * $checkpoint-arrow-width);
border-bottom: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-top: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-left: solid $checkpoint-arrow-border-transparent;
border-left: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-right: solid $checkpoint-arrow-border-top $checkpoint-arrow-border-color-top;
filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
}
Expand Down
Loading