Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 20:15:26 +02:00
Code Releases Activity

Sidebar more responsive and sticky

Browse source 
Tweaked CSS to support small-to-large screen real estate.
This commit is contained in:
McMatts 2018-05-31 15:15:48 +01:00
parent f20a1d1d5f
commit 25fd13bd3f
6 changed files with 47 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

30
gui/app/styles/layout/layout-master.scss
View file

@ -1,5 +1,10 @@
.layout-header,
.layout-footer {
$break-1: 900px;
$break-2: 1200px;
$break-3: 1400px;
$break-4: 1600px;
$break-5: 1800px;
.layout-header, .layout-footer {
flex: 0 0 auto;
width: 100%;
}
@ -24,21 +29,20 @@
footer {
margin: auto auto 0 auto;
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
position: sticky;
z-index: 888;
@include sticky();
}
@media (min-width: 900px) {
@media (min-width: $break-1) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 200px;
height: calc(100vh - 140px);
@include sticky();
top: 2rem;
}
.layout-content {
@ -48,7 +52,7 @@ footer {
}
}
@media (min-width: 1200px) {
@media (min-width: $break-2) {
.layout-body {
flex-direction: row;
}
@ -64,7 +68,7 @@ footer {
}
}
@media (min-width: 1400px) {
@media (min-width: $break-3) {
.layout-body {
flex-direction: row;
}
@ -80,7 +84,7 @@ footer {
}
}
@media (min-width: 1600px) {
@media (min-width: $break-4) {
.layout-body {
flex-direction: row;
}
@ -96,7 +100,7 @@ footer {
}
}
@media (min-width: 1800px) {
@media (min-width: $break-5) {
.layout-body {
flex-direction: row;
}