Skip to content

Commit

Permalink
fix: update linting to support paver sass compile
Browse files Browse the repository at this point in the history
  • Loading branch information
@leangseu-edx
leangseu-edx committed Jun 23, 2022
1 parent 14eab79 commit e7704c0
Show file tree
Hide file tree
Showing 16 changed files with 62 additions and 60 deletions.
4 changes: 3 additions & 1 deletion .stylelintrc.json
View file
Expand Up @@ -29,6 +29,8 @@
"scss/comment-no-empty": null,
"property-no-unknown": [true, {
"ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
}]
}],
"alpha-value-notation": "number",
"color-function-notation": "legacy"
}
}
60 changes: 30 additions & 30 deletions scss/core/_variables.scss
View file
Expand Up @@ -472,88 +472,88 @@ $border-radius-sm: .25rem !default;

$rounded-pill: 50rem !default;

$level-1-box-shadow: 0 .0625rem .125rem rgb(0 0 0 / 15%), 0 .0625rem .25rem rgb(0 0 0 / 15%) !default;
$level-2-box-shadow: 0 .125rem .25rem rgb(0 0 0 / 15%), 0 .125rem .5rem rgb(0 0 0 / 15%) !default;
$level-3-box-shadow: 0 0 .625rem rgb(0 0 0 / 15%), 0 0 1rem rgb(0 0 0 / 15%) !default;
$level-4-box-shadow: 0 .625rem 1.25rem rgb(0 0 0 / 15%), 0 .5rem 1.25rem rgb(0 0 0 / 15%) !default;
$level-5-box-shadow: 0 1.25px 2.5rem rgb(0 0 0 / 15%), 0 .5rem 2.5rem rgb(0 0 0 / 15%) !default;
$level-1-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
$level-2-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
$level-3-box-shadow: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
$level-4-box-shadow: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
$level-5-box-shadow: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;

@mixin pgn-box-shadow($level, $side) {
@if $side == "down" {
@if $level == 1 {
box-shadow: 0 .0625rem .125rem rgb(0 0 0 / 15%), 0 .0625rem .25rem rgb(0 0 0 / 15%);
box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
} @else if $level == 2 {
box-shadow: 0 .125rem .25rem rgb(0 0 0 / 15%), 0 .125rem .5rem rgb(0 0 0 / 15%);
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
} @else if $level == 3 {
box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%), 0 .25rem .625rem rgb(0 0 0 / 15%);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
} @else if $level == 4 {
box-shadow: 0 .625rem 1.25rem rgb(0 0 0 / 15%), 0 .5rem 1.25rem rgb(0 0 0 / 15%);
box-shadow: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
} @else if $level == 5 {
box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 15%), 0 .5rem 3rem rgb(0 0 0 / 15%);
box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
} @else {
@error "Box-shadow level #{$level} does not exist";
}
}

@if $side == "left" {
@if $level == 1 {
box-shadow: -.0625rem 0 .125rem rgb(0 0 0 / 15%), -.0625rem 0 .25rem rgb(0 0 0 / 15%);
box-shadow: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15);
} @else if $level == 2 {
box-shadow: -.125rem 0 .25rem rgb(0 0 0 / 15%), -.125rem 0 .5rem rgb(0 0 0 / 15%);
box-shadow: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15);
} @else if $level == 3 {
box-shadow: -.5rem 0 1rem rgb(0 0 0 / 15%), -.25rem 0 .625rem rgb(0 0 0 / 15%);
box-shadow: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15);
} @else if $level == 4 {
box-shadow: -.625rem 0 1.25rem rgb(0 0 0 / 15%), -.5rem 0 1.25rem rgb(0 0 0 / 15%);
box-shadow: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15);
} @else if $level == 5 {
box-shadow: -1.25rem 0 2.5rem rgb(0 0 0 / 15%), -.5rem 0 3rem rgb(0 0 0 / 15%);
box-shadow: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15);
} @else {
@error "Box-shadow level #{$level} does not exist";
}
}

@if $side == "up" {
@if $level == 1 {
box-shadow: 0 -.0625rem .125rem rgb(0 0 0 / 15%), 0 -.0625rem .25rem rgb(0 0 0 / 15%);
box-shadow: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15);
} @else if $level == 2 {
box-shadow: 0 -.125rem .25rem rgb(0 0 0 / 15%), 0 -.125rem .5rem rgb(0 0 0 / 15%);
box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15);
} @else if $level == 3 {
box-shadow: 0 -.5rem 1rem rgb(0 0 0 / 15%), 0 -.25rem .625rem rgb(0 0 0 / 15%);
box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
} @else if $level == 4 {
box-shadow: 0 -.625rem 1.25rem rgb(0 0 0 / 15%), 0 -.5rem 1.25rem rgb(0 0 0 / 15%);
box-shadow: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15);
} @else if $level == 5 {
box-shadow: 0 -1.25rem 2.5rem rgb(0 0 0 / 15%), 0 -.5rem 3rem rgb(0 0 0 / 15%);
box-shadow: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15);
} @else {
@error "Box-shadow level #{$level} does not exist";
}
}

@if $side == "right" {
@if $level == 1 {
box-shadow: .0625rem 0 .125rem rgb(0 0 0 / 15%), .0625rem 0 .25rem rgb(0 0 0 / 15%);
box-shadow: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15);
} @else if $level == 2 {
box-shadow: .125rem 0 .25rem rgb(0 0 0 / 15%), .125rem 0 .5rem rgb(0 0 0 / 15%);
box-shadow: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15);
} @else if $level == 3 {
box-shadow: .5rem 0 1rem rgb(0 0 0 / 15%), .25rem 0 .625rem rgb(0 0 0 / 15%);
box-shadow: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15);
} @else if $level == 4 {
box-shadow: .625rem 0 1.25rem rgb(0 0 0 / 15%), .5rem 0 1.25rem rgb(0 0 0 / 15%);
box-shadow: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15);
} @else if $level == 5 {
box-shadow: 1.25rem 0 2.5rem rgb(0 0 0 / 15%), .5rem 0 3rem rgb(0 0 0 / 15%);
box-shadow: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15);
} @else {
@error "Box-shadow level #{$level} does not exist";
}
}

@if $side == "centered" {
@if $level == 1 {
box-shadow: 0 0 .125rem rgb(0 0 0 / 15%), 0 0 .25rem rgb(0 0 0 / 15%);
box-shadow: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15);
} @else if $level == 2 {
box-shadow: 0 0 .25rem rgb(0 0 0 / 15%), 0 0 .5rem rgb(0 0 0 / 15%);
box-shadow: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15);
} @else if $level == 3 {
box-shadow: 0 0 .625rem rgb(0 0 0 / 15%), 0 0 1rem rgb(0 0 0 / 15%);
box-shadow: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
} @else if $level == 4 {
box-shadow: 0 0 1.25rem rgb(0 0 0 / 15%), 0 0 1.25rem rgb(0 0 0 / 15%);
box-shadow: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
} @else if $level == 5 {
box-shadow: 0 0 2.5rem rgb(0 0 0 / 15%), 0 0 3rem rgb(0 0 0 / 15%);
box-shadow: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
} @else {
@error "Box-shadow level #{$level} does not exist";
}
Expand Down
2 changes: 1 addition & 1 deletion src/Alert/_variables.scss
View file
Expand Up @@ -9,7 +9,7 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-normal !default;
$alert-border-width: 0 !default;
$alert-title-color: #000000 !default;
$alert-box-shadow: 0 1px 2px rgb(0 0 0 / 15%), 0 1px 4px rgb(0 0 0 / 15%) !default;
$alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
Expand Down
4 changes: 2 additions & 2 deletions src/Annotation/_variables.scss
View file
@@ -1,6 +1,6 @@
$annotation-padding: .5rem !default;
$annotation-box-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 15%))
drop-shadow(0 2px 8px rgb(0 0 0 / 15%)) !default;
$annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$annotation-border-radius: .25rem !default;
$annotation-max-width: 18.75rem !default;
$annotation-font-size: $font-size-sm !default;
Expand Down
4 changes: 2 additions & 2 deletions src/Button/_variables.scss
View file
Expand Up @@ -30,8 +30,8 @@ $btn-tertiary-hover-bg: $light-500 !default;
$btn-tertiary-active-bg: $light-500 !default;
$btn-inverse-tertiary-color: $white !default;
$btn-inverse-tertiary-bg: transparent !default;
$btn-inverse-tertiary-hover-bg: rgb(255 255 255 / 10%) !default;
$btn-inverse-tertiary-active-bg: rgb(255 255 255 / 10%) !default;
$btn-inverse-tertiary-hover-bg: rgba(255, 255, 255, .1) !default;
$btn-inverse-tertiary-active-bg: rgba(255, 255, 255, .1) !default;

$btn-link-disabled-color: theme-color("gray", "light-text") !default;

Expand Down
2 changes: 1 addition & 1 deletion src/Form/_variables.scss
View file
Expand Up @@ -100,7 +100,7 @@ $custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default;
$custom-control-indicator-checked-box-shadow: none !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;

$custom-control-indicator-focus-box-shadow: 0 0 0 4px rgb(0 0 0 / 10%) !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 4px rgba(0, 0, 0, .1) !default;
$custom-control-indicator-focus-border-color: $input-focus-border-color !default;

$custom-control-indicator-active-color: $component-active-color !default;
Expand Down
2 changes: 1 addition & 1 deletion src/Modal/Modal.scss
View file
Expand Up @@ -72,7 +72,7 @@
}

.modal-backdrop {
background-color: rgb(0 0 0 / 30%);
background-color: rgba(0, 0, 0, .3);

// Fade for backdrop
&.fade { opacity: 0; }
Expand Down
4 changes: 2 additions & 2 deletions src/Popover/_variables.scss
View file
Expand Up @@ -7,8 +7,8 @@ $popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-sm !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 15%))
drop-shadow(0 2px 8px rgb(0 0 0 / 15%)) !default;
$popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$popover-icon-margin-right: .5rem;
$popover-icon-height: 1rem;
$popover-icon-width: 1rem;
Expand Down
10 changes: 5 additions & 5 deletions src/ProductTour/Checkpoint.scss
View file
Expand Up @@ -10,7 +10,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
border-top: $checkpoint-border-width solid $checkpoint-border-color;
border-radius: $border-radius;
padding: map_get($spacers, 4);
box-shadow: 0 .25rem .5rem rgb(0 0 0 / 30%);
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
z-index: $checkpoint-z-index;
max-width: $checkpoint-max-width;

Expand Down Expand Up @@ -111,8 +111,8 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
border-top: $checkpoint-arrow-default-color;
border-left: $checkpoint-arrow-transparent;
border-right: $checkpoint-arrow-transparent;
filter: drop-shadow(0 4px 2px rgb(0 0 0 / 10%));
-webkit-filter: drop-shadow(0 4px 2px rgb(0 0 0 / 10%));
filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
-webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
}
}

Expand All @@ -137,7 +137,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
border-top: $checkpoint-arrow-transparent;
border-left: $checkpoint-arrow-default-color;
border-right: $checkpoint-arrow-transparent;
filter: drop-shadow(3px 1px 2px rgb(0 0 0 / 10%));
filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
}
}

Expand All @@ -151,6 +151,6 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
border-top: $checkpoint-arrow-transparent;
border-left: $checkpoint-arrow-transparent;
border-right: $checkpoint-arrow-default-color;
filter: drop-shadow(-3px 1px 2px rgb(0 0 0 / 10%));
filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
}
}
4 changes: 2 additions & 2 deletions src/Scrollable/Scrollable.scss
View file
Expand Up @@ -9,7 +9,7 @@
&::before {
content: "";
background-color: transparent;
box-shadow: 5px 0 7px 2px rgb(0 0 0 / 55%);
box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
display: block;
height: 2px;
position: sticky;
Expand All @@ -21,7 +21,7 @@
&::after {
content: "";
background-color: transparent;
box-shadow: 5px 0 7px 2px rgb(0 0 0 / 55%);
box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
display: block;
height: 2px;
position: sticky;
Expand Down
10 changes: 5 additions & 5 deletions src/Sheet/Sheet.scss
View file
@@ -1,7 +1,7 @@
.pgn__sheet-skrim {
width: 100%;
height: 100%;
background-color: rgb(196 196 196 / 50%);
background-color: rgba(196, 196, 196, .5);
position: fixed;
top: 0;
left: 0;
Expand All @@ -15,12 +15,12 @@

%component-left {
left: 0;
box-shadow: 8px 0 16px 0 rgb(0 0 0 / 15%);
box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15);
}

%component-right {
right: 0;
box-shadow: -8px 0 16px 0 rgb(0 0 0 / 15%);
box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15);
}

.pgn__sheet-component-left {
Expand All @@ -44,12 +44,12 @@

&.bottom {
bottom: 0;
box-shadow: 0 -8px 16px 0 rgb(0 0 0 / 15%);
box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15);
}

&.top {
top: 0;
box-shadow: 0 8px 16px 0 rgb(0 0 0 / 15%);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
}

&.left {
Expand Down
4 changes: 2 additions & 2 deletions src/Sticky/_variables.scss
View file
@@ -1,3 +1,3 @@
$sticky-offset: 0 !default;
$sticky-shadow-top: 0 -.5rem 1rem rgb(0 0 0 / 15%), 0 -.25rem .625rem rgb(0 0 0 / 15%) !default;
$sticky-shadow-bottom: 0 .5rem 1rem rgb(0 0 0 / 15%), 0 .25rem .625rem rgb(0 0 0 / 15%) !default;
$sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
$sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
4 changes: 2 additions & 2 deletions src/Toast/_variables.scss
View file
Expand Up @@ -7,13 +7,13 @@ $toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: $gray-700 !default;
$toast-border-width: 1px !default;
$toast-border-color: rgb(0 0 0 / 10%) !default;
$toast-border-color: rgba(0, 0, 0, .1) !default;
$toast-border-radius: .25rem !default;
$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;

$toast-header-color: $white !default;
$toast-header-background-color: $gray-700 !default;
$toast-header-border-color: rgb(0 0 0 / 5%) !default;
$toast-header-border-color: rgba(0, 0, 0, .5) !default;

$toast-container-gutter-lg: 1.25rem !default;
$toast-container-gutter-sm: .625rem !default;
4 changes: 2 additions & 2 deletions src/Tooltip/_variables.scss
View file
Expand Up @@ -9,8 +9,8 @@ $tooltip-opacity: 1 !default;
$tooltip-padding-y: .5rem !default;
$tooltip-padding-x: .5rem !default;
$tooltip-margin: 0 !default;
$tooltip-box-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 15%))
drop-shadow(0 2px 8px rgb(0 0 0 / 15%)) !default;
$tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;

$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/Search.scss
View file
Expand Up @@ -92,7 +92,7 @@
.DocSearch {
&.DocSearch-Container {
z-index: $zindex-modal;
background: rgb(125 125 125 / 65%);
background: rgba(125, 125, 125, .65);
}

.DocSearch-Modal {
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/_doc-elements.scss
View file
Expand Up @@ -10,7 +10,7 @@
}

td {
border-top: solid 1px rgb(0 0 0 / 17%);
border-top: solid 1px rgba(0, 0, 0, .17);
}

thead td,
Expand Down

0 comments on commit e7704c0

Please sign in to comment.