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

Provide icon rendering framework

Browse source
This commit is contained in:
Harvey Kandola 2018-12-12 13:35:16 +00:00
parent 6eb68f84e0
commit 02102f9bf3
48 changed files with 851 additions and 546 deletions
Download patch file Download diff file Expand all files Collapse all files

8
gui/app/styles/core/layout/all.scss
View file

@ -1,8 +1,12 @@
@import "grid.scss";
@import "spacing.scss";
@import "headings.scss";
@import "master-internal.scss";
@import "sidebar.scss";
@import "layout-master.scss";
@import "layout-topbar.scss";
@import "layout-sidebar.scss";
@import "layout-footer.scss";
@import "layout-content.scss";
@import "common.scss";
@import "master-internal.scss";

64
gui/app/styles/core/layout/common.scss → gui/app/styles/core/layout/grid.scss
View file

@ -1,25 +1,10 @@
// Styles that apply to all pages using master layout
$display-break-1: 700px;
$display-break-2: 900px;
$display-break-3: 1200px;
$display-break-4: 1600px;
$display-break-5: 1800px;
.master-page-heading {
font-size: 2rem;
font-weight: 700;
color: map-get($gray-shades, 800);
}
.master-page-desc {
font-size: 1.2rem;
font-weight: 400;
color: map-get($gray-shades, 700);
}
.grid-container-8-2 {
%grid-base {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
@ -40,6 +25,32 @@ $display-break-5: 1800px;
justify-self: self-start;
}
// X- axis alignment
.grid-cell-left {
justify-self: self-end;
}
.grid-cell-right {
justify-self: self-end;
}
.grid-cell-center {
justify-self: center;
}
// Y axis alignment
.grid-cell-top {
align-self: self-start;
}
.grid-cell-middle {
align-self: center;
}
.grid-cell-bottom {
align-self: self-end;
}
}
.grid-container-8-2 {
@extend %grid-base;
@media (min-width: $display-break-2) {
grid-template-columns: 8fr 2fr;
grid-template-rows: 1fr;
@ -50,6 +61,27 @@ $display-break-5: 1800px;
padding: 0;
}
.grid-cell-2 {
grid-column-start: 2;
grid-row-start: 1;
padding: 0;
}
}
}
.grid-container-6-4 {
@extend %grid-base;
@media (min-width: $display-break-2) {
grid-template-columns: 6fr 4fr;
grid-template-rows: 1fr;
.grid-cell-1 {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
}
.grid-cell-2 {
grid-column-start: 2;
grid-row-start: 1;

12
gui/app/styles/core/layout/headings.scss Normal file
View file

@ -0,0 +1,12 @@
// Headings
.master-page-heading {
font-size: 2rem;
font-weight: 700;
color: map-get($gray-shades, 900);
}
.master-page-desc {
font-size: 1.2rem;
font-weight: 400;
color: map-get($gray-shades, 800);
}

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

@ -0,0 +1,59 @@
.sidebar-content {
display: block;
position: relative;
> .section {
margin: 0;
padding: 0 7px;
> .title {
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
color: map-get($gray-shades, 700);
}
> .list {
margin: 10px 0;
> .item {
padding: 3px 0;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
> .dicon {
font-size: 16px;
font-weight: bold;
color: map-get($gray-shades, 500);
}
> .name {
display: inline-block;
padding: 0 0 0 8px;
font-size: 1rem;
font-weight: 500;
color: $color-black-light-3;
}
&:hover {
> .dicon {
color: map-get($gray-shades, 600);
}
> .name {
color: $color-black-light-1;
}
}
}
> .selected {
> .dicon, > .name, &:hover {
color: $theme-500 !important;
font-weight: 600 !important;
}
}
}
}
}

71
gui/app/styles/core/layout/spacing.scss Normal file
View file

@ -0,0 +1,71 @@
.spacer-100 { height: 10px; }
.spacer-200 { height: 20px; }
.spacer-300 { height: 30px; }
.spacer-400 { height: 40px; }
.spacer-500 { height: 70px; }
.spacer-600 { height: 100px; }
.spacer-700 { height: 120px; }
.spacer-800 { height: 150px; }
.spacer-900 { height: 200px; }
@media (max-width: $display-break-1) {
div[class^="spacer-"] {
height: 1px;
}
}
$i: 150;
@while $i > 0 {
.margin-#{$i} {
margin: #{$i}px;
}
.margin-top-#{$i} {
margin-top: #{$i}px;
}
.margin-bottom-#{$i} {
margin-bottom: #{$i}px;
}
.margin-right-#{$i} {
margin-right: #{$i}px;
}
.margin-left-#{$i} {
margin-left: #{$i}px;
}
$i: $i - 5;
}
$i: 150;
@while $i > 0 {
.padding-#{$i} {
padding: #{$i}px;
}
.padding-top-#{$i} {
padding-top: #{$i}px;
}
.padding-bottom-#{$i} {
padding-bottom: #{$i}px;
}
.padding-right-#{$i} {
padding-right: #{$i}px;
}
.padding-left-#{$i} {
padding-left: #{$i}px;
}
$i: $i - 5;
}
$i: 100;
@while $i > 0 {
.width-#{$i} {
width: #{$i}#{"%"} !important;
}
$i: $i - 1;
}