@sb1/ffe-modals
Version:
110 lines (109 loc) • 2.26 kB
CSS
/* vi har ikke laget denne klassen derav slå av lint */
/* stylelint-disable */
dialog {
position: fixed;
left: 0;
right: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
display: block;
}
dialog:not([open]) {
display: none;
}
dialog + .backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(2, 10, 10, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
._dialog_overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
dialog.fixed {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}
:root:has(.ffe-modal[open]) {
overflow-y: hidden;
}
.ffe-modal {
border: none;
border-radius: 24px;
padding: 0;
background: var(--ffe-color-surface-primary-default);
/* Add a more specific selector to target only the close button in modals
/* This ensures the styling works regardless of CSS import order */
}
.ffe-modal[open] {
pointer-events: auto;
}
.ffe-modal:focus {
outline: none;
}
.ffe-modal::-webkit-backdrop {
background-color: rgba(2, 10, 10, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.ffe-modal::backdrop {
background-color: rgba(2, 10, 10, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.ffe-modal__body {
max-width: 600px;
}
.ffe-modal__block {
margin: var(--ffe-spacing-md);
}
.ffe-modal__block:first-of-type {
margin-top: 0;
padding-top: var(--ffe-spacing-md);
}
.ffe-modal__block:last-of-type {
margin-bottom: 0;
padding-bottom: var(--ffe-spacing-md);
}
.ffe-modal__close {
width: auto;
aspect-ratio: 1;
font: inherit;
cursor: pointer;
outline: 2px solid transparent;
padding: var(--ffe-spacing-2xs);
border-radius: 50%;
float: right;
margin: var(--ffe-spacing-md);
outline-offset: 4px;
transition: all var(--ffe-transition-duration) var(--ffe-ease);
}
.ffe-modal__close::after {
content: '';
display: block;
clear: both;
}
.ffe-modal[open] .ffe-modal__close {
width: auto;
display: block;
}
@media (width >= 480px) {
.ffe-modal[open] .ffe-modal__close {
width: auto;
display: block;
}
}