mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
New toolbar styling and layout controls
Built to work with forthcoming feature set that requires display of more options.
This commit is contained in:
Harvey Kandola
parent
08794f8d5f
commit
de273a38ed
19 changed files with 580 additions and 289 deletions
|
|
@ -2,4 +2,5 @@
|
|||
@import "spacing.scss";
|
||||
@import "headings.scss";
|
||||
@import "layout.scss";
|
||||
@import "toolbar.scss";
|
||||
@import "sidebar.scss";
|
||||
|
|
|
|||
|
|
@ -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
124
gui/app/styles/core/layout/toolbar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -179,12 +179,12 @@
|
|||
|
||||
.dmz-button-theme {
|
||||
@extend %dmz-button;
|
||||
background-color: $theme-800;
|
||||
background-color: $theme-500;
|
||||
color: $color-white;
|
||||
@include button-shadow();
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-600;
|
||||
background-color: $theme-700;
|
||||
}
|
||||
}
|
||||
.dmz-button-theme-light {
|
||||
|
|
|
|||
|
|
@ -40,16 +40,16 @@
|
|||
}
|
||||
|
||||
> .header {
|
||||
color: map-get($gray-shades, 800);
|
||||
background-color: map-get($gray-shades, 300);
|
||||
color: $color-white;
|
||||
background-color: $theme-500;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: auto;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 800);
|
||||
background-color: map-get($gray-shades, 300);
|
||||
}
|
||||
color: $color-white;
|
||||
background-color: $theme-500;
|
||||
}
|
||||
}
|
||||
|
||||
> .divider {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
%toolbar-shadow {
|
||||
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dmz-toolbar {
|
||||
|
|
@ -7,27 +8,29 @@
|
|||
flex-basis: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
height: 30px;
|
||||
width: auto;
|
||||
padding: 6px 10px;
|
||||
line-height: 24px;
|
||||
@extend .no-select;
|
||||
@include border-radius(6px);
|
||||
@include border-radius(4px);
|
||||
|
||||
> .dicon {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 20px;
|
||||
color: $theme-500;
|
||||
padding: 0 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 700);
|
||||
color: $theme-400;
|
||||
}
|
||||
}
|
||||
|
||||
> .divider {
|
||||
margin: 0 6px;
|
||||
width: 1px;
|
||||
background-color: $theme-200;
|
||||
}
|
||||
|
||||
> .icon-selected {
|
||||
color: map-get($yellow-shades, 600);
|
||||
}
|
||||
|
|
@ -68,17 +71,137 @@
|
|||
color: map-get($green-shades, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dmz-toolbar-large {
|
||||
height: 40px;
|
||||
padding: 9px 10px;
|
||||
line-height: 33px;
|
||||
> .dropdown {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
> .dicon {
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
> .label, > .dicon {
|
||||
color: $theme-400;
|
||||
}
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: $theme-500;
|
||||
padding: 0 0 0 0.5rem;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
> .dicon {
|
||||
font-size: 20px;
|
||||
color: $theme-500;
|
||||
padding: 0 0.3rem 0 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown-green {
|
||||
> .label, > .dicon {
|
||||
color: map-get($green-shades, 500);
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> %button {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid transparent;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
@extend .no-select;
|
||||
@include border-radius(2px);
|
||||
outline: none;
|
||||
background-color: map-get($green-shades, 600);
|
||||
color: $color-white;
|
||||
// @include button-shadow();
|
||||
|
||||
> .dicon {
|
||||
font-size: 1rem;
|
||||
padding: 0.2rem 0.4rem 0 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 800);
|
||||
border-color: map-get($gray-shades, 500);
|
||||
}
|
||||
}
|
||||
|
||||
.button-green {
|
||||
@extend %button;
|
||||
background-color: map-get($green-shades, 600);
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($green-shades, 700);
|
||||
}
|
||||
}
|
||||
.button-green-light {
|
||||
@extend %button;
|
||||
background-color: map-get($green-shades, 200);
|
||||
color: map-get($green-shades, 700);
|
||||
border: 1px solid map-get($green-shades, 300);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($green-shades, 300);
|
||||
}
|
||||
}
|
||||
|
||||
.button-yellow {
|
||||
@extend %button;
|
||||
background-color: map-get($yellow-shades, 600);
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
.button-yellow-light {
|
||||
@extend %button;
|
||||
background-color: map-get($yellow-shades, 200);
|
||||
color: map-get($yellow-shades, 700);
|
||||
border: 1px solid map-get($yellow-shades, 300);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($yellow-shades, 300);
|
||||
}
|
||||
}
|
||||
|
||||
.button-red {
|
||||
@extend %button;
|
||||
background-color: map-get($red-shades, 600);
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($red-shades, 700);
|
||||
}
|
||||
}
|
||||
.button-red-light {
|
||||
@extend %button;
|
||||
background-color: map-get($red-shades, 100);
|
||||
color: map-get($red-shades, 700);
|
||||
border: 1px solid map-get($red-shades, 200);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($red-shades, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,6 +211,7 @@
|
|||
|
||||
.dmz-toolbar-light {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.dmz-toolbar-raised {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue