SCSS px to em: rem for font-size

2020-04-02 15:11:42 +02:00 · 2020-04-02 15:11:42 +02:00 · 2249f68d6e
parent 559cc5eb8c
commit 2249f68d6e
33 changed files with 63 additions and 64 deletions
--- a/front/core/components/button/style.scss
+++ b/front/core/components/button/style.scss
@ -34,7 +34,7 @@
        & > vn-icon {
            vertical-align: middle;
            color: inherit;
-            font-size: 27px;
+            font-size: 1.68rem;
        }
    }
    &.colored {
@ -88,19 +88,19 @@
        }

        &.xs {
-            font-size: 8px;
+            font-size: .5rem;
        }
    
        &.sm {
-            font-size: 11px;
+            font-size: .7rem;
        }
    
        &.md {
-            font-size: 14px;
+            font-size: .875rem;
        }

        &.lg {
-            font-size: 19px;
+            font-size: 1.2rem;
        }
    }
    &.disabled {
--- a/front/core/components/calendar/style.scss
+++ b/front/core/components/calendar/style.scss
@ -25,7 +25,7 @@
            margin-bottom: 8px;
            padding: 8px 0;
            font-weight: bold;
-            font-size: 12px;
+            font-size: .75rem;
            text-align: center;

            & > section {
--- a/front/core/components/data-viewer/style.scss
+++ b/front/core/components/data-viewer/style.scss
@ -9,6 +9,6 @@ vn-data-viewer {
        padding: 24px;
        box-sizing: border-box;
        color: $color-font-secondary;
-        font-size: 22px;
+        font-size: 1.375rem;
    }
 }
--- a/front/core/components/debug-info/style.scss
+++ b/front/core/components/debug-info/style.scss
@ -28,7 +28,7 @@ vn-debug-info {

        & > li {
            margin-top: 3px;
-            font-size: 15px;
+            font-size: .94rem;

            & > span {
                padding: 1px 3px;
--- a/front/core/components/drop-down/style.scss
+++ b/front/core/components/drop-down/style.scss
@ -25,7 +25,7 @@
            color: #888;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .8);
-            font-size: 18px; 
+            font-size: 1.125rem; 
    
            &:hover {
                color: $color-font;
--- a/front/core/components/field/style.scss
+++ b/front/core/components/field/style.scss
@ -135,7 +135,7 @@
            align-items: center;

            & > vn-icon {
-                font-size: 24px;
+                font-size: 1.5rem;
            }
        }
        & > .prepend > prepend {
@ -248,7 +248,7 @@
                top: 5px;
                color: $color-primary;
                padding: 0;
-                font-size: 12px;
+                font-size: .75rem;
            }
            & > .control > * {
                &[type=time],
@ -298,7 +298,7 @@
        padding: 4px 0;
        height: 12px;
        color: rgba(0, 0, 0, .4);
-        font-size: 12px;
+        font-size: .75rem;
        transform: translateY(-12px);
        transition-property: opacity, transform, color;
        transition-duration: 200ms;
--- a/front/core/components/icon/style.scss
+++ b/front/core/components/icon/style.scss
@ -1,6 +1,6 @@
 vn-icon {
    display: inline-block;
-    font-size: 18pt;
+    font-size: 1.5rem;
    text-align: center;
    outline: 0;

--- 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: 19px
+        font-size: 1.2rem
    }
 }
--- 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: 19px;
+                font-size: 1.2rem;
            }
        }
        &[side] {
--- a/front/core/components/range/style.scss
+++ b/front/core/components/range/style.scss
@ -37,7 +37,7 @@

 .vn-range {
    & > label {
-        font-size: 12px;
+        font-size: .75rem;

        &.main {
            color: $color-button;
--- a/front/core/styles/font-family.scss
+++ b/front/core/styles/font-family.scss
@ -21,7 +21,7 @@
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
-    font-size: 24px;  /* Preferred icon size */
+    font-size: 1.5rem;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
--- a/front/core/styles/responsive.scss
+++ b/front/core/styles/responsive.scss
@ -1,5 +1,5 @@
@import "variables";
-
+/*
 // Desktop - Laptop 1360x768
@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px)
 {
@ -47,8 +47,7 @@
 {
 	html { font-size: 11pt; }
 }
-
-html { font-size: 9pt; }
+*/

 .vn-hide-narrow {
 	@media (max-width: $mobile-width) {
--- a/front/core/styles/text.scss
+++ b/front/core/styles/text.scss
@ -3,40 +3,40 @@
 /* Headings */

 .text-h1, h1 {
-    font-size: 32pt;
+    font-size: 2.3rem;
 }
 .text-h2, h2 {
-    font-size: 28pt;
+    font-size: 2.25rem;
 }
 .text-h3, h3 {
-    font-size: 24pt;
+    font-size: 2rem;
 }
 .text-h4, h4 {
-    font-size: 20pt;
+    font-size: 1.6rem;
 }
 .text-h5, h5 {
-    font-size: 16pt;
+    font-size: 1.3rem;
 }
 .text-h6, h6 {
-    font-size: 14pt;
+    font-size: 1.125rem;
 }
 .text-subtitle1 {
-    font-size: 13pt;
+    font-size: 1.06rem;
 }
 .text-subtitle2 {
-    font-size: 12pt;
+    font-size: 1rem;
 }
 .text-body1 {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-body2 {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-caption {
-    font-size: 11pt;
+    font-size: .875rem;
 }
 .text-overline {
-    font-size: 10pt;
+    font-size: .8rem;
 }

 h1, h2, h3, h4, h5, h6 {
--- a/front/core/styles/variables.scss
+++ b/front/core/styles/variables.scss
@ -1,9 +1,9 @@
@import "./util";

+$font-size: 12pt;
 $menu-width: 256px;
 $topbar-height: 56px;
 $mobile-width: 800px;
-$font-size: 1rem;

 // Width

--- a/front/salix/components/descriptor/style.scss
+++ b/front/salix/components/descriptor/style.scss
@ -26,7 +26,7 @@
                padding: 10px;
            }
            vn-icon {
-                font-size: 28px;
+                font-size: 1.75rem;
            }
        }
    }
@ -51,7 +51,7 @@
            & > vn-icon {
                padding: $spacing-sm;
                color: $color-marginal;
-                font-size: 24px;
+                font-size: 1.5rem;
    
                &.bright {
                    color: $color-main;
@ -70,7 +70,7 @@
                margin: 0 $spacing-sm;

                & > vn-icon {
-                    font-size: 28px;
+                    font-size: 1.75rem;
                    padding: 0;
                }
            }
--- a/front/salix/components/home/style.scss
+++ b/front/salix/components/home/style.scss
@ -41,17 +41,17 @@ vn-home {

                    & > vn-icon {
                        display: block;
-                        font-size: 56px;
+                        font-size: 3.5rem;
                    }
                }
                & > span {
-                    font-size: 14px;
+                    font-size: .875rem;
                    text-align: center;
                }
                & > h4 {
                    max-width: 100%;
                    text-align: center;
-                    font-size: 12pt;
+                    font-size: 1rem;
                    overflow: hidden;
                    color: inherit;
                    margin: 0;
--- 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: 25px;
+                font-size: 1.56rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
@ -166,6 +166,6 @@ vn-layout {
    }
 }
 #user {
-    font-size: 24px;
+    font-size: 1.5rem;
    height: auto;
 }
--- 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: 17px;
+	font-size: 1.1rem;
 	font-weight: normal;
 	background-color: $color-bg-dark;
 	display: flex;
--- a/front/salix/components/summary/style.scss
+++ b/front/salix/components/summary/style.scss
@ -25,7 +25,7 @@
        h4 {
            margin-bottom: $spacing-md;
            text-transform: uppercase;
-            font-size: 15pt;
+            font-size: 1.25rem;
            line-height: 1;
            padding: 7px;
            padding-bottom: 4px; /* Bottom line-height fix */
--- a/front/salix/components/user-popover/style.scss
+++ b/front/salix/components/user-popover/style.scss
@ -8,7 +8,7 @@
        align-items: center;

        & > vn-icon {
-            font-size: 80px;
+            font-size: 5rem;
            color: $color-font-bg-marginal;
        }
        & > div {
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@ -57,7 +57,7 @@ vn-bg-title {
    text-align: center;
    padding: 16px;
    color: gray;
-    font-size: 20px;
+    font-size: 1.25rem;
 }
 .totalBox {
    border: 1px solid #CCC;
@ -115,7 +115,7 @@ html [scrollable] {
    @extend %active;

    &.small {
-        font-size: 11px
+        font-size: .7rem
    }
 }

--- a/front/salix/styles/order-product.scss
+++ b/front/salix/styles/order-product.scss
@ -57,12 +57,12 @@
                    height: 48px;

                    & > vn-label-value {
-                        font-size: 12px;
+                        font-size: .75rem;
                    }
                }  
            }
            .footer {
-                font-size: 12px;
+                font-size: .75rem;

                & > .price {
                    overflow: hidden;
@ -77,7 +77,7 @@

                        &:first-child,
                        &:last-child {
-                            font-size: 22px;
+                            font-size: 1.375rem;
                        }
                    }

@ -87,7 +87,7 @@
                } 
                & > .priceKg {
                    color: $color-font-secondary;
-                    font-size: 12px;
+                    font-size: .75rem;
                }
            }
        }
--- a/modules/claim/front/detail/style.scss
+++ b/modules/claim/front/detail/style.scss
@ -14,7 +14,7 @@
    }
    .simulatorTitle {
        margin-bottom: 0;
-        font-size:  12px;
+        font-size:  .75rem;
        color: $color-main;
    }
    vn-label-value {
--- a/modules/claim/front/photos/style.scss
+++ b/modules/claim/front/photos/style.scss
@ -12,11 +12,11 @@ vn-claim-photos {
        
        .empty-rows {
            padding: 80px $spacing-md;
-            font-size: 22px
+            font-size: 1.375rem
        }

        vn-icon {
-            font-size: 48px
+            font-size: 3rem
        }
    }

--- a/modules/client/front/sample/create/style.scss
+++ b/modules/client/front/sample/create/style.scss
@ -16,7 +16,7 @@ div.vn-dialog {
            }

            footer p {
-                font-size: 10px !important;
+                font-size: .625rem !important;
                line-height: 10px;
            }
        }
--- a/modules/item/front/fetched-tags/style.scss
+++ b/modules/item/front/fetched-tags/style.scss
@ -31,7 +31,7 @@ vn-fetched-tags {
                color: $color-font-secondary;
                margin-left: 6px;
                text-align: center;
-                font-size: 12px;
+                font-size: .75rem;
                height: 20px;
                padding: 1px;
                border-radius: 1px;
--- a/modules/item/front/summary/style.scss
+++ b/modules/item/front/summary/style.scss
@ -12,7 +12,7 @@ vn-item-summary {
    color: $color-font-dark;

    p {
-        font-size: 12px;
+        font-size: .75rem;
        text-align: center;
        margin: 0;

@ -21,7 +21,7 @@ vn-item-summary {
            line-height: 1;
        }
        &:last-child {
-            font-size: 24px;
+            font-size: 1.5rem;
            font-weight: bold;
        }
    }
--- a/modules/item/front/waste/style.scss
+++ b/modules/item/front/waste/style.scss
@ -4,7 +4,7 @@ vn-item-waste {
    .header {
        margin-bottom: 16px;
        text-transform: uppercase;
-        font-size: 15pt;
+        font-size: 1.25rem;
        line-height: 1;
        padding: 7px;
        padding-bottom: 7px;
--- a/modules/order/front/catalog/style.scss
+++ b/modules/order/front/catalog/style.scss
@ -34,7 +34,7 @@ vn-order-catalog vn-side-menu div {
                    color: #FFF
                }
                & > i:before {
-                    font-size: 32pt;
+                    font-size: 2.6rem;
                    width: 16px;
                    height: 16px;
                }
--- a/modules/order/front/prices-popover/style.scss
+++ b/modules/order/front/prices-popover/style.scss
@ -19,7 +19,7 @@
            }
            .price-kg {
                color: $color-font-secondary;
-                font-size: 12px
+                font-size: .75rem
            }
            .vn-input-number {
                width: 56px;
--- 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: 19px;
+                font-size: 1.2rem;
                margin: 3px;
            }
        }
--- 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: 19px;
+            font-size: 1.2rem;
            margin: 3px;
        }
    }
@ -97,7 +97,7 @@ vn-ticket-sale {
    
    p.simulatorTitle {
        margin-bottom: 0;
-        font-size:  12px;
+        font-size:  .75rem;
        color: $color-main;
    }
    vn-label-value {
--- 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: 19px;
+                font-size: 1.2rem;
                margin: 3px;
            }
        }