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

@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';

// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
//@import '~components/ui/panel.scss';
$bodyLeftRightPadding: 20px;

$lightBorderColor: #eee;

.accountSwitcher {
    text-align: left;
}

.accountInfo {

}

.accountUsername,
.accountEmail {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lightAccountSwitcher {
    background: #fff;
    color: #444;
    min-width: 205px;

    $border: 1px solid $lightBorderColor;
    border-left: $border;
    border-right: $border;
    border-bottom: 7px solid darker($green);

    .item {
        padding: 15px;
        border-bottom: 1px solid $lightBorderColor;
    }

    .accountSwitchItem {
        cursor: pointer;
        transition: .25s;

        &:hover {
            background-color: $whiteButtonLight;
        }

        &:active {
            background-color: $whiteButtonDark;
        }
    }

    .accountIcon {
        font-size: 27px;
        width: 20px;
        text-align: center;
    }

    .activeAccountIcon {
        font-size: 40px;
    }

    .activeAccountInfo {
        margin-left: 29px;
    }

    .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 {
        margin-left: 29px;
        margin-right: 25px;
    }

    .accountUsername {
        font-family: $font-family-title;
        font-size: 14px;
        color: #666;
    }

    .accountEmail {
        font-size: 10px;
        color: #999;
    }

    .addAccount {
    }
}

.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 {
        font-family: $font-family-title;
        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;

    &:hover {
        color: #777;
    }
}