From 559cc5eb8c8d831302bc6b0388bb8bb3e94e0f4c Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan@verdnatura.es>
Date: Thu, 2 Apr 2020 14:52:02 +0200
Subject: [PATCH] SCSS em to px: Second step

---
 front/core/components/button/style.scss       | 12 +++++-----
 front/core/components/calendar/style.scss     | 10 ++++-----
 front/core/components/chip/style.scss         | 10 ++++-----
 front/core/components/confirm/style.scss      |  2 +-
 front/core/components/data-viewer/style.scss  |  4 ++--
 front/core/components/debug-info/style.scss   |  6 ++---
 front/core/components/dialog/style.scss       |  6 ++---
 front/core/components/label-value/style.scss  |  2 +-
 front/core/components/list/style.scss         |  4 ++--
 front/core/components/pagination/style.scss   |  2 +-
 front/core/components/popover/style.scss      |  4 ++--
 front/core/components/scroll-up/style.scss    |  2 +-
 front/core/components/searchbar/style.scss    |  8 +++----
 front/core/components/snackbar/style.scss     | 14 ++++++------
 front/core/components/table/style.scss        | 12 +++++-----
 front/core/components/treeview/style.scss     |  4 ++--
 front/core/components/wday-picker/style.scss  |  4 ++--
 front/core/directives/uvc.scss                |  2 +-
 front/core/styles/animations.scss             |  2 +-
 front/core/styles/global.scss                 |  2 +-
 front/core/styles/responsive.scss             |  2 ++
 front/core/styles/variables.scss              | 22 +++++++++----------
 front/salix/components/descriptor/style.scss  |  6 ++---
 front/salix/components/home/style.scss        |  6 ++---
 front/salix/components/layout/style.scss      |  6 ++---
 front/salix/components/login/style.scss       |  8 +++----
 front/salix/components/summary/style.scss     |  4 ++--
 .../salix/components/user-popover/style.scss  |  4 ++--
 front/salix/styles/misc.scss                  |  6 ++---
 front/salix/styles/order-product.scss         | 10 ++++-----
 front/salix/styles/photo-list.scss            |  2 +-
 modules/claim/front/detail/style.scss         |  2 +-
 modules/claim/front/photos/style.scss         |  6 ++---
 modules/claim/front/summary/style.scss        |  4 ++--
 .../front/descriptor-popover/style.scss       |  2 +-
 modules/client/front/sample/create/style.scss |  4 ++--
 modules/client/front/sms/style.scss           |  2 +-
 .../front/descriptor-popover/style.scss       |  4 ++--
 .../item/front/descriptor-popover/style.scss  |  4 ++--
 modules/item/front/fetched-tags/style.scss    |  4 ++--
 modules/item/front/summary/style.scss         |  2 +-
 modules/order/front/catalog-view/style.scss   |  2 +-
 modules/order/front/prices-popover/style.scss |  2 +-
 modules/order/front/summary/style.scss        |  2 +-
 .../route/front/descriptor-popover/style.scss |  2 +-
 .../front/descriptor-popover/style.scss       |  4 ++--
 modules/ticket/front/descriptor/style.scss    |  2 +-
 modules/ticket/front/sale/style.scss          |  8 +++----
 modules/ticket/front/sms/style.scss           |  2 +-
 modules/ticket/front/summary/style.scss       |  4 ++--
 modules/worker/front/calendar/style.scss      |  2 +-
 modules/zone/front/calendar/style.scss        |  2 +-
 modules/zone/front/delivery-days/style.scss   |  2 +-
 53 files changed, 129 insertions(+), 127 deletions(-)

diff --git a/front/core/components/button/style.scss b/front/core/components/button/style.scss
index b583dacd5..4969ea60b 100644
--- a/front/core/components/button/style.scss
+++ b/front/core/components/button/style.scss
@@ -4,7 +4,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 2.8em;
+    height: 44px;
     border: none;
     border-radius: 1px;
     font-family: vn-font-bold;
@@ -34,13 +34,13 @@
         & > vn-icon {
             vertical-align: middle;
             color: inherit;
-            font-size: 1.7em;
+            font-size: 27px;
         }
     }
     &.colored {
         color: white;
         background-color: $color-button;
-        box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
         transition: background 200ms ease-in-out;
 
         &:not(.disabled) {
@@ -80,8 +80,8 @@
     }
     &.round {
         border-radius: 50%;
-        height: 3.8em;
-        width: 3.8em;
+        height: 60px;
+        width: 60px;
 
         & > button > span {
             display: none;
@@ -100,7 +100,7 @@
         }
 
         &.lg {
-            font-size: 1.2em;
+            font-size: 19px;
         }
     }
     &.disabled {
diff --git a/front/core/components/calendar/style.scss b/front/core/components/calendar/style.scss
index fa7b92da7..80964f5d8 100644
--- a/front/core/components/calendar/style.scss
+++ b/front/core/components/calendar/style.scss
@@ -8,7 +8,7 @@
             display: flex;
             margin-bottom: 8px;
             align-items: center;
-            height: 2.4em;
+            height: 38px;
 
             & > .title {
                 flex: 1;
@@ -41,7 +41,7 @@
 
             & > .day {
                 width: 14.28%;
-                height: 2.5em;
+                height: 40px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -62,9 +62,9 @@
                     justify-content: center;
                     align-items: center;
                     border-radius: 50%;
-                    font-size: .87em;
-                    width: 2.2em;
-                    height: 2.2em;
+                    font-size: .85rem;
+                    width: 35px;
+                    height: 35px;
                     cursor: pointer;
                     outline: 0;
                     transition: background-color 300ms ease-in-out;
diff --git a/front/core/components/chip/style.scss b/front/core/components/chip/style.scss
index 242312687..17518df7d 100644
--- a/front/core/components/chip/style.scss
+++ b/front/core/components/chip/style.scss
@@ -5,7 +5,7 @@ vn-chip {
     background-color: $color-bg;
     color: $color-font;
     font-size: .9rem;
-    margin: .25em;
+    margin: 4px;
     display: inline-flex;
     align-items: center;
     height: 32px;
@@ -13,7 +13,7 @@ vn-chip {
     box-sizing: border-box;
 
     &.small {
-        height: 1.5em;
+        height: 24px;
 
         & > div {
             padding: 9px;
@@ -52,7 +52,7 @@ vn-chip {
         overflow: hidden;
 
         & > vn-avatar {
-            margin-left: -0.7em;
+            margin-left: -11px;
             margin-right: 4px;
             vertical-align: middle;
             height: 32px;
@@ -60,8 +60,8 @@ vn-chip {
         }
     }
     & > vn-icon {
-        margin-right: .12em;
-        margin-left: -.12em;
+        margin-right: 1px;
+        margin-left: -1px;
         vertical-align: middle;
         opacity: .6;
         cursor: pointer;
diff --git a/front/core/components/confirm/style.scss b/front/core/components/confirm/style.scss
index d3cea6cb1..154e3b478 100644
--- a/front/core/components/confirm/style.scss
+++ b/front/core/components/confirm/style.scss
@@ -1,3 +1,3 @@
 .vn-confirm .window {
-    max-width: 30em
+    max-width: 480px
 }
\ No newline at end of file
diff --git a/front/core/components/data-viewer/style.scss b/front/core/components/data-viewer/style.scss
index d0b3c727d..0dc05c6d1 100644
--- a/front/core/components/data-viewer/style.scss
+++ b/front/core/components/data-viewer/style.scss
@@ -6,9 +6,9 @@ vn-data-viewer {
     & > .empty-rows {
         display: block;
         text-align: center;
-        padding: 1.5em;
+        padding: 24px;
         box-sizing: border-box;
         color: $color-font-secondary;
-        font-size: 1.4em;
+        font-size: 22px;
     }
 }
\ No newline at end of file
diff --git a/front/core/components/debug-info/style.scss b/front/core/components/debug-info/style.scss
index 0ca30266d..13c04dcae 100644
--- a/front/core/components/debug-info/style.scss
+++ b/front/core/components/debug-info/style.scss
@@ -19,7 +19,7 @@ vn-debug-info {
     & > h6 {
         font-weight: normal;
         color: rgba(255, 255, 255, .5);
-        font-size: 16px;
+        font-size: 1rem;
     }
     ul {
         list-style-type: none;
@@ -28,10 +28,10 @@ vn-debug-info {
 
         & > li {
             margin-top: 3px;
-            font-size: .95em;
+            font-size: 15px;
 
             & > span {
-                padding: .05em 3px;
+                padding: 1px 3px;
                 border-radius: 4px;
                 transition: background-color 200ms ease-in-out;
                 
diff --git a/front/core/components/dialog/style.scss b/front/core/components/dialog/style.scss
index 6023a4666..7aa3d34eb 100644
--- a/front/core/components/dialog/style.scss
+++ b/front/core/components/dialog/style.scss
@@ -20,11 +20,11 @@
 
         & > .body > tpl-body {
             display: block;
-            min-width: 16em;
+            min-width: 256px;
         }
         & > .buttons > tpl-buttons {
             display: block;
-            margin-top: 1.5em;
+            margin-top: 24px;
             text-align: right;
     
             button,
@@ -39,7 +39,7 @@
                 color: $color-button;
                 font-family: vn-font-bold;
                 padding: 11px;
-                margin: -0.7em;
+                margin: -1px;
                 margin-left: 11px;
             }
         }
diff --git a/front/core/components/label-value/style.scss b/front/core/components/label-value/style.scss
index e4a2cca03..d0fd19b3d 100644
--- a/front/core/components/label-value/style.scss
+++ b/front/core/components/label-value/style.scss
@@ -4,6 +4,6 @@ vn-label-value > section {
     & > vn-icon {
         vertical-align: middle;
         color: $color-font-secondary;
-        font-size: 1.2em
+        font-size: 19px
     }
 }
\ No newline at end of file
diff --git a/front/core/components/list/style.scss b/front/core/components/list/style.scss
index da4378788..b1b6dcf48 100644
--- a/front/core/components/list/style.scss
+++ b/front/core/components/list/style.scss
@@ -76,7 +76,7 @@ vn-item,
             margin-right: $spacing-md;
 
             & > .vn-icon {
-                font-size: 1.2em;
+                font-size: 19px;
             }
         }
         &[side] {
@@ -89,7 +89,7 @@ vn-item,
                 margin-left: 8px;
                 transition: opacity 250ms ease-out;
                 padding: 0;
-                font-size: 1.05em;
+                font-size: 1rem;
 
                 &:hover {
                     opacity: 1;
diff --git a/front/core/components/pagination/style.scss b/front/core/components/pagination/style.scss
index 0d5ad615a..413a6fb5f 100644
--- a/front/core/components/pagination/style.scss
+++ b/front/core/components/pagination/style.scss
@@ -4,7 +4,7 @@ vn-pagination {
     text-align: center;
 
     & > div  > vn-icon-button {
-        font-size: 32px;
+        font-size: 2rem;
         padding: 0;
     }
 }
\ No newline at end of file
diff --git a/front/core/components/popover/style.scss b/front/core/components/popover/style.scss
index 274b96782..e27ef6012 100644
--- a/front/core/components/popover/style.scss
+++ b/front/core/components/popover/style.scss
@@ -10,7 +10,7 @@
     color: $color-font;
 
     opacity: 0;
-    transform: translateY(-.6em);
+    transform: translateY(-9px);
     transition-property: opacity, transform;
     transition-duration: 200ms;
     transition-timing-function: ease-in-out;
@@ -27,7 +27,7 @@
         & > .arrow {
             width: 16px;
             height: 16px;
-            margin: -.5em;
+            margin: -8px;
             background-color: $color-bg-panel;
             box-shadow: 0 1px 6px $color-shadow;
             position: absolute;
diff --git a/front/core/components/scroll-up/style.scss b/front/core/components/scroll-up/style.scss
index 40ca92322..44d12f14f 100644
--- a/front/core/components/scroll-up/style.scss
+++ b/front/core/components/scroll-up/style.scss
@@ -1,5 +1,5 @@
 vn-scroll-up {
-    top: 5.5em;
+    top: 88px;
     right: 32px;
     display: none;
     position: fixed;
diff --git a/front/core/components/searchbar/style.scss b/front/core/components/searchbar/style.scss
index 9275f03e2..c1d4be21c 100644
--- a/front/core/components/searchbar/style.scss
+++ b/front/core/components/searchbar/style.scss
@@ -2,15 +2,15 @@
 
 vn-searchbar {
     display: block;
-    max-width: 35em;
+    max-width: 560px;
     margin: 0 auto;
 
     .search-params {
         flex: 1;
-        margin: .05em 0;
+        margin: 1px 0;
         overflow: visible;
         display: flex;
-        max-width: 24em;
+        max-width: 384px;
 
         & > .search-param {
             color: rgba(0, 0, 0, .6);
@@ -39,7 +39,7 @@ vn-searchbar {
 }
 
 .search-panel {
-    max-height: 48em;
+    max-height: 768px;
 
     & > form {
         padding: $spacing-lg;
diff --git a/front/core/components/snackbar/style.scss b/front/core/components/snackbar/style.scss
index 55c804231..e7ca1fba8 100644
--- a/front/core/components/snackbar/style.scss
+++ b/front/core/components/snackbar/style.scss
@@ -1,11 +1,11 @@
 @import "variables";
 
 vn-snackbar #shapes {
-    max-height: 20.625em;
-    margin-left: -12.5em;
+    max-height: 330px;
+    margin-left: -200px;
     position: fixed;
     z-index: 100;
-    width: 25em;
+    width: 400px;
     left: 50%;
     bottom: 0
 }
@@ -14,7 +14,7 @@ vn-snackbar .shape {
     background-color: rgba(0, 0, 0, .8);
     box-shadow: 0 0 6px $color-shadow;
     transition: transform 300ms ease-in-out;
-    transform: translateY(20em);
+    transform: translateY(320px);
     box-sizing: border-box;
     border-radius: 3px;
     margin-bottom: 15px;
@@ -26,8 +26,8 @@ vn-snackbar .shape {
 
         vn-chip { 
             position: absolute;
-            left: -1em;
-            top: -1em;
+            left: -16px;
+            top: -16px;
         }
     }
 
@@ -62,6 +62,6 @@ vn-snackbar .shape {
         float: right;
         border: none;
         padding: 8px;
-        margin: -.5em
+        margin: -8px;
     }
 }
\ No newline at end of file
diff --git a/front/core/components/table/style.scss b/front/core/components/table/style.scss
index 4f1e1a5ba..7dd69d89f 100644
--- a/front/core/components/table/style.scss
+++ b/front/core/components/table/style.scss
@@ -14,7 +14,7 @@ vn-table {
     & > vn-thead,
     & > thead {
         display: table-header-group;
-        border-bottom: .15em solid $color-spacer;
+        border-bottom: 2px solid $color-spacer;
 
         & > * > th {
             font-weight: normal;
@@ -52,7 +52,7 @@ vn-table {
     }
     & > vn-tfoot,
     & > tfoot {
-        border-top: .15em solid $color-spacer;
+        border-top: 2px solid $color-spacer;
         display: table-footer-group
     }
     & > * > vn-tr,
@@ -103,7 +103,7 @@ vn-table {
                     text-align: center;
                 }
                 &[expand] {
-                    max-width: 25em;
+                    max-width: 400px;
                     min-width: 0;
                 }
                 vn-icon.bright, i.bright {
@@ -111,10 +111,10 @@ vn-table {
                 }
             }
             & > :last-child {
-                padding-right: 1.4em;
+                padding-right: 22px;
             }
             & > :first-child {
-                padding-left: 1.4em;
+                padding-left: 22px;
             }
         }
         & > a.vn-tr {
@@ -158,7 +158,7 @@ vn-table {
             vn-icon-menu {
                 display: inline-block;
                 color: $color-main;
-                padding: .25em
+                padding: 4px
             }
         }
         & > [actions] {
diff --git a/front/core/components/treeview/style.scss b/front/core/components/treeview/style.scss
index 7cd8c8bea..b8af114c1 100644
--- a/front/core/components/treeview/style.scss
+++ b/front/core/components/treeview/style.scss
@@ -11,7 +11,7 @@ vn-treeview-childs {
             list-style: none;
 
             ul {
-                padding-left: 2.2em;
+                padding-left: 35px;
             }
         }
     }
@@ -37,7 +37,7 @@ vn-treeview-childs {
 
 vn-treeview-child {
     line-height: 38px;
-    font-size: 16px;
+    font-size: 1rem;
     display: block;
 
     .node {
diff --git a/front/core/components/wday-picker/style.scss b/front/core/components/wday-picker/style.scss
index ab14c448c..a8e3a65ab 100644
--- a/front/core/components/wday-picker/style.scss
+++ b/front/core/components/wday-picker/style.scss
@@ -12,8 +12,8 @@
         padding: 6px;
         margin: 3px;
         display: inline-flex;
-        width: 1.5em;
-        height: 1.5em;
+        width: 24px;
+        height: 24px;
         justify-content: center;
         align-items: center;
         outline: none;
diff --git a/front/core/directives/uvc.scss b/front/core/directives/uvc.scss
index 5221b8bdd..0cdf0ba1a 100644
--- a/front/core/directives/uvc.scss
+++ b/front/core/directives/uvc.scss
@@ -1,6 +1,6 @@
 vn-table vn-dialog[vn-id="uvc"]{
     & > div {
-        min-width: 18em;
+        min-width: 288px;
         align-items: center;
 
     }
diff --git a/front/core/styles/animations.scss b/front/core/styles/animations.scss
index 039f79c77..8ae119fb4 100644
--- a/front/core/styles/animations.scss
+++ b/front/core/styles/animations.scss
@@ -2,7 +2,7 @@
 @keyframes nothing {}
 @keyframes slideIn {
     from {
-        transform: translate3d(-2em, 0, 0);
+        transform: translate3d(-32px, 0, 0);
         opacity: 0;
     }
     to {
diff --git a/front/core/styles/global.scss b/front/core/styles/global.scss
index ed017fafd..555b54f9e 100644
--- a/front/core/styles/global.scss
+++ b/front/core/styles/global.scss
@@ -1,10 +1,10 @@
 @import "variables";
 
 html {
+    font-size: $font-size;
     background-color: $color-bg;
     overflow: auto;
     height: 100%;
-    font-size: $font-size;
 }
 body {
     height: 100%;
diff --git a/front/core/styles/responsive.scss b/front/core/styles/responsive.scss
index 03cdf2423..735114cd8 100644
--- a/front/core/styles/responsive.scss
+++ b/front/core/styles/responsive.scss
@@ -48,6 +48,8 @@
 	html { font-size: 11pt; }
 }
 
+html { font-size: 9pt; }
+
 .vn-hide-narrow {
 	@media (max-width: $mobile-width) {
 		display: none;
diff --git a/front/core/styles/variables.scss b/front/core/styles/variables.scss
index 5dff61f2d..5401ac5b6 100644
--- a/front/core/styles/variables.scss
+++ b/front/core/styles/variables.scss
@@ -1,17 +1,17 @@
 @import "./util";
 
-$menu-width: 16em;
-$topbar-height: 3.5em;
+$menu-width: 256px;
+$topbar-height: 56px;
 $mobile-width: 800px;
-$font-size: 16px;
+$font-size: 1rem;
 
 // Width
 
-$width-xs: 25em;
-$width-sm: 34em;
-$width-md: 50em;
-$width-lg: 80em;
-$width-xl: 100em;
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
 
 // Spacing
 
@@ -115,6 +115,6 @@ $color-alert-light: darken($color-alert, 35%);
 
 // Border
 
-$border-thin: .05em solid $color-spacer;
-$border-thin-light: .05em solid $color-spacer-light;
-$shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
+$border-thin: 1px solid $color-spacer;
+$border-thin-light: 1px solid $color-spacer-light;
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
diff --git a/front/salix/components/descriptor/style.scss b/front/salix/components/descriptor/style.scss
index decfe5c56..c47357131 100644
--- a/front/salix/components/descriptor/style.scss
+++ b/front/salix/components/descriptor/style.scss
@@ -26,7 +26,7 @@
                 padding: 10px;
             }
             vn-icon {
-                font-size: 1.8em;
+                font-size: 28px;
             }
         }
     }
@@ -51,7 +51,7 @@
             & > vn-icon {
                 padding: $spacing-sm;
                 color: $color-marginal;
-                font-size: 1.5em;
+                font-size: 24px;
     
                 &.bright {
                     color: $color-main;
@@ -70,7 +70,7 @@
                 margin: 0 $spacing-sm;
 
                 & > vn-icon {
-                    font-size: 1.8em;
+                    font-size: 28px;
                     padding: 0;
                 }
             }
diff --git a/front/salix/components/home/style.scss b/front/salix/components/home/style.scss
index 4e99341b4..dac9d422e 100644
--- a/front/salix/components/home/style.scss
+++ b/front/salix/components/home/style.scss
@@ -16,7 +16,7 @@ vn-home {
             flex-direction: row; 
             justify-content: center;
             flex-wrap: wrap;
-            max-width: 44em;
+            max-width: 704px;
             margin: 0 auto;
 
             & > a {
@@ -41,7 +41,7 @@ vn-home {
 
                     & > vn-icon {
                         display: block;
-                        font-size: 3.5em;
+                        font-size: 56px;
                     }
                 }
                 & > span {
@@ -55,7 +55,7 @@ vn-home {
                     overflow: hidden;
                     color: inherit;
                     margin: 0;
-                    line-height: 1.5em;
+                    line-height: 24px;
 
                    /*  & > .bind-letter {
                         color: #FD0;
diff --git a/front/salix/components/layout/style.scss b/front/salix/components/layout/style.scss
index 691423678..f65f511d1 100644
--- a/front/salix/components/layout/style.scss
+++ b/front/salix/components/layout/style.scss
@@ -28,7 +28,7 @@ vn-layout {
                 display: block;
             }
             & > .main-title {
-                font-size: 1.6em;
+                font-size: 25px;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
@@ -50,7 +50,7 @@ vn-layout {
         }
         .vn-button {
             color: inherit;
-            font-size: 1.05em;
+            font-size: 1rem;
             padding: 0;
         }
     }
@@ -166,6 +166,6 @@ vn-layout {
     }
 }
 #user {
-    font-size: 1.5em;
+    font-size: 24px;
     height: auto;
 }
diff --git a/front/salix/components/login/style.scss b/front/salix/components/login/style.scss
index 121d12bfa..b8a81ef2d 100644
--- a/front/salix/components/login/style.scss
+++ b/front/salix/components/login/style.scss
@@ -7,7 +7,7 @@ vn-login {
 	margin: 0;
 	padding: 0;
 	color: $color-font;
-	font-size: 1.1em;
+	font-size: 17px;
 	font-weight: normal;
 	background-color: $color-bg-dark;
 	display: flex;
@@ -18,8 +18,8 @@ vn-login {
 	& > .box {
 		box-sizing: border-box;
 		position: absolute;
-		max-width: 19em;
-		min-width: 15em;
+		max-width: 304px;
+		min-width: 240px;
 		padding: 48px;
 		background-color: $color-bg-panel;
 		box-shadow: 0 0 16px 0 rgba(0, 0, 0, .6);
@@ -56,7 +56,7 @@ vn-login {
 					position: absolute;
 					width: 0;
 					top: 3px;
-					right: -.5em;
+					right: -8px;
 					overflow: visible;
 				}
 			}
diff --git a/front/salix/components/summary/style.scss b/front/salix/components/summary/style.scss
index ad04a7b31..8d302af4a 100644
--- a/front/salix/components/summary/style.scss
+++ b/front/salix/components/summary/style.scss
@@ -11,7 +11,7 @@
         color: $color-font-dark;
         margin: 0;
         text-align: center;
-        line-height: 1.3em;
+        line-height: 20px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -38,7 +38,7 @@
         }
         & > * {
             margin: $spacing-sm;
-            min-width: 14em;
+            min-width: 224px;
             padding: 0;
         }
         & > vn-auto {
diff --git a/front/salix/components/user-popover/style.scss b/front/salix/components/user-popover/style.scss
index abe36033f..cb1cc08a0 100644
--- a/front/salix/components/user-popover/style.scss
+++ b/front/salix/components/user-popover/style.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .vn-popover .user-popover {
-    width: 16em;
+    width: 256px;
 
     & > .profile-card {
         display: flex;
@@ -33,5 +33,5 @@
     float: right;
     height: initial;
     vertical-align: middle;
-    font-size: 16px;
+    font-size: 1rem;
 }
\ No newline at end of file
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index 66a24e2aa..453e36294 100644
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@@ -3,7 +3,7 @@
 
 form vn-horizontal {
     align-items: center;
-    min-height: 2.8em;
+    min-height: 44px;
 
     & > * {
         box-sizing: border-box;
@@ -57,7 +57,7 @@ vn-bg-title {
     text-align: center;
     padding: 16px;
     color: gray;
-    font-size: 1.3em;
+    font-size: 20px;
 }
 .totalBox {
     border: 1px solid #CCC;
@@ -65,7 +65,7 @@ vn-bg-title {
     justify-content: center;
     align-items: center;
     padding: $spacing-md;
-    max-width: 14em;
+    max-width: 224px;
 }
 .form {
     height: 100%;
diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss
index 7b7e0829e..fe73a0315 100644
--- a/front/salix/styles/order-product.scss
+++ b/front/salix/styles/order-product.scss
@@ -8,7 +8,7 @@
     & > .product {
         box-sizing: border-box;
         padding: $spacing-sm;
-        width: 28em;
+        width: 448px;
         overflow: hidden;
 
         & > vn-card {
@@ -40,8 +40,8 @@
                     margin-bottom: 4px;
                     font-weight: normal;
                     line-height: initial;
-                    font-size: 1.05em;
-                    max-height:2.4em;
+                    font-size: 1rem;
+                    max-height: 38px;
                     overflow: hidden;
                 }
                 & > h4 {
@@ -49,7 +49,7 @@
                     text-transform: uppercase;
                     margin-bottom: 4px;
                     line-height: initial;
-                    font-size: 16px;
+                    font-size: 1rem;
                     flex: 1;
                 }
                 & > .tags {
@@ -77,7 +77,7 @@
 
                         &:first-child,
                         &:last-child {
-                            font-size: 1.4em;
+                            font-size: 22px;
                         }
                     }
 
diff --git a/front/salix/styles/photo-list.scss b/front/salix/styles/photo-list.scss
index 3b0805104..67d848fa7 100644
--- a/front/salix/styles/photo-list.scss
+++ b/front/salix/styles/photo-list.scss
@@ -11,7 +11,7 @@
         transition: all .5s;
         padding: $spacing-sm;
         position: relative;
-        width: 28em;
+        width: 448px;
 
         .image {
             box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
diff --git a/modules/claim/front/detail/style.scss b/modules/claim/front/detail/style.scss
index 74f3ed674..45e455ba1 100644
--- a/modules/claim/front/detail/style.scss
+++ b/modules/claim/front/detail/style.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .vn-popover .discount-popover {
-    width: 16em;
+    width: 256px;
 
     .header {
         background-color: $color-main;
diff --git a/modules/claim/front/photos/style.scss b/modules/claim/front/photos/style.scss
index 820183056..c17ce1523 100644
--- a/modules/claim/front/photos/style.scss
+++ b/modules/claim/front/photos/style.scss
@@ -12,7 +12,7 @@ vn-claim-photos {
         
         .empty-rows {
             padding: 80px $spacing-md;
-            font-size: 1.4em
+            font-size: 22px
         }
 
         vn-icon {
@@ -25,8 +25,8 @@ vn-claim-photos {
         min-height: 100%;
 
         .photo {
-            width: 32em;
-            height: 18em;
+            width: 512px;
+            height: 288px;
         }
     }
 }
\ No newline at end of file
diff --git a/modules/claim/front/summary/style.scss b/modules/claim/front/summary/style.scss
index 8a57c0f5c..e0542dea0 100644
--- a/modules/claim/front/summary/style.scss
+++ b/modules/claim/front/summary/style.scss
@@ -2,9 +2,9 @@
 
 vn-claim-summary {
     section.photo {
-        height: 15.5em
+        height: 248px;
     }
     .photo .image {
-        border-radius: 3px
+        border-radius: 3px;
     }
 }
\ No newline at end of file
diff --git a/modules/client/front/descriptor-popover/style.scss b/modules/client/front/descriptor-popover/style.scss
index 0262c4ac0..8de03b90b 100644
--- a/modules/client/front/descriptor-popover/style.scss
+++ b/modules/client/front/descriptor-popover/style.scss
@@ -1,7 +1,7 @@
 vn-client-descriptor-popover {
     vn-client-descriptor {
         display: block;
-        width: 16em;
+        width: 256px;
         & > vn-card{
             margin: 0!important;
         }
diff --git a/modules/client/front/sample/create/style.scss b/modules/client/front/sample/create/style.scss
index d619d64b2..288471be1 100644
--- a/modules/client/front/sample/create/style.scss
+++ b/modules/client/front/sample/create/style.scss
@@ -4,7 +4,7 @@ div.vn-dialog {
 
         .container, .container h1 {
             font-family: "Roboto","Helvetica","Arial",sans-serif;
-            font-size: 16px !important;
+            font-size: 1rem !important;
 
             h1 {
                 font-weight: bold;
@@ -23,7 +23,7 @@ div.vn-dialog {
 
         
         .title h1 {
-            font-size: 32px !important;
+            font-size: 2rem !important;
             margin: 0
         }
 
diff --git a/modules/client/front/sms/style.scss b/modules/client/front/sms/style.scss
index 89723b196..84571a5f4 100644
--- a/modules/client/front/sms/style.scss
+++ b/modules/client/front/sms/style.scss
@@ -1,5 +1,5 @@
 @import "variables";
 
 .SMSDialog {
-    min-width: 25em
+    min-width: 400px
 }
\ No newline at end of file
diff --git a/modules/invoiceOut/front/descriptor-popover/style.scss b/modules/invoiceOut/front/descriptor-popover/style.scss
index 58e65d320..f50481083 100644
--- a/modules/invoiceOut/front/descriptor-popover/style.scss
+++ b/modules/invoiceOut/front/descriptor-popover/style.scss
@@ -1,8 +1,8 @@
 vn-ticket-descriptor-popover {
     vn-ticket-descriptor {
         display: block;
-        width: 16em;
-        max-height: 28em;
+        width: 256px;
+        max-height: 448px;
 
         & > vn-card {
             margin: 0!important;
diff --git a/modules/item/front/descriptor-popover/style.scss b/modules/item/front/descriptor-popover/style.scss
index 6c03a004e..219e68bae 100644
--- a/modules/item/front/descriptor-popover/style.scss
+++ b/modules/item/front/descriptor-popover/style.scss
@@ -1,5 +1,5 @@
 body > .vn-popover vn-item-descriptor {
     display: block;
-    width: 16em;
-    min-height: 28em;
+    width: 256px;
+    min-height: 448px;
 }
\ No newline at end of file
diff --git a/modules/item/front/fetched-tags/style.scss b/modules/item/front/fetched-tags/style.scss
index 69aa5c064..854d390db 100644
--- a/modules/item/front/fetched-tags/style.scss
+++ b/modules/item/front/fetched-tags/style.scss
@@ -18,7 +18,7 @@ vn-fetched-tags {
             text-transform: uppercase;
             line-height: initial;
             text-align: center;
-            font-size: 16px
+            font-size: 1rem
         }
 
         & > vn-auto {
@@ -32,7 +32,7 @@ vn-fetched-tags {
                 margin-left: 6px;
                 text-align: center;
                 font-size: 12px;
-                height: 1.25em;
+                height: 20px;
                 padding: 1px;
                 border-radius: 1px;
                 width: 64px;
diff --git a/modules/item/front/summary/style.scss b/modules/item/front/summary/style.scss
index 10799cfde..2b28ed375 100644
--- a/modules/item/front/summary/style.scss
+++ b/modules/item/front/summary/style.scss
@@ -21,7 +21,7 @@ vn-item-summary {
             line-height: 1;
         }
         &:last-child {
-            font-size: 1.5em;
+            font-size: 24px;
             font-weight: bold;
         }
     }
diff --git a/modules/order/front/catalog-view/style.scss b/modules/order/front/catalog-view/style.scss
index 18dc51bb0..aa4e301a9 100644
--- a/modules/order/front/catalog-view/style.scss
+++ b/modules/order/front/catalog-view/style.scss
@@ -15,7 +15,7 @@ vn-order-catalog {
             }
         }
         & > vn-auto {
-            width: 28em;
+            width: 448px;
             display: flex;
             overflow: hidden;
 
diff --git a/modules/order/front/prices-popover/style.scss b/modules/order/front/prices-popover/style.scss
index f6a46fbfb..4ce8dd2f9 100644
--- a/modules/order/front/prices-popover/style.scss
+++ b/modules/order/front/prices-popover/style.scss
@@ -22,7 +22,7 @@
                 font-size: 12px
             }
             .vn-input-number {
-                width: 3.5em;
+                width: 56px;
             }
         }
         .footer {
diff --git a/modules/order/front/summary/style.scss b/modules/order/front/summary/style.scss
index 2033a3588..140ca9b7b 100644
--- a/modules/order/front/summary/style.scss
+++ b/modules/order/front/summary/style.scss
@@ -12,7 +12,7 @@ vn-order-summary .summary{
             padding: 8px !important;
     
             & > p {
-                font-size: 1.2em;
+                font-size: 19px;
                 margin: 3px;
             }
         }
diff --git a/modules/route/front/descriptor-popover/style.scss b/modules/route/front/descriptor-popover/style.scss
index 0c84ff2fe..163a032e3 100644
--- a/modules/route/front/descriptor-popover/style.scss
+++ b/modules/route/front/descriptor-popover/style.scss
@@ -1,7 +1,7 @@
 vn-route-descriptor-popover {
     vn-route-descriptor {
         display: block;
-        width: 16em;
+        width: 256px;
         & > vn-card{
             margin: 0!important;
         }
diff --git a/modules/ticket/front/descriptor-popover/style.scss b/modules/ticket/front/descriptor-popover/style.scss
index 58e65d320..f50481083 100644
--- a/modules/ticket/front/descriptor-popover/style.scss
+++ b/modules/ticket/front/descriptor-popover/style.scss
@@ -1,8 +1,8 @@
 vn-ticket-descriptor-popover {
     vn-ticket-descriptor {
         display: block;
-        width: 16em;
-        max-height: 28em;
+        width: 256px;
+        max-height: 448px;
 
         & > vn-card {
             margin: 0!important;
diff --git a/modules/ticket/front/descriptor/style.scss b/modules/ticket/front/descriptor/style.scss
index 4becf9789..1a69feeff 100644
--- a/modules/ticket/front/descriptor/style.scss
+++ b/modules/ticket/front/descriptor/style.scss
@@ -2,7 +2,7 @@
 
 .add-stowaway {
     vn-data-viewer {
-        width: 40em
+        width: 640px
     }
 }
 
diff --git a/modules/ticket/front/sale/style.scss b/modules/ticket/front/sale/style.scss
index 253727ae0..e6486caaa 100644
--- a/modules/ticket/front/sale/style.scss
+++ b/modules/ticket/front/sale/style.scss
@@ -19,7 +19,7 @@ vn-ticket-sale {
         padding: 8px !important;
 
         & > p {
-            font-size: 1.2em;
+            font-size: 19px;
             margin: 3px;
         }
     }
@@ -74,11 +74,11 @@ vn-ticket-sale {
     vn-table {
         overflow-x: hidden;
         overflow-y: auto;
-        max-height: 25em;
-        width: 30em;
+        max-height: 400px;
+        width: 480px;
     }
     table {
-        width: 25em
+        width: 400px
     }
 }
 .edit-price {
diff --git a/modules/ticket/front/sms/style.scss b/modules/ticket/front/sms/style.scss
index 89723b196..84571a5f4 100644
--- a/modules/ticket/front/sms/style.scss
+++ b/modules/ticket/front/sms/style.scss
@@ -1,5 +1,5 @@
 @import "variables";
 
 .SMSDialog {
-    min-width: 25em
+    min-width: 400px
 }
\ No newline at end of file
diff --git a/modules/ticket/front/summary/style.scss b/modules/ticket/front/summary/style.scss
index d7618a420..05bb366b9 100644
--- a/modules/ticket/front/summary/style.scss
+++ b/modules/ticket/front/summary/style.scss
@@ -40,7 +40,7 @@ vn-ticket-summary .summary {
             padding: 8px;
     
             & > p {
-                font-size: 1.2em;
+                font-size: 19px;
                 margin: 3px;
             }
         }
@@ -48,7 +48,7 @@ vn-ticket-summary .summary {
         &.services {
             .vn-table > vn-thead .identifier,
             .vn-table > vn-tbody .identifier {
-                min-width: 3.5em
+                min-width: 56px
             }
 
             .vn-table > vn-thead .tax-class,
diff --git a/modules/worker/front/calendar/style.scss b/modules/worker/front/calendar/style.scss
index e622dda64..9b3fc749b 100644
--- a/modules/worker/front/calendar/style.scss
+++ b/modules/worker/front/calendar/style.scss
@@ -13,7 +13,7 @@ vn-worker-calendar {
             border: 1px solid #ddd;
             margin: $spacing-md;
             padding: $spacing-xs;
-            max-width: 18em;
+            max-width: 288px;
         }
     }
 }
diff --git a/modules/zone/front/calendar/style.scss b/modules/zone/front/calendar/style.scss
index 3fe23278e..14d234c1b 100644
--- a/modules/zone/front/calendar/style.scss
+++ b/modules/zone/front/calendar/style.scss
@@ -24,7 +24,7 @@ vn-zone-calendar {
             justify-content: space-evenly;
 
             & > .vn-calendar {
-                max-width: 18em;
+                max-width: 288px;
                 
                 .day {
                     &.event .day-number {
diff --git a/modules/zone/front/delivery-days/style.scss b/modules/zone/front/delivery-days/style.scss
index a279ca0b9..3dd4abb7c 100644
--- a/modules/zone/front/delivery-days/style.scss
+++ b/modules/zone/front/delivery-days/style.scss
@@ -7,7 +7,7 @@ vn-zone-delivery-days {
         flex-wrap: wrap;
 
         & > vn-calendar {
-            min-width: 16.5em;
+            min-width: 264px;
         }
     }
     form {