Files
cinny/src/app/atoms/button/Toggle.scss
Ajay Bura c243b6104c Update color theme to match with new design (#1821)
* update silver theme

* update unread badge style to look more slim

* update nav item style to look less sharp

* fix type focus message input typo

* decrease navigation drawer width to bring main chat layout to little more center

* increase sidebar width to make it less congested

* fix sidebar item style

* decrease dark theme contrast

* improve dark theme

* revert sidebar width change

* add join with address option in home context menu

* match legacy theme with latest themes
2024-07-21 15:43:33 +10:00

43 lines
974 B
SCSS

@use '../../partials/dir';
@use './state';
.toggle {
width: 44px;
height: 24px;
padding: 0 var(--sp-ultra-tight);
display: flex;
align-items: center;
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
cursor: pointer;
background-color: var(--bg-surface-low);
@include state.disabled;
transition: background 200ms ease-in-out;
&::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-color: var(--tc-surface-low);
border-radius: calc(var(--bo-radius) / 2);
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
opacity: 0.6;
}
&--active {
background-color: var(--bg-positive);
&::before {
--ltr: translateX(calc(125%));
--rtl: translateX(calc(-125%));
@include dir.prop(transform, var(--ltr), var(--rtl));
transform: translateX(calc(125%));
background-color: var(--bg-surface);
opacity: 1;
}
}
}