accounts-frontend/src/components/accounts/accountSwitcher.scss

241 lines
4.0 KiB
SCSS
Raw Normal View History

2016-11-06 01:53:56 +05:30
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
//@import '~components/ui/panel.scss';
$bodyLeftRightPadding: 20px;
$lightBorderColor: #EEE;
2016-11-06 01:53:56 +05:30
.accountSwitcher {
text-align: left;
}
.accountInfo {
}
.accountUsername {
line-height: normal; // button style override
}
.accountEmail {
line-height: normal; // button style override
font-family: $font-family-base; // button style override
}
.lightAccountSwitcher {
background: #fff;
color: #444;
width: 205px;
$border: 1px solid $lightBorderColor;
border-left: $border;
border-right: $border;
border-bottom: 7px solid darker($green);
2016-11-06 01:53:56 +05:30
.item {
padding: 15px;
border-bottom: 1px solid $lightBorderColor;
}
.accountSwitchItem {
cursor: pointer;
transition: .25s;
&:hover {
2016-11-08 11:37:04 +05:30
background-color: $whiteButtonLight;
}
&:active {
2016-11-08 11:37:04 +05:30
background-color: $whiteButtonDark;
}
}
.accountIcon {
font-size: 27px;
width: 20px;
text-align: center;
}
.activeAccountIcon {
font-size: 40px;
}
.activeAccountInfo {
margin-left: 29px;
}
.activeAccountUsername {
font-size: 20px;
line-height: normal; // button style override
color: $green;
}
.activeAccountEmail {
}
.links {
margin-top: 6px;
}
.link {
line-height: normal; // button style override
font-size: 12px; // button style override
margin-bottom: 3px;
&:last-of-type {
margin-bottom: 0;
}
a {
color: #666;
font-size: 12px;
border-bottom: 1px dotted #666;
text-decoration: none;
transition: .25s;
&:hover {
border-bottom-color: #aaa;
color: #777;
}
}
}
.accountInfo {
margin-left: 29px;
margin-right: 25px;
}
.accountUsername {
color: #666;
font-size: 14px;
}
.accountEmail {
font-size: 10px;
color: #999;
}
.addAccount {
}
2016-11-06 01:53:56 +05:30
}
.darkAccountSwitcher {
background: $black;
$border: 1px solid lighter($black);
.item {
padding: 15px 20px;
border-top: 1px solid lighter($black);
transition: .25s;
cursor: pointer;
&:hover {
background-color: lighter($black);
}
&:active {
background-color: darker($black);
}
&:last-of-type {
border-bottom: $border;
}
}
.accountIcon {
font-size: 35px;
}
.accountInfo {
margin-left: 30px;
margin-right: 26px;
}
.accountUsername {
color: #fff;
}
.accountEmail {
color: #666;
font-size: 12px;
}
}
.accountIcon {
composes: minecraft-character from 'components/ui/icons.scss';
float: left;
&1 {
color: $green;
}
&2 {
color: $blue;
}
&3 {
color: $violet;
}
&4 {
color: $orange;
}
&5 {
color: $dark_blue;
}
&6 {
color: $light_violet;
}
&7 {
color: $red;
}
}
.addIcon {
composes: plus from 'components/ui/icons.scss';
color: $green;
position: relative;
bottom: 1px;
margin-right: 3px;
}
.nextIcon {
composes: arrowRight from 'components/ui/icons.scss';
position: relative;
float: right;
font-size: 24px;
color: #4E4E4E;
line-height: 35px;
left: 0;
transition: color .25s, left .5s;
.item:hover & {
color: #aaa;
left: 5px;
}
}
.logoutIcon {
composes: exit from 'components/ui/icons.scss';
color: #cdcdcd;
float: right;
line-height: 27px;
transition: .25s;
2016-11-06 01:53:56 +05:30
&:hover {
color: #777;
}
2016-11-06 01:53:56 +05:30
}