refactor(sticky-columns-layout): initial responsiveness and breakpoints
This commit is contained in:
parent
5c8cbc1956
commit
b3564389f9
@ -3,9 +3,26 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
gap: 20px;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: 100%;
|
||||||
|
|
||||||
|
overflow-x: auto;
|
||||||
|
overscroll-behavior-inline: contain;
|
||||||
|
|
||||||
|
scroll-snap-type: inline mandatory;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||||
grid-gap: 30px;
|
gap: 30px;
|
||||||
flex-grow: 1;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidesWrap {
|
.sidesWrap {
|
||||||
@ -16,9 +33,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sides {
|
.sides {
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: $header-height + $body-vertical-padding;
|
top: $header-height + $body-vertical-padding;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.files {
|
.files {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -29,4 +48,9 @@
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 10px solid $overlay-background-color;
|
border: 10px solid $overlay-background-color;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -135,11 +135,11 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
@container (min-width: 204px) {
|
@container (min-width: 204px) {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
@container (min-width: 309px) {
|
@container (min-width: 309px) {
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
Loading…
Reference in New Issue
Block a user