cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(aio): clean up aio-contributor template and styles

Browse Source
This commit is contained in:
Georgios Kalpakas
2017-06-21 23:34:08 +03:00
committed by Matias Niemelä
parent 87206e1986
commit 5713e7c9b6
2 changed files with 50 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
aio/src/styles/2-modules/_contributor.scss
View File

@ -99,64 +99,64 @@ aio-contributor {
}
}
div.contributor-card {
width: 250px;
height: 270px;
div.contributor-card {
width: 250px;
height: 270px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-radius: 4px;
transform-style:preserve-3d;
transition:transform ease 500ms;
h3 {
margin: 8px 0;
}
.card-front, .card-back {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-radius: 4px;
transform-style:preserve-3d;
transition:transform ease 500ms;
box-sizing: border-box;
}
h3 {
.card-front {
justify-content: center;
}
.card-back {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 24px;
transform:rotateY(180deg);
section {
display: none;
}
p {
margin: 8px 0;
font-size: 12px;
line-height: 14px;
text-align: left;
}
.card-front, .card-back {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
}
&.flipped {
transform:rotateY(180deg);
.card-front {
justify-content: center;
}
.card-back {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 24px;
transform:rotateY(180deg);
section {
display: none;
}
p {
margin: 8px 0;
font-size: 12px;
line-height: 14px;
text-align: left;
}
}
&.flipped {
transform:rotateY(180deg);
.card-front {
display: none;
}
display: none;
}
}
}
.contributor-image {
display: flex;