mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-25 14:39:53 +05:30
104 lines
2.0 KiB
SCSS
104 lines
2.0 KiB
SCSS
@import '~app/components/ui/colors.scss';
|
|
@import '~app/components/ui/fonts.scss';
|
|
|
|
.accountSwitcher {
|
|
background: $black;
|
|
text-align: start;
|
|
}
|
|
|
|
$border: 1px solid lighter($black);
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
border-top: 1px solid lighter($black);
|
|
transition: background-color 0.25s, filter 0.5s cubic-bezier(0, 0.55, 0.45, 1);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: lighter($black);
|
|
}
|
|
|
|
&:active {
|
|
background-color: darker($black);
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-bottom: $border;
|
|
}
|
|
}
|
|
|
|
.inactiveItem {
|
|
filter: grayscale(100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.accountAvatar {
|
|
font-size: 35px;
|
|
margin-inline-end: 15px;
|
|
}
|
|
|
|
.accountInfo {
|
|
flex-grow: 1;
|
|
margin-inline-end: 15px;
|
|
min-width: 0; // Fix for text-overflow. See https://stackoverflow.com/a/40612184
|
|
}
|
|
|
|
%overflowText {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.accountUsername {
|
|
@extend %overflowText;
|
|
font-family: $font-family-title;
|
|
color: #fff;
|
|
|
|
.deletedAccount & {
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
.accountEmail {
|
|
@extend %overflowText;
|
|
color: #999;
|
|
font-size: 12px;
|
|
|
|
.deletedAccount & {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.nextIcon {
|
|
composes: arrowRight from '~app/components/ui/icons.scss';
|
|
|
|
position: relative;
|
|
inset-inline-start: 0;
|
|
|
|
font-size: 24px;
|
|
color: #4e4e4e;
|
|
line-height: 35px;
|
|
|
|
transition: color 0.25s, inset-inline-start 0.5s;
|
|
// TODO: right now transition property doesn't support the bidirectional value.
|
|
// See https://github.com/gasolin/postcss-bidirection/issues/25.
|
|
// noinspection CssOverwrittenProperties Graceful degradation
|
|
transition: color 0.25s, left 0.5s;
|
|
|
|
html[dir='rtl'] & {
|
|
transition: color 0.25s, right 0.5s;
|
|
}
|
|
|
|
.item:hover & {
|
|
color: #aaa;
|
|
inset-inline-start: 5px;
|
|
}
|
|
}
|
|
|
|
.accountLoader {
|
|
font-size: 10px;
|
|
}
|