Skip to content

Commit

Permalink
fix(@clayui/css): Cadmin Modals converts some components to clay Sass…
Browse files Browse the repository at this point in the history 
… map pattern
  • Loading branch information
@pat270
pat270 committed May 3, 2023
1 parent 18d922a commit 3053c19
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 98 deletions.
124 changes: 27 additions & 97 deletions packages/clay-css/src/scss/cadmin/components/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,7 @@

.modal,
&.modal {
display: none;
height: 100%;
left: 0;
outline: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: $cadmin-zindex-modal;
@include clay-css($cadmin-modal);
}

.modal-dialog {
Expand Down Expand Up @@ -122,67 +114,44 @@

.modal-backdrop,
&.modal-backdrop {
background-color: $cadmin-modal-backdrop-bg;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: $cadmin-zindex-modal-backdrop;

&.fade {
opacity: 0;
}

&.show {
opacity: $cadmin-modal-backdrop-opacity;
}
@include clay-map-to-css($cadmin-modal-backdrop);
}

.modal-content {
background-clip: padding-box;
background-color: $cadmin-modal-content-bg;
border: $cadmin-modal-content-border-width solid
$cadmin-modal-content-border-color;

@include border-radius($cadmin-modal-content-border-radius);
@include box-shadow($cadmin-modal-content-box-shadow-xs);

color: $cadmin-modal-content-color;
display: flex;
flex-direction: column;
outline: 0;
overflow: hidden;
pointer-events: auto;
position: relative;
width: 100%;
@include clay-map-to-css($cadmin-modal-content);
}

.modal-header,
&.modal-header {
$breakpoint-down: map-get($cadmin-modal-header, breakpoint-down);
$_modal-header: setter(map-get($cadmin-modal, modal-header), ());

$_breakpoint-down: map-get($_modal-header, breakpoint-down);
$_mobile: map-get($_modal-header, mobile);

@include clay-css($cadmin-modal-header);
$_modal-header: map-remove($_modal-header, breakpoint-down, mobile);

@include clay-scale-component(null, $breakpoint-down) {
$mobile: setter(map-get($cadmin-modal-header, mobile), ());
@include clay-map-to-css($_modal-header);

@include clay-css($mobile);
@include clay-scale-component(null, $_breakpoint-down) {
@include clay-css(map-get($_modal-header, mobile));
}
}

.modal-body,
&.modal-body {
@include clay-css($cadmin-modal-body);

&.inline-scroller {
$inline-scroller: setter(
map-get($cadmin-modal-body, inline-scroller),
()
);
$_modal-body: setter(map-get($cadmin-modal, modal-body), ());
$_modal-body: map-deep-merge(
$_modal-body,
(
'&.inline-scroller':
map-merge(
setter(map-get($_modal-body, '&.inline-scroller'), ()),
setter(map-get($_modal-body, inline-scroller), ())
),
)
);

@include clay-css($inline-scroller);
}
@include clay-map-to-css($_modal-body);
}

.modal-body-flush,
Expand All @@ -192,32 +161,11 @@

.modal-footer,
&.modal-footer {
align-items: center;
background-color: $cadmin-modal-footer-bg;
border-top: $cadmin-modal-footer-border-width solid
$cadmin-modal-footer-border-color;

@include border-bottom-radius($cadmin-modal-content-inner-border-radius);
@include box-shadow($cadmin-modal-footer-box-shadow);

color: $cadmin-modal-footer-color;
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
height: $cadmin-modal-footer-height;
justify-content: flex-start;
padding-bottom: $cadmin-modal-footer-padding-y;
padding-left: $cadmin-modal-footer-padding-x;
padding-right: $cadmin-modal-footer-padding-x;
padding-top: $cadmin-modal-footer-padding-y;
@include clay-map-to-css(map-get($cadmin-modal, modal-footer));

@include clay-scale-component {
height: $cadmin-modal-footer-height-mobile;
}

> * {
margin: $cadmin-modal-footer-margin-between * 0.5;
}
}

// Modal Item
Expand Down Expand Up @@ -272,27 +220,15 @@
// Modal Title

.modal-title {
flex-grow: 1;
font-size: $cadmin-modal-title-font-size;
font-weight: $cadmin-modal-title-font-weight;
line-height: $cadmin-modal-title-line-height;
margin-bottom: 0;
overflow: hidden;
text-align: $cadmin-modal-title-text-align;
text-overflow: ellipsis;
white-space: nowrap;
@include clay-map-to-css(map-get($cadmin-modal, modal-title));

@include clay-scale-component {
font-size: $cadmin-modal-title-font-size-mobile;
}
}

.modal-title-indicator {
display: inline-block;
font-size: $cadmin-modal-title-indicator-font-size;
margin-right: $cadmin-modal-title-indicator-spacer-x;
margin-top: -0.2em;
vertical-align: middle;
@include clay-map-to-css(map-get($cadmin-modal, modal-title-indicator));
}

// Modal Subtitle
Expand All @@ -314,13 +250,7 @@
&.modal,
.modal {
.close {
&:first-child {
margin-left: math-sign($cadmin-modal-close-spacer-x);
}

&:last-child {
margin-right: math-sign($cadmin-modal-close-spacer-x);
}
@include clay-close(map-get($cadmin-modal, close));
}
}

Expand Down
113 changes: 112 additions & 1 deletion packages/clay-css/src/scss/cadmin/variables/_modals.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
$cadmin-modal-backdrop-bg: $cadmin-gray-800 !default;
$cadmin-modal-backdrop-opacity: 0.8 !default;

$cadmin-modal-backdrop: () !default;
$cadmin-modal-backdrop: map-deep-merge(
(
background-color: $cadmin-modal-backdrop-bg,
height: 100vh,
left: 0,
position: fixed,
top: 0,
width: 100vw,
z-index: $cadmin-zindex-modal-backdrop,
'&.fade': (
opacity: 0,
),
'&.show': (
opacity: $cadmin-modal-backdrop-opacity,
),
),
$cadmin-modal-backdrop
);

// Modal Dialog

$cadmin-modal-dialog-margin: 8px !default;
Expand All @@ -26,6 +46,27 @@ $cadmin-modal-content-inner-border-radius: calc(
$cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
$cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;

$cadmin-modal-content: () !default;
$cadmin-modal-content: map-deep-merge(
(
background-clip: padding-box,
background-color: $cadmin-modal-content-bg,
border-radius: clay-enable-rounded($cadmin-modal-content-border-radius),
border: $cadmin-modal-content-border-width solid
$cadmin-modal-content-border-color,
box-shadow: clay-enable-shadows($cadmin-modal-content-box-shadow-xs),
color: $cadmin-modal-content-color,
display: flex,
flex-direction: column,
outline: 0,
overflow: hidden,
pointer-events: auto,
position: relative,
width: 100%,
),
$cadmin-modal-content
);

// .modal-header

$cadmin-modal-header-bg: null !default;
Expand Down Expand Up @@ -85,7 +126,7 @@ $cadmin-modal-body: map-deep-merge(
margin-top: math-sign($cadmin-modal-content-border-width),
padding: $cadmin-modal-inner-padding,
position: relative,
inline-scroller: (
'&.inline-scroller': (
max-height: 320px,
-webkit-overflow-scrolling: touch,
overflow: auto,
Expand Down Expand Up @@ -257,6 +298,76 @@ $cadmin-modal-height-full-modal-content-sm-up: map-merge(
$cadmin-modal-height-full-modal-content-sm-up
);

// Modal

$cadmin-modal: () !default;
$cadmin-modal: map-deep-merge(
(
display: none,
height: 100%,
left: 0,
outline: 0,
overflow: hidden,
position: fixed,
top: 0,
width: 100%,
z-index: $cadmin-zindex-modal,
close: (
'&:first-child': (
margin-left: math-sign($cadmin-modal-close-spacer-x),
),
'&:last-child': (
margin-right: math-sign($cadmin-modal-close-spacer-x),
),
),
modal-header: $cadmin-modal-header,
modal-body: $cadmin-modal-body,
modal-footer: (
align-items: center,
background-color: $cadmin-modal-footer-bg,
border-bottom-left-radius:
clay-enable-rounded($cadmin-modal-content-inner-border-radius),
border-bottom-right-radius:
clay-enable-rounded($cadmin-modal-content-inner-border-radius),
border-top: $cadmin-modal-footer-border-width solid
$cadmin-modal-footer-border-color,
box-shadow: clay-enable-shadows($cadmin-modal-footer-box-shadow),
color: $cadmin-modal-footer-color,
display: flex,
flex-shrink: 0,
flex-wrap: wrap,
height: $cadmin-modal-footer-height,
justify-content: flex-start,
padding-bottom: $cadmin-modal-footer-padding-y,
padding-left: $cadmin-modal-footer-padding-x,
padding-right: $cadmin-modal-footer-padding-x,
padding-top: $cadmin-modal-footer-padding-y,
'> *': (
margin: calc(#{$cadmin-modal-footer-margin-between} * 0.5),
),
),
modal-title: (
flex-grow: 1,
font-size: $cadmin-modal-title-font-size,
font-weight: $cadmin-modal-title-font-weight,
line-height: $cadmin-modal-title-line-height,
margin-bottom: 0,
overflow: hidden,
text-align: $cadmin-modal-title-text-align,
text-overflow: ellipsis,
white-space: nowrap,
),
modal-title-indicator: (
display: inline-block,
font-size: $cadmin-modal-title-indicator-font-size,
margin-right: $cadmin-modal-title-indicator-spacer-x,
margin-top: -0.2em,
vertical-align: middle,
),
),
$cadmin-modal
);

// Modal Success

$cadmin-modal-success: () !default;
Expand Down

0 comments on commit 3053c19

Please sign in to comment.