mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
#23 fixed submit button appearance for lab
This commit is contained in:
parent
998a2e305a
commit
ede5dfe17f
15 changed files with 82 additions and 44 deletions
86
src/layouts/FlowLayout/styles.module.scss
Normal file
86
src/layouts/FlowLayout/styles.module.scss
Normal file
|
@ -0,0 +1,86 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
max-width: 2000px;
|
||||
padding: 0 40px 40px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
$cols: $content_width / $cell;
|
||||
|
||||
.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;
|
||||
grid-column-gap: $gap / 2;
|
||||
grid-row-gap: $gap / 2;
|
||||
padding: 0 $gap / 2;
|
||||
}
|
||||
|
||||
@media (max-width: $cell * 2) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 40vh 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue