muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

whatsnew

Browse source
This commit is contained in:
Fedor Katurov 2020-04-18 14:37:14 +07:00
parent 81c9a5d7b3
commit 41a35f1490
9 changed files with 87 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/components/flow/FlowGrid/styles.scss
View file

@ -1,89 +0,0 @@
$cols: $content_width / $cell;
$stamp_color: $content_bg;
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 50vh $cell;
grid-auto-rows: $cell;
grid-auto-flow: row dense;
grid-column-gap: $gap;
grid-row-gap: $gap;
@include tablet {
padding: 0 $gap;
}
@media (max-width: $cell * 6) {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 50vh 20vw;
grid-auto-rows: 20vw;
}
@media (max-width: $cell * 5) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 40vh 25vw;
grid-auto-rows: 25vw;
}
@media (max-width: $cell * 4) {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 40vh 33vw;
grid-auto-rows: 33vw;
}
@media (max-width: $cell * 3) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 40vh 50vw;
grid-auto-rows: 50vw;
}
@media (max-width: $cell * 2) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 40vh 50vw;
grid-auto-rows: 50vw;
grid-column-gap: $gap;
grid-row-gap: $gap;
}
}
.pad_last {
grid-column-end: $cols + 1;
}
.hero {
grid-row-start: 1;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: -1;
background: darken($content_bg, 2%);
border-radius: $radius;
display: flex;
align-items: center;
justify-content: center;
font: $font_24_semibold;
}
.stamp {
grid-row-end: span 2;
grid-column: -2 / -1;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 100%;
background: linear-gradient(transparentize($stamp_color, 1), $stamp_color 90%);
pointer-events: none;
touch-action: none;
}
}