1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-05 21:45:28 +02:00

Complete UI refactoring to new nav and toolbar UX

Compact design!
This commit is contained in:
McMatts 2019-05-24 12:30:31 +01:00
parent e37782e5b7
commit 6ae9414361
14 changed files with 113 additions and 90 deletions

View file

@ -85,6 +85,10 @@
font-weight: bold;
background-color: $color-white;
@extend .no-select;
&:hover {
background-color: $theme-100;
}
}
}
}
@ -108,12 +112,13 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding: 0 15px 0 20px;
> div[class^="zone-"], > div[class*=" zone-"] {
margin: 0;
// padding: 10px 10px;
padding: 0;
align-items: center;
align-self: center;
> .label {
font-size: 1rem;

View file

@ -8,7 +8,7 @@
// -webkit-box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
// box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
@include border-radius(5px);
@include border-radius(3px);
> p {
margin: 4px;
@ -36,6 +36,7 @@
&:hover {
color: $color-black;
background-color: map-get($yellow-shades, 100);
@include border-radius(3px);
}
}

View file

@ -6,6 +6,7 @@
.dmz-toolbar {
display: inline-flex;
flex-basis: auto;
align-items: center;
text-align: center;
white-space: nowrap;
border: 1px solid transparent;
@ -37,7 +38,7 @@
> .label {
font-size: 14px;
font-weight: 500;
font-weight: 400;
color: map-get($gray-shades, 600);
padding: 0 0.5rem;
align-self: center;
@ -85,7 +86,7 @@
> .label {
display: inline-block;
font-size: 1rem;
font-weight: 500;
font-weight: 400;
color: $theme-500;
padding: 0 0 0 0.5rem;
vertical-align: text-bottom;
@ -114,6 +115,7 @@
white-space: nowrap;
text-align: center;
padding: 0.375rem 0.75rem;
margin: 0 0.5rem;
font-weight: 500;
font-size: 1rem;
border: 1px solid transparent;
@ -122,7 +124,7 @@
@extend .no-select;
@include border-radius(2px);
outline: none;
background-color: map-get($green-shades, 600);
background-color: map-get($gray-shades, 600);
color: $color-white;
// @include button-shadow();
@ -134,6 +136,7 @@
> .label {
display: inline-block;
font-size: 1rem;
margin: 0;
padding: 0;
}
@ -150,9 +153,12 @@
color: $color-white;
&:hover {
background-color: map-get($green-shades, 700);
color: $color-white;
border-color: map-get($green-shades, 500);
background-color: map-get($green-shades, 500);
}
}
.button-green-light {
@extend %button;
background-color: map-get($green-shades, 200);