Style fixes

client/client/src/basic-data/index.html

@@ -10,17 +10,19 @@
         <vn-title>Basic data</vn-title>
         <vn-horizontal>
             <vn-textfield vn-one label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
-            <vn-textfield vn-one label="Contact" field="$ctrl.client.contact"></vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield vn-one label="Phone" field="$ctrl.client.phone"></vn-textfield>
+            <vn-textfield vn-one label="Contact" field="$ctrl.client.contact"></vn-textfield>
-            <vn-textfield vn-one label="Mobile" field="$ctrl.client.mobile"></vn-textfield>
             <vn-textfield vn-one 
                 label="Email" 
                 field="$ctrl.client.email" 
                 info="You can save multiple emails">
             </vn-textfield>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-textfield vn-one label="Phone" field="$ctrl.client.phone"></vn-textfield>
+            <vn-textfield vn-one label="Mobile" field="$ctrl.client.mobile"></vn-textfield>
+        </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete vn-one
                 initial-data="$ctrl.client.salesPerson"

client/client/src/billing-data/index.html

@@ -9,21 +9,24 @@
     <vn-card pad-large>
         <vn-title>Pay method</vn-title>
         <vn-horizontal>
-            <vn-autocomplete vn-two
+            <vn-autocomplete
+                vn-one
+                label="Pay method"
                 vn-acl="administrative, salesAssistant"
                 field="$ctrl.client.payMethodFk"
                 url="/client/api/PayMethods"
                 select-fields="ibanRequired"
-                initial-data="$ctrl.client.payMethod"
+                initial-data="$ctrl.client.payMethod">
-                label="Pay method">
             </vn-autocomplete>
             <vn-textfield
-                vn-two label="IBAN"
+                vn-one
+                label="IBAN"
                 field="$ctrl.client.iban"
                 vn-acl="administrative, salesAssistant">
             </vn-textfield>
             <vn-textfield
-                vn-one label="Due day"
+                vn-one
+                label="Due day"
                 field="$ctrl.client.dueDay"
                 vn-acl="administrative, salesAssistant">
             </vn-textfield>

client/client/src/create/index.html

@@ -6,22 +6,11 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
-    <div style="max-width: 70em; margin: 0 auto;">
+    <div style="max-width: 50em; margin: 0 auto;">
         <vn-card pad-large>
             <vn-title>Create client</vn-title>
-            <vn-horizontal>
-                <vn-textfield vn-two label="Business name" field="$ctrl.client.socialName"></vn-textfield>
-                <vn-textfield vn-one label="Tax number" field="$ctrl.client.fi"></vn-textfield>
-                <vn-check
-                    vn-one
-                    label="Is equalizated"
-                    field="$ctrl.client.isEqualizated">
-                </vn-check>
-            </vn-horizontal>
             <vn-horizontal>
                 <vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
-                <vn-textfield vn-one label="Web user" field="$ctrl.client.userName"></vn-textfield>
-                <vn-textfield vn-two label="Email" field="$ctrl.client.email" info="You can save multiple emails"></vn-textfield>
                 <vn-autocomplete vn-one
                     field="$ctrl.client.salesPersonFk"
                     url="/client/api/Clients/activeSalesPerson"
@@ -31,6 +20,17 @@
                     <tpl-item>{{firstName}} {{name}}</tpl-item>
                 </vn-autocomplete>
             </vn-horizontal>
+            <vn-horizontal>
+                <vn-textfield vn-two label="Business name" field="$ctrl.client.socialName"></vn-textfield>
+                <vn-textfield vn-one label="Tax number" field="$ctrl.client.fi"></vn-textfield>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-textfield
+                    vn-two
+                    label="Street"
+                    field="$ctrl.client.street">
+                </vn-textfield>
+            </vn-horizontal>
             <vn-horizontal>
                 <vn-textfield
                     vn-one
@@ -38,18 +38,22 @@
                     field="$ctrl.client.postcode">
                 </vn-textfield>
                 <vn-textfield
-                    vn-two
+                    vn-one
-                    label="Street"
-                    field="$ctrl.client.street">
-                </vn-textfield>
-                <vn-textfield
-                    vn-two
                     label="City"
                     field="$ctrl.client.city">
                 </vn-textfield> 
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-autocomplete
+                    vn-one
+                    field="$ctrl.client.countryFk"
+                    url="/client/api/Countries"
+                    show-field="country"
+                    value-field="id"
+                    label="Country">
+                </vn-autocomplete>
                 <vn-autocomplete
                     vn-one
-                    initial-data="$ctrl.client.province"
                     field="$ctrl.client.provinceFk"
                     url="/client/api/Provinces"
                     show-field="name"
@@ -57,6 +61,26 @@
                     label="Province">
                 </vn-autocomplete>
             </vn-horizontal>
+            <vn-horizontal>
+                <vn-textfield
+                    vn-one
+                    label="Web user"
+                    field="$ctrl.client.userName">
+                </vn-textfield>
+                <vn-textfield
+                    vn-one
+                    label="Email"
+                    field="$ctrl.client.email"
+                    info="You can save multiple emails">
+                </vn-textfield>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-check
+                    vn-one
+                    label="Is equalizated"
+                    field="$ctrl.client.isEqualizated">
+                </vn-check>
+            </vn-horizontal>
         </vn-card>
         <vn-button-bar>
             <vn-submit label="Create"></vn-submit>

client/client/src/credit-insurance/create/index.html

@@ -4,7 +4,6 @@
         <vn-horizontal>
             <vn-textfield
                 vn-one
-                margin-medium-right
                 label="Credit"
                 model="$ctrl.creditClassification.credit",
                 rule="CreditInsurance.credit"
@@ -13,7 +12,6 @@
             </vn-textfield>
             <vn-textfield
                 vn-one
-                argin-medium-right
                 label="Grade"
                 model="$ctrl.creditClassification.grade"
                 rule="CreditInsurance.grade">

client/client/src/fiscal-data/index.html

@@ -24,13 +24,6 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-textfield>
-            <vn-check
-                vn-one
-                label="Is equalizated"
-                field="$ctrl.client.isEqualizated"
-                vn-acl="administrative, salesAssistant, salesPerson"
-                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-            </vn-check>
         </vn-horizontal>
         <vn-horizontal>
             <vn-textfield
@@ -40,13 +33,6 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-textfield>
-            <vn-textfield
-                vn-one
-                label="City"
-                field="$ctrl.client.city"
-                vn-acl="administrative, salesAssistant, salesPerson"
-                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-            </vn-textfield> 
         </vn-horizontal>
         <vn-horizontal>
             <vn-textfield
@@ -56,17 +42,15 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-textfield>
-            <vn-autocomplete
+            <vn-textfield
                 vn-one
-                initial-data="$ctrl.client.province"
+                label="City"
-                field="$ctrl.client.provinceFk"
+                field="$ctrl.client.city"
-                url="/client/api/Provinces"
-                show-field="name"
-                value-field="id"
-                label="Province"
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-            </vn-autocomplete>
+            </vn-textfield>
+        </vn-horizontal>
+        <vn-horizontal>
             <vn-autocomplete
                 vn-one
                 initial-data="$ctrl.client.country"
@@ -78,6 +62,17 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-autocomplete>
+            <vn-autocomplete
+                vn-one
+                initial-data="$ctrl.client.province"
+                field="$ctrl.client.provinceFk"
+                url="/client/api/Provinces"
+                show-field="name"
+                value-field="id"
+                label="Province"
+                vn-acl="administrative, salesAssistant, salesPerson"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
+            </vn-autocomplete>
         </vn-horizontal>
         <vn-horizontal margin-small-bottom>
             <vn-check
@@ -94,21 +89,8 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-check>
-            <vn-check
-                vn-two
-                label="Invoice by address"
-                field="$ctrl.client.hasToInvoiceByAddress"
-                vn-acl="administrative, salesAssistant, salesPerson"
-                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
-            </vn-check>
-            <vn-check
-                vn-two
-                label="Verified data"
-                field="$ctrl.client.isTaxDataChecked"
-                vn-acl="administrative, salesAssistant, salesAssistant">
-            </vn-check>
         </vn-horizontal>
-        <vn-horizontal>
+        <vn-horizontal margin-small-bottom>
             <vn-check
                 vn-one
                 label="Has to invoice"
@@ -116,6 +98,15 @@
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-check>
+            <vn-check
+                vn-one
+                label="Vies"
+                field="$ctrl.client.isVies"
+                vn-acl="administrative, salesAssistant, salesPerson"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
+            </vn-check>
+        </vn-horizontal>
+        <vn-horizontal margin-small-bottom>
             <vn-check
                 vn-one
                 label="Invoice by mail"
@@ -125,12 +116,27 @@
             </vn-check>
             <vn-check
                 vn-one
-                label="Vies"
+                label="Invoice by address"
-                field="$ctrl.client.isVies"
+                field="$ctrl.client.hasToInvoiceByAddress"
                 vn-acl="administrative, salesAssistant, salesPerson"
                 acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
             </vn-check>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-check
+                vn-one
+                label="Is equalizated"
+                field="$ctrl.client.isEqualizated"
+                vn-acl="administrative, salesAssistant, salesPerson"
+                acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
+            </vn-check>
+            <vn-check
+                vn-one
+                label="Verified data"
+                field="$ctrl.client.isTaxDataChecked"
+                vn-acl="administrative, salesAssistant, salesAssistant">
+            </vn-check>
+        </vn-horizontal>
     </vn-card>
     <vn-button-bar>
         <vn-submit

client/core/src/components/autocomplete/style.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 vn-autocomplete > div > .mdl-textfield {
     position: relative;
@@ -44,13 +44,12 @@ ul.vn-autocomplete {
     max-height: 300px;
 
     li {
+        @extend %clickable;
         display: block;
         padding: .8em;
         margin: 0;
-        cursor: pointer;
 
-        &.active,
+        &.active {
-        &:hover {
             background-color: $hover;
         }
         &.load-more {

client/core/src/components/grid/style.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 .vn-grid {
     border-collapse: collapse;
@@ -26,13 +26,8 @@
         transition: background-color 200ms ease-in-out;
 
         &.clickable {
-            cursor: pointer;
+            @extend %clickable;
-
-            &:hover {
-                background-color: $hover;
         }
-        }
-
         &.success {
             background-color: rgba(163, 209, 49, 0.3);
 

client/item/src/create/index.html

@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
-    <div style="max-width: 70em; margin: 0 auto;">
+    <div style="max-width: 50em; margin: 0 auto;">
         <vn-card pad-large>
             <vn-title>New item</vn-title>
             <vn-horizontal>

client/salix/src/components/home/style.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 vn-home {
     padding: 2em;
@@ -17,6 +17,7 @@ vn-home {
             flex-wrap: wrap;
 
             & > a {
+                @extend %clickable-light;
                 overflow:hidden;
                 border-radius: 6px;
                 background-color: $main-01;
@@ -29,11 +30,6 @@ vn-home {
                 padding: 1em;
                 justify-content: center;
 
-                transition: opacity 250ms ease-out;
-            
-                &:hover {
-                    background-color: $hover;
-                }
                 & > vn-icon {
                     font-size: 4em;
                 }

client/salix/src/components/left-menu/style.scss

@@ -1,8 +1,12 @@
-@import "colors";
+@import "effects";
 
 vn-menu-item {
-    & > li.active {
+    & > li {
+        @extend %clickable;
+
+        &.active {
             background-color: $main-header;
             color: white;
         }
+    }
 }

client/salix/src/components/main-menu/style.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 vn-main-menu {
     #user {
@@ -25,9 +25,9 @@ vn-main-menu {
         color: white;
     
         li {
+            @extend %clickable-light;
             background-color: $main-01;
             margin-bottom: .6em;
-            cursor: pointer;
             padding: .8em;
             border-radius: .1em;
             min-width: 8em;
@@ -36,9 +36,6 @@ vn-main-menu {
                 padding-right: .3em;
                 vertical-align: middle;
             }
-            &:hover {
-                background-color: $hover;
-            }
             &:last-child {
                 margin-bottom: 0;
             }

client/salix/src/styles/colors.scss

@@ -1,7 +1,8 @@
 $main-font-color :#222222;
 $secondary-font-color: #9b9b9b;
 $main-header: #3d3d3d;
-$hover: #c4c4c4;
+$hover: rgba(0, 0, 0, 0.1);
+$hover-opacity: .7;
 $main-bg: #e5e5e5;
 $main-01: #f7931e;
 $main-01-05: rgba($main-01, 0.5);

client/salix/src/styles/effects.scss

@@ -0,0 +1,20 @@
+
+@import "./colors";
+
+%clickable {
+    cursor: pointer;
+    transition: background-color 250ms ease-out;
+
+    &:hover {
+        background-color: $hover;
+    }
+}
+
+%clickable-light {
+    cursor: pointer;
+    transition: opacity 250ms ease-out;
+
+    &:hover {
+        opacity: $hover-opacity;
+    }
+}

client/salix/src/styles/font-style.scss

@@ -1,7 +1,6 @@
 @import "colors";
 @import "font-family";
 
-
 body {
     color: $main-font-color;
     font-family: vn-font;

client/salix/src/styles/index.js

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

client/salix/src/styles/misc.scss

@@ -1,7 +1,8 @@
-@import "padding";
+@import "./padding";
-@import "margin";
+@import "./margin";
-@import "colors";
+@import "./colors";
-@import "border";
+@import "./border";
+@import "./effects";
 
 
 a:focus,
@@ -116,17 +117,8 @@ a {
     }
 }
 
-.vn-clickable {
-    cursor: pointer;
-    transition: background-color 250ms ease-out;
-
-    &:hover {
-        background-color: $hover;
-    }
-}
-
 button {
-    @extend .vn-clickable;
+    @extend %clickable;
 }
 
 vn-button-bar {
@@ -168,7 +160,7 @@ vn-main-block {
             font-size: 2.5em;
         }
         & > a {
-            @extend .vn-clickable;
+            @extend %clickable;
 
             display: flex;
             align-items: center;
@@ -205,7 +197,7 @@ vn-main-block {
 .vn-list-item {
     @extend .pad-medium;
     @extend .border-solid-bottom;
-    @extend .vn-clickable;
+    @extend %clickable;
 
     display: block;
     text-decoration: none;