@studiocms/ui
Version:
The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.
102 lines (101 loc) • 1.75 kB
CSS
.sui-modal {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.5rem;
box-shadow: 0px 4px 8px var(--shadow);
animation: hide 0.25s ease;
overflow: visible;
margin: auto;
z-index: 50;
max-width: calc(100% - 4rem);
background-color: var(--background-base);
}
.sui-modal.sm {
width: 384px;
}
.sui-modal.md {
width: 448px;
}
.sui-modal.lg {
width: 608px;
}
.sui-modal[open] {
animation: show 0.25s ease-in-out;
}
html:has(.sui-modal[open]),
body:has(.sui-modal[open]) {
overflow: hidden;
}
.sui-modal[open]::backdrop {
background-color: rgba(0, 0, 0, 0.75);
animation: backdrop 0.3s ease-in-out forwards;
}
.sui-modal-header:has(*) {
margin-bottom: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
* {
margin: 0;
}
}
.x-mark-container {
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
border-radius: var(--radius-sm);
}
.x-mark-container:hover {
background-color: var(--default-base);
}
.x-mark-container:focus-visible {
outline: 2px solid var(--text-normal);
outline-offset: 2px;
}
.sui-modal-footer {
display: none;
}
.sui-modal-footer:has(*) {
display: flex;
flex-direction: row;
gap: 1rem;
margin-top: 1rem;
justify-content: end;
}
@keyframes hide {
0% {
scale: 1;
opacity: 1;
display: block;
}
100% {
scale: 0.85;
opacity: 0;
display: none;
}
}
@keyframes show {
0% {
scale: 0.85;
opacity: 0;
display: none;
}
100% {
scale: 1;
opacity: 1;
display: block;
}
}
@keyframes backdrop {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}