Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 15:49:44 +02:00
Code Releases Activity

[WIP] theme selector

Browse source
This commit is contained in:
Harvey Kandola 2018-11-24 16:13:21 +00:00
parent a7e52809dc
commit 11e164496b
74 changed files with 363 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

153
gui/app/styles/core/layout/layout-master.scss Normal file
View file

@ -0,0 +1,153 @@
$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%;
}
.layout-body {
display: flex;
flex: 1 0 auto;
flex-direction: column;
padding: 2rem;
}
.layout-content {
margin-top: 2rem;
}
.layout-sidebar {
order: -1;
background-color: $color-gray-light2;
padding: 1rem;
}
footer {
margin: auto auto 0 auto;
bottom: 0;
z-index: 888;
@include sticky();
}
@media (min-width: $break-1) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 200px;
width: 200px;
height: calc(100vh - 140px);
@include sticky();
top: 2rem;
}
.layout-content {
flex: 0 1 700px;
padding: 0 2rem;
margin: 0;
max-width: 700px;
}
}
@media (min-width: $break-2) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 300px;
width: 300px;
}
.layout-content {
flex: 0 1 1000px;
margin: 0;
padding: 0 2rem 0 3rem;
max-width: 1000px;
}
}
@media (min-width: $break-3) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 400px;
width: 400px;
}
.layout-content {
flex: 0 1 1000px;
margin: 0;
padding: 0 0 0 3rem;
max-width: 1000px;
}
}
@media (min-width: $break-4) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 450px;
width: 450px;
}
.layout-content {
flex: 0 1 1200px;
margin: 0;
padding: 0 2rem 0 3rem;
max-width: 1200px;
}
}
@media (min-width: $break-5) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 500px;
width: 500px;
}
.layout-content {
flex: 0 1 1300px;
margin: 0;
padding: 0 2rem 0 4rem;
max-width: 1300px;
}
}
@media (max-width: 576px) {
footer {
position: relative;
bottom: auto;
}
}
/**
* Conditional CSS for Edge 12+.
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
*/
@supports (-ms-ime-align:auto) {
// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
.layout-footer, footer {
position: relative !important;
}
}
/**
* Conditional CSS for IE 8+ (and old Firefox 1.x).
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
*/
@media screen\0 {
/* Conditional IE styles */
}