mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-27 07:20:23 +05:30
126 lines
2.0 KiB
SCSS
126 lines
2.0 KiB
SCSS
@import '~app/components/ui/colors.scss';
|
|
@import '~app/components/ui/fonts.scss';
|
|
|
|
// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
|
|
//@import '~app/components/ui/panel.scss';
|
|
$bodyLeftRightPadding: 20px;
|
|
|
|
$lightBorderColor: #eee;
|
|
|
|
.accountSwitcher {
|
|
background: #fff;
|
|
color: #444;
|
|
min-width: 205px;
|
|
|
|
$border: 1px solid $lightBorderColor;
|
|
border-left: $border;
|
|
border-right: $border;
|
|
border-bottom: 7px solid darker($green);
|
|
}
|
|
|
|
.accountUsername,
|
|
.accountEmail {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
padding: 15px;
|
|
border-bottom: 1px solid $lightBorderColor;
|
|
}
|
|
|
|
.accountSwitchItem {
|
|
cursor: pointer;
|
|
transition: 0.25s;
|
|
|
|
&:hover {
|
|
background-color: $whiteButtonLight;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $whiteButtonDark;
|
|
}
|
|
}
|
|
|
|
.accountIcon {
|
|
font-size: 27px;
|
|
width: 20px;
|
|
margin-inline-end: 9px;
|
|
}
|
|
|
|
.activeAccountIcon {
|
|
composes: accountIcon;
|
|
|
|
font-size: 40px;
|
|
}
|
|
|
|
.activeAccountUsername {
|
|
font-family: $font-family-title;
|
|
font-size: 20px;
|
|
color: $green;
|
|
}
|
|
|
|
.activeAccountEmail {
|
|
}
|
|
|
|
.links {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.link {
|
|
font-size: 12px;
|
|
margin-bottom: 3px;
|
|
white-space: nowrap;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.accountInfo {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.accountUsername {
|
|
font-family: $font-family-title;
|
|
font-size: 14px;
|
|
color: #666;
|
|
|
|
.deletedAccountItem & {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.accountEmail {
|
|
font-size: 10px;
|
|
color: #999;
|
|
|
|
.deletedAccountItem & {
|
|
color: #a9a9a9;
|
|
}
|
|
}
|
|
|
|
.addIcon {
|
|
composes: plus from '~app/components/ui/icons.scss';
|
|
|
|
color: $green;
|
|
position: relative;
|
|
bottom: 1px;
|
|
margin-inline-end: 3px;
|
|
}
|
|
|
|
.logoutIcon {
|
|
composes: exit from '~app/components/ui/icons.scss';
|
|
|
|
align-self: center;
|
|
margin-inline-start: 9px;
|
|
|
|
color: #cdcdcd;
|
|
transition: 0.25s;
|
|
|
|
&:hover {
|
|
color: #777;
|
|
}
|
|
}
|