Merge branch 'dev' into test

back/models/account.js

@@ -23,15 +23,13 @@ module.exports = Self => {
         description: 'Gets the current user data',
         accepts: [
             {
-                arg: 'context',
-                type: 'object',
-                http: function(ctx) {
-                    return ctx;
-                }
+                arg: 'ctx',
+                type: 'Object',
+                http: {source: 'context'}
             }
         ],
         returns: {
-            type: 'object',
+            type: 'Object',
             root: true
         },
         http: {
@@ -41,12 +39,18 @@ module.exports = Self => {
     });
 
     Self.getCurrentUserData = async function(ctx) {
-        let filter = {fields: ['name']};
         let userId = ctx.req.accessToken.userId;
-        let account = await Self.findById(userId, filter);
-        let worker = await Self.app.models.Worker.findOne({where: {userFk: userId}, fields: ['id']});
 
-        return {accountName: account.name, workerId: worker.id};
+        let account = await Self.findById(userId, {
+            fields: ['id', 'name', 'nickname']
+        });
+
+        let worker = await Self.app.models.Worker.findOne({
+            fields: ['id'],
+            where: {userFk: userId}
+        });
+
+        return Object.assign(account, {workerId: worker.id});
     };
 
     /**

front/core/components/crud-model/crud-model.js

@@ -208,7 +208,9 @@ export default class CrudModel extends ModelProxy {
         this.cancelRequest();
         this.canceler = this.$q.defer();
         this.isPaging = append;
-        if (!append) this.status = 'loading';
+
+        if (!append && this.status != 'ready')
+            this.status = 'loading';
 
         let params = Object.assign(
             {filter},

front/core/components/data-viewer/index.html

@@ -2,7 +2,7 @@
     <div ng-transclude></div>
     <vn-pagination
         model="$ctrl.model"
-        pad-medium-top>
+        class="vn-pt-md">
     </vn-pagination>
 </div>
 <div

front/core/components/date-picker/style.scss

@@ -23,4 +23,4 @@ vn-date-picker {
 .flatpickr-weekdays,
 span.flatpickr-weekday {
     background-color: $color-main;
-}
+}

front/core/components/index.js

@@ -39,6 +39,7 @@ import './field';
 import './input-number';
 import './input-time';
 import './input-file';
+import './list';
 import './radio';
 import './table';
 import './td-editable';

front/core/components/label-value/style.scss

@@ -8,9 +8,6 @@ vn-label-value > section {
             content: ':';
         }
     }
-    & > span {
-        color: $color-font;
-    }
     & > vn-icon {
         vertical-align: middle;
         color: $color-font-secondary;

front/core/components/list/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/core/components/list/style.scss

@@ -14,7 +14,7 @@
         color: inherit;
     
         & > vn-horizontal {
-            padding: $pad-medium;
+            padding: $spacing-md;
     
             & > vn-one {
                 overflow: hidden;

front/core/components/searchbar/style.scss

@@ -13,6 +13,6 @@ vn-searchbar {
     max-height: 48em;
 
     & > form {
-        padding: $pad-large;
+        padding: $spacing-lg;
     }
 }

front/core/components/step-control/style.scss

@@ -12,31 +12,25 @@ vn-step-control {
             display: flex;
             flex-direction: row
         }
-
         & > .steps > .step {
             justify-content: center;
             min-width: 125px;
             display: flex;
             flex: auto
         }
-        
         & > .steps > .step .circle {
             border: 2px solid $color-main;
             background-color: white;
             align-content: center;
             margin-top: -9.5px;
-            -moz-border-radius: 50%;
-            -webkit-border-radius: 50%;
             border-radius: 50%;
             cursor: pointer;
             height: 15px;
             width: 15px
         }
- 
         & > .steps > .step .circle.active {
             background-color: $color-main;
         }
-
         & > .buttons {
             display: flex;
             flex: auto;
@@ -44,11 +38,9 @@ vn-step-control {
             justify-content: space-between;
             margin-top: 10px
         }
-
         & > .buttons > .step {
             display: flex
         }
-
         & > .buttons > .step > .mdl-button {
             line-height: 32px;
             font-size: 12px;
@@ -56,5 +48,4 @@ vn-step-control {
             height: 32px
         }
     }
-
 }

front/core/components/subtitle/subtitle.html

@@ -1,2 +1,2 @@
-<h5 style="margin-top: 0;" class="margin-medium-bottom" ng-transclude>
+<h5 style="margin-top: 0;" class="vn-mb-md" ng-transclude>
 </h5>

front/core/components/title/title.html

@@ -1,3 +1,3 @@
-<h3 style="margin-top: 0;" class="margin-medium-bottom" translate>
+<h3 style="margin-top: 0;" class="vn-mb-md" translate>
         <ng-transclude></ng-transclude>
 </h3>

front/core/directives/uvc.html

@@ -8,10 +8,10 @@
             class="modal-form"
             vn-id="uvc">
             <tpl-body>
-                <vn-horizontal pad-medium class="header">
+                <vn-horizontal class="vn-pa-md header">
                     <h5><span translate>Fields to show</span></h5>
                 </vn-horizontal>
-                <div pad-medium>
+                <div class="vn-pa-md">
                     <vn-horizontal ng-repeat="field in fields">
                         <vn-check
                             vn-one label="{{titles[field]}}"

front/core/directives/zoom-image.js

@@ -1,4 +1,5 @@
 import ngModule from '../module';
+import './zoom-image.scss';
 
 export function directive($timeout) {
     let container;
@@ -24,9 +25,8 @@ export function directive($timeout) {
     }
 
     function onKeyDown(event) {
-        if (event.keyCode === 27) {
+        if (event.keyCode === 27)
             destroyContainers();
-        }
     }
 
     function destroyContainers() {
@@ -47,9 +47,9 @@ export function directive($timeout) {
                 event.preventDefault();
 
                 let src = $attrs.zoomImage || $attrs.src;
-                if (src) {
+                if (src)
                     createContainers(src);
-                } else
+                else
                     throw new Error('No image source detected');
             });
         }

front/core/directives/zoom-image.scss

@@ -1,6 +1,3 @@
-img[zoom-image]{
-    cursor: zoom-in;
-}
 
 .vn-zoom-image {
     width: 100%;
@@ -27,3 +24,6 @@ img[zoom-image]{
         }
     }
 }
+img[zoom-image]{
+    cursor: zoom-in;
+}

front/core/styles/background.scss

@@ -8,4 +8,4 @@
 }
 .item-disabled {
     opacity: $color-disabled;
-} 
+}

front/core/styles/border.scss

@@ -0,0 +1,23 @@
+@import "./variables";
+
+.border-solid {
+    border: $border-thin-light;
+}
+.border-solid-top {
+    border-top: $border-thin-light;
+}
+.border-solid-left {
+    border-left: $border-thin-light;
+}
+.border-solid-right {
+    border-right: $border-thin-light;
+}
+.border-solid-bottom {
+    border-bottom: $border-thin-light;
+}
+
+/* Border Radius */
+
+.border-radius {
+    border-radius: .3em;
+}

front/core/styles/effects.scss

@@ -1,4 +1,3 @@
-
 @import "./variables";
 
 %clickable {

front/core/styles/font-family.scss

@@ -10,3 +10,9 @@
     font-family: vn-font-bold;
     src: url(./fonts/Roboto-Bold.ttf);
 }
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./icons/Material-Design-Icons.woff2') format('woff2'); 
+}

front/core/styles/index.js

@@ -1,4 +1,11 @@
+import './effects.scss';
+import './background.scss';
+import './border.scss';
+import './font-family.scss';
+import './icons/salixfont.css';
+import './layout.scss';
 import './mdl-override.scss';
-import './mdi-override.css';
-import './zoom-image.scss';
-import './salixfont.css';
+import './responsive.scss';
+import './spacing.scss';
+import './text.scss';
+import './width.scss';

front/core/styles/layout.scss

@@ -23,11 +23,6 @@ html [wrap] {
 html [wrap-reverse] {
     flex-wrap: wrap-reverse;
 }
-html [scrollable] {
-    min-height: 1px;
-    flex: 1;
-    flex-basis: 0.000000001px;
-}
 
 /* Horizontal & vertical childs */
 

front/core/styles/mdi-override.css

@@ -1,6 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./Material-Design-Icons.woff2') format('woff2'); 
-}

front/core/styles/mdl-override.scss

@@ -8,41 +8,54 @@ body {
     line-height: initial;
     font-size: 12pt;
 }
+
+// Textfield
+
+.mdl-textfield--floating-label {
+    &.is-focused, 
+    &.is-dirty, 
+    &.has-placeholder {
+        .mdl-textfield__label {
+            color: $color-main !important;
+        }
+    }
+}
+.mdl-textfield__label::after {
+    background-color: $color-main !important;
+}
+fieldset[disabled] .mdl-textfield,
+.mdl-textfield.is-disabled {
+    .mdl-textfield__input {
+        border: none !important;
+        color: inherit !important;
+    }
+    .mdl-textfield__label {
+        color: $color-main !important;
+    }
+}
+
+// Button
+
 .mdl-button {
     font-weight: bolder;
     color: $color-main;
 }
+.mdl-button--fab {
+    color: $color-font-dark !important; 
+    background-color: $color-main !important;
+}
 .mdl-button--colored {
-    color: white !important;
+    color: $color-font-dark !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: $color-main !important;
-}
-.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
-    border: 2px solid $color-main;
-}
-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: $color-main;
-}
-.mdl-textfield__label::after{
-    background-color: $color-main !important;
-}
-.mdl-button--colored,
-.mdl-button--colored:focus,
-.mdl-button--colored:active {
-    background-color: $color-main !important;
-}
-.mdl-button--colored:hover,
 .mdl-button--raised:hover {
     background-color: $color-main !important;
 }
-.mdl-button--fab{
-    color: white !important; 
-    background-color: $color-main !important;
+.mdl-button--colored {
+    &,
+    &:focus,
+    &:active,
+    &:hover {
+        background-color: $color-main !important;
+    }
 }
 

front/core/styles/spacing.scss

@@ -0,0 +1,355 @@
+/**
+ * CSS spacing classes
+ *
+ * vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
+ *      T         D                     S
+ * 
+ * T - type
+ *     - values: p (padding), m (margin)
+ * 
+ * D - direction
+ *     - values:
+ *             t (top), r (right), b (bottom), l (left),
+ *             a (all), x (both left & right), y (both top & bottom)
+ * 
+ * S - size
+ *     - values:
+ *             none,
+ *             auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
+ *             xs (extra small),
+ *             sm (small),
+ *             md (medium),
+ *             lg (large),
+ *             xl (extra large)
+ */
+ 
+ @import "./variables";
+
+//++++++++++++++++++++++++++++++++++++++++++++++++ Padding
+
+// None
+
+.vn-pa-none {
+    padding: 0;
+}
+.vn-pl-none {
+    padding-left: 0;
+}
+.vn-pr-none {
+    padding-right: 0;
+}
+.vn-pt-none {
+    padding-top: 0;
+}
+.vn-pb-none {
+    padding-bottom: 0;
+}
+.vn-py-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.vn-px-none {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+// Extra small
+
+.vn-pa-xs {
+    padding: $spacing-xs;
+}
+.vn-pl-xs {
+    padding-left: $spacing-xs;
+}
+.vn-pr-xs {
+    padding-right: $spacing-xs;
+}
+.vn-pt-xs {
+    padding-top: $spacing-xs;
+}
+.vn-pb-xs {
+    padding-bottom: $spacing-xs;
+}
+.vn-py-xs {
+    padding-top: $spacing-xs;
+    padding-bottom: $spacing-xs;
+}
+.vn-px-xs {
+    padding-left: $spacing-xs;
+    padding-right: $spacing-xs;
+}
+
+// Small
+
+.vn-pa-sm {
+        padding: $spacing-sm;
+}
+.vn-pl-sm {
+    padding-left: $spacing-sm;
+}
+.vn-pr-sm {
+    padding-right: $spacing-sm;
+}
+.vn-pt-sm {
+    padding-top: $spacing-sm;
+}
+.vn-pb-sm {
+    padding-bottom: $spacing-sm;
+}
+.vn-py-sm {
+    padding-top: $spacing-sm;
+    padding-bottom: $spacing-sm;
+}
+.vn-px-sm {
+    padding-left: $spacing-sm;
+    padding-right: $spacing-sm;
+}
+
+// Medium
+
+.vn-pa-md {
+    padding: $spacing-md;
+}
+.vn-pl-md {
+    padding-left: $spacing-md;
+}
+.vn-pr-md {
+    padding-right: $spacing-md;
+}
+.vn-pt-md {
+    padding-top: $spacing-md;
+}
+.vn-pb-md {
+    padding-bottom: $spacing-md;
+}
+.vn-py-md {
+    padding-top: $spacing-md;
+    padding-bottom: $spacing-md;
+}
+.vn-px-md {
+    padding-left: $spacing-md;
+    padding-right: $spacing-md;
+}
+
+// Large
+
+.vn-pa-lg {
+    padding: $spacing-lg;
+}
+.vn-pl-lg {
+    padding-left: $spacing-lg;
+}
+.vn-pr-lg {
+    padding-right: $spacing-lg;
+}
+.vn-pt-lg {
+    padding-top: $spacing-lg;
+}
+.vn-pb-lg {
+    padding-bottom: $spacing-lg;
+}
+.vn-py-lg {
+    padding-top: $spacing-lg;
+    padding-bottom: $spacing-lg;
+}
+.vn-px-lg {
+    padding-left: $spacing-lg;
+    padding-right: $spacing-lg;
+}
+
+// Extra large
+
+.vn-pa-xl {
+    padding: $spacing-xl;
+}
+.vn-pl-xl {
+    padding-left: $spacing-xl;
+}
+.vn-pr-xl {
+    padding-right: $spacing-xl;
+}
+.vn-pt-xl {
+    padding-top: $spacing-xl;
+}
+.vn-pb-xl {
+    padding-bottom: $spacing-xl;
+}
+.vn-py-xl {
+    padding-top: $spacing-xl;
+    padding-bottom: $spacing-xl;
+}
+.vn-px-xl {
+    padding-left: $spacing-xl;
+    padding-right: $spacing-xl;
+}
+
+//++++++++++++++++++++++++++++++++++++++++++++++++ Margin
+
+// None
+
+.vn-ma-none {
+    padding: 0;
+}
+.vn-ml-none {
+    padding-left: 0;
+}
+.vn-mr-none {
+    padding-right: 0;
+}
+.vn-mt-none {
+    padding-top: 0;
+}
+.vn-mb-none {
+    padding-bottom: 0;
+}
+.vn-my-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.vn-mx-none {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+// Auto
+
+.vn-ml-none {
+    padding-left: auto;
+}
+.vn-mr-none {
+    padding-right: auto;
+}
+.vn-mx-none {
+    padding-left: auto;
+    padding-right: auto;
+}
+
+// Extra small
+
+.vn-ma-xs {
+    margin: $spacing-xs;
+}
+.vn-mt-xs {
+    margin-top: $spacing-xs;
+}
+.vn-ml-xs {
+    margin-left: $spacing-xs;
+}
+.vn-mr-xs {
+    margin-right: $spacing-xs;
+}
+.vn-mb-xs {
+    margin-bottom: $spacing-xs;
+}
+.vn-my-xs {
+    margin-top: $spacing-xs;
+    margin-bottom: $spacing-xs;
+}
+.vn-mx-xs {
+    margin-left: $spacing-xs;
+    margin-right: $spacing-xs;
+}
+
+// Small
+
+.vn-ma-sm {
+    margin: $spacing-sm;
+}
+.vn-mt-sm {
+    margin-top: $spacing-sm;
+}
+.vn-ml-sm {
+    margin-left: $spacing-sm;
+}
+.vn-mr-sm {
+    margin-right: $spacing-sm;
+}
+.vn-mb-sm {
+    margin-bottom: $spacing-sm;
+}
+.vn-my-sm {
+    margin-top: $spacing-sm;
+    margin-bottom: $spacing-sm;
+}
+.vn-mx-sm {
+    margin-left: $spacing-sm;
+    margin-right: $spacing-sm;
+}
+
+// Medium
+
+.vn-ma-md {
+    margin: $spacing-md;
+}
+.vn-mt-md {
+    margin-top: $spacing-md;
+}
+.vn-ml-md {
+    margin-left: $spacing-md;
+}
+.vn-mr-md {
+    margin-right: $spacing-md;
+}
+.vn-mb-md {
+    margin-bottom: $spacing-md;
+}
+.vn-my-md {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-md;
+}
+.vn-mx-md {
+    margin-left: $spacing-md;
+    margin-right: $spacing-md;
+}
+
+// Large
+
+.vn-ma-lg {
+    margin: $spacing-lg;
+}
+.vn-mt-lg {
+    margin-top: $spacing-lg;
+}
+.vn-ml-lg {
+    margin-left: $spacing-lg;
+}
+.vn-mr-lg {
+    margin-right: $spacing-lg;
+}
+.vn-mb-lg {
+    margin-bottom: $spacing-lg;
+}
+.vn-my-lg {
+    margin-top: $spacing-lg;
+    margin-bottom: $spacing-lg;
+}
+.vn-mx-lg {
+    margin-left: $spacing-lg;
+    margin-right: $spacing-lg;
+}
+
+/* Extra large */
+
+.vn-ma-xl {
+    margin: $spacing-xl;
+}
+.vn-mt-xl {
+    margin-top: $spacing-xl;
+}
+.vn-ml-xl {
+    margin-left: $spacing-xl;
+}
+.vn-mr-xl {
+    margin-right: $spacing-xl;
+}
+.vn-mb-xl {
+    margin-bottom: $spacing-xl;
+}
+.vn-my-xl {
+    margin-top: $spacing-xl;
+    margin-bottom: $spacing-xl;
+}
+.vn-mx-xl {
+    margin-left: $spacing-xl;
+    margin-right: $spacing-xl;
+}

front/core/styles/text.scss

@@ -0,0 +1,72 @@
+@import "./variables";
+@import "./font-family";
+
+/* Headings */
+
+.text-h1, h1 {
+    font-size: 32pt;
+}
+.text-h2, h2 {
+    font-size: 28pt;
+}
+.text-h3, h3 {
+    font-size: 24pt;
+}
+.text-h4, h4 {
+    font-size: 20pt;
+}
+.text-h5, h5 {
+    font-size: 16pt;
+}
+.text-h6, h6 {
+    font-size: 14pt;
+}
+.text-subtitle1 {
+    font-size: 13pt;
+}
+.text-subtitle2 {
+    font-size: 12pt;
+}
+.text-body1 {
+    font-size: 11pt;
+}
+.text-body2 {
+    font-size: 11pt;
+}
+.text-caption {
+    font-size: 11pt;
+}
+.text-overline {
+    font-size: 10pt;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: .2em;
+    font-family: vn-font-bold;
+}
+
+/* Colors */
+
+.text-primary {
+    color: $color-font;
+}
+.text-secondary {
+    color: $color-font-secondary;
+}
+
+/* Helpers */
+
+.text-uppercase {
+    text-transform: uppercase;
+}
+.text-center {
+    text-align: center;
+}
+.text-right {
+    text-align: right;
+}
+.text-left {
+    text-align: left;
+}

front/core/styles/variables.scss

@@ -12,20 +12,13 @@ $width-md: 50em;
 $width-lg: 80em;
 $width-xl: 100em;
 
-// Padding
+// Spacing
 
-$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;
-$margin-huge: 100px;
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 32px;
+$spacing-xl: 100px;
 
 // Light theme
 
@@ -74,7 +67,7 @@ $color-alert-light: lighten($color-alert, 35%);
 $color-header: #3d3d3d;
 $color-bg: #222;
 $color-bg-dark: #222;
-$color-font: white;
+$color-font: #eee;
 $color-font-light: #aaa;
 $color-font-secondary: #777;
 $color-font-dark: white;
@@ -92,6 +85,7 @@ $color-alert: #f42121;
 $color-spacer: rgba(255, 255, 255, .3);
 $color-spacer-light: rgba(255, 255, 255, .12);
 $color-input-underline: rgba(255, 255, 255, .12);
+$color-input-underline-hover: rgba(255, 255, 255, .6);
 $color-shadow: rgba(0, 0, 0, .2);
 $color-hightlight: rgba(255, 255, 255, .15);
 $color-hover-cd: rgba(255, 255, 255, .1);

front/salix/components/app/style.scss

@@ -3,7 +3,9 @@
 body {
     background-color: $color-bg;
     overflow: auto;
-    height: 100%
+    height: 100%;
+    font-family: vn-font;
+    color: $color-font;
 }
 vn-app {
     height: inherit;
@@ -60,7 +62,7 @@ vn-app {
         }
         .content-block {
             box-sizing: border-box;
-            padding: $pad-medium;
+            padding: $spacing-md;
             height: inherit;
 
             form vn-horizontal {

front/salix/components/descriptor/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/descriptor/style.scss

@@ -27,13 +27,13 @@
         }
     }
     & > .body {
-        padding: $pad-small;
+        padding: $spacing-sm;
 
         & > * {
-            padding: $pad-small;
+            padding: $spacing-sm;
         }
         & > .attributes > h5 {
-            padding-bottom: $pad-small;
+            padding-bottom: $spacing-sm;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
@@ -45,7 +45,7 @@
             padding: 0;
     
             & > vn-icon {
-                padding: $pad-small;
+                padding: $spacing-sm;
                 color: $color-secondary;
                 font-size: 1.5em;
     
@@ -62,7 +62,7 @@
             padding: 0;
             
             & > a {
-                padding: $pad-small;
+                padding: $spacing-sm;
     
                 & > vn-icon {
                     font-size: 1.8em;

front/salix/components/index.js

@@ -7,3 +7,5 @@ import './side-menu/side-menu';
 import './left-menu/left-menu';
 import './topbar/topbar';
 import './user-configuration-popover';
+import './descriptor';
+import './summary';

front/salix/components/left-menu/left-menu.html

@@ -1,4 +1,4 @@
-<ul ng-if="::$ctrl.items.length > 0" pad-medium-v>
+<ul ng-if="::$ctrl.items.length > 0" class="vn-py-md">
     <li ng-repeat="item in ::$ctrl.items" name="{{::item.description}}">
         <a ui-sref="{{::item.state}}"
             ng-class="{active: item.active && !item.childs, expanded: item.active, collapsed: !item.active}"

front/salix/components/main-menu/main-menu.html

@@ -3,7 +3,7 @@
         ng-click="$ctrl.openUserConfiguration($event)"
         id="user"
         class="unselectable">
-        {{currentUserName}}
+        {{$root.user.nickname}}
     </div>
     <vn-icon-button
         id="apps"
@@ -19,7 +19,7 @@
     </vn-icon-button>
 </div>
 <vn-menu vn-id="apps-menu">
-    <ul pad-small class="modules-menu">
+    <ul class="modules-menu vn-pa-sm">
         <li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
             <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
             <span translate>{{::mod.name}}</span>

front/salix/components/main-menu/main-menu.js

@@ -16,11 +16,10 @@ export default class MainMenu {
     }
 
     getCurrentUserName() {
-        this.$http.get('/api/Accounts/getCurrentUserData')
-            .then(json => {
-                this.$.currentUserName = json.data.accountName;
-                window.localStorage.currentUserWorkerId = json.data.workerId;
-            });
+        this.$http.get('/api/Accounts/getCurrentUserData').then(json => {
+            this.$.$root.user = json.data;
+            window.localStorage.currentUserWorkerId = json.data.workerId;
+        });
     }
 
     openUserConfiguration(event) {

front/salix/components/main-menu/main-menu.spec.js

@@ -16,12 +16,12 @@ describe('Component vnMainMenu', () => {
 
     describe('getCurrentUserName()', () => {
         it(`should set the user name property in the controller`, () => {
-            $httpBackend.when('GET', `/api/Accounts/getCurrentUserData`).respond({accountName: 'Batman'});
+            $httpBackend.when('GET', `/api/Accounts/getCurrentUserData`).respond({name: 'batman'});
             $httpBackend.expect('GET', `/api/Accounts/getCurrentUserData`);
             controller.getCurrentUserName();
             $httpBackend.flush();
 
-            expect(controller.$.currentUserName).toEqual('Batman');
+            expect(controller.$.$root.user.name).toEqual('batman');
         });
     });
 });

front/salix/components/summary/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/summary/style.scss

@@ -6,7 +6,7 @@
 
     & > div {
         & > h5 {
-            padding: $pad-small;
+            padding: $spacing-sm;
             border: none;
             background: $color-main;
             color: $color-font-dark;
@@ -19,10 +19,10 @@
         }
         & > vn-horizontal {
             flex-wrap: wrap;
-            padding: $pad-medium;
+            padding: $spacing-md;
 
             h4 {
-                margin-bottom: $margin-medium;
+                margin-bottom: $spacing-md;
                 text-transform: uppercase;
                 font-size: 15pt;
                 line-height: 1;
@@ -36,7 +36,7 @@
                 text-overflow: ellipsis;
             }
             & > * {
-                margin: $margin-small;
+                margin: $spacing-sm;
                 min-width: 14em;
                 overflow: hidden;
                 padding: 0;

front/salix/components/user-configuration-popover/index.html

@@ -11,7 +11,23 @@
     order="code">
 </vn-crud-model>
 <vn-popover vn-id="popover">
-    <vn-vertical class="user-configuration">
+    <vn-vertical class="user-configuration vn-pa-md">
+        <div class="profile-card vn-pb-md">
+            <vn-icon icon="person"></vn-icon>
+            <div class="vn-pl-md">
+                <div class="user">
+                    <div class="ellipsize">
+                        {{$root.user.nickname}}
+                    </div>
+                    <div class="text-secondary text-caption ellipsize">
+                        {{$root.user.name}}
+                    </div>
+                </div>
+                <a ui-sref="worker.card.summary({id: $root.user.workerId})">
+                    <vn-button label="My account"> </vn-button>
+                </a>
+            </div>
+        </div>
         <vn-autocomplete
             vn-one
             label="Local warehouse"

front/salix/components/user-configuration-popover/locale/es.yml

@@ -1,3 +1,4 @@
+My account: Mi cuenta
 Local warehouse: Almacén local
 Local bank: Banco local
 Local company: Empresa local

front/salix/components/user-configuration-popover/style.scss

@@ -1,6 +1,29 @@
 @import "variables";
 
 .vn-popover .user-configuration {
-    min-width: 250px;
-    padding: $pad-medium;
+    width: 16em;
+
+    & > .profile-card {
+        display: flex;
+        align-items: center;
+
+        & > vn-icon {
+            font-size: 60px;
+            border-radius: 50%;
+            color: $color-font-dark;
+            background: $color-secondary;
+            padding: .1em;
+        }
+        & > div {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            flex: 1;
+
+            & > .user {
+                max-width: 10em;
+                padding-bottom: .5em;
+            }
+        }
+    }
 }

front/salix/styles/border.scss

@@ -1,23 +0,0 @@
-@import "./variables";
-
-html [border-solid], .border-solid {
-    border: $border-thin-light;
-}
-html [border-solid-top], .border-solid-top {
-    border-top: $border-thin-light;
-}
-html [border-solid-left], .border-solid-left {
-    border-left: $border-thin-light;
-}
-html [border-solid-right], .border-solid-right {
-    border-right: $border-thin-light;
-}
-html [border-solid-bottom], .border-solid-bottom {
-    border-bottom: $border-thin-light;
-}
-
-/* Border Radius */
-
-html [border-radius], .border-radius {
-    border-radius: .3em;
-}

front/salix/styles/display.scss

@@ -1,35 +0,0 @@
-.display-block {
-    display: block;
-}
-
-.form-group {
-    margin-bottom: 15px;
-}
-
-/* Label del popover */
-.popover-button {
-    padding: 3px 3px 3px 0px;
-    height: auto;
-    min-width: auto;
-}
-
-.popover-label {
-    font-family: vn-font-bold;
-    color: black;
-    padding-top:5px;
-}
-
-/* Icon cuadrado */
-.icon-square{
-  min-width: 0px;
-  height: 46px;
-  line-height: 0px;
-}
-
-input[type="submit"]:disabled, button:disabled {
-    opacity: 0.7;
-}
-
-.descriptor-icon{
-    font-size:60px;
-}

front/salix/styles/font-style.scss

@@ -1,16 +0,0 @@
-@import "./variables";
-@import "./font-family";
-
-body {
-    color: $color-font;
-    font-family: vn-font;
-}
-html [uppercase], .uppercase {
-    text-transform: uppercase;
-}
-html [color-main], .color-main {
-    color: $color-main;
-}
-html [color-secondary], .color-secondary {
-    color: $color-secondary;
-}

front/salix/styles/index.js

@@ -1,18 +1,4 @@
-import './responsive.scss';
-import './title.scss';
-import './layout.scss';
-import './display.scss';
-import './margin.scss';
-import './padding.scss';
-import './border.scss';
-import './background.scss';
-import './font-style.scss';
 import './misc.scss';
-import './effects.scss';
-import './order-product.scss';
-import './summary.scss';
-import './descriptor.scss';
-import './list.scss';
 import './modal-form.scss';
+import './order-product.scss';
 import './photo-list.scss';
-import './width.scss';

front/salix/styles/margin.scss

@@ -1,138 +0,0 @@
-@import "variables";
-
-/* None */
-
-html [margin-none], .margin-none {
-    margin: $margin-none;
-}
-
-/* Small */
-
-html [margin-small], .margin-small {
-    margin: $margin-small;
-}
-html [margin-small-top], .margin-small-top {
-    margin-top: $margin-small;
-}
-html [margin-small-left], .margin-small-left {
-    margin-left: $margin-small;
-}
-html [margin-small-right], .margin-small-right {
-    margin-right: $margin-small;
-}
-html [margin-small-bottom], .margin-small-bottom {
-    margin-bottom: $margin-small;
-}
-html [margin-small-v], .margin-small-v {
-    margin-top: $margin-small;
-    margin-bottom: $margin-small;
-}
-html [margin-small-h], .margin-small-h {
-    margin-left: $margin-small;
-    margin-right: $margin-small;
-}
-
-/* Medium */
-
-html [margin-medium], .margin-medium {
-    margin: $margin-medium;
-}
-html [margin-medium-top], .margin-medium-top {
-    margin-top: $margin-medium;
-}
-html [margin-medium-left], .margin-medium-left {
-    margin-left: $margin-medium;
-}
-html [margin-medium-right], .margin-medium-right {
-    margin-right: $margin-medium;
-}
-html [margin-medium-bottom], .margin-medium-bottom {
-    margin-bottom: $margin-medium;
-}
-html [margin-medium-v], .margin-medium-v {
-    margin-top: $margin-medium;
-    margin-bottom: $margin-medium;
-}
-html [margin-medium-h], .margin-medium-h {
-    margin-left: $margin-medium;
-    margin-right: $margin-medium;
-}
-
-/* Large */
-
-html [margin-large], .margin-large {
-    margin: $margin-large;
-}
-html [margin-large-top], .margin-large-top {
-    margin-top: $margin-large;
-}
-html [margin-large-left], .margin-large-left {
-    margin-left: $margin-large;
-}
-html [margin-large-right], .margin-large-right {
-    margin-right: $margin-large;
-}
-html [margin-large-bottom], .margin-large-bottom {
-    margin-bottom: $margin-large;
-}
-html [margin-large-v], .margin-large-v {
-    margin-top: $margin-large;
-    margin-bottom: $margin-large;
-}
-html [margin-large-h], .margin-large-h {
-    margin-left: $margin-large;
-    margin-right: $margin-large;
-}
-
-/* Huge */
-
-html [margin-huge], .margin-huge {
-    margin: $margin-huge;
-}
-html [margin-huge-top], .margin-huge-top {
-    margin-top: $margin-huge;
-}
-html [margin-huge-left], .margin-huge-left {
-    margin-left: $margin-huge;
-}
-html [margin-huge-right], .margin-huge-right {
-    margin-right: $margin-huge;
-}
-html [margin-huge-bottom], .margin-huge-bottom {
-    margin-bottom: $margin-huge;
-}
-html [margin-huge-v], .margin-huge-v {
-    margin-top: $margin-huge;
-    margin-bottom: $margin-huge;
-}
-html [margin-huge-h], .margin-huge-h {
-    margin-left: $margin-huge;
-    margin-right: $margin-huge;
-}
-
-
-/* Minus Small */
-
-html [margin--small], .margin--small {
-    margin: -$margin-small;
-}
-html [margin--small-top], .margin--small-top {
-    margin-top: -$margin-small;
-}
-html [margin--small-left], .margin--small-left {
-    margin-left: -$margin-small;
-}
-html [margin--small-right], .margin--small-right {
-    margin-right: -$margin-small;
-}
-html [margin--small-bottom], .margin--small-bottom {
-    margin-bottom: -$margin-small;
-}
-html [margin--small-v], .margin--small-v {
-    margin-top: -$margin-small;
-    margin-bottom: -$margin-small;
-}
-html [margin--small-h], .margin--small-h {
-    margin-left: -$margin-small;
-    margin-right: -$margin-small;
-}

front/salix/styles/misc.scss

@@ -52,7 +52,7 @@ vn-bg-title {
 .form {
     height: 100%;
     box-sizing: border-box;
-    padding: $pad-large;
+    padding: $spacing-lg;
     max-width: 1000px;
 }
 html [fixed-bottom-right] {
@@ -60,24 +60,6 @@ html [fixed-bottom-right] {
     bottom: 2em;
     right: 2em;
 }
-html [text-center], .text-center {
-    text-align: center;
-}
-html [text-right], .text-right {
-    text-align: right;
-}
-html [text-left], .text-left {
-    text-align: left;
-}
-html [vn-right], .vn-right {
-     float: right;
-}
-html [vn-left], .vn-left {
-     float: left;
-}
-html [vn-center], .vn-center {
-     justify-content: center;
-}
 .list > vn-none {
     min-width: 60px;
 }
@@ -89,9 +71,6 @@ html [vn-center], .vn-center {
         color: $color-main;
     }
 }
-.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
-    background-color: $color-main;
-}
 html [pointer], .pointer{
     cursor: pointer;
 }
@@ -103,7 +82,7 @@ button {
 }
 vn-button-bar {
     display: block;
-    margin-top: $margin-small;
+    margin-top: $spacing-sm;
 }
 vn-tool-bar {
     display: flex;
@@ -112,23 +91,14 @@ vn-tool-bar {
         margin-right: .6em;
     }
 }
-
-/** START - FORM ELEMENTS DISABLED **/
-
-fieldset[disabled] .mdl-textfield .mdl-textfield__input,
-fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
-.mdl-textfield.is-disabled .mdl-textfield__input, 
-.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: $color-main !important;
+input[type="submit"]:disabled, button:disabled {
+    opacity: 0.7;
+}
+html [scrollable] {
+    min-height: 1px;
+    flex: 1;
+    flex-basis: 0.000000001px;
 }
-
-/** END - FORM ELEMENTS DISABLED **/
-
 .ellipsize {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -197,4 +167,25 @@ vn-empty-rows {
     text-align: center;
     padding: 1.5em;
     box-sizing: border-box;
-}
+}
+
+/* XXX: Deprecated, use classes with text prefix */
+
+[color-main] {
+    color: $color-main;
+}
+[color-secondary] {
+    color: $color-secondary;
+}
+[uppercase], .uppercase {
+    text-transform: uppercase;
+}
+html [text-center], .text-center {
+    text-align: center;
+}
+html [text-right], .text-right {
+    text-align: right;
+}
+html [text-left], .text-left {
+    text-align: left;
+}

front/salix/styles/modal-form.scss

@@ -1,37 +1,34 @@
 @import './variables';
 
 vn-dialog.modal-form {
-    vn-horizontal.header{
-        padding: $pad-small;
+    vn-horizontal.header {
+        padding: $spacing-sm;
         background-color: $color-main;
-        h5{
+
+        h5 {
             color: white;
             margin: 0 auto;
         }
     }
-    tpl-body {
-        width: 100%;
-    }
     table {
         width: 100%
     }
-    & > div{
-        padding: 0!important;
+    & > div {
+        padding: 0 !important;
     }
     vn-textfield {
         width: 100%;
     }
-    .buttons{
-        margin-top: 0!important;
+    .buttons {
+        margin-top: 0 !important;
     }
-
-    p{
+    p {
         display: none;
     }
-    button.close > vn-icon{
-        color: white!important;
+    button.close > vn-icon {
+        color: white !important;
     }
     vn-ticket-sale-edit-discount > div {
-        padding-bottom: 0!important;
+        padding-bottom: 0 !important;
     }
 }

front/salix/styles/order-product.scss

@@ -7,7 +7,7 @@
 
     & > .product {
         box-sizing: border-box;
-        padding: $pad-small;
+        padding: $spacing-sm;
         width: 28em;
         overflow: hidden;
 
@@ -21,7 +21,7 @@
 
                 img {
                     width: 100%;
-                    height: 100%
+                    height: 100%;
                 }
             }
             .description {
@@ -57,7 +57,7 @@
                     height: 3em;
 
                     & > vn-label-value {
-                        font-size: .8em
+                        font-size: .8em;
                     }
                 }  
             }
@@ -77,7 +77,7 @@
 
                         &:first-child,
                         &:last-child {
-                            font-size: 1.4em
+                            font-size: 1.4em;
                         }
                     }
 
@@ -87,7 +87,7 @@
                 } 
                 & > .priceKg {
                     color: $color-font-secondary;
-                    font-size: .8em
+                    font-size: .8em;
                 }
             }
         }

front/salix/styles/padding.scss

@@ -1,85 +0,0 @@
-@import "./variables";
-
-/* None */
-
-html [pad-none], .pad-none {
-  padding: $pad-none;
-}
-
-/* Small */
-
-html [pad-small], .pad-small {
-    padding: $pad-small;
-}
-html [pad-small-left], .pad-small-left {
-  padding-left: $pad-small;
-}
-html [pad-small-right], .pad-small-right {
-  padding-right: $pad-small;
-}
-html [pad-small-top], .pad-small-top {
-  padding-top: $pad-small;
-}
-html [pad-small-bottom], .pad-small-bottom {
-  padding-bottom: $pad-small;
-}
-html [pad-small-v], .pad-small-v {
-  padding-top: $pad-small;
-  padding-bottom: $pad-small;
-}
-html [pad-small-h], .pad-small-h {
-  padding-left: $pad-small;
-  padding-right: $pad-small;
-}
-
-/* Medium */
-
-html [pad-medium], .pad-medium {
-  padding: $pad-medium;
-}
-html [pad-medium-left], .pad-medium-left {
-  padding-left: $pad-medium;
-}
-html [pad-medium-right], .pad-medium-right {
-  padding-right: $pad-medium;
-}
-html [pad-medium-top], .pad-medium-top {
-  padding-top: $pad-medium;
-}
-html [pad-medium-bottom], .pad-medium-bottom {
-  padding-bottom: $pad-medium;
-}
-html [pad-medium-v], .pad-medium-v {
-  padding-top: $pad-medium;
-  padding-bottom: $pad-medium;
-}
-html [pad-medium-h], .pad-medium-h {
-  padding-left: $pad-medium;
-  padding-right: $pad-medium;
-}
-
-/* Large */
-
-html [pad-large], .pad-large {
-  padding: $pad-large;
-}
-html [pad-large-left], .pad-large-left {
-  padding-left: $pad-large;
-}
-html [pad-large-right], .pad-large-right {
-  padding-right: $pad-large;
-}
-html [pad-large-top], .pad-large-top {
-  padding-top: $pad-large;
-}
-html [pad-large-bottom], .pad-large-bottom {
-  padding-bottom: $pad-large;
-}
-html [pad-large-v], .pad-large-v {
-  padding-top: $pad-large;
-  padding-bottom: $pad-large;
-}
-html [pad-large-h], .pad-large-h {
-  padding-left: $pad-large;
-  padding-right: $pad-large;
-}

front/salix/styles/photo-list.scss

@@ -1,4 +1,5 @@
 @import "./variables";
+
 .photo-list {
     justify-content: center;
     align-items: flex-start;
@@ -8,7 +9,7 @@
     .photo {
         box-sizing: border-box;
         transition: all 0.5s;
-        padding: $pad-small;
+        padding: $spacing-sm;
         position: relative;
         opacity: 0.7;
         width: 28em;
@@ -33,7 +34,6 @@
             top: 1em
         }
     }
-
     .photo:hover {
         opacity: 1
     }

front/salix/styles/title.scss

@@ -1,28 +0,0 @@
-@import "./variables";
-
-h1 {
-    font-size: 32pt;
-}
-h2 {
-    font-size: 28pt;
-}
-h3 {
-    font-size: 24pt;
-}
-h4 {
-    font-size: 20pt;
-}
-h5 {
-    font-size: 16pt;
-}
-h6 {
-    font-size: 12pt;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    padding: 0;
-    margin-top: 0;
-    margin-bottom: .2em;
-    font-family: vn-font-bold;
-    color: $color-font
-}

modules/agency/front/basic-data/index.html

@@ -9,7 +9,7 @@
     name="form"
     ng-submit="$ctrl.onSubmit()"
     class="vn-w-md">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield
                 label="Name" 

modules/agency/front/calendar/index.html

@@ -7,7 +7,7 @@
     on-move-next="ndMonth.moveNext(2)"
     on-move-previous="ndMonth.movePrevious(2)"
     vn-acl="deliveryBoss"
-    pad-medium>
+    class="vn-pa-md">
 </vn-calendar>
 <vn-calendar
     vn-id="ndMonth"
@@ -18,5 +18,5 @@
     default-date="$ctrl.ndMonthDate"
     vn-acl="deliveryBoss"
     display-controls="false"
-    pad-medium>
+    class="vn-pa-md">
 </vn-calendar>

modules/agency/front/create/index.html

@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-two vn-focus
                     label="Name" 

modules/agency/front/delivery-days/index.html

@@ -1,6 +1,6 @@
 <div style="margin: 0 auto; max-width: 40em;">
     <form ng-submit="$ctrl.onSubmit()">
-        <vn-card pad-medium>
+        <vn-card class="vn-pa-md">
             <vn-vertical>
                 <vn-horizontal>
                     <vn-autocomplete
@@ -38,7 +38,7 @@
             <vn-submit label="Query"></vn-submit>
         </vn-button-bar>
     </form>
-    <vn-card pad-medium margin-medium-top>
+    <vn-card class="vn-pa-md vn-mt-md">
         <vn-zone-calendar
             events="events.events"
             exclusions="events.exclusions">

modules/agency/front/edit/index.html

@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield vn-two vn-focus
                 label="Name" 

modules/agency/front/events/index.html

@@ -14,12 +14,12 @@
                 <vn-one>
                     <div
                         ng-if="::row.from && !row.to"
-                        margin-small-bottom>
+                        class="vn-mb-sm">
                         {{::row.from | dateTime:'dd/MM/yyyy'}}
                     </div>
                     <div
                         ng-if="::!row.from || row.to"
-                        margin-small-bottom>
+                        class="vn-mb-sm">
                         <span ng-if="row.to">
                             {{::row.from | dateTime:'dd/MM/yyyy'}} - {{::row.to | dateTime:'dd/MM/yyyy'}}
                         </span>
@@ -72,7 +72,7 @@
     on-response="$ctrl.onSave(response)">
     <tpl-body>
         <vn-vertical>
-            <vn-vertical pad-medium-bottom>
+            <vn-vertical class="vn-pb-md">
                 <vn-radio
                     field="$ctrl.eventType"
                     label="One day"

modules/agency/front/events/style.scss

@@ -2,8 +2,8 @@
 
 vn-zone-events {
     .week-days {
-        margin-top: $margin-small;
-        margin-bottom: $margin-medium;
+        margin-top: $spacing-sm;
+        margin-bottom: $spacing-md;
         text-align: center;
 
         & > span {

modules/agency/front/index/index.html

@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <div>
-    <vn-card class="vn-w-sm pad-medium-h">
+    <vn-card class="vn-w-sm vn-px-md">
         <vn-searchbar
             panel="vn-zone-search-panel"
             model="model"
@@ -18,9 +18,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-md"
-        margin-medium-top
-        margin-huge-bottom>
+        class="vn-w-md vn-mt-md vn-mb-xl">
         <vn-card>
         <vn-table model="model">
             <vn-thead>

modules/agency/front/location-search-panel/index.html

@@ -33,7 +33,7 @@
                 value-field="id">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>

modules/agency/front/location/index.html

@@ -5,13 +5,13 @@
     auto-load="false">
 </vn-crud-model>
 <div class="vn-w-md">
-    <vn-card pad-large-h>
+    <vn-card class="vn-px-lg">
         <vn-searchbar
             on-search="$ctrl.onSearch($params)"
             vn-focus>
         </vn-searchbar>
     </vn-card>
-    <vn-card pad-large margin-medium-top>
+    <vn-card class="vn-pa-lg vn-mt-md">
         <vn-treeview
             vn-id="treeview"
             model="model"

modules/agency/front/main/style.scss

@@ -4,7 +4,7 @@ vn-zone {
     ul.menu {
         list-style-type: none;
         padding: 0;
-        padding-top: $pad-medium;
+        padding-top: $spacing-md;
         margin: 0;
         font-size: inherit;
 

modules/agency/front/search-panel/index.html

@@ -26,7 +26,7 @@
                 value-field="id">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>

modules/agency/front/summary/index.html

@@ -1,6 +1,6 @@
 <vn-card class="summary">
     <h5>{{$ctrl.summary.name}}</h5>
-    <vn-horizontal pad-medium>
+    <vn-horizontal class="vn-pa-md">
         <vn-one>    
             <vn-label-value label="Id" 
                 value="{{$ctrl.summary.id}}">

modules/claim/front/action/index.html

@@ -5,7 +5,7 @@
     data="$ctrl.salesClaimed">
 </vn-crud-model>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <div class="totalBox" ng-show="$ctrl.salesClaimed.length > 0">
@@ -15,7 +15,7 @@
                 </div>
             </vn-horizontal>
             <vn-horizontal>
-                <vn-tool-bar margin-medium-bottom>
+                <vn-tool-bar class="vn-mb-md">
                     <vn-button
                         label="Import claim" 
                         disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedState"
@@ -172,7 +172,7 @@
 </vn-crud-model>
 <!-- Transfer Popover -->
 <vn-popover class="lastTicketsPopover" vn-id="lastTicketsPopover">
-    <div class="ticketList" pad-medium>
+    <div class="ticketList vn-pa-md">
         <vn-table model="lastTicketsModel" auto-load="false" class="vn-grid">
             <vn-thead>
                 <vn-tr>

modules/claim/front/basic-data/index.html

@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
@@ -26,7 +26,7 @@
                 ini-options="{enableTime: true, dateFormat: 'd-m-Y', time_24hr: true}">
             </vn-date-picker>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-autocomplete 
                 vn-one
                 disabled="false"
@@ -49,7 +49,7 @@
             </vn-autocomplete>
             </vn-horizontal>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-textarea
                 vn-three
                 label="Observation" 

modules/claim/front/detail/index.html

@@ -7,7 +7,7 @@
     on-data-change="$ctrl.calculateTotals()">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <div class="totalBox">
@@ -80,10 +80,10 @@
 <!-- Add Lines Dialog -->
 <vn-dialog vn-id="add-sales" class="modal-form">
     <tpl-body>
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5><span translate>Claimable sales from ticket</span> {{$ctrl.claim.ticketFk}}</h5>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-table>
                 <vn-thead>
                     <vn-tr>
@@ -131,10 +131,10 @@
         enable="true">
     </vn-spinner>
     <div ng-if="$ctrl.mana != null">
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
         </vn-horizontal>
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-input-number
                 vn-focus
                 label="Discount"

modules/claim/front/development/index.html

@@ -37,7 +37,7 @@
     form="form">
 </vn-watcher>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <form name="form">
                 <vn-horizontal ng-repeat="claimDevelopment in claimDevelopments">
@@ -90,7 +90,7 @@
                         vn-acl="salesAssistant">
                     </vn-autocomplete>
                     <vn-icon-button
-                        margin-medium-v
+                        class="vn-my-md"
                         vn-tooltip="Remove sale"
                         icon="delete"
                         ng-click="model.remove($index)"
@@ -99,7 +99,7 @@
                     </vn-icon-button>
                 </vn-horizontal>
             </form>
-            <vn-one pad-medium-top>
+            <vn-one class="vn-pt-md">
                 <vn-icon-button
                     vn-bind="+"
                     vn-tooltip="Add sale"

modules/claim/front/dms/index/style.scss

@@ -5,7 +5,7 @@ vn-claim-dms-index {
         border: 2px dashed $color-font-secondary;
         color: $color-font-secondary;
         box-sizing: border-box;
-        padding: 2em $pad-medium;
+        padding: 2em $spacing-md;
         border-radius: 0.5em;
         text-align: center;
         font-size: 1.4em;
@@ -17,7 +17,7 @@ vn-claim-dms-index {
 
     .photo-list {
         
-        padding: $pad-medium;
+        padding: $spacing-md;
         min-height: 100%;
 
         .photo {

modules/claim/front/index/index.html

@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-searchbar
             panel="vn-claim-search-panel"
             on-search="$ctrl.onSearch($params)"
@@ -17,8 +17,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-md"
-        margin-medium-v>
+        class="vn-w-md vn-my-md">
         <vn-card>
         <vn-table model="model">
             <vn-thead>

modules/claim/front/search-panel/index.html

@@ -65,7 +65,7 @@
                 model="filter.created">
             </vn-date-picker>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>

modules/client/front/address/create/index.html

@@ -15,8 +15,8 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
-        <vn-horizontal pad-small-v>
+    <vn-card class="vn-pa-lg">
+        <vn-horizontal class="vn-py-sm">
             <vn-check vn-one label="Default" field="$ctrl.data.isDefaultAddress"></vn-check> 
         </vn-horizontal>
         <vn-horizontal>
@@ -64,11 +64,15 @@
                 label="Postcode"
                 field="$ctrl.address.postalCode">
             </vn-textfield>
-<!--             <vn-icon-button vn-auto margin-medium-v
+            <!--
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New postcode"
                 ng-click="postcode.open()">
-            </vn-icon-button> -->
+            </vn-icon-button>
+            -->
         </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete

modules/client/front/address/edit/index.html

@@ -26,8 +26,8 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
-        <vn-horizontal pad-small-v>
+    <vn-card class="vn-pa-lg">
+        <vn-horizontal class="vn-py-sm">
             <vn-check vn-one label="Enabled" field="$ctrl.address.isActive"></vn-check>
             <vn-check
                 vn-one label="Is equalizated"
@@ -75,11 +75,15 @@
                 label="Postcode"
                 field="$ctrl.address.postalCode">
             </vn-textfield>
-     <!--        <vn-icon-button vn-auto margin-medium-v
+            <!--
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New postcode"
                 ng-click="postcode.open()">
-            </vn-icon-button> -->
+            </vn-icon-button>
+            -->
         </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete vn-one

modules/client/front/address/index/index.html

@@ -9,18 +9,17 @@
 <vn-data-viewer
     model="model"
     class="vn-w-md">
-    <vn-card pad-medium>
+    <vn-card class="vn-pa-md">
     <div
         ng-repeat="address in $ctrl.addresses"
         class="address">
         <a
             ui-sref="client.card.address.edit({addressId: {{::address.id}}})"
-            class="pad-small border-solid"
+            class="vn-pa-sm border-solid border-radius"
             ng-class="{'item-disabled': !address.isActive}"
-            translate-attr="{title: 'Edit address'}"
-            border-radius>
+            translate-attr="{title: 'Edit address'}">
             <vn-none
-                pad-small-right
+                class="vn-pr-sm"
                 ng-click="$ctrl.onStarClick($event)">
                 <vn-icon-button
                     ng-if="$ctrl.isDefaultAddress(address)"
@@ -52,11 +51,9 @@
             <vn-vertical
                 vn-one
                 ng-if="address.observations.length"
-                border-solid-left
-                pad-medium-h
-                class="vn-hide-narrow"
+                class="vn-hide-narrow vn-px-md border-solid-left"
                 style="height: 6em; overflow: auto;">
-                <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'pad-small-top': $index}">
+                <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'vn-pt-sm': $index}">
                     <b>{{::observation.observationType.description}}:</b> 
                     <span>{{::observation.description}}</span>
                 </vn-one>

modules/client/front/address/index/style.scss

@@ -3,7 +3,7 @@
 
 vn-client-address-index {
     .address {
-        padding-bottom: $pad-medium;
+        padding-bottom: $spacing-md;
 
         &:last-child {
             padding-bottom: 0;

modules/client/front/balance/create/index.html

@@ -6,7 +6,7 @@
         <vn-horizontal class="header">
             <h5><span translate>New payment</span></h5>
         </vn-horizontal>
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-horizontal>
                 <vn-date-picker vn-one 
                     label="Date" 
@@ -35,7 +35,7 @@
                 </vn-input-number>
             </vn-horizontal>
         </div>
-        <vn-horizontal margin-medium class="buttons-bar">
+        <vn-horizontal class="vn-ma-md buttons-bar">
             <vn-button vn-one label="Save" ng-click="$ctrl.save()"></vn-button>
             <vn-button vn-one ng-click="$ctrl.hide()" label="Cancel"></vn-button>
         </vn-horizontal>

modules/client/front/balance/index/index.html

@@ -13,7 +13,7 @@
     data="$ctrl.clientRisks">
 </vn-crud-model>
 <div class="vn-w-lg">
-    <vn-card class="pad-medium margin-medium-bottom">
+    <vn-card class="vn-pa-md vn-mb-md">
         <vn-horizontal
             style="align-items: center;">
             <vn-one></vn-one>

modules/client/front/basic-data/index.html

@@ -7,7 +7,7 @@
 </vn-watcher>
 <form name="form" vn-http-submit="watcher.submit()" compact>
     <fieldset>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield
                     vn-one 

modules/client/front/billing-data/index.html

@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
@@ -52,14 +52,16 @@
                     </vn-horizontal>
                 </tpl-item>
             </vn-autocomplete>
-            <vn-icon-button vn-auto margin-medium-v
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New bank entity"
                 vn-dialog="bankEntityDialog"
                 vn-acl="salesAssistant">
             </vn-icon-button>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-one>
                 <vn-check
                     label="Received LCR"
@@ -95,7 +97,7 @@
     on-open="$ctrl.onBankEntityOpen()"
     on-response="$ctrl.onBankEntityResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>New bank entity</h5>
+        <h5 class="vn-py-sm" translate>New bank entity</h5>
         <vn-horizontal>
             <vn-textfield vn-one
                 label="Name"

modules/client/front/contact/index.html

@@ -12,7 +12,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="contact in contacts">
             <vn-textfield
                 vn-one
@@ -29,7 +29,7 @@
             <vn-none>
                 <vn-icon-button
                     pointer
-                    margin-medium-v
+                    class="vn-my-md"
                     vn-tooltip="Remove contact"
                     icon="delete"
                     ng-click="model.remove($index)">

modules/client/front/create/index.html

@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
                 <vn-autocomplete vn-one
@@ -54,7 +54,8 @@
                     label="City"
                     field="$ctrl.client.city">
                 </vn-textfield>
-                <!-- <vn-autocomplete vn-id="town" vn-one 
+                <!--
+                <vn-autocomplete vn-id="town" vn-one 
                     label="City"
                     url="/api/Towns"
                     fields="['id', 'name']"
@@ -62,12 +63,15 @@
                     show-field="name"
                     value-field="name"
                     field="$ctrl.client.city">
-                </vn-autocomplete> -->
-<!--                 <vn-icon-button vn-auto margin-medium-v
+                </vn-autocomplete>
+                <vn-icon-button
+                    vn-auto
+                    class="vn-my-md"
                     icon="add_circle"
                     vn-tooltip="New postcode"
                     ng-click="postcode.open()">
-                </vn-icon-button> -->
+                </vn-icon-button>
+                -->
                 <vn-textfield vn-one
                     label="Postcode"
                     field="$ctrl.client.postcode">
@@ -102,7 +106,7 @@
                     info="You can save multiple emails">
                 </vn-textfield>
             </vn-horizontal>
-            <vn-horizontal pad-small-v>
+            <vn-horizontal class="vn-py-sm">
                 <vn-check
                     vn-one
                     label="Is equalizated"

modules/client/front/credit-insurance/create/index.html

@@ -1,5 +1,5 @@
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0"
                 label="Credit"

modules/client/front/credit-insurance/index/index.html

@@ -1,17 +1,16 @@
 <vn-data-viewer
     data="$ctrl.classifications"
     class="vn-w-md">
-    <vn-card pad-medium>
+    <vn-card class="vn-pa-md">
     <vn-horizontal
         ng-repeat="classification in $ctrl.classifications track by classification.id"
-        class="pad-medium-bottom insurance"
+        class="vn-pb-md insurance"
         style="align-items: center;">
         <vn-one
-            border-radius
-            class="pad-small border-solid"
+            class="vn-pa-sm border-solid border-radius"
             ng-class="{'item-hightlight': !classification.finished,'item-disabled': classification.finished}">
             <vn-horizontal style="align-items: center;">
-                <vn-none pad-medium-h>
+                <vn-none class="vn-px-md">
                     <vn-icon-button
                         ng-if="!classification.finished"
                         icon="lock"
@@ -19,11 +18,11 @@
                         ng-click="$ctrl.closeContract(classification)">
                     </vn-icon-button>
                 </vn-none>
-                <vn-one border-solid-right>
+                <vn-one class="border-solid-right">
                     <div><vn-label translate>Since</vn-label> {{::classification.started | dateTime:'dd/MM/yyyy'}}</div>
                     <div><vn-label translate>To</vn-label> {{classification.finished | dateTime:'dd/MM/yyyy'}}</div>
                 </vn-one>
-                <vn-vertical vn-one pad-medium-h>
+                <vn-vertical vn-one class="vn-px-md">
                     <vn-horizontal ng-repeat="insurance in classification.insurances track by insurance.id">
                         <vn-one>
                             <vn-label-value label="Credit" 

modules/client/front/credit-insurance/insurance/create/index.html

@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0"
                 label="Credit"

modules/client/front/credit-insurance/insurance/index/index.html

@@ -6,7 +6,7 @@
     data="insurances" auto-load="false">
 </vn-crud-model>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                 <vn-thead>

modules/client/front/credit/create/index.html

@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0" 
                 label="Credit"

modules/client/front/dms/create/index.html

@@ -3,9 +3,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 

modules/client/front/dms/edit/index.html

@@ -2,9 +2,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 

modules/client/front/fiscal-data/index.html

@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield
                 vn-two
@@ -76,7 +76,7 @@
                 label="Postcode">         
             </vn-autocomplete> -->
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Active"
@@ -88,7 +88,7 @@
                 field="$ctrl.client.isFreezed">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Has to invoice"
@@ -100,7 +100,7 @@
                 field="$ctrl.client.isVies">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Invoice by mail"
@@ -112,7 +112,7 @@
                 field="$ctrl.client.hasToInvoiceByAddress">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Is equalizated"

modules/client/front/greuge/create/index.html

@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one vn-focus
                 label="Amount"

modules/client/front/greuge/index/index.html

@@ -17,7 +17,7 @@
     <vn-card
         ng-if="model.data.length > 0"
         style="text-align: right;"
-        class="margin-medium-bottom pad-large">
+        class="vn-mb-md vn-pa-lg">
         <vn-label-value
             label="Total" 
             value="{{edit.model.sumAmount | currency: 'EUR': 2}}">