Style fixes

This commit is contained in:
Juan Ferrer 2019-02-06 11:24:29 +01:00
parent 1355fb80e4
commit 03406a7d9b
53 changed files with 398 additions and 1326 deletions

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-calendar { vn-calendar {
display: block; display: block;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-check { vn-check {
position: relative; position: relative;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-chip { vn-chip {
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-date-picker { vn-date-picker {
.mdl-chip__action { .mdl-chip__action {

View File

@ -1,5 +1,5 @@
@import "effects"; @import "effects";
@import "colors"; @import "variables";
vn-drop-down { vn-drop-down {
.dropdown { .dropdown {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-fetched-tags { vn-fetched-tags {
&.noTitle vn-one { &.noTitle vn-one {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-icon-button { vn-icon-button {
outline: 0; outline: 0;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
@import '../textfield/style.scss'; @import '../textfield/style.scss';
vn-input-number { vn-input-number {

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-input-range { vn-input-range {
label { label {
color: $main-01; color: $main-01;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
@import '../textfield/style.scss'; @import '../textfield/style.scss';
vn-input-time { vn-input-time {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-label-value > section { vn-label-value > section {
& > vn-label { & > vn-label {

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-log { vn-log {
vn-td { vn-td {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-paging { vn-paging {
display: block; display: block;

View File

@ -1,4 +1,4 @@
@import "padding"; @import "variables";
vn-searchbar { vn-searchbar {
padding-top: 6px; padding-top: 6px;
@ -13,6 +13,6 @@ vn-searchbar {
max-height: 48em; max-height: 48em;
& > form { & > form {
@extend .pad-large; padding: $pad-large;
} }
} }

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-snackbar #shapes { vn-snackbar #shapes {
max-height: 20.625em; max-height: 20.625em;

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-step-control { vn-step-control {
display: flex; display: flex;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-textarea { vn-textarea {
& > .mdl-textfield { & > .mdl-textfield {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-textfield { vn-textfield {
margin: 20px 0!important; margin: 20px 0!important;
display: inline-block; display: inline-block;

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-treeview { vn-treeview {
ul { ul {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
/** /**
* Rewrited CSS rules from Material Design Lite. * Rewrited CSS rules from Material Design Lite.

View File

@ -1,9 +1,7 @@
@import "background";
@import "margin";
@import "variables"; @import "variables";
body { body {
@extend .bg-content; background-color: $bg-content;
overflow: auto; overflow: auto;
} }
vn-app { vn-app {
@ -56,7 +54,7 @@ vn-app {
padding-top: $topbar-height; padding-top: $topbar-height;
} }
.content-block { .content-block {
@extend .margin-medium; margin: $margin-medium;
form vn-horizontal { form vn-horizontal {
& > * { & > * {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-login { vn-login {
position: absolute; position: absolute;

View File

@ -1,4 +1,4 @@
@import "background"; @import "variables";
vn-topbar { vn-topbar {
display: flex; display: flex;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-user-configuration-popover { vn-user-configuration-popover {
vn-popover { vn-popover {

View File

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

View File

@ -1,8 +1,5 @@
@import "colors"; @import "./colors";
@import "./variables";
$border-color: #AAA;
$border-thin: 1px;
$border-thick: 2px;
html [border-none], .border-none { html [border-none], .border-none {
border: 0; border: 0;

View File

@ -1,7 +1,7 @@
@import "./effects"; @import "./effects";
@import "./colors"; @import "./colors";
@import "./padding"; @import "./variables";
.vn-descriptor { .vn-descriptor {
box-shadow: 0 .1em .2em rgba(1, 1, 1, .2); box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
@ -28,13 +28,13 @@
} }
} }
& > .body { & > .body {
@extend .pad-small; padding: $pad-small;
& > * { & > * {
@extend .pad-small; padding: $pad-small;
} }
& > .attributes > h5 { & > .attributes > h5 {
@extend .pad-small-bottom; padding-bottom: $pad-small;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -46,7 +46,7 @@
padding: 0; padding: 0;
& > vn-icon { & > vn-icon {
@extend .pad-small; padding: $pad-small;
color: #666; color: #666;
opacity: .4; opacity: .4;
font-size: 1.5em; font-size: 1.5em;
@ -64,7 +64,7 @@
padding: 0; padding: 0;
& > a { & > a {
@extend .pad-small; padding: $pad-small;
& > vn-icon { & > vn-icon {
font-size: 1.8em; font-size: 1.8em;

View File

@ -1,5 +1,5 @@
@import "colors"; @import "./colors";
@import "font-family"; @import "./font-family";
body { body {
color: $main-font-color; color: $main-font-color;
@ -9,16 +9,16 @@ html [uppercase], .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
html [orange], .orange{color: $main-01} html [orange], .orange {color: $main-01}
html [green], .green{color: $main-02} html [green], .green {color: $main-02}
html [blue], .blue{color: $main-03} html [blue], .blue {color: $main-03}
html [red], html [alert], .red, .alert {color: $alert-01} html [red], html [alert], .red, .alert {color: $alert-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: $hover} 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}
html [light-orange], .light-orange{color: $color-light-orange} html [light-orange], .light-orange {color: $color-light-orange}

View File

@ -1,8 +1,4 @@
@import "variables";
$margin-none: 0;
$margin-small: 8px;
$margin-medium: 16px;
$margin-large: 32px;
/* None */ /* None */
@ -16,101 +12,101 @@ html [margin-small], .margin-small {
margin: $margin-small; margin: $margin-small;
} }
html [margin-small-top], .margin-small-top { html [margin-small-top], .margin-small-top {
margin-top: $margin-small; margin-top: $margin-small;
} }
html [margin-small-left], .margin-small-left { html [margin-small-left], .margin-small-left {
margin-left: $margin-small; margin-left: $margin-small;
} }
html [margin-small-right], .margin-small-right { html [margin-small-right], .margin-small-right {
margin-right: $margin-small; margin-right: $margin-small;
} }
html [margin-small-bottom], .margin-small-bottom { html [margin-small-bottom], .margin-small-bottom {
margin-bottom: $margin-small; margin-bottom: $margin-small;
} }
html [margin-small-v], .margin-small-v { html [margin-small-v], .margin-small-v {
margin-top: $margin-small; margin-top: $margin-small;
margin-bottom: $margin-small; margin-bottom: $margin-small;
} }
html [margin-small-h], .margin-small-h { html [margin-small-h], .margin-small-h {
margin-left: $margin-small; margin-left: $margin-small;
margin-right: $margin-small; margin-right: $margin-small;
} }
/* Medium */ /* Medium */
html [margin-medium], .margin-medium { html [margin-medium], .margin-medium {
margin: $margin-medium; margin: $margin-medium;
} }
html [margin-medium-top], .margin-medium-top { html [margin-medium-top], .margin-medium-top {
margin-top: $margin-medium; margin-top: $margin-medium;
} }
html [margin-medium-left], .margin-medium-left { html [margin-medium-left], .margin-medium-left {
margin-left: $margin-medium; margin-left: $margin-medium;
} }
html [margin-medium-right], .margin-medium-right { html [margin-medium-right], .margin-medium-right {
margin-right: $margin-medium; margin-right: $margin-medium;
} }
html [margin-medium-bottom], .margin-medium-bottom { html [margin-medium-bottom], .margin-medium-bottom {
margin-bottom: $margin-medium; margin-bottom: $margin-medium;
} }
html [margin-medium-v], .margin-medium-v { html [margin-medium-v], .margin-medium-v {
margin-top: $margin-medium; margin-top: $margin-medium;
margin-bottom: $margin-medium; margin-bottom: $margin-medium;
} }
html [margin-medium-h], .margin-medium-h { html [margin-medium-h], .margin-medium-h {
margin-left: $margin-medium; margin-left: $margin-medium;
margin-right: $margin-medium; margin-right: $margin-medium;
} }
/* Large */ /* Large */
html [margin-large], .margin-large { html [margin-large], .margin-large {
margin: $margin-large; margin: $margin-large;
} }
html [margin-large-top], .margin-large-top { html [margin-large-top], .margin-large-top {
margin-top: $margin-large; margin-top: $margin-large;
} }
html [margin-large-left], .margin-large-left { html [margin-large-left], .margin-large-left {
margin-left: $margin-large; margin-left: $margin-large;
} }
html [margin-large-right], .margin-large-right { html [margin-large-right], .margin-large-right {
margin-right: $margin-large; margin-right: $margin-large;
} }
html [margin-large-bottom], .margin-large-bottom { html [margin-large-bottom], .margin-large-bottom {
margin-bottom: $margin-large; margin-bottom: $margin-large;
} }
html [margin-large-v], .margin-large-v { html [margin-large-v], .margin-large-v {
margin-top: $margin-large; margin-top: $margin-large;
margin-bottom: $margin-large; margin-bottom: $margin-large;
} }
html [margin-large-h], .margin-large-h { html [margin-large-h], .margin-large-h {
margin-left: $margin-large; margin-left: $margin-large;
margin-right: $margin-large; margin-right: $margin-large;
} }
/* Minus Small */ /* Minus Small */
html [margin--small], .margin--small { html [margin--small], .margin--small {
margin: -$margin-small; margin: -$margin-small;
} }
html [margin--small-top], .margin--small-top { html [margin--small-top], .margin--small-top {
margin-top: -$margin-small; margin-top: -$margin-small;
} }
html [margin--small-left], .margin--small-left { html [margin--small-left], .margin--small-left {
margin-left: -$margin-small; margin-left: -$margin-small;
} }
html [margin--small-right], .margin--small-right { html [margin--small-right], .margin--small-right {
margin-right: -$margin-small; margin-right: -$margin-small;
} }
html [margin--small-bottom], .margin--small-bottom { html [margin--small-bottom], .margin--small-bottom {
margin-bottom: -$margin-small; margin-bottom: -$margin-small;
} }
html [margin--small-v], .margin--small-v { html [margin--small-v], .margin--small-v {
margin-top: -$margin-small; margin-top: -$margin-small;
margin-bottom: -$margin-small; margin-bottom: -$margin-small;
} }
html [margin--small-h], .margin--small-h { html [margin--small-h], .margin--small-h {
margin-left: -$margin-small; margin-left: -$margin-small;
margin-right: -$margin-small; margin-right: -$margin-small;
} }

View File

@ -1,7 +1,5 @@
@import "./padding"; @import "./variables";
@import "./margin";
@import "./colors"; @import "./colors";
@import "./border";
@import "./effects"; @import "./effects";
a:focus, a:focus,
@ -160,8 +158,8 @@ a.vn-list-item {
} }
.vn-list-item { .vn-list-item {
@extend .pad-medium; padding: $pad-medium;
@extend .border-solid-bottom; border-bottom: $border-thin solid $border-color;
display: block; display: block;
text-decoration: none; text-decoration: none;

View File

@ -1,7 +1,5 @@
@import "./colors"; @import "./colors";
@media screen and (max-width: 1920px){ @media screen and (max-width: 1920px){
.catalog-list .product { .catalog-list .product {
width: 25%; width: 25%;

View File

@ -1,8 +1,4 @@
@import "./variables";
$pad-none: 0;
$pad-small: 8px;
$pad-medium: 16px;
$pad-large: 32px;
/* None */ /* None */

View File

@ -1,6 +1,5 @@
@import "./colors"; @import "./colors";
@import "./margin"; @import "./variables";
@import "./padding";
.summary { .summary {
margin: 0 auto; margin: 0 auto;
@ -8,7 +7,7 @@
& > div { & > div {
& > h5 { & > h5 {
@extend .pad-small; padding: $pad-small;
border: none; border: none;
background: $main-01; background: $main-01;
color: $color-white; color: $color-white;
@ -21,10 +20,10 @@
} }
& > vn-horizontal { & > vn-horizontal {
flex-wrap: wrap; flex-wrap: wrap;
@extend .pad-medium; padding: $pad-medium;
h4 { h4 {
@extend .margin-medium-bottom; margin-bottom: $margin-medium;
text-transform: uppercase; text-transform: uppercase;
font-size: 15pt; font-size: 15pt;
line-height: 1; line-height: 1;
@ -38,7 +37,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
& > * { & > * {
@extend .margin-small; margin: $margin-small;
min-width: 14em; min-width: 14em;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
@ -80,27 +79,3 @@
font-size: .9em font-size: .9em
} }
} }
.state {
padding: 5px;
background-color: $main-01;
color: white;
p {
font-size: 13px;
line-height: 15px;
text-align: center;
margin: .1em 0;
&:nth-child(1) {
text-transform: uppercase;
}
}
vn-one {
padding: 0;
&:nth-child(1) {
border-right: .1em solid white;
}
}
}

View File

@ -1,4 +1,4 @@
@import "colors"; @import "./colors";
h1 { h1 {
font-size: 32pt; font-size: 32pt;

View File

@ -1,4 +1,34 @@
@import "./colors";
$menu-width: 16em; $menu-width: 16em;
$topbar-height: 4em; $topbar-height: 4em;
$mobile-width: 800px; $mobile-width: 800px;
// Background color
$bg-main: $color-green;
$bg-minor: $color-orange;
$bg-content: $color-light-grey;
$bg-panel: $color-white;
$bg-dark-bar: $main-header;
$bg-dark-menu: $color-dark-grey;
// Padding
$pad-none: 0;
$pad-small: 8px;
$pad-medium: 16px;
$pad-large: 32px;
// Margin
$margin-none: 0;
$margin-small: 8px;
$margin-medium: 16px;
$margin-large: 32px;
// Border
$border-color: #AAA;
$border-thin: 1px;
$border-thick: 2px;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-claim-index { vn-claim-index {
.Pendiente { .Pendiente {

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-client-summary { vn-client-summary {
.alert span { .alert span {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-client-web-payment { vn-client-web-payment {
vn-icon[icon=clear] { vn-icon[icon=clear] {

View File

@ -31,7 +31,7 @@
</vn-float-button> </vn-float-button>
</a> </a>
</div> </div>
<vn-horizontal class="state"> <vn-horizontal class="item-state">
<vn-one> <vn-one>
<p translate>Visible</p> <p translate>Visible</p>
<p>{{$ctrl.item.visible}}</p> <p>{{$ctrl.item.visible}}</p>

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-item-diary { vn-item-diary {
& > vn-vertical { & > vn-vertical {

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-item-product { vn-item-product {
display: block; display: block;

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-item-last-entries { vn-item-last-entries {
.round { .round {
background-color: $lines; background-color: $lines;

View File

@ -7,7 +7,7 @@
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}"
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{$ctrl.item.image}}" on-error-src/> zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{$ctrl.item.image}}" on-error-src/>
</vn-one> </vn-one>
<vn-horizontal class="state"> <vn-horizontal class="item-state">
<vn-one> <vn-one>
<p translate>Visible</p> <p translate>Visible</p>
<p>{{$ctrl.summary.visible}}</p> <p>{{$ctrl.summary.visible}}</p>

View File

@ -1,5 +1,35 @@
@import "./colors";
vn-item-summary { vn-item-summary {
p { p {
margin: 0; margin: 0;
} }
}
.item-state {
padding: .4em;
background-color: $main-01;
color: white;
p {
font-size: .8em;
text-align: center;
margin: 0;
&:first-child {
text-transform: uppercase;
line-height: 1;
}
&:last-child {
font-size: 1.5em;
font-weight: bold;
}
}
vn-one {
padding: 0;
&:nth-child(1) {
border-right: .1em solid white;
}
}
} }

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-dialog.modal-form { vn-dialog.modal-form {
vn-horizontal.header{ vn-horizontal.header{

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-order-catalog .catalog-header { vn-order-catalog .catalog-header {
border-color: $lines; border-color: $lines;

View File

@ -1,26 +1,27 @@
@import "colors"; @import "variables";
@import "padding"; @import "variables";
vn-catalog-filter > div { vn-catalog-filter > div {
& > .input { & > .input {
@extend .pad-medium-h; padding-left: $pad-medium;
padding-right: $pad-medium;
border-color: $lines; border-color: $lines;
border-bottom: 1px solid rgba($lines, 0.5); border-bottom: 1px solid rgba($lines, 0.5);
} }
.item-category { .item-category {
@extend .pad-small; padding: $pad-small;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
& > vn-one { & > vn-one {
@extend .pad-small; padding: $pad-small;
min-width: 33.33%; min-width: 33.33%;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
& > vn-icon { & > vn-icon {
@extend .pad-small; padding: $pad-small;
background-color: $secondary-font-color; background-color: $secondary-font-color;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@ -39,6 +40,6 @@ vn-catalog-filter > div {
} }
.chips { .chips {
flex-wrap: wrap; flex-wrap: wrap;
@extend .pad-medium; padding: $pad-medium;
} }
} }

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-order-prices-popover { vn-order-prices-popover {
width: 150px; width: 150px;

View File

@ -1,4 +1,4 @@
@import 'colors'; @import "variables";
vn-ticket-index{ vn-ticket-index{
vn-icon-menu{ vn-icon-menu{

View File

@ -1,4 +1,4 @@
@import "colors"; @import "variables";
vn-ticket-sale { vn-ticket-sale {
vn-popover.edit { vn-popover.edit {
div.popover{ div.popover{

1349
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,10 +4,10 @@
"author": "Verdnatura Levante SL", "author": "Verdnatura Levante SL",
"description": "Salix backend", "description": "Salix backend",
"license": "GPL-3.0", "license": "GPL-3.0",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://gitea.verdnatura.es/verdnatura/salix" "url": "https://gitea.verdnatura.es/verdnatura/salix"
}, },
"dependencies": { "dependencies": {
"compression": "^1.7.3", "compression": "^1.7.3",
"fs-extra": "^5.0.0", "fs-extra": "^5.0.0",
@ -36,7 +36,7 @@
"@babel/register": "^7.0.0", "@babel/register": "^7.0.0",
"angular-mocks": "^1.7.4", "angular-mocks": "^1.7.4",
"babel-loader": "^8.0.5", "babel-loader": "^8.0.5",
"css-loader": "^0.25.0", "css-loader": "^2.1.0",
"del": "^2.2.2", "del": "^2.2.2",
"eslint": "^5.12.0", "eslint": "^5.12.0",
"eslint-config-google": "^0.11.0", "eslint-config-google": "^0.11.0",
@ -73,9 +73,9 @@
"node-sass": "^4.9.3", "node-sass": "^4.9.3",
"nodemon": "^1.18.5", "nodemon": "^1.18.5",
"plugin-error": "^1.0.1", "plugin-error": "^1.0.1",
"raw-loader": "*", "raw-loader": "^1.0.0",
"sass-loader": "^6.0.7", "sass-loader": "^7.1.0",
"style-loader": "^0.20.3", "style-loader": "^0.23.1",
"webpack": "^4.28.3", "webpack": "^4.28.3",
"webpack-cli": "^3.2.1", "webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",

View File

@ -38,15 +38,26 @@ let baseConfig = {
} }
}, { }, {
test: /\.css$/, test: /\.css$/,
loader: 'style-loader!css-loader' use: [
{
loader: 'style-loader'
}, {
loader: 'css-loader'
}
]
}, { }, {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{ {
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
// FIXME: Don't work in Firefox
// https://github.com/webpack-contrib/style-loader/issues/303
// sourceMap: true,
includePaths: [ includePaths: [
path.resolve(__dirname, 'front/salix/styles') path.resolve(__dirname, 'front/salix/styles')
] ]