matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

idk

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-06 16:02:44 +01:00
parent 3f26e7ba19
commit 850bb75dc0
1 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/pl-fe/src/styles/new/modals.scss
View File

@ -20,7 +20,19 @@
@apply bg-gray-900/90; @apply bg-gray-900/90;
&__content { &__content {
@apply flex flex-col justify-between fixed inset-0 h-full grow touch-pan-y transition-all xl:pr-96; display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
inset: 0;
height: 100%;
position: fixed;
touch-action: pan-y;
@media (min-width: variables.$breakpoint-xl) {
padding-right: 24rem;
}
@apply transition-all;
} }
&__closer { &__closer {
@ -31,10 +43,6 @@
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
@media (min-width: variables.$breakpoint-xl) {
inset-inline-end: 24rem;
}
> div { > div {
flex-shrink: 0; flex-shrink: 0;
overflow: auto; overflow: auto;
@ -63,12 +71,18 @@
} }
} }
&__closer, &__navigation {
@media (min-width: variables.$breakpoint-xl) {
inset-inline-end: 24rem;
}
}
&--fullscreen { &--fullscreen {
.⁂-media-modal__content { .⁂-media-modal__content {
@apply xl:pr-0; @apply xl:pr-0;
} }
.⁂-media-modal__closer { .⁂-media-modal__closer, .⁂-media-modal__navigation {
inset-inline-end: 0; inset-inline-end: 0;
} }
} }
@ -85,11 +99,6 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
&--zoomed-in {
z-index: 9999;
cursor: grab;
}
&--error img { &--error img {
display: none; display: none;
} }
@ -107,11 +116,23 @@
} }
img { img {
@apply shadow-2xl; max-width: 100%;
max-height: 80%; max-height: 80%;
width: auto; width: auto;
height: auto; height: auto;
outline: 1px solid rgba(var(--color-gray-400) / 0.15);
outline-offset: -1px;
touch-action: none; touch-action: none;
user-select: none; user-select: none;
} }
&--zoomed-in {
// z-index: 9999;
cursor: grab;
img {
outline: none;
border-radius: 0;
}
}
} }