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

Style fixes

This commit is contained in:
Juan Ferrer 2019-02-22 14:34:11 +01:00
parent c590dc6270
commit 9fc6a2c4c2
15 changed files with 273 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/salix/styles/border.scss
View File

@ -1,43 +1,19 @@
@import "./variables"; @import "./variables";
html [border-none], .border-none {
border: 0;
}
/* Solid border */
html [border-solid], .border-solid { html [border-solid], .border-solid {
border: $border-thin solid $border-color; border: $border-thin-light;
} }
html [border-solid-top], .border-solid-top { html [border-solid-top], .border-solid-top {
border-top: $border-thin solid $border-color; border-top: $border-thin-light;
} }
html [border-solid-left], .border-solid-left { html [border-solid-left], .border-solid-left {
border-left: $border-thin solid $border-color; border-left: $border-thin-light;
} }
html [border-solid-right], .border-solid-right { html [border-solid-right], .border-solid-right {
border-right: $border-thin solid $border-color; border-right: $border-thin-light;
} }
html [border-solid-bottom], .border-solid-bottom { html [border-solid-bottom], .border-solid-bottom {
border-bottom: $border-thin solid $border-color; border-bottom: $border-thin-light;
}
/* Dashed border */
html [border-dashed], .border-dashed {
border: $border-thin dashed $border-color;
}
html [border-dashed-top], .border-dashed-top {
border-top: $border-thin dashed $border-color;
}
html [border-dashed-left], .border-dashed-left {
border-left: $border-thin dashed $border-color;
}
html [border-dashed-right], .border-dashed-right {
border-right: $border-thin dashed $border-color;
}
html [border-dashed-bottom], .border-dashed-bottom {
border-bottom: $border-thin dashed $border-color;
} }
/* Border Radius */ /* Border Radius */

1
front/salix/styles/index.js
View File

@ -12,4 +12,5 @@ import './effects.scss';
import './order-product.scss'; import './order-product.scss';
import './summary.scss'; import './summary.scss';
import './descriptor.scss'; import './descriptor.scss';
import './list.scss';
import './modal-form.scss'; import './modal-form.scss';

46
front/salix/styles/list.scss Normal file
View File

@ -0,0 +1,46 @@
@import "./effects";
.vn-list {
max-width: 36em;
margin: 0 auto;
a.vn-list-item {
@extend %clickable;
}
.vn-list-item {
border-bottom: $border-thin-light;
display: block;
text-decoration: none;
color: inherit;
& > vn-horizontal {
padding: $pad-medium;
& > vn-one {
overflow: hidden;
}
& > .buttons {
align-items: center;
vn-icon-button {
opacity: .4;
color: $color-main;
margin-left: .5em;
transition: opacity 250ms ease-out;
padding: 0;
font-size: 2em;
&:hover {
opacity: 1;
}
}
}
}
}
vn-empty-rows {
display: block;
text-align: center;
padding: 1.5em;
box-sizing: border-box;
}
}

108
front/salix/styles/misc.scss
View File

@ -5,7 +5,6 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a:focus, a:focus,
input:focus, input:focus,
button:focus { button:focus {
@ -23,8 +22,7 @@ input[type=reset]::-moz-focus-inner {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
a, .link {
a, .link{
color: $color-font-link; color: $color-font-link;
text-decoration: none; text-decoration: none;
} }
@ -35,23 +33,20 @@ a, .link{
text-decoration: underline; text-decoration: underline;
} }
} }
.totalBox { .totalBox {
border: 1px solid #CCC; border: 1px solid #CCC;
text-align: right!important; text-align: right !important;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 18px; padding: 18px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.form { .form {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $pad-large; padding: $pad-large;
max-width: 1000px; max-width: 1000px;
} }
html [fixed-bottom-right] { html [fixed-bottom-right] {
position: fixed; position: fixed;
bottom: 2em; bottom: 2em;
@ -60,87 +55,53 @@ html [fixed-bottom-right] {
html [text-center], .text-center { html [text-center], .text-center {
text-align: center; text-align: center;
} }
html [text-right], .text-right{ html [text-right], .text-right {
text-align: right; text-align: right;
} }
html [text-left], .text-left{ html [text-left], .text-left {
text-align: left; text-align: left;
} }
html [vn-right], .vn-right{ html [vn-right], .vn-right {
float: right; float: right;
} }
html [vn-left], .vn-left{ html [vn-left], .vn-left {
float: left; float: left;
} }
html [vn-center], .vn-center{ html [vn-center], .vn-center {
justify-content: center; justify-content: center;
} }
.list > vn-none {
.list > vn-none{
min-width: 60px; min-width: 60px;
} }
.list-element {
.list-element{
padding: 8px 0 0 0; padding: 8px 0 0 0;
border-bottom: 1px solid $color-spacer; border-bottom: 1px solid $color-spacer;
i { i {
color: $color-main; color: $color-main;
} }
} }
.tooltip {
.list-header{
border-bottom: 3px solid $color-spacer;
font-family: vn-font-bold;
text-align: center
}
.list-element{
white-space: nowrap;
}
}
.list-footer{
font-family: vn-font-bold;
border-top: 3px solid $color-spacer;
}
.list-element.warning{
background-color: $color-main-medium;
}
.list-element.success{
background-color: $color-success-medium;
}
.list-element.success:hover{
background-color: $color-success-light;
}
.list-element.warning:hover{
background-color: $color-main-light;
}
.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
background-color: $color-main; background-color: $color-main;
} }
html [pointer], .pointer{ html [pointer], .pointer{
cursor: pointer; cursor: pointer;
} }
html [noDrop], .noDrop{ html [noDrop], .noDrop{
cursor: no-drop; cursor: no-drop;
} }
html [compact], .compact{ html [compact], .compact{
max-width: 950px; max-width: $width-compact;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
button { button {
@extend %clickable; @extend %clickable;
} }
vn-button-bar { vn-button-bar {
display: block; display: block;
margin-top: $margin-small; margin-top: $margin-small;
} }
vn-tool-bar { vn-tool-bar {
display: flex; display: flex;
@ -149,51 +110,6 @@ vn-tool-bar {
} }
} }
.vn-list {
max-width: 36em;
margin: 0 auto;
a.vn-list-item {
@extend %clickable;
}
.vn-list-item {
border-bottom: $border-thin solid $color-spacer;
display: block;
text-decoration: none;
color: inherit;
& > vn-horizontal {
padding: $pad-medium;
& > vn-one {
overflow: hidden;
}
& > .buttons {
align-items: center;
vn-icon-button {
opacity: .4;
color: $color-main;
margin-left: .5em;
transition: opacity 250ms ease-out;
padding: 0;
font-size: 2em;
&:hover {
opacity: 1;
}
}
}
}
}
vn-empty-rows {
display: block;
text-align: center;
padding: 1.5em;
box-sizing: border-box;
}
}
/** START - FORM ELEMENTS DISABLED **/ /** START - FORM ELEMENTS DISABLED **/
fieldset[disabled] .mdl-textfield .mdl-textfield__input, fieldset[disabled] .mdl-textfield .mdl-textfield__input,
@ -215,7 +131,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.counter { .counter {
@extend %active; @extend %active;
@ -223,7 +138,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
font-size: 0.7em font-size: 0.7em
} }
} }
.vn-grid { .vn-grid {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;

152
front/salix/styles/order-product.scss
View File

@ -1,100 +1,96 @@
@import "./variables"; @import "./variables";
@media screen and (max-width: 1920px){
.catalog-list .product {
width: 25%;
}
}
@media screen and (max-width: 1800px){
.catalog-list .product {
width: 33.33%
}
}
@media screen and (max-width: 1600px){
.catalog-list .product {
width: 50%
}
}
@media screen and (max-width: 1280px){
.catalog-list .product {
width: 100%
}
}
.catalog-list { .catalog-list {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
.product { & > .product {
box-sizing: border-box; box-sizing: border-box;
padding: 4px; padding: $pad-small;
width: 33.33%;
& > vn-one { & > div {
border: 1px solid rgba($color-spacer, 0.5); display: flex;
display: block border: $border-thin;
} height: 11em;
.image { .image {
min-width: 10em; width: 11em;
max-width: 10em; height: 11em;
min-height: 10em;
max-height: 10em;
img { img {
width: 100%; width: 100%;
height: 100% height: 100%
}
}
.description {
box-sizing: border-box;
& > vn-vertical {
height: 100%;
& > h2 {
text-transform: uppercase;
font-family: vn-font;
margin: 0 0 0.5em 0;
font-weight: 100;
line-height: 1em;
font-size: 0.9em;
} }
}
.description {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
width: 100%;
overflow: hidden;
padding: $pad-small;
& > span { & > h3 {
font-family: vn-font;
margin: 0;
margin-bottom: .4em;
font-weight: normal;
line-height: initial;
font-size: 1.2em;
max-height:2.2em;
overflow: hidden;
}
& > h4 {
color: $color-font-secondary; color: $color-font-secondary;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.5em; margin-bottom: .4em;
font-weight: bold; line-height: initial;
font-size: 0.8em font-size: 1em;
flex: 1;
} }
& > .tags {
& > vn-label-value { padding-bottom: .4em;
font-size: 0.8em height: 3em;
& > vn-label-value {
font-size: .8em
}
}
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .8em;
& > .price {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
& > span {
flex: 1;
&:first-child,
&:last-child {
font-size: 1.4em
}
}
}
& > vn-icon-button {
padding: 0;
} }
} }
} }
@media screen and (max-width: 1600px) {
.price { width: 50%;
align-items: center; }
margin-top: auto; @media screen and (max-width: 1280px) {
font-size: 0.8em; width: 100%;
& > vn-one span:first-child {
color: $color-font-secondary
}
& > vn-one span:first-child, & > vn-one span:last-child {
font-size: 1.2em
}
vn-icon[icon="add_circle"] {
color: $color-main
}
} }
} }
} }

19
front/salix/styles/variables.scss
View File

@ -3,6 +3,12 @@ $menu-width: 16em;
$topbar-height: 4em; $topbar-height: 4em;
$mobile-width: 800px; $mobile-width: 800px;
// Width
$width-small: 36em;
$width-compact: 60em;
$width-large: 80em;
// Padding // Padding
$pad-none: 0; $pad-none: 0;
@ -17,12 +23,6 @@ $margin-small: 8px;
$margin-medium: 16px; $margin-medium: 16px;
$margin-large: 32px; $margin-large: 32px;
// Border
$border-color: #AAA;
$border-thin: .1em;
$border-thick: .15em;
// Light theme // Light theme
$color-header: #3d3d3d; $color-header: #3d3d3d;
@ -96,4 +96,9 @@ $color-notice-medium: darken($color-notice, 20%);
$color-notice-light: darken($color-notice, 35%); $color-notice-light: darken($color-notice, 35%);
$color-alert-medium: darken($color-alert, 20%); $color-alert-medium: darken($color-alert, 20%);
$color-alert-light: darken($color-alert, 35%); $color-alert-light: darken($color-alert, 35%);
/**/ /**/
// Border
$border-thin: .1em solid $color-spacer;
$border-thin-light: .1em solid $color-spacer-light;

97
modules/order/front/catalog/index.html
View File

@ -4,7 +4,7 @@
filter="$ctrl.filter" filter="$ctrl.filter"
limit="50" limit="50"
data="items" data="items"
on-data-change="$ctrl.onDataChange()" > on-data-change="$ctrl.onDataChange()">
</vn-crud-model> </vn-crud-model>
<div class="main-with-right-menu"> <div class="main-with-right-menu">
<vn-card> <vn-card>
@ -38,56 +38,51 @@
</vn-horizontal> </vn-horizontal>
<vn-horizontal class="catalog-list" pad-small> <vn-horizontal class="catalog-list" pad-small>
<section class="product" ng-repeat="item in items"> <section class="product" ng-repeat="item in items">
<vn-one> <div>
<vn-horizontal> <div class="image">
<vn-one class="image"> <img
<img ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}"
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}" on-error-src/>
on-error-src/> </div>
</vn-one> <div class="description">
<vn-one pad-small class="description ellipsize"> <h3>
<vn-vertical> {{::item.name}}
<h2 class="ellipsize" vn-tooltip="{{::item.name}}"> </h3>
{{::item.name}} <h4 class="ellipsize">
</h2> <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
<span class="ellipsize" vn-tooltip="{{::item.subName}}"> </h4>
{{::item.subName}} <div class="tags">
</span> <vn-label-value
ng-if="::item.value5"
<vn-label-value label="{{::item.tag5}}"
label="{{::item.tag5}}" value="{{::item.value5}}">
value="{{::item.value5}}"> </vn-label-value>
</vn-label-value> <vn-label-value
<vn-label-value ng-if="::item.value6"
label="{{::item.tag6}}" label="{{::item.tag6}}"
value="{{::item.value6}}"> value="{{::item.value6}}">
</vn-label-value> </vn-label-value>
<vn-label-value <vn-label-value
label="{{::item.tag7}}" ng-if="::item.value7"
value="{{::item.value7}}"> label="{{::item.tag7}}"
</vn-label-value> value="{{::item.value7}}">
<vn-label-value </vn-label-value>
label="{{::item.tag8}}" </div>
value="{{::item.value8}}"> <div class="footer">
</vn-label-value> <div class="price">
<span>{{::item.available}}</span>
<vn-horizontal class="price"> <span translate>from</span>
<vn-one> <span>{{::item.price | currency: 'EUR': 2}}</span>
<span>{{::item.available}}</span> </div>
<span translate>from</span> <vn-icon-button
<span>{{::item.price | currency: 'EUR': 2}}</span> icon="add_circle"
</vn-one> ng-click="$ctrl.preview($event, item)"
<vn-auto> vn-tooltip="Add">
<a href="" vn-tooltip="Add"> </vn-icon-button>
<vn-icon-button icon="add_circle" ng-click="$ctrl.preview($event, item)"></vn-icon-button> </div>
</a> </div>
</vn-auto> </div>
</vn-horizontal>
</vn-vertical>
</vn-one>
</vn-horizontal>
</vn-one>
</section> </section>
</vn-horizontal> </vn-horizontal>
<vn-horizontal ng-if="!model.data || model.data.length == 0"> <vn-horizontal ng-if="!model.data || model.data.length == 0">

3
modules/order/front/catalog/style.scss
View File

@ -1,8 +1,7 @@
@import "variables"; @import "variables";
vn-order-catalog .catalog-header { vn-order-catalog .catalog-header {
border-color: $color-spacer; border-bottom: $border-thin;
border-bottom: 1px solid rgba($color-spacer, 0.5);
vn-one:first-child { vn-one:first-child {
padding-top: 2em; padding-top: 2em;

2
modules/order/front/filter/style.scss
View File

@ -6,7 +6,7 @@ vn-catalog-filter > div {
padding-left: $pad-medium; padding-left: $pad-medium;
padding-right: $pad-medium; padding-right: $pad-medium;
border-color: $color-spacer; border-color: $color-spacer;
border-bottom: 1px solid rgba($color-spacer, 0.5); border-bottom: $border-thin;
} }
.item-category { .item-category {
padding: $pad-small; padding: $pad-small;

6
modules/order/front/line/style.scss
View File

@ -1,4 +1,6 @@
vn-order-line{ @import "./variables";
vn-order-line {
vn-table { vn-table {
img { img {
border-radius: 50%; border-radius: 50%;
@ -8,7 +10,7 @@ vn-order-line{
} }
.taxes { .taxes {
max-width: 10em; max-width: 10em;
border: .1em solid #CCC; border: $border-thin-light;
text-align: right; text-align: right;
padding: .5em !important; padding: .5em !important;

4
modules/order/front/summary/style.scss
View File

@ -1,8 +1,10 @@
@import "./variables";
vn-order-summary .summary > div > vn-horizontal > vn-one { vn-order-summary .summary > div > vn-horizontal > vn-one {
min-width: 10em !important; min-width: 10em !important;
&.taxes { &.taxes {
border: .1em solid #CCC; border: $border-thin-light;
text-align: right; text-align: right;
padding: .5em !important; padding: .5em !important;

4
modules/order/front/volume/style.scss
View File

@ -1,6 +1,8 @@
@import "./variables";
.totalBox { .totalBox {
border: 1px solid #CCC; border: $border-thin-light;
text-align: left; text-align: left;
align-self: flex-end; align-self: flex-end;
} }

107
modules/ticket/front/picture/index.html
View File

@ -8,64 +8,55 @@
auto-load="true"> auto-load="true">
</vn-crud-model> </vn-crud-model>
<vn-vertical> <vn-vertical>
<vn-card pad-large> <vn-card pad-medium>
<vn-vertical> <vn-horizontal class="catalog-list" pad-small>
<vn-horizontal class="catalog-list" pad-small> <section class="product" ng-repeat="sale in sales">
<section class="product" ng-repeat="sale in sales"> <div>
<vn-one> <div class="image">
<vn-horizontal> <img
<vn-one class="image"> ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}"
<img zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" on-error-src/>
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}" </div>
on-error-src/> <div class="description">
</vn-one> <h3>
<vn-one pad-small class="description ellipsize"> <span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
<vn-vertical> {{::sale.item.name}}
<h2 class="ellipsize link" vn-tooltip="{{::sale.item.name}}" </span>
ng-click="$ctrl.showDescriptor($event, sale.item.id)"> </h3>
{{::sale.item.name}} <h4 class="ellipsize">
</h2> <span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
<span class="ellipsize" vn-tooltip="{{::sale.item.subName}}"> </h4>
{{::sale.item.subName}} <div class="tags">
</span> <vn-label-value
label="{{::sale.item.tag5}}"
<vn-label-value value="{{::sale.item.value5}}">
label="{{::sale.item.tag5}}" </vn-label-value>
value="{{::sale.item.value5}}"> <vn-label-value
</vn-label-value> label="{{::sale.item.tag6}}"
<vn-label-value value="{{::sale.item.value6}}">
label="{{::sale.item.tag6}}" </vn-label-value>
value="{{::sale.item.value6}}"> <vn-label-value
</vn-label-value> label="{{::sale.item.tag7}}"
<vn-label-value value="{{::sale.item.value7}}">
label="{{::sale.item.tag7}}" </vn-label-value>
value="{{::sale.item.value7}}"> </div>
</vn-label-value> <div class="footer">
<vn-label-value <div class="price">
label="{{::sale.item.tag8}}" <span>{{::sale.quantity}}</span>
value="{{::sale.item.value8}}"> <span translate>by</span>
</vn-label-value> <span>{{::sale.price | currency: 'EUR': 2}}</span>
</div>
<vn-horizontal class="price"> </div>
<vn-one> </div>
<span>{{::sale.quantity}}</span> </div>
<span translate>by</span> </section>
<span>{{::sale.price | currency: 'EUR': 2}}</span> </vn-horizontal>
</vn-one> <vn-horizontal ng-if="model.data.length == 0">
</vn-horizontal> <vn-one pad-small-v translate>
</vn-vertical> No results
</vn-one> </vn-one>
</vn-horizontal> </vn-horizontal>
</vn-one>
</section>
</vn-horizontal>
<vn-horizontal ng-if="model.data.length == 0">
<vn-one pad-small-v translate>
No results
</vn-one>
</vn-horizontal>
</vn-vertical>
<vn-pagination model="model"></vn-pagination> <vn-pagination model="model"></vn-pagination>
</vn-card> </vn-card>
</vn-vertical> </vn-vertical>

4
modules/ticket/front/sale/style.scss
View File

@ -75,7 +75,7 @@ vn-ticket-sale {
vn-button[label=Cancel]{ vn-button[label=Cancel]{
display: none; display: none;
} }
vn-card.vn-ticket-create{ vn-card.vn-ticket-create {
padding: 0!important; padding: 0!important;
} }
} }
@ -89,7 +89,7 @@ vn-ticket-sale {
} }
.taxes { .taxes {
max-width: 10em; max-width: 10em;
border: .1em solid #CCC; border: $border-thin-light;
text-align: right; text-align: right;
padding: .5em !important; padding: .5em !important;

24
modules/ticket/front/summary/style.scss
View File

@ -1,14 +1,20 @@
vn-ticket-summary .summary > div > vn-horizontal > vn-one { @import "./variables";
min-width: 10em !important;
&.taxes { vn-ticket-summary .summary {
border: .1em solid #CCC; max-width: $width-large;
text-align: right;
padding: .5em !important;
& > p { & > div > vn-horizontal > vn-one {
font-size: 1.2em; min-width: 10em;
margin: .2em;
&.taxes {
border: $border-thin-light;
text-align: right;
padding: .5em;
& > p {
font-size: 1.2em;
margin: .2em;
}
} }
} }
} }