webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Added tri-layout desktop sticky-scroll

Browse Source
This commit is contained in:
Dan Brown
2018-12-09 13:42:35 +00:00
parent e1474194db
commit 8fd8652bbf
3 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/sass/_grid.scss
View File

@ -55,9 +55,10 @@ body.flexbox {
display: grid;
grid-template-columns: 1fr minmax(auto, 940px) 1fr;
grid-template-areas: "a b c";
grid-column-gap: $-xl;
padding-right: $-xl;
padding-left: $-xl;
.tri-layout-right-contents, .tri-layout-left-contents {
padding-right: $-xl;
padding-left: $-xl;
}
.tri-layout-right {
grid-area: c;
}
@ -85,18 +86,36 @@ body.flexbox {
"a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: max-content min-content;
padding-right: $-l;
.content-wrap.card {
padding: $-l $-l;
}
}
}
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
position: sticky;
top: $-m;
max-height: 100vh;
overflow-y: scroll;
overflow-x: visible;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
}
@include smaller-than($l) {
.tri-layout-container {
grid-template-areas: none;
grid-template-columns: 10% 90%;
grid-column-gap: 0;
padding-right: $-l;
padding-left: $-l;
.tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-m;
padding-right: $-m;
}
.tri-layout-right, .tri-layout-left {
opacity: 0.6;
z-index: 0;