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

WIP new document UX/UI

Browse source
This commit is contained in:
Harvey Kandola 2018-05-29 18:26:04 +01:00
parent 21ba55a58f
commit 36be6243ad
23 changed files with 910 additions and 4231 deletions
Download patch file Download diff file Expand all files Collapse all files

33
gui/app/styles/layout/layout-footer.scss
View file

@ -1,20 +1,43 @@
footer {
background-color: $color-off-white;
background-color: $color-primary-light;
color: $color-dark;
color: $color-gray;
font-weight: 500;
font-size: 0.9rem;
padding: 10px 2rem;
font-size: 1rem;
padding: 5px 2rem;
}
.footer {
display: flex;
overflow: hidden;
a, a:visited {
@include ease-in();
color: $color-primary;
color: $color-gray;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
> .progress {
display: inline-block;
> 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);
}
}

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

@ -32,46 +32,82 @@ footer {
position: sticky;
}
@media (min-width: 720px) {
@media (min-width: 900px) {
.layout-body {
flex-direction: row;
}
.layout-content {
// Content area cannot exceed 1200px
// but can shrink as required
// (was flex: 1;).
flex: 0 1 1000px;
// flex: 1;
padding: 0 2rem;
margin: 0;
.layout-sidebar {
flex: 0 0 200px;
}
.layout-sidebar {
flex: 0 0 20rem;
// height: calc(100vh - 145px);
// overflow-x: hidden;
// overflow-y: auto;
.layout-content {
flex: 0 1 700px;
padding: 0 2rem;
margin: 0;
}
}
@media (min-width: 1200px) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 30rem;
flex: 0 0 300px;
}
.layout-content {
flex: 0 1 1000px;
margin: 0;
padding: 0 2rem 0 3rem;
}
}
@media (min-width: 1400px) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 400px;
}
.layout-content {
flex: 0 1 1000px;
margin: 0;
padding: 0 2rem 0 3rem;
}
}
@media (min-width: 1600px) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 450px;
}
.layout-content {
flex: 0 1 1200px;
margin: 0;
padding: 0 2rem 0 3rem;
}
}
@media (min-width: 1800px) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 35rem;
flex: 0 0 500px;
}
.layout-content {
flex: 0 1 1300px;
margin: 0;
padding: 0 2rem 0 4rem;
}
}