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

6
gui/app/styles/core/layout/all.scss Normal file
View file

@ -0,0 +1,6 @@
@import "layout-master.scss";
@import "layout-topbar.scss";
@import "layout-sidebar.scss";
@import "layout-footer.scss";
@import "layout-content.scss";

32
gui/app/styles/core/layout/layout-content.scss Normal file
View file

@ -0,0 +1,32 @@
.content-zone {
> .explainer-header {
color: $color-gray;
font-size: 1.5rem;
font-weight: 500;
}
> .explainer-text {
margin: 3px 0;
padding: 0;
color: $color-gray;
font-size: 1.1rem;
}
> .explainer-list {
margin: 5px 20px;
padding: 0;
color: $color-gray;
> li {
margin: 0;
padding: 0;
font-size: 1.1rem;
list-style: square;
}
}
> .explainer-gap {
margin-bottom: 3rem;
}
}

51
gui/app/styles/core/layout/layout-footer.scss Normal file
View file

@ -0,0 +1,51 @@
footer {
background-color: $color-primary-light;
color: $color-gray;
font-weight: 500;
font-size: 1rem;
padding: 5px 2rem;
}
.footer {
display: flex;
overflow: hidden;
a, a:visited {
@include ease-in();
color: $color-gray;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
> .progress {
display: inline-block;
text-align: right;
> img {
padding: 0;
margin: 0;
height: 20px;
width: 20px;
}
}
> .progress-done {
background-color: $color-green;
color: $color-white;
text-align: center;
font-size: 1rem;
height: 20px;
width: 20px;
@include border-radius(20px);
}
> .progress-notification {
display: inline-block;
font-size: 1rem;
color: $color-green;
font-weight: 500;
}
}

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 */
}

59
gui/app/styles/core/layout/layout-sidebar.scss Normal file
View file

@ -0,0 +1,59 @@
.sidebar {
padding: 1rem;
}
.sidebar-center {
text-align: center;
}
.sidebar-scroll {
padding: 1rem;
overflow-x: hidden;
overflow-y: auto;
}
.sidebar-white {
background-color: $color-white;
margin: 10px 10px;
@media (min-width: $break-1) {
margin: 10px 10px;
height: calc(100vh - 204px);
overflow-x: hidden;
overflow-y: auto;
}
@media (min-width: $break-2) {
margin: 10px 10px;
}
@media (min-width: $break-3) {
margin: 20px 20px;
}
@media (min-width: $break-4) {
margin: 20px 20px;
}
@media (min-width: $break-5) {
margin: 20px 20px;
}
}
.sidebar-view-switcher {
color: $color-primary;
background-color: $color-primary-light;
padding: 5px 20px;
text-align: center;
height: 50px;
> i {
font-size: 2rem;
cursor: pointer;
@include ease-in();
&:hover {
color: $color-link;
}
}
> .divider {
margin: 0 10px;
}
}

86
gui/app/styles/core/layout/layout-topbar.scss Normal file
View file

@ -0,0 +1,86 @@
#top-bar {
padding: 0 !important;
}
.top-bar {
background-color: $color-primary;
color: $color-white;
padding: 0 2rem;
font-size: 1rem;
height: 50px;
> .items {
margin: 0;
padding: 0;
height: 50px;
> .item {
list-style: none;
display: inline-block;
margin: 0 30px 0 0;
padding: 0;
font-size: 1.2rem;
letter-spacing: 0.1rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
> .logo {
height: 35px;
width: 35px;
}
> .link, .link:visited {
@include ease-in();
color: $color-white;
&:hover {
color: darken($color-white, 15%);
}
}
> .selected {
background-color: $color-primary-light !important;
color: $color-primary !important;
padding: 5px 10px !important;
&:hover {
color: darken($color-primary, 15%) !important;
}
}
}
}
> .buttons {
height: 50px;
float: right;
> .button-icon-gap {
margin-left: 20px;
}
}
> .hamburger {
@include ease-in();
@include border-radius(3px);
background-color: $color-primary;
border: 1px solid $color-primary-light;
> i {
font-size: 1.8rem;
line-height: 2.1rem;
padding: 0px 3px 0px 3px;
color: $color-primary-light;
cursor: pointer;
vertical-align: sub;
}
&:hover {
background-color: $color-primary-light;
> i {
color: $color-primary;
}
}
}
}