autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: use grid

Browse Source
This commit is contained in:
Clément 2018-09-12 11:10:01 +02:00
parent 5561d9a604
commit eadec476cc
1 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/scss/_members.scss
View File

@ -1,9 +1,13 @@
#profiles-list { #profiles-list {
display: block; display: block;
sib-form { sib-form {
background-color: #f3f3f3; display: block;
margin: 3em 0;
input[type=reset]{
display: none;
}
} }
div[name=header]{ div[name='header'] {
border-top: 2em solid $col-alt-bg; border-top: 2em solid $col-alt-bg;
border-bottom: 1px solid $col-alt-bg; border-bottom: 1px solid $col-alt-bg;
padding-bottom: 1em; padding-bottom: 1em;
@ -11,64 +15,17 @@
text-align: center; text-align: center;
} }
> div { > div {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
label{ grid-gap: 1em;
label {
display: none; display: none;
} }
> sib-display { > sib-display {
flex: 1 1 220px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: block; display: block;
margin-top: 40px;
margin: 0.5em;
}
}
sib-display-img {
display: block;
position: relative;
width: 80%;
height: 0;
padding-bottom: 80%;
margin: 10%;
img {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
}
hdapp-userinfo{
display: block;
font-weight: bold;
margin: 0.5em;
ul,li{
display: block;
margin: 0;
padding: 0;
list-style: none;
}
}
div[name=pseudonym]{
color:grey;
font-size: 0.8em;
div{
display: inline;
}
}
}
@media (min-width: $md-with) {
#profiles-list {
sib-display {
cursor: pointer;
position: relative; position: relative;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
&::before, &::before,
&::after { &::after {
@ -82,6 +39,7 @@
background: #eac1; background: #eac1;
content: ''; content: '';
pointer-events: none; pointer-events: none;
will-change: transform;
} }
&::before { &::before {
@ -103,4 +61,42 @@
} }
} }
} }
sib-display-img {
display: block;
position: relative;
width: 80%;
height: 0;
padding-bottom: 80%;
margin: 10%;
img {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
}
hdapp-userinfo {
display: block;
font-weight: bold;
margin: 0.5em;
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
}
div[name='pseudonym'] {
color: grey;
font-size: 0.8em;
div {
display: inline;
}
}
} }