Make lightbox buttons smaller

This commit is contained in:
Fedor Indutny 2023-03-14 09:53:24 -07:00 committed by GitHub
parent c5c399e4e8
commit 0d37396339
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -190,8 +190,11 @@
&__nav-prev { &__nav-prev {
position: absolute; position: absolute;
top: 0; top: 0;
display: flex;
flex-direction: column;
width: 25%; width: 25%;
height: 100%; height: 100%;
justify-content: center;
// We need this so that the buttons stack above the container // We need this so that the buttons stack above the container
z-index: $z-index-above-base; z-index: $z-index-above-base;
@ -199,12 +202,12 @@
&__nav-next { &__nav-next {
right: 0; right: 0;
padding-right: 16px; align-items: end;
} }
&__nav-prev { &__nav-prev {
left: 0; left: 0;
padding-left: 16px; align-items: start;
} }
&__header { &__header {
@ -326,6 +329,8 @@
&--next { &--next {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 96px;
max-height: 224px;
opacity: 0; opacity: 0;
transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out;
@ -357,6 +362,8 @@
&--previous { &--previous {
justify-content: start; justify-content: start;
padding-left: 16px;
&::before { &::before {
@include color-svg( @include color-svg(
'../images/icons/v2/arrow-left-32.svg', '../images/icons/v2/arrow-left-32.svg',
@ -367,6 +374,7 @@
&--next { &--next {
justify-content: end; justify-content: end;
padding-right: 16px;
&::before { &::before {
@include color-svg( @include color-svg(