49 lines
1.2 KiB
SCSS
49 lines
1.2 KiB
SCSS
.ct-back-to-top {
|
|
position: fixed;
|
|
z-index: 110;
|
|
bottom: calc(var(--theme-frame-size, 0px) + var(--back-top-bottom-offset, 25px));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
opacity: var(--opacity, 0);
|
|
visibility: var(--visibility, hidden);
|
|
transform: var(--transform, translate3d(0, 15px, 0));
|
|
background: var(--top-button-background-color, var(--theme-palette-color-3));
|
|
box-shadow: var(--theme-box-shadow);
|
|
border-radius: var(--theme-border-radius, 2px);
|
|
transition: opacity 0.3s ease,
|
|
color 0.3s ease,
|
|
background 0.3s ease,
|
|
transform 0.3s ease,
|
|
visibility 0.3s ease;
|
|
|
|
--theme-icon-size: 12px;
|
|
|
|
&:hover {
|
|
background: var(--top-button-background-hover-color, var(--theme-palette-color-4));
|
|
|
|
.ct-icon {
|
|
fill: var(--theme-icon-hover-color, var(--theme-palette-color-2));
|
|
}
|
|
}
|
|
|
|
&.ct-show {
|
|
--opacity: 1;
|
|
--visibility: visible;
|
|
--transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
// shape
|
|
&[data-shape="circle"] {
|
|
--theme-border-radius: 100%;
|
|
}
|
|
|
|
&[data-alignment="left"] {
|
|
left: calc(var(--theme-frame-size, 0px) + var(--back-top-side-offset, 25px));
|
|
}
|
|
|
|
&[data-alignment="right"] {
|
|
right: calc(var(--theme-frame-size, 0px) + var(--back-top-side-offset, 25px));
|
|
}
|
|
} |