Improve jump to bottom btn

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
2022-03-18 11:37:31 +05:30
parent 6010b4c252
commit a7034d6351
2 changed files with 30 additions and 29 deletions

View File

@@ -72,51 +72,55 @@
}
}
&__STB,
&__unread {
opacity: 0.9;
overflow: hidden;
background-color: var(--bg-surface-low);
border-radius: var(--bo-radius);
& button {
justify-content: flex-start;
border-radius: 0;
box-shadow: none;
padding: 6px var(--sp-tight);
& .ic-raw {
width: 16px;
height: 16px;
}
}
}
&__STB {
position: absolute;
@include dir.prop(right, var(--sp-normal), unset);
@include dir.prop(left, unset, var(--sp-normal));
@include dir.prop(left, 50%, unset);
@include dir.prop(right, unset, 50%);
bottom: 0;
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
background-color: var(--bg-surface-low);
transition: transform 200ms ease-in-out;
transform: translateY(100%) scale(0);
transform: translate(-50%, 100%);
&--open {
transform: translateY(-28px) scale(1);
transform: translate(-50%, -28px);
}
}
&__unread {
position: absolute;
top: 0;
top: var(--sp-extra-tight);
@include dir.prop(left, var(--sp-normal), unset);
@include dir.prop(right, unset, var(--sp-normal));
z-index: 999;
display: none;
width: calc(100% - var(--sp-extra-loose));
background-color: var(--bg-surface);
border-radius: 0 0 var(--bo-radius) var(--bo-radius);
box-shadow: var(--bs-primary-border);
overflow: hidden;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%);
&--open {
display: flex;
}
& .btn-primary {
justify-content: flex-start;
border-radius: 0;
padding: 2px var(--sp-tight);
& .ic-raw {
width: 16px;
height: 16px;
}
}
& .btn-primary:first-child {
& button:first-child {
@extend .cp-fx__item-one;
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
}
}
}