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

style: use grid

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

100
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,17 +15,50 @@
text-align: center; text-align: center;
} }
> div { > div {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
grid-gap: 1em;
label { 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; position: relative;
margin: 0.5em; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform 0.3s ease-out 0s;
background: #eac1;
content: '';
pointer-events: none;
will-change: transform;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
}
}
} }
} }
sib-display-img { sib-display-img {
@ -46,7 +83,8 @@
display: block; display: block;
font-weight: bold; font-weight: bold;
margin: 0.5em; margin: 0.5em;
ul,li{ ul,
li {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -54,7 +92,7 @@
} }
} }
div[name=pseudonym]{ div[name='pseudonym'] {
color: grey; color: grey;
font-size: 0.8em; font-size: 0.8em;
div { div {
@ -62,45 +100,3 @@
} }
} }
} }
@media (min-width: $md-with) {
#profiles-list {
sib-display {
cursor: pointer;
position: relative;
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform 0.3s ease-out 0s;
background: #eac1;
content: '';
pointer-events: none;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
}
}
}
}
}