dca02b90f0
Fix/sw-1127 image fixes for lightbox * fix(SW-1127): move back to top button behind lightbox * fix(SW-1127): don't loop lightbox thumbnails * fix(SW-1127): nicer animation in the gallery This both fixes a bug in the gallery where the animation in the carousel didn't work so good and also animates the images different directions depending on if the user go left or right. Approved-by: Matilda Landström
53 lines
1.2 KiB
CSS
53 lines
1.2 KiB
CSS
.backToTopButton {
|
|
border-radius: var(--Corner-radius-Rounded);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
z-index: var(--back-to-top-button);
|
|
background-color: var(--Base-Surface-Primary-light-Normal);
|
|
color: var(--Base-Button-Secondary-On-Fill-Normal);
|
|
border: 2px solid var(--Base-Button-Secondary-On-Fill-Normal);
|
|
gap: var(--Spacing-x-half);
|
|
padding: var(--Spacing-x1);
|
|
text-align: center;
|
|
transition:
|
|
background-color 300ms ease,
|
|
color 300ms ease;
|
|
font-family: var(--typography-Body-Bold-fontFamily);
|
|
font-weight: 500;
|
|
font-size: var(--typography-Caption-Bold-fontSize);
|
|
line-height: var(--typography-Caption-Bold-lineHeight);
|
|
letter-spacing: 0.084px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.backToTopButtonText {
|
|
display: none;
|
|
}
|
|
|
|
.left {
|
|
left: 32px;
|
|
}
|
|
|
|
.right {
|
|
right: 32px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.backToTopButtonText {
|
|
display: initial;
|
|
}
|
|
.backToTopButton:hover {
|
|
background-color: var(--Base-Button-Tertiary-Fill-Normal);
|
|
color: var(--Base-Button-Tertiary-On-Fill-Hover);
|
|
}
|
|
.backToTopButton:hover > svg * {
|
|
fill: var(--Base-Button-Tertiary-On-Fill-Hover);
|
|
}
|
|
.backToTopButton {
|
|
padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
|
|
}
|
|
}
|