Skip to content

Instantly share code, notes, and snippets.

@Pickra
Created April 26, 2023 14:10
Show Gist options
  • Save Pickra/de13ca51eefea60ffe4144a6d087b2eb to your computer and use it in GitHub Desktop.
Save Pickra/de13ca51eefea60ffe4144a6d087b2eb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@mixin pre-focus-styles {
outline: none;
transition: box-shadow 0.15s;
}
// Apply within :focus
@mixin focus-styles {
box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}
// Shortcut for focus styles
@mixin focus {
@include pre-focus-styles;
&:focus {
@include focus-styles;
}
}
.overlay {
$transition-time: 0.2s;
position: fixed;
display: flex;
inset: 0;
justify-content: center;
align-items: center;
padding: var(--spacing-md);
overflow-y: auto;
background-color: var(--color-background-overlay);
box-sizing: border-box;
z-index: 9999;
// animation
opacity: 0;
visibility: hidden;
transition: all $transition-time;
&--open {
// animation
opacity: 1;
visibility: visible;
transition: all 0s, opacity $transition-time;
}
}
.modal {
$sizes: (sm: 30rem, md: 40rem, fullscreen: 100%);
border-radius: var(--borderRadius-md);
@each $size, $width in $sizes {
$rule: if($size == fullscreen, min-width, max-width);
&--#{$size} { #{$rule}: $width; }
}
&__contents {
position: relative;
display: block;
background: var(--color-background-primary);
}
// &__title { @include typography(headline, md); }
// &__subtitle { @include typography(paragraph, md); }
&__close {
@include focus;
position: relative;
display: inline-flex;
float: right;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
padding: 0 var(--spacing-sm);
color: var(--color-button-subtle-text);
background-color: var(--color-button-subtle);
border-radius: var(--borderRadius-round);
border: 1px solid transparent;
cursor: pointer;
&:hover { background-color: var(--color-button-subtle-hovered); }
&:active { background-color: var(--color-button-subtle-pressed); }
}
}
.overlay {
position: fixed;
display: flex;
inset: 0;
justify-content: center;
align-items: center;
padding: var(--spacing-md);
overflow-y: auto;
background-color: var(--color-background-overlay);
box-sizing: border-box;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.overlay--open {
opacity: 1;
visibility: visible;
transition: all 0s, opacity 0.2s;
}
.modal {
border-radius: var(--borderRadius-md);
}
.modal--sm {
max-width: 30rem;
}
.modal--md {
max-width: 40rem;
}
.modal--fullscreen {
min-width: 100%;
}
.modal__contents {
position: relative;
display: block;
background: var(--color-background-primary);
}
.modal__close {
outline: none;
transition: box-shadow 0.15s;
position: relative;
display: inline-flex;
float: right;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
padding: 0 var(--spacing-sm);
color: var(--color-button-subtle-text);
background-color: var(--color-button-subtle);
border-radius: var(--borderRadius-round);
border: 1px solid transparent;
cursor: pointer;
}
.modal__close:focus {
box-shadow: 0 0 0 2px var(--color-focusOutline), 0 0 0 6px var(--color-focusOutline-light);
}
.modal__close:hover {
background-color: var(--color-button-subtle-hovered);
}
.modal__close:active {
background-color: var(--color-button-subtle-pressed);
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment