63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
@import "../common/PredefinedMixins.scss";
|
|
@import "./partial.scss";
|
|
@import "./Variables.scss";
|
|
|
|
.profile-menu {
|
|
@include flexDisplay;
|
|
@include flexDirection(column);
|
|
@include flexAlignItems(flex-start, start);
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 30px;
|
|
width: 22px;
|
|
outline: none;
|
|
z-index: 10100;
|
|
|
|
.details {
|
|
@include partial-column-center;
|
|
height: 22px;
|
|
width: 22px;
|
|
background-color: $profile_menu_bg;
|
|
padding: 2px;
|
|
border-radius: 50%;
|
|
box-shadow: $profile_shadow;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
background-color: $profile_menu_image_bg;
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
transform: rotate(180deg);
|
|
|
|
path {
|
|
fill: $profile_menu_icon;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.expanded {
|
|
width: 260px;
|
|
|
|
.details svg {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.menu-items {
|
|
@include partial-column-center;
|
|
position: relative;
|
|
background-color: $profile_menu_bg;
|
|
top: -10px;
|
|
width: inherit;
|
|
min-height: 90px;
|
|
border: $profile_menu_border;
|
|
border-radius: 4px;
|
|
padding: 10px 0;
|
|
-webkit-box-shadow: $profile_menu_item_shadow;
|
|
-moz-box-shadow: $profile_menu_item_shadow;
|
|
box-shadow: $profile_menu_item_shadow;
|
|
}
|
|
}
|