hubl/src/styles/layout/members/member-profile.scss
2019-06-27 17:16:50 +02:00

131 lines
2.9 KiB
SCSS

#member-profile {
display: flex;
flex-direction: column;
flex-grow: 1;
.member-info {
background-color: $color-0-0-100;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem;
min-height: 100vh;
.member-bio {
div[name='member-profile__bio'] {
display: grid;
grid-gap: 1rem;
grid-template-areas: "avatar name status"
"avatar pseudo status"
"avatar bio status"
"avatar list button";
grid-template-columns: 1fr 2fr 1fr;
div[name='member-img'] {
grid-area: avatar;
overflow: hidden;
position: relative;
img {
border-radius: 50%;
height: 250px;
object-fit: cover;
object-position: center;
overflow: hidden;
width: 250px;
}
}
div[name='member-profile'] {
align-items: baseline;
align-self: end;
display: flex;
grid-area: name;
>sib-multiple[name$='groups'] {
display: flex;
padding-left: 1.4rem;
}
}
sib-display-value[name='profile.bio'] {
grid-area: bio;
}
div[name='infos'] {
grid-area: list;
@extend %member-info;
}
member-status[name$='profile.available'] {
align-self: flex-end;
color: $color-244-73-62;
grid-area: status;
justify-self: flex-end;
span {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
font-weight: 600;
line-height: 2;
}
span.status-one {
@include ci('awareness');
&::before {
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
}
span.status-two {
@include ci('armor');
&::before {
border-bottom: 2px solid $color-43-100-50;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
}
}
sib-action[name='send'] {
align-self: flex-end;
grid-area: button;
justify-self: flex-end;
}
[next=messages] {
@include icon('speech');
border: 1px solid $color-244-73-62;
border-radius: 2em;
color: $color-244-73-62;
font-size: 18px;
font-weight: bold;
justify-self: end;
padding: 0.6em 1.5em 0.4em;
&::before {
font-size: 25px;
padding-right: 0.5em;
}
}
}
}
.member-skills {
label {
float: left;
font-weight: bold;
display: block;
padding-bottom: 0.5rem;
}
}
}
}