Merge branch 'gm-update' into 'staging'

update: CSS refactoring

See merge request startinblox/applications/sib-app!52
This commit is contained in:
Jean-Baptiste Pasquier 2019-06-27 15:35:50 +00:00
commit cf561e4510
4 changed files with 9 additions and 21 deletions

View File

@ -176,7 +176,7 @@ sib-action[name='edit'] {
color: $color-215-6-63; color: $color-215-6-63;
&>sib-link { &>sib-link {
@include icon('options-vertical'); @include icon('pencil');
font-size: 2rem; font-size: 2rem;
} }
} }

View File

@ -13,6 +13,7 @@
div[name='member-profile__bio'] { div[name='member-profile__bio'] {
display: grid; display: grid;
grid-gap: 1rem;
grid-template-areas: "avatar name status" grid-template-areas: "avatar name status"
"avatar pseudo status" "avatar pseudo status"
"avatar bio status" "avatar bio status"
@ -26,8 +27,11 @@
img { img {
border-radius: 50%; border-radius: 50%;
height: 250px;
object-fit: cover; object-fit: cover;
max-width: 90% !important; object-position: center;
overflow: hidden;
width: 250px;
} }
} }
@ -37,26 +41,12 @@
display: flex; display: flex;
grid-area: name; grid-area: name;
>sib-display-value[name='name'] {
color: $color-216-4-22;
font-weight: bold;
@extend h1;
}
>sib-multiple[name$='groups'] { >sib-multiple[name$='groups'] {
display: flex; display: flex;
padding-left: 1.4rem; padding-left: 1.4rem;
} }
} }
sib-display-value[name='username'] {
grid-area: pseudo;
&::before {
content: '@';
}
}
sib-display-value[name='profile.bio'] { sib-display-value[name='profile.bio'] {
grid-area: bio; grid-area: bio;
} }

View File

@ -178,8 +178,7 @@ member-info-groups {
} }
[name='name'] { [name='name'] {
font-weight: bold; margin: 0.67em 0;
@extend h1;
} }
sib-display-value[name$='bio'] { sib-display-value[name$='bio'] {

View File

@ -13,13 +13,12 @@
position: relative; position: relative;
img { img {
width: 300px; border-radius: 50%;
height: 300px; height: 300px;
object-fit: cover; object-fit: cover;
border-radius: 50%;
overflow: hidden; overflow: hidden;
object-position: center; object-position: center;
width: 300px;
} }
} }