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

New toolbar styling and layout controls

Browse source 
Built to work with forthcoming feature set that requires display of more options.
This commit is contained in:
Harvey Kandola 2019-05-21 17:05:57 +01:00
parent 08794f8d5f
commit de273a38ed
19 changed files with 580 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,4 +2,5 @@
@import "spacing.scss";
@import "headings.scss";
@import "layout.scss";
@import "toolbar.scss";
@import "sidebar.scss";

127
gui/app/styles/core/layout/layout.scss
View file

@ -1,130 +1,3 @@
// *****************************************************************
// Define mobile-first layout for top navigation bar and toolbar.
// *****************************************************************
.master-navigation {
display: block;
height: auto;
width: 100%;
> .navbar {
display: block;
height: 40px;
width: 100%;
background-color: $theme-500;
text-align: center;
padding: 0;
z-index: 999;
> .container {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 20px;
> .options {
> .selected {
> .dicon {
color: $color-white !important;
}
}
> .option {
cursor: pointer;
display: inline-block;
> .dicon {
display: inline-block;
color: $theme-300;
font-size: 20px;
padding: 10px 10px;
}
&:hover {
> .dicon {
color: $theme-400 !important;
}
}
}
> a.option {
color: $theme-300;
&:hover {
color: $color-white;
}
}
> .invalid-plan {
> .dicon {
color: map-get($yellow-shades, 600) !important;
}
}
> .user-gravatar-container {
display: inline-block;
margin: 0;
padding: 7px 10px;
vertical-align: top;
> .user-gravatar {
display: inline-block;
cursor: pointer;
position: relative;
width: 26px;
height: 26px;
line-height: 26px;
padding: 0;
border-radius: 50%;
font-size: 0.85rem;
text-align: center;
color: $theme-500;
font-weight: bold;
background-color: $color-white;
@extend .no-select;
}
}
}
}
}
> .toolbar {
display: block;
height: auto;
height: 50px;
width: 100%;
background-color: $color-sidebar;
background-color: $theme-100;
text-align: center;
padding: 0;
z-index: 999;
> .container {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 10px;
> div[class^="zone-"], div[class*=" zone-"] {
margin: 0;
padding: 10px 10px;
justify-content: center;
> .label {
font-size: 1rem;
}
}
}
}
}
// *****************************************************************
// Define mobile-first layout for main content zone with a sidebar.
// *****************************************************************

124
gui/app/styles/core/layout/toolbar.scss Normal file
View file

@ -0,0 +1,124 @@
// *****************************************************************
// Define mobile-first layout for top navigation bar and toolbar.
// *****************************************************************
.master-navigation {
display: block;
height: auto;
width: 100%;
> .navbar {
display: block;
height: 40px;
width: 100%;
background-color: $theme-500;
text-align: center;
padding: 0;
z-index: 999;
> .container {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 20px;
> .options {
> .selected {
> .dicon {
color: $color-white !important;
}
}
> .option {
cursor: pointer;
display: inline-block;
> .dicon {
display: inline-block;
color: $theme-300;
font-size: 20px;
padding: 10px 10px;
}
&:hover {
> .dicon {
color: $theme-400 !important;
}
}
}
> a.option {
color: $theme-300;
&:hover {
color: $color-white;
}
}
> .invalid-plan {
> .dicon {
color: map-get($yellow-shades, 600) !important;
}
}
> .user-gravatar-container {
display: inline-block;
margin: 0;
padding: 7px 10px;
vertical-align: top;
> .user-gravatar {
display: inline-block;
cursor: pointer;
position: relative;
width: 26px;
height: 26px;
line-height: 26px;
padding: 0;
border-radius: 50%;
font-size: 0.85rem;
text-align: center;
color: $theme-500;
font-weight: bold;
background-color: $color-white;
@extend .no-select;
}
}
}
}
}
> .toolbar {
display: block;
width: 100%;
background-color: $color-sidebar;
background-color: $theme-100;
padding: 0;
// z-index: 999;
> .container {
height: 50px;
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 15px;
> div[class^="zone-"], > div[class*=" zone-"] {
margin: 0;
// padding: 10px 10px;
align-items: center;
> .label {
font-size: 1rem;
}
}
}
}
}