d91b940bf0
fix(LOY-512): override button styling * fix(LOY-512): override button styling Approved-by: Matilda Haneling
137 lines
2.4 KiB
CSS
137 lines
2.4 KiB
CSS
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
inset: 0;
|
|
height: var(--visual-viewport-height);
|
|
z-index: var(--default-modal-overlay-z-index);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
&[data-entering] {
|
|
animation: fade 400ms ease-in;
|
|
}
|
|
&[data-exiting] {
|
|
animation: fade 400ms reverse ease-in;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
background: var(--Background-Primary);
|
|
margin: 0 auto;
|
|
box-shadow: var(--modal-box-shadow);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0 0;
|
|
}
|
|
|
|
.dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 95dvh;
|
|
outline: 0 none;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
padding: var(--Space-x3);
|
|
}
|
|
|
|
.logoWrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header .closeBtn {
|
|
position: absolute;
|
|
right: var(--Space-x2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.content {
|
|
padding: var(--Space-x4);
|
|
text-align: center;
|
|
display: grid;
|
|
place-items: center;
|
|
place-self: center;
|
|
gap: var(--Space-x5);
|
|
}
|
|
|
|
.textContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x15);
|
|
}
|
|
|
|
.heading {
|
|
color: var(--Text-Interactive-Default);
|
|
}
|
|
|
|
.actions {
|
|
position: sticky;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x1);
|
|
justify-content: center;
|
|
padding: var(--Space-x2) var(--Space-x3) var(--Space-x3) var(--Space-x3);
|
|
border-top: 1px solid var(--Border-Divider-Subtle);
|
|
background: var(--Base-Surface-Primary-light-Normal);
|
|
border-bottom-right-radius: var(--Corner-radius-xl);
|
|
border-bottom-left-radius: var(--Corner-radius-xl);
|
|
}
|
|
|
|
.container {
|
|
border-radius: var(--Corner-radius-md);
|
|
background: var(--Base-Surface-Primary-light-Normal);
|
|
display: grid;
|
|
gap: var(--Space-x5);
|
|
padding: var(--Space-x4) var(--Space-x2);
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.header {
|
|
display: grid;
|
|
gap: var(--Space-x1);
|
|
text-align: center;
|
|
color: var(--Text-Default);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.overlay {
|
|
align-items: center;
|
|
}
|
|
|
|
.modal {
|
|
width: 95%;
|
|
max-width: 95%;
|
|
border-radius: var(--Corner-radius-xl);
|
|
}
|
|
|
|
.actions {
|
|
flex-direction: row-reverse;
|
|
gap: var(--Space-x2);
|
|
box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1367px) {
|
|
.content {
|
|
max-width: 984px;
|
|
}
|
|
}
|