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 {
position: absolute;
@ -5,7 +6,7 @@ vn-login > div {
width: 100%;
margin: 0;
padding: 0;
color: #333;
color: $main-font-color;
font-size: 1.1em;
font-weight: normal;
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"
ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
<vn-horizontal style="align-items: center;">
<vn-none pad-medium-h style="color:#FFA410;">
<i class="material-icons" ng-if="address.isDefaultAddress">star</i>
<i class="material-icons"
<vn-none pad-medium-h>
<i class="material-icons" orange ng-if="address.isDefaultAddress">star</i>
<i class="material-icons" orange
vn-tooltip="Active first to set as default"
tooltip-position="left"
ng-if="!address.isActive">star_border</i>
<i class="material-icons pointer"
<i class="material-icons pointer" orange
ng-if="address.isActive && !address.isDefaultAddress"
vn-tooltip="Set as default"
tooltip-position="left"

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

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

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

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

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

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

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

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

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

@ -1,3 +1,5 @@
@import "colors";
.vn-grid {
border-collapse: collapse;
width: 100%;
@ -17,17 +19,17 @@
}
}
& > thead, & > tbody {
border-bottom: 3px solid #9D9D9D;
border-bottom: 3px solid $main-header;
}
& > tbody > tr {
border-bottom: 1px solid #9D9D9D;
border-bottom: 1px solid $main-header;
transition: background-color 200ms ease-in-out;
&.clickable {
cursor: pointer;
&: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 {
display: inline-block;
text-align: center;
color: rgba(#f7931e, 0.7);
color: rgba($main-01, 0.7);
transition: color 200ms ease-in-out;
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.material-icons {
display: block;
font-size: inherit;
color: inherit;
}
&:hover {
color: #f7931e;
&:not(.button):hover {
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 {
color: #9b9b9b
color: $secondary-font-color;
}
& 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 {
display: block;
text-align: center;
@ -18,7 +20,7 @@ vn-paging {
margin-left: 0;
}
&.active > a {
background: #3c393b;
background: $main-header;
color: #fff;
}
& > a,

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

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

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

@ -1,9 +1,11 @@
@import "colors";
vn-step-control {
display: flex;
justify-content: center;
.step-control {
border-top: 2px solid rgb(255,152,0);
border-top: 2px solid $main-01;
margin-bottom: 15px;
& > .steps {
@ -19,8 +21,8 @@ vn-step-control {
}
& > .steps > .step .circle {
border: 2px solid rgb(255,152,0);
background-color: #FFF;
border: 2px solid $main-01;
background-color: white;
align-content: center;
margin-top: -9.5px;
-moz-border-radius: 50%;
@ -32,7 +34,7 @@ vn-step-control {
}
& > .steps > .step .circle.active {
background-color: rgb(255,152,0);
background-color: $main-01;
}
& > .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 './zoom-image.scss';
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 {
padding: 2em;
@ -17,7 +19,7 @@ vn-home {
& > a {
overflow:hidden;
border-radius: 6px;
background-color: #FF9300;
background-color: $main-01;
color: white;
display: flex;
flex-direction: column;
@ -30,7 +32,7 @@ vn-home {
transition: opacity 250ms ease-out;
&:hover {
opacity: .7;
background-color: $hover;
}
& > vn-icon {
font-size: 4em;
@ -42,6 +44,7 @@ vn-home {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: white;
}
}
}

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

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

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

@ -1,3 +1,5 @@
@import "colors";
vn-main-menu {
#user {
display: inline-block;
@ -6,12 +8,15 @@ vn-main-menu {
height: 2.5em;
vertical-align: middle;
}
#user h6{
color: white;
}
& > div > vn-icon, & > div > a > vn-icon {
font-size: 2.2em;
cursor: pointer;
&:hover {
color: #FF9300;
color: $main-01;
}
}
.vn-popover ul {
@ -20,7 +25,7 @@ vn-main-menu {
color: white;
li {
background-color: #FF9300;
background-color: $main-01;
margin-bottom: .6em;
cursor: pointer;
padding: .8em;
@ -32,8 +37,7 @@ vn-main-menu {
vertical-align: middle;
}
&:hover {
background-color: #FF9300;
opacity: 0.7 !important;
background-color: $hover;
}
&:last-child {
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-content: $color-light-grey;
$bg-panel: $color-white;
$bg-dark-bar: $color-dark;
$bg-dark-bar: $main-header;
$bg-dark-menu: $color-dark-grey;
html [bg-main], .bg-main {
background-color: $bg-main;
background-color: $main-bg;
}
html [bg-minor], .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-orange: #f7931e;
$color-white: white;
$color-dark: #3d3d3d;
$color-dark: $main-header; //headerbar
$color-dark-grey: #424242;
$color-light-grey: #e5e5e5;
$color-medium-grey: #9b9b9b;
$color-grey: #c4c4c4;
$color-light-grey: $main-bg;
$color-medium-grey: $secondary-font-color;
$color-grey: #c4c4c4; //deprecated
$color-medium-green: rgba($color-green, 0.5);
$color-medium-orange: rgba($color-orange, 0.5);
$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 "font-family";
$font-color: $color-dark-grey;
body {
color: $font-color;
color: $main-font-color;
font-family: vn-font;
}
html [uppercase], .uppercase {
@ -12,12 +11,12 @@ html [uppercase], .uppercase {
}
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 [dark], .dark{color: $color-dark}
html [dark-grey], .dark-grey{color: $color-dark-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-orange], .medium-orange{color: $color-medium-orange}
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 './misc.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{
padding: 8px 0 0 0;
border-bottom: 1px solid $color-medium-grey;
border-bottom: 1px solid $main-header;
i {
color: $color-orange;
color: $main-01;
}
}
.tooltip {
@ -81,7 +81,7 @@ html [vn-center], .vn-center{
}
.list-footer{
font-family: vn-font-bold;
border-top: 3px solid $color-medium-grey;
border-top: 3px solid $main-header;
}
.list-element.warning{
background-color: $color-medium-orange;
@ -97,7 +97,7 @@ html [vn-center], .vn-center{
background-color: $color-light-orange;
}
.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
background-color: $color-orange;
background-color: $main-01;
}
html [pointer], .pointer{
@ -121,7 +121,7 @@ a {
transition: background-color 250ms ease-out;
&:hover {
background-color: rgba(0, 0, 0, .1);
background-color: $hover;
}
}
@ -134,6 +134,14 @@ vn-button-bar {
margin-top: $margin-small;
}
vn-tool-bar {
display: flex;
& > * {
margin-right: .6em;
}
}
vn-main-block {
display:block;
max-width: 1920px;
@ -150,7 +158,7 @@ vn-main-block {
.vn-descriptor {
.header {
background: #ffa410;
background: $main-01;
color: white;
justify-content: space-between;
align-items: stretch;
@ -183,7 +191,7 @@ vn-main-block {
font-size: 1.5em;
}
& > vn-icon.bright {
color: #ffa410;
color: $main-01;
opacity: 1;
}
}
@ -194,14 +202,6 @@ vn-main-block {
margin: 0 auto;
}
vn-tool-bar {
display: flex;
& > * {
margin-right: .6em;
}
}
.vn-list-item {
@extend .pad-medium;
@extend .border-solid-bottom;
@ -216,7 +216,7 @@ vn-tool-bar {
vn-icon {
opacity: .4;
color: #ffa410;
color: $main-01;
margin-left: .5em;
transition: opacity 250ms ease-out;
font-size: 2em;
@ -228,12 +228,12 @@ vn-tool-bar {
}
/** START - FORM ELEMENTS DISABLED **/
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;
color: inherit !important;
}
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 **/

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

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

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

@ -1,3 +1,4 @@
@import "colors";
h1 {
font-size: 32pt;
@ -23,4 +24,5 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .2em;
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'
}, {
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)$/,
loader: 'file-loader'