TelegramPWA/src/components/left/main/LeftMainHeader.scss
2021-07-13 17:31:30 +03:00

87 lines
1.5 KiB
SCSS

@import '../../../styles/mixins';
#LeftMainHeader {
position: relative;
.animated-menu-icon {
position: absolute;
&, &::before, &::after {
width: 1.125rem;
height: 0.125rem;
border-radius: 0.125rem;
background-color: var(--color-text-secondary);
transition: transform .25s;
transform: rotate(0);
}
&::before, &::after {
position: absolute;
left: 0;
content: '';
}
&::before {
top: -0.3125rem;
}
&::after {
top: 0.3125rem;
}
&.state-back {
transform: rotate(180deg);
&::before {
transform: rotate(45deg) scaleX(0.75) translate(0.375rem, -0.1875rem);
}
&::after {
transform: rotate(-45deg) scaleX(0.75) translate(0.375rem, 0.1875rem);
}
}
&.no-animation {
transition: none;
&::before, &::after {
transition: none;
}
}
}
.archived-badge {
min-width: 1.5rem;
height: 1.5rem;
margin-left: auto;
background: var(--color-gray);
border-radius: 0.75rem;
padding: 0 .45rem;
color: white;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 500;
text-align: center;
flex-shrink: 0;
}
[dir=rtl] .archived-badge {
margin-left: 0;
margin-right: auto;
}
.Menu .bubble {
min-width: 17rem;
max-height: calc(100 * var(--vh) - 3.75rem);
overflow-y: auto;
overflow-y: overlay;
}
// @optimization
@include while-transition() {
.Menu .bubble {
transition: none !important;
}
}
}