verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

Bug #253 Actualizar los estilos para que concuerden con la paleta

This commit is contained in:
gerard 2018-05-14 12:54:17 +02:00
parent 325aae7ebd
commit b5cfbf1246
26 changed files with 183 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/auth/src/login/style.scss
View File

@ -1,3 +1,4 @@
@import "colors";
vn-login > div { vn-login > div {
position: absolute; position: absolute;
@ -5,7 +6,7 @@ vn-login > div {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #333; color: $main-font-color;
font-size: 1.1em; font-size: 1.1em;
font-weight: normal; font-weight: normal;
background-color: #3c393b; background-color: #3c393b;

8
client/client/src/addresses/addresses.html
View File

@ -6,13 +6,13 @@
<vn-one border-radius class="pad-small border-solid" <vn-one border-radius class="pad-small border-solid"
ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}"> ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
<vn-horizontal style="align-items: center;"> <vn-horizontal style="align-items: center;">
<vn-none pad-medium-h style="color:#FFA410;"> <vn-none pad-medium-h>
<i class="material-icons" ng-if="address.isDefaultAddress">star</i> <i class="material-icons" orange ng-if="address.isDefaultAddress">star</i>
<i class="material-icons" <i class="material-icons" orange
vn-tooltip="Active first to set as default" vn-tooltip="Active first to set as default"
tooltip-position="left" tooltip-position="left"
ng-if="!address.isActive">star_border</i> ng-if="!address.isActive">star_border</i>
<i class="material-icons pointer" <i class="material-icons pointer" orange
ng-if="address.isActive && !address.isDefaultAddress" ng-if="address.isActive && !address.isDefaultAddress"
vn-tooltip="Set as default" vn-tooltip="Set as default"
tooltip-position="left" tooltip-position="left"

10
client/core/src/components/autocomplete/style.scss
View File

@ -1,3 +1,4 @@
@import "colors";
vn-autocomplete > div > .mdl-textfield { vn-autocomplete > div > .mdl-textfield {
position: relative; position: relative;
@ -16,16 +17,15 @@ vn-autocomplete > div > .mdl-textfield {
right: 0; right: 0;
top: 1.3em; top: 1.3em;
height: 1em; height: 1em;
color: #888; color: $secondary-font-color;
border-radius: .2em; border-radius: .2em;
background-color: rgba(255, 255, 255, .8);
& > vn-icon { & > vn-icon {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
&:hover { &:hover {
color: #333; color: $main-font-color;
} }
} }
} }
@ -51,10 +51,10 @@ ul.vn-autocomplete {
&.active, &.active,
&:hover { &:hover {
background-color: rgba(1, 1, 1, .1); background-color: $hover;
} }
&.load-more { &.load-more {
color: #ffa410; color: $main-01;
font-family: vn-font-bold; font-family: vn-font-bold;
padding: .4em .8em; padding: .4em .8em;
} }

4
client/core/src/components/dialog/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
.vn-dialog { .vn-dialog {
display: none; display: none;
justify-content: center; justify-content: center;
@ -62,7 +64,7 @@
input[type="button"], input[type="button"],
input[type="submit"], input[type="submit"],
input[type="reset"] { input[type="reset"] {
color: #ffa410; color: $main-01;
font-family: vn-font-bold; font-family: vn-font-bold;
padding: .7em; padding: .7em;
margin: -0.7em; margin: -0.7em;

6
client/core/src/components/drop-down/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
vn-drop-down { vn-drop-down {
.dropdown { .dropdown {
display: flex; display: flex;
@ -28,7 +30,7 @@ vn-drop-down {
font-size: 18px; font-size: 18px;
&:hover { &:hover {
color: #333; color: $main-font-color;
} }
} }
&:hover > vn-icon[icon=clear] { &:hover > vn-icon[icon=clear] {
@ -64,7 +66,7 @@ vn-drop-down {
} }
} }
.status { .status {
color: #ffab40; color: $main-01;
font-weight: bold; font-weight: bold;
} }
} }

4
client/core/src/components/grid-header/style.scss
View File

@ -1,5 +1,7 @@
@import "colors";
vn-grid-header { vn-grid-header {
border-bottom: 3px solid #9D9D9D; border-bottom: 3px solid $main-header;
font-weight: bold; font-weight: bold;
.orderly{ .orderly{
text-align: center; text-align: center;

8
client/core/src/components/grid/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
.vn-grid { .vn-grid {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
@ -17,17 +19,17 @@
} }
} }
& > thead, & > tbody { & > thead, & > tbody {
border-bottom: 3px solid #9D9D9D; border-bottom: 3px solid $main-header;
} }
& > tbody > tr { & > tbody > tr {
border-bottom: 1px solid #9D9D9D; border-bottom: 1px solid $main-header;
transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out;
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #e5e5e5; background-color: $hover;
} }
} }

25
client/core/src/components/icon-button/style.scss
View File

@ -1,17 +1,34 @@
@import "colors";
vn-icon-button { vn-icon-button {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: rgba(#f7931e, 0.7); color: rgba($main-01, 0.7);
transition: color 200ms ease-in-out; transition: color 200ms ease-in-out;
cursor: pointer; cursor: pointer;
&.button {
background-color: $main-01;
color: white;
width: 64px;
height: 36px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
border-radius: 2px;
}
&.button:focus {
will-change: box-shadow;
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
}
&.button i {
margin-top: 6px;
}
& > i, & > i,
& > i.material-icons { & > i.material-icons {
display: block; display: block;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
} }
&:hover { &:not(.button):hover {
color: #f7931e; color: $main-01;
} }
} }

6
client/core/src/components/label-value/style.scss
View File

@ -1,9 +1,11 @@
@import "colors";
vn-label-value { vn-label-value {
& vn-label { & vn-label {
color: #9b9b9b color: $secondary-font-color;
} }
& span { & span {
color: #222222 color: $main-font-color;
} }
} }

4
client/core/src/components/paging/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
vn-paging { vn-paging {
display: block; display: block;
text-align: center; text-align: center;
@ -18,7 +20,7 @@ vn-paging {
margin-left: 0; margin-left: 0;
} }
&.active > a { &.active > a {
background: #3c393b; background: $main-header;
color: #fff; color: #fff;
} }
& > a, & > a,

3
client/core/src/components/snackbar/style.scss
View File

@ -1,3 +1,4 @@
@import "colors";
vn-snackbar > div { vn-snackbar > div {
box-sizing: border-box; box-sizing: border-box;
background-color: #333; background-color: #333;
@ -39,7 +40,7 @@ vn-snackbar > div {
border: none; border: none;
background-color: transparent; background-color: transparent;
font-weight: bold; font-weight: bold;
color: #ffab40; color: $main-01;
padding: 1em; padding: 1em;
margin: -1em; margin: -1em;
padding-left: 1.5em; padding-left: 1.5em;

10
client/core/src/components/step-control/style.scss
View File

@ -1,9 +1,11 @@
@import "colors";
vn-step-control { vn-step-control {
display: flex; display: flex;
justify-content: center; justify-content: center;
.step-control { .step-control {
border-top: 2px solid rgb(255,152,0); border-top: 2px solid $main-01;
margin-bottom: 15px; margin-bottom: 15px;
& > .steps { & > .steps {
@ -19,8 +21,8 @@ vn-step-control {
} }
& > .steps > .step .circle { & > .steps > .step .circle {
border: 2px solid rgb(255,152,0); border: 2px solid $main-01;
background-color: #FFF; background-color: white;
align-content: center; align-content: center;
margin-top: -9.5px; margin-top: -9.5px;
-moz-border-radius: 50%; -moz-border-radius: 50%;
@ -32,7 +34,7 @@ vn-step-control {
} }
& > .steps > .step .circle.active { & > .steps > .step .circle.active {
background-color: rgb(255,152,0); background-color: $main-01;
} }
& > .buttons { & > .buttons {

2
client/core/src/styles/index.js
View File

@ -1,4 +1,4 @@
import './mdl-override.css'; import './mdl-override.scss';
import './mdi-override.css'; import './mdi-override.css';
import './zoom-image.scss'; import './zoom-image.scss';
import './fontello-head.css'; import './fontello-head.css';

29
client/core/src/styles/mdl-override.css
View File

@ -1,29 +0,0 @@
/**
* Rewrited CSS rules from Material Design Lite.
* FIXME: don't use !important
*/
body {
line-height: initial;
font-size: 12pt;
}
.mdl-button {
font-weight: bolder;
color: #ffa410;
}
.mdl-button--colored {
color: white !important;
}
.mdl-button--colored,
.mdl-button--colored:focus,
.mdl-button--colored:active {
background-color: #ffa410 !important;
}
.mdl-button--colored:hover,
.mdl-button--raised:hover {
background-color: #ffa410 !important;
}
.mdl-button--fab{
color: white !important;
background-color: #ff9400 !important;
}

48
client/core/src/styles/mdl-override.scss Normal file
View File

@ -0,0 +1,48 @@
@import "colors";
/**
* Rewrited CSS rules from Material Design Lite.
* FIXME: don't use !important
*/
body {
line-height: initial;
font-size: 12pt;
}
.mdl-button {
font-weight: bolder;
color: $main-01;
}
.mdl-button--colored {
color: white !important;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
color: $main-01 !important;
}
.mdl-checkbox.is-checked .mdl-checkbox__box-outline, {
border: 2px solid $main-01;
}
fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline, .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
border: 2px solid rgba(0,0,0,.26);
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
background: $main-01;
}
.mdl-textfield__label::after{
background-color: $main-01 !important;
}
.mdl-button--colored,
.mdl-button--colored:focus,
.mdl-button--colored:active {
background-color: $main-01 !important;
}
.mdl-button--colored:hover,
.mdl-button--raised:hover {
background-color: $main-01 !important;
}
.mdl-button--fab{
color: white !important;
background-color: $main-01 !important;
}

7
client/salix/src/components/home/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
vn-home { vn-home {
padding: 2em; padding: 2em;
@ -17,7 +19,7 @@ vn-home {
& > a { & > a {
overflow:hidden; overflow:hidden;
border-radius: 6px; border-radius: 6px;
background-color: #FF9300; background-color: $main-01;
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -30,7 +32,7 @@ vn-home {
transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
&:hover { &:hover {
opacity: .7; background-color: $hover;
} }
& > vn-icon { & > vn-icon {
font-size: 4em; font-size: 4em;
@ -42,6 +44,7 @@ vn-home {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: white;
} }
} }
} }

3
client/salix/src/components/left-menu/style.scss
View File

@ -1,7 +1,8 @@
@import "colors";
vn-menu-item { vn-menu-item {
& > li.active { & > li.active {
background-color: #424242; background-color: $main-header;
color: white; color: white;
} }
} }

12
client/salix/src/components/main-menu/style.scss
View File

@ -1,3 +1,5 @@
@import "colors";
vn-main-menu { vn-main-menu {
#user { #user {
display: inline-block; display: inline-block;
@ -6,12 +8,15 @@ vn-main-menu {
height: 2.5em; height: 2.5em;
vertical-align: middle; vertical-align: middle;
} }
#user h6{
color: white;
}
& > div > vn-icon, & > div > a > vn-icon { & > div > vn-icon, & > div > a > vn-icon {
font-size: 2.2em; font-size: 2.2em;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #FF9300; color: $main-01;
} }
} }
.vn-popover ul { .vn-popover ul {
@ -20,7 +25,7 @@ vn-main-menu {
color: white; color: white;
li { li {
background-color: #FF9300; background-color: $main-01;
margin-bottom: .6em; margin-bottom: .6em;
cursor: pointer; cursor: pointer;
padding: .8em; padding: .8em;
@ -32,8 +37,7 @@ vn-main-menu {
vertical-align: middle; vertical-align: middle;
} }
&:hover { &:hover {
background-color: #FF9300; background-color: $hover;
opacity: 0.7 !important;
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

4
client/salix/src/styles/background.scss
View File

@ -4,11 +4,11 @@ $bg-main: $color-green;
$bg-minor: $color-orange; $bg-minor: $color-orange;
$bg-content: $color-light-grey; $bg-content: $color-light-grey;
$bg-panel: $color-white; $bg-panel: $color-white;
$bg-dark-bar: $color-dark; $bg-dark-bar: $main-header;
$bg-dark-menu: $color-dark-grey; $bg-dark-menu: $color-dark-grey;
html [bg-main], .bg-main { html [bg-main], .bg-main {
background-color: $bg-main; background-color: $main-bg;
} }
html [bg-minor], .bg-minor { html [bg-minor], .bg-minor {
background-color: $bg-minor; background-color: $bg-minor;

20
client/salix/src/styles/colors.scss
View File

@ -1,11 +1,23 @@
$main-font-color :#222222;
$secondary-font-color: #9b9b9b;
$main-header: #3d3d3d;
$hover: #c4c4c4;
$main-bg: #e5e5e5;
$main-01: #f7931e;
$main-01-05: rgba($main-01, 0.5);
$main-01-03: rgba($main-01, 0.3);
$main-02: #a3d131;
$main-02-05: rgba($main-02, 0.5);
$main-02-03: rgba($main-02, 0.3);
$color-green: #a3d131; $color-green: #a3d131;
$color-orange: #f7931e; $color-orange: #f7931e;
$color-white: white; $color-white: white;
$color-dark: #3d3d3d; $color-dark: $main-header; //headerbar
$color-dark-grey: #424242; $color-dark-grey: #424242;
$color-light-grey: #e5e5e5; $color-light-grey: $main-bg;
$color-medium-grey: #9b9b9b; $color-medium-grey: $secondary-font-color;
$color-grey: #c4c4c4; $color-grey: #c4c4c4; //deprecated
$color-medium-green: rgba($color-green, 0.5); $color-medium-green: rgba($color-green, 0.5);
$color-medium-orange: rgba($color-orange, 0.5); $color-medium-orange: rgba($color-orange, 0.5);
$color-light-green: rgba($color-green, 0.3); $color-light-green: rgba($color-green, 0.3);

7
client/salix/src/styles/font-style.scss
View File

@ -1,10 +1,9 @@
@import "colors"; @import "colors";
@import "font-family"; @import "font-family";
$font-color: $color-dark-grey;
body { body {
color: $font-color; color: $main-font-color;
font-family: vn-font; font-family: vn-font;
} }
html [uppercase], .uppercase { html [uppercase], .uppercase {
@ -12,12 +11,12 @@ html [uppercase], .uppercase {
} }
html [green], .green{color: $color-green} html [green], .green{color: $color-green}
html [orange], .orange{color: $color-orange} html [orange], .orange{color: $main-01}
html [white], .white{color: $color-white} html [white], .white{color: $color-white}
html [dark], .dark{color: $color-dark} html [dark], .dark{color: $color-dark}
html [dark-grey], .dark-grey{color: $color-dark-grey} html [dark-grey], .dark-grey{color: $color-dark-grey}
html [light-grey], .light-grey{color: $color-light-grey} html [light-grey], .light-grey{color: $color-light-grey}
html [medium-grey], .medium-grey{color: $color-medium-grey} html [medium-grey], .medium-grey{color: $hover}
html [medium-green], .medium-green{color: $color-medium-green} html [medium-green], .medium-green{color: $color-medium-green}
html [medium-orange], .medium-orange{color: $color-medium-orange} html [medium-orange], .medium-orange{color: $color-medium-orange}
html [light-green], .light-green{color: $color-light-green} html [light-green], .light-green{color: $color-light-green}

1
client/salix/src/styles/index.js
View File

@ -8,3 +8,4 @@ import './border.scss';
import './font-style.scss'; import './font-style.scss';
import './misc.scss'; import './misc.scss';
import './summary.scss'; import './summary.scss';
import './colors.scss';

36
client/salix/src/styles/misc.scss
View File

@ -64,9 +64,9 @@ html [vn-center], .vn-center{
.list-element{ .list-element{
padding: 8px 0 0 0; padding: 8px 0 0 0;
border-bottom: 1px solid $color-medium-grey; border-bottom: 1px solid $main-header;
i { i {
color: $color-orange; color: $main-01;
} }
} }
.tooltip { .tooltip {
@ -81,7 +81,7 @@ html [vn-center], .vn-center{
} }
.list-footer{ .list-footer{
font-family: vn-font-bold; font-family: vn-font-bold;
border-top: 3px solid $color-medium-grey; border-top: 3px solid $main-header;
} }
.list-element.warning{ .list-element.warning{
background-color: $color-medium-orange; background-color: $color-medium-orange;
@ -97,7 +97,7 @@ html [vn-center], .vn-center{
background-color: $color-light-orange; background-color: $color-light-orange;
} }
.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
background-color: $color-orange; background-color: $main-01;
} }
html [pointer], .pointer{ html [pointer], .pointer{
@ -121,7 +121,7 @@ a {
transition: background-color 250ms ease-out; transition: background-color 250ms ease-out;
&:hover { &:hover {
background-color: rgba(0, 0, 0, .1); background-color: $hover;
} }
} }
@ -134,6 +134,14 @@ vn-button-bar {
margin-top: $margin-small; margin-top: $margin-small;
} }
vn-tool-bar {
display: flex;
& > * {
margin-right: .6em;
}
}
vn-main-block { vn-main-block {
display:block; display:block;
max-width: 1920px; max-width: 1920px;
@ -150,7 +158,7 @@ vn-main-block {
.vn-descriptor { .vn-descriptor {
.header { .header {
background: #ffa410; background: $main-01;
color: white; color: white;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
@ -183,7 +191,7 @@ vn-main-block {
font-size: 1.5em; font-size: 1.5em;
} }
& > vn-icon.bright { & > vn-icon.bright {
color: #ffa410; color: $main-01;
opacity: 1; opacity: 1;
} }
} }
@ -194,14 +202,6 @@ vn-main-block {
margin: 0 auto; margin: 0 auto;
} }
vn-tool-bar {
display: flex;
& > * {
margin-right: .6em;
}
}
.vn-list-item { .vn-list-item {
@extend .pad-medium; @extend .pad-medium;
@extend .border-solid-bottom; @extend .border-solid-bottom;
@ -216,7 +216,7 @@ vn-tool-bar {
vn-icon { vn-icon {
opacity: .4; opacity: .4;
color: #ffa410; color: $main-01;
margin-left: .5em; margin-left: .5em;
transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;
font-size: 2em; font-size: 2em;
@ -228,12 +228,12 @@ vn-tool-bar {
} }
/** START - FORM ELEMENTS DISABLED **/ /** START - FORM ELEMENTS DISABLED **/
fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .mdl-textfield__input, fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .mdl-textfield__input,
fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, .mdl-checkbox.is-disabled .mdl-checkbox__label{ fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, .mdl-checkbox.is-disabled .mdl-checkbox__label {
border: none !important; border: none !important;
color: inherit !important; color: inherit !important;
} }
fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label { fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
color: rgb(255,171,64) !important; color: $main-01 !important;
} }
/** END - FORM ELEMENTS DISABLED **/ /** END - FORM ELEMENTS DISABLED **/

6
client/salix/src/styles/summary.scss
View File

@ -2,12 +2,12 @@
.summary{ .summary{
h5 { h5 {
border-bottom: 2px solid $color-orange; border-bottom: 2px solid $main-01;
margin: 0 0 5px 0 margin: 0 0 5px 0
} }
h5.title { h5.title {
border: none; border: none;
background: $color-orange; background: $main-01;
color: $color-white; color: $color-white;
} }
p { p {
@ -36,7 +36,7 @@
} }
& > div > button.close > vn-icon { & > div > button.close > vn-icon {
color: $color-orange; color: $main-01;
} }
& > div { & > div {

2
client/salix/src/styles/title.scss
View File

@ -1,3 +1,4 @@
@import "colors";
h1 { h1 {
font-size: 32pt; font-size: 32pt;
@ -23,4 +24,5 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
margin-bottom: .2em; margin-bottom: .2em;
font-family: vn-font-bold; font-family: vn-font-bold;
color: $main-font-color
} }

13
webpack.config.js
View File

@ -35,7 +35,18 @@ let baseConfig = {
loader: 'style-loader!css-loader' loader: 'style-loader!css-loader'
}, { }, {
test: /\.scss$/, test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader' use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'client/salix/src/styles')
]
}
}
]
}, { }, {
test: /\.(svg|png|ttf|woff|woff2)$/, test: /\.(svg|png|ttf|woff|woff2)$/,
loader: 'file-loader' loader: 'file-loader'