eventol/front/src/components/UserProfile/index.scss
@import '../../styles/index';
@media (min-width: 950px) {
.user-profile {
margin-left: auto;
a {
text-decoration: none;
}
.user {
@include flex-element;
.image {
@include center-element;
-webkit-transition: border .125s ease;
border: 3px solid transparent;
border-radius: 44px;
box-sizing: border-box;
display: flex;
height: 44px;
margin-left: 10px;
overflow: hidden;
transition: border .125s ease;
vertical-align: middle;
width: 44px;
img {
display: block;
width: 100%;
}
}
.name {
@include flex-element;
@include center-element;
font-size: 18px;
font-weight: 300;
height: 44px;
}
}
.user:hover {
cursor: pointer;
.image {
border: 3px solid $eventol-color;
}
}
.user-profile-menu {
display: none;
}
}
}
@media (max-width: 950px) {
.user-profile {
background: $user-profile;
margin-left: auto;
margin-right: 8vw;
opacity: .8;
z-index: 0;
a {
// sass-lint:disable no-important
float: unset !important;
// sass-lint:enable no-important
text-decoration: none;
}
.user {
@include flex-element;
.image {
-webkit-transition: border .125s ease;
align-items: center;
border: 3px solid transparent;
border-radius: 44px;
box-sizing: border-box;
display: flex;
height: 44px;
justify-content: center;
margin-left: 10px;
overflow: hidden;
transition: border .125s ease;
vertical-align: middle;
width: 44px;
img {
display: block;
width: 100%;
}
}
.name {
@include flex-element;
@include center-element;
font-size: 14px;
font-weight: 300;
height: 44px;
padding-left: 10px;
}
}
.user:hover {
background: $eventol-color;
cursor: pointer;
}
.user-profile-narrow-menu {
display: none;
}
}
}