f2f2c34673
* remove 3d box shadow * profile cards fixes * little fix * dark mode + listings modal * dropdowns padding * whoops
116 lines
2.8 KiB
SCSS
116 lines
2.8 KiB
SCSS
@import '../config/import';
|
|
|
|
.crayons-modal {
|
|
--modal-max-width: 768px;
|
|
--modal-body-padding: var(--su-3);
|
|
--modal-header-padding: var(--su-2) var(--su-2) var(--su-2) var(--su-3);
|
|
--modal-header-font-size: var(--fs-l);
|
|
--modal-body-font-size: var(--fs-base);
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
--modal-header-padding: var(--su-2) var(--su-2) var(--su-2) var(--su-4);
|
|
--modal-body-padding: var(--su-4);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
--modal-header-padding: var(--su-3) var(--su-3) var(--su-3) var(--su-6);
|
|
--modal-body-padding: var(--su-6);
|
|
--modal-header-font-size: var(--fs-xl);
|
|
--modal-body-font-size: var(--fs-l);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-l) {
|
|
--modal-body-padding: var(--su-8);
|
|
}
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: var(--z-modal);
|
|
pointer-events: none;
|
|
|
|
&__overlay {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
pointer-events: auto;
|
|
|
|
&.background-clickable {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&__box {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
max-width: var(--modal-max-width);
|
|
background: var(--card-bg);
|
|
color: var(--card-color);
|
|
z-index: var(--z-elevate);
|
|
max-height: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: auto;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
background: var(--card-bg);
|
|
color: var(--card-color);
|
|
border-radius: var(--radius-large);
|
|
max-height: calc(100% - var(--su-6));
|
|
height: auto;
|
|
width: 90%;
|
|
}
|
|
|
|
&__header {
|
|
border-bottom: 1px solid var(--base-a5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--modal-header-padding);
|
|
flex-shrink: 0;
|
|
|
|
&__title {
|
|
font-size: var(--modal-header-font-size);
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
font-size: var(--modal-body-font-size);
|
|
padding: var(--modal-body-padding);
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
grid-auto-rows: min-content;
|
|
}
|
|
}
|
|
|
|
&--s {
|
|
@media (min-width: $breakpoint-s) {
|
|
--modal-max-width: 480px;
|
|
--modal-body-padding: var(--su-6);
|
|
--modal-header-font-size: var(--fs-l);
|
|
--modal-body-font-size: var(--fs-base);
|
|
}
|
|
}
|
|
|
|
&--m {
|
|
@media (min-width: $breakpoint-m) {
|
|
--modal-max-width: 640px;
|
|
--modal-body-padding: var(--su-7);
|
|
--modal-header-padding: var(--su-3) var(--su-5);
|
|
--modal-header-font-size: var(--fs-xl);
|
|
--modal-body-font-size: var(--fs-l);
|
|
}
|
|
}
|
|
}
|