92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
|
@import 'flimflam/ui/modal/index.css'; /* npm */
|
|||
|
|
|
|||
|
|
[data-ff-modal-backdrop] {
|
|||
|
|
z-index: 2;
|
|||
|
|
transform: translateZ(0);
|
|||
|
|
transition: opacity 200ms ease-out, visibility 200ms ease-out;
|
|||
|
|
background: var(--scrim);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-backdrop=hidden] {
|
|||
|
|
display: block;
|
|||
|
|
opacity: 0;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-backdrop=shown] {
|
|||
|
|
opacity: 1;
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal] {
|
|||
|
|
box-shadow: var(--sh-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-header] { padding: 1rem 3rem 1rem 1rem; }
|
|||
|
|
|
|||
|
|
[data-ff-modal-body],
|
|||
|
|
[data-ff-modal-footer] {
|
|||
|
|
padding: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-header] ,
|
|||
|
|
[data-ff-modal-footer] {
|
|||
|
|
background: var(--grey-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-header] h4 { margin: 0; }
|
|||
|
|
|
|||
|
|
[data-ff-modal-close-button] {
|
|||
|
|
top: 1rem;
|
|||
|
|
right: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[data-ff-modal-close-button]:after {
|
|||
|
|
line-height: 1;
|
|||
|
|
font-size: 1.75rem;
|
|||
|
|
color: var(--grey-6);
|
|||
|
|
content: '×';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-medium [data-ff-modal] {
|
|||
|
|
width: 40rem;
|
|||
|
|
margin-left: -20rem;
|
|||
|
|
}
|
|||
|
|
[data-ff-confirmation] [data-ff-modal],
|
|||
|
|
.modal-small [data-ff-modal] {
|
|||
|
|
width: 30rem;
|
|||
|
|
margin-left: -15rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-large [data-ff-modal] {
|
|||
|
|
width: 50rem;
|
|||
|
|
margin-left: -25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 40rem) {
|
|||
|
|
.modal-medium [data-ff-modal] {
|
|||
|
|
width: calc(100% - 1rem);
|
|||
|
|
margin-left: -0.5rem;
|
|||
|
|
left: 1rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 50rem) {
|
|||
|
|
.modal-large [data-ff-modal] {
|
|||
|
|
width: calc(100% - 1rem);
|
|||
|
|
margin-left: -0.5rem;
|
|||
|
|
left: 1rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 30rem) {
|
|||
|
|
[data-ff-confirmation] [data-ff-modal],
|
|||
|
|
.modal-small [data-ff-modal] {
|
|||
|
|
width: calc(100% - 1rem);
|
|||
|
|
margin-left: -0.5rem;
|
|||
|
|
left: 1rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|