1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-04 21:15:24 +02:00

Redesign setting screens

We're using iconography to stylize each setting screen.

Imeplemented new color palletes and shades.
This commit is contained in:
McMatts 2018-12-13 12:24:16 +00:00
parent 02102f9bf3
commit f442081a41
42 changed files with 563 additions and 548 deletions

View file

@ -59,19 +59,23 @@ $input-btn-focus-color: rgba($theme-500, .25);
// form labels
.form-group {
> label {
color: map-get($gray-shades, 800);
color: map-get($gray-shades, 700);
font-size: 1.2rem;
font-weight: 500;
font-weight: 600;
}
> small, > div[class*="col"] > small {
color: map-get($gray-shades, 600);
font-size: 1rem;
font-weight: 300;
}
> small.highlight, > div[class*="col"] > small.highlight {
font-size: 1rem;
color: map-get($yellow-shades, 700) !important;
}
margin-bottom: 30px !important;
}
// links

View file

@ -394,3 +394,23 @@ icons
.dicon-menu-8::before {
content: "\ea48";
}
.dicon-send::before {
content: "\ea49";
}
.dicon-email::before {
content: "\ea4a";
}
.dicon-download::before {
content: "\ea4b";
}
.dicon-database::before {
content: "\ea4c";
}
.dicon-notification::before {
content: "\ea4d";
}

View file

@ -10,3 +10,22 @@
font-weight: 400;
color: map-get($gray-shades, 800);
}
.logo-heading {
display: flex;
flex-direction: row;
> .image {
align-self: center;
margin-right: 25px;
> i {
font-size: 3.5rem;
color: map-get($gray-shades, 600);
}
}
> .text {
align-self: flex-start;
}
}

View file

@ -63,7 +63,6 @@
}
}
@mixin shadow() {
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
}

View file

@ -1,32 +1,60 @@
.product-update {
text-align: left;
margin: 50px 0;
> .update-summary {
> .update-status {
padding: 25px;
border: 1px solid map-get($yellow-shades, 700);
background-color: map-get($gray-shades, 100);
@include border-radius(2px);
background-color: map-get($yellow-shades, 100);
border: 1px solid map-get($yellow-shades, 200);
@include shadow();
@include border-radius(3px);
> .caption {
> .title {
font-weight: bold;
font-size: 1.5rem;
color: map-get($yellow-shades, 700);
color: map-get($yellow-shades, 600);
margin-bottom: 15px;
display: inline-block;
display:block;
}
> .instructions {
font-weight: normal;
font-weight: 500;
font-size: 1.3rem;
color: map-get($gray-shades, 600);
color: map-get($gray-shades, 800);
margin-bottom: 30px;
}
> .links {
margin: 30px 0 0 0;
> p {
> .edition-name {
font-size: 1.3rem;
font-weight: 400;
color: map-get($yellow-shades, 900);
}
> .link {
font-size: 1.3rem;
color: map-get($yellow-shades, 800);
font-weight: 600;
}
}
}
}
> .change-log {
padding: 25px;
background-color: map-get($gray-shades, 100);
border: 1px solid map-get($gray-shades, 200);
@include shadow();
@include border-radius(3px);
> .version {
margin: 30px 0 0 20px;
font-size: 1.3rem;
color: map-get($gray-shades, 600);
font-weight: bold;
font-weight: 700;
font-size: 1.2rem;
color: map-get($yellow-shades, 700);
margin: 10px 0;
display: block;
}
> .changes {
@ -41,10 +69,11 @@
> .tag-edition {
margin: 10px 10px 10px 10px;
padding: 5px 10px;
background-color: map-get($gray-shades, 300);
color: $theme-500;
background-color: map-get($green-shades, 200);
color: map-get($green-shades, 600);
font-weight: bold;
font-size: 0.9rem;
@include border-radius(3px);
}
}
}

View file

@ -1,15 +1,4 @@
.view-customize {
> .admin-heading {
font-size: 1.5rem;
font-weight: bold;
color: $color-black;
}
> .sub-heading {
font-size: 1.1rem;
color: map-get($gray-shades, 600);
}
.user-table {
tbody tr td, thead tr th {
border-top: none !important;
@ -157,9 +146,9 @@
> .backup-zone {
@include border-radius(3px);
border: 1px solid map-get($gray-shades, 300);
border: 1px solid map-get($green-shades, 200);
padding: 20px 20px;
background-color: map-get($green-shades, 200);
background-color: map-get($green-shades, 100);
color: $color-black-light-1;
> .backup-fail {
@ -175,10 +164,10 @@
> .restore-zone {
@include border-radius(3px);
border: 1px solid map-get($gray-shades, 300);
border: 1px solid map-get($red-shades, 200);
margin: 50px 0;
padding: 20px 20px;
background-color: map-get($red-shades, 200);
background-color: map-get($red-shades, 100);
color: $color-black-light-1;
> .restore-fail {