Add CSS class name prefix

This commit is contained in:
Jeremy Thomas
2022-11-23 22:53:56 +00:00
parent f75e9fcec2
commit 7de49012b7
50 changed files with 20999 additions and 9088 deletions

View File

@@ -32,7 +32,7 @@ $modal-card-body-padding: 20px !default;
$modal-breakpoint: $tablet !default;
.modal {
.#{$class-prefix}modal {
@extend %overlay;
align-items: center;
@@ -49,14 +49,14 @@ $modal-breakpoint: $tablet !default;
}
}
.modal-background {
.#{$class-prefix}modal-background {
@extend %overlay;
background-color: $modal-background-background-color;
}
.modal-content,
.modal-card {
.#{$class-prefix}modal-content,
.#{$class-prefix}modal-card {
margin: 0 $modal-content-margin-mobile;
max-height: calc(100vh - #{$modal-content-spacing-mobile});
overflow: auto;
@@ -71,7 +71,7 @@ $modal-breakpoint: $tablet !default;
}
}
.modal-close {
.#{$class-prefix}modal-close {
@extend %delete;
background: none;
@@ -84,7 +84,7 @@ $modal-breakpoint: $tablet !default;
width: $modal-close-dimensions;
}
.modal-card {
.#{$class-prefix}modal-card {
display: flex;
flex-direction: column;
max-height: calc(100vh - #{$modal-card-spacing});
@@ -92,8 +92,8 @@ $modal-breakpoint: $tablet !default;
-ms-overflow-y: visible;
}
.modal-card-head,
.modal-card-foot {
.#{$class-prefix}modal-card-head,
.#{$class-prefix}modal-card-foot {
align-items: center;
background-color: $modal-card-head-background-color;
display: flex;
@@ -103,13 +103,13 @@ $modal-breakpoint: $tablet !default;
position: relative;
}
.modal-card-head {
.#{$class-prefix}modal-card-head {
border-bottom: $modal-card-head-border-bottom;
border-top-left-radius: $modal-card-head-radius;
border-top-right-radius: $modal-card-head-radius;
}
.modal-card-title {
.#{$class-prefix}modal-card-title {
color: $modal-card-title-color;
flex-grow: 1;
flex-shrink: 0;
@@ -117,19 +117,19 @@ $modal-breakpoint: $tablet !default;
line-height: $modal-card-title-line-height;
}
.modal-card-foot {
.#{$class-prefix}modal-card-foot {
border-bottom-left-radius: $modal-card-foot-radius;
border-bottom-right-radius: $modal-card-foot-radius;
border-top: $modal-card-foot-border-top;
.button {
.#{$class-prefix}button {
&:not(:last-child) {
@include ltr-property("margin", 0.5em);
}
}
}
.modal-card-body {
.#{$class-prefix}modal-card-body {
@include overflow-touch;
background-color: $modal-card-body-background-color;