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

Make Login action more prominent

Browse source 
Closes #247
This commit is contained in:
Harvey Kandola 2019-05-20 15:21:33 +01:00
parent 62c3cd03ad
commit 14f313a836
25 changed files with 499 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

269
gui/app/styles/core/layout/layout.scss Normal file
View file

@ -0,0 +1,269 @@
// *****************************************************************
// 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.
// *****************************************************************
.master-grid-container {
display: block;
height: auto;
width: 100%;
.master-sidebar {
display: block;
height: auto;
width: 100%;
padding: 10px;
}
.master-content {
display: block;
height: auto;
width: 100%;
padding: 10px;
}
}
// $sidebar-height: calc(100vh - 90px);
$sidebar-height: auto;
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-grid-container {
display: grid;
grid-template-columns: 200px auto;
.master-sidebar {
width: 200px;
height: $sidebar-height;
// overflow-x: hidden;
// overflow-y: auto;
padding: 20px 15px;
}
.master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 210px);
}
}
}
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-grid-container {
display: grid;
grid-template-columns: 240px auto;
.master-sidebar {
width: 240px;
}
.master-content {
grid-column-start: 2;
padding: 20px;
max-width: calc(100vw - 250px);
}
}
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-grid-container {
display: grid;
grid-template-columns: 300px auto;
.master-sidebar {
width: 300px;
padding: 40px 20px;
}
.master-content {
grid-column-start: 2;
padding: 40px 30px;
max-width: calc(100vw - 310px);
}
}
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-grid-container {
display: grid;
grid-template-columns: 350px minmax(auto, 1200px);
.master-sidebar {
width: 350px;
padding: 40px 20px;
}
.master-content {
grid-column-start: 2;
padding: 40px 40px;
max-width: 1200px;
}
}
}
// *****************************************************************
// Define mobile-first layout for content without a sidebar.
// *****************************************************************
.master-container {
display: block;
height: auto;
width: 100%;
padding: 20px;
}
// Tablet starts around 700px
@media (min-width: $display-break-1) {
.master-container {
padding: 20px;
}
}
// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
padding: 20px;
}
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
padding: 30px;
}
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
padding: 40px;
max-width: 1200px;
}
}