scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-904-add-back-to-top-button (pull request #923)

Browse Source 
Feat/SW-904 add back to top button on hotel list page

* feat(SW-904): Added back to top button

* fix: removed alert on hotel listing page

* Remove console.log


Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2024-11-19 08:22:03 +00:00
committed by Niclas Edenvin
parent bd0720dc0f
commit 60f1d268a9
8 changed files with 124 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/TempDesignSystem/BackToTopButton/backToTopButton.module.css Normal file
View File

@@ -0,0 +1,45 @@
.backToTopButton {
border-radius: var(--Corner-radius-Rounded);
cursor: pointer;
display: flex;
align-items: flex-end;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
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.6%;
text-decoration: none;
}
.backToTopButtonText {
display: none;
}
@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);
}
}