studio-variable/index-main
4
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

btn back to top
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 18:12:04 +01:00
parent bdb60646d0
commit c59f4d93dd
11 changed files with 160 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

79
assets/css/components/_buttons.scss
View file

@ -264,23 +264,40 @@ button:disabled{
.btn--back-to-top{
display: flex;
border-color: var(--color-txt);
#btn--back-to-top{
width: fit-content;
margin: var(--spacing) auto;
font-size: var(--fs-xsmall);
@media #{$small}{
margin-bottom: calc(var(--spacing)*2);
margin-bottom: var(--spacing);
margin-left: auto;
margin-right: var(--padding-body);
a{
display: flex;
align-items: center;
gap: 1ch;
}
.text{
font-size: var(--fs-small);
padding-top: 2px;
}
.icon{
width: 12px;
height: 12px;
flex-shrink: 0;
--size: 26px;
border: 1px solid var(--color-txt);
background-color: var(--color-bg);
border-radius: 50%;
width: var(--size);
height: var(--size);
transform: rotate(-90deg);
transform-origin: center;
position: relative;
top: -1px;
display: flex;
align-items: center;
justify-content: center;
svg{
width: 12px;
height: 12px;
@ -288,15 +305,37 @@ button:disabled{
}
&:hover{
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
a{
background-color: var(--grey-950);
color: var(--grey-100);
}
svg{ fill: var(--grey-100); }
opacity: 0.8;
}
@media #{$x-small}{
opacity: 0;
transition: opacity .5s ease;
position: fixed;
bottom: calc(var(--padding-body)*1.5);
right: var(--padding-body);
z-index: var(--z-header);
margin-right: 0;
margin-bottom: 0;
.icon{
--size: 32px;
border-width: 2px;
svg{
width: 19px;
height: 19px;
}
}
.text{
display: none;
}
&.is-visible{
opacity: 1;
}
}
}