Skip to content

Commit

Permalink
feat(Modal)!: remove top-level sub-component(s) (#1689)
Browse files Browse the repository at this point in the history
  • Loading branch information
booc0mtaco authored Jul 15, 2023
1 parent 302297c commit d4509eb
Show file tree
Hide file tree
Showing 17 changed files with 380 additions and 420 deletions.
152 changes: 152 additions & 0 deletions src/components/Modal/Modal.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../design-tokens/mixins.css';

/*------------------------------------*\
# MODAL
\*------------------------------------*/
Expand Down Expand Up @@ -160,3 +162,153 @@
.modal__close-icon--brand {
color: var(--eds-theme-color-icon-neutral-default-inverse);
}

/*------------------------------------*\
# MODAL BODY
\*------------------------------------*/

/**
* The body of the modal
*/
.modal-body {
padding: var(--eds-size-4) var(--modal-horizontal-padding);
flex: 1;
}

.modal-body:focus-visible {
@mixin focusInside;
}

@supports not selector(:focus-visible) {
.modal-body:focus {
@mixin focusInside;
}
}

/*------------------------------------*\
# MODAL FOOTER
\*------------------------------------*/

/**
* Footer for the modal.
*/
.modal-footer {
padding-top: var(--eds-size-2-and-half);
padding-bottom: var(--eds-size-2-and-half);
padding-left: var(--modal-horizontal-padding);
padding-right: var(--eds-size-3);

width: 100%;
background-color: var(--eds-theme-color-background-neutral-default);

border-bottom-left-radius: var(--eds-border-radius-lg);
border-bottom-right-radius: var(--eds-border-radius-lg);

z-index: var(--eds-z-index-100);
}

/**
* Sticky variant of the footer.
* Used when the modal variant is scrollable.
*/
.modal-footer--sticky {
position: sticky;
bottom: 0;
box-shadow: var(--eds-box-shadow-xl);
}

/*------------------------------------*\
# MODAL HEADER
\*------------------------------------*/

/**
* Header for the modal.
*/
.modal-header {
width: 100%;
background-color: var(--eds-theme-color-background-neutral-default);
padding-top: var(--eds-size-7);
padding-left: var(--modal-horizontal-padding);
padding-right: var(--modal-horizontal-padding);
}

/**
* Brand variant for the header.
*/
.modal-header--brand {
display: flex;
flex-direction: column;

min-height: 10.75rem;

@media all and (min-height: $eds-bp-sm-2) {
min-height: 19.75rem;
}
@media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
flex-direction: row;
}

flex-shrink: 0;

color: var(--eds-theme-color-text-neutral-default-inverse);
background-color: var(--eds-theme-color-modal-brand-header-background);
h2 {
/**
* Brand specific font for the title.
*/
flex: 1;
font: var(--eds-theme-typography-headline-secondary-lg);

@media all and (min-width: $eds-bp-sm-2) {
margin-bottom: var(--eds-size-3);
}
@media all and (min-width: $eds-bp-xl) {
font: var(--eds-theme-typography-headline-secondary-md);

}
}
}

/**
* Specific asset placement for brand.
*/
.modal-header__brand-asset {
align-self: flex-end;
position: relative;
top: var(--eds-size-2);
left: var(--eds-size-2);

width: 8.5rem;
height: 8.5rem;

/* For mobile landscape orientation. */
@media all and (min-width: $eds-bp-sm-2) {
display: none;
}

@media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
display: block;
width: 14rem;
height: 14rem;
left: var(--eds-size-3);
}

@media all and (min-width: $eds-bp-xl) {
width: 16.5rem;
height: 16.5rem;
left: 0;
}
}

/*------------------------------------*\
# MODAL STEPPER
\*------------------------------------*/

/**
* Stepper that resides in the modal footer.
*/
.modal-stepper {
color: var(--eds-theme-color-icon-neutral-default);
display: flex;
gap: var(--eds-size-1-and-half);
}
Loading

0 comments on commit d4509eb

Please sign in to comment.