[REF] *: BS4, adapt font-size and padding variables

BS variables were renamed or changed and all (most) variables now
use 'rem' units instead of 'px' unit.

21 files changed, 43 insertions, 39 deletions

diff --git a/addons/base_import/static/src/scss/base_import.scss b/addons/base_import/static/src/scss/base_import.scss
index 6213a70477b..428af647369 100644
--- a/addons/base_import/static/src/scss/base_import.scss
+++ b/addons/base_import/static/src/scss/base_import.scss
@@ -122,7 +122,7 @@
 
 /* Field dropdown */
 .oe_import_selector {
-    font-size: $font-size-small;
+    font-size: $font-size-sm;
     ul, li {
         margin: 0; padding: 0;
     }
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index 308829b152f..c4086e885fe 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -172,7 +172,7 @@
         .o_hr_attendance_PINbox {
             font-size: 2em;
             border: none;
-            padding: 0 $padding-large-horizontal;
+            padding: 0 $input-btn-padding-x-lg;
             background: fade-out(white, 0.6);
         }
     }
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 1eb2de031d5..a9c6a216efa 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -190,7 +190,7 @@
             .o_composer_button_send {
                 border-radius: 0 3px 3px 0;
                 // Make the button appear as the same size as the subject input
-                padding: 10px $padding-base-horizontal;
+                padding: 10px $input-btn-padding-x;
                 border: 1px solid darken($o-brand-optional, 5%);
                 border-left-width: 0;
             }
@@ -402,7 +402,7 @@ $o-mail-attachment-margin: 5px;
                 @include o-position-absolute($bottom: 7px);
                 width: 80%;
                 @include o-text-overflow(inline-block);
-                font-size: $font-size-small;
+                font-size: $font-size-sm;
             }
 
             .o_attachment_download {
@@ -449,7 +449,7 @@ $o-mail-attachment-margin: 5px;
 
             .o_close_btn {
                 @include o-position-absolute(-1px, $grid-gutter-width*0.5);
-                font-size: $font-size-h1;
+                font-size: $h1-font-size;
                 font-weight: 300;
             }
         }
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 2c07068d9a9..392b09e0a43 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -86,13 +86,13 @@
             }
 
             &.o_mail_discuss_title_main {
-                padding: $padding-base-vertical $o-horizontal-padding;
+                padding: $input-btn-padding-y $o-horizontal-padding;
                 margin-bottom: 2px;
             }
         }
 
         .o_mail_discuss_item + .o_mail_sidebar_title {
-            margin-top: $padding-base-vertical;
+            margin-top: $input-btn-padding-y;
         }
 
         .o_mail_add_thread {
@@ -214,7 +214,7 @@
         .o_mail_sidebar_title {
             h4 {
                 margin: 0;
-                font-size: $font-size-small;
+                font-size: $font-size-sm;
                 text-transform: uppercase;
                 color: $gray-light;
                 &.o_mail_open_channels:hover {
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 1c8984e0f1e..cff2778e075 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -99,7 +99,7 @@
 
             .o_thread_message_tools {
                 .o_activity_link {
-                    padding: 0 $padding-base-horizontal;
+                    padding: 0 $input-btn-padding-x;
                 }
                 .o_activity_done {
                     padding-left: 0;
diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss
index c487e7bbb85..2d282b7a2dc 100644
--- a/addons/note/static/src/scss/note.scss
+++ b/addons/note/static/src/scss/note.scss
@@ -8,7 +8,7 @@
         margin-bottom: 0;
     }
     .oe_form_field.oe_memo {
-        margin: 0 ($padding-large-horizontal * -1);
+        margin: 0 ($input-btn-padding-x-lg * -1);
         padding: 0;
         min-height: 200px;
 
@@ -18,7 +18,7 @@
     }
     &.o_form_readonly {
         .oe_memo {
-            padding: $padding-large-horizontal;
+            padding: $input-btn-padding-x-lg;
             border-bottom: 1px solid $legend-border-color;
         }
     }
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 36a38f5fc1e..b6615a39f80 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -1,5 +1,5 @@
 // MIXINS
-@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
+@mixin o-base-settings-horizontal-padding($padding-base: $input-btn-padding-y-sm) {
     padding: $padding-base $o-horizontal-padding;
 
     @include media-breakpoint-up(xl) {
@@ -60,7 +60,7 @@
             border: 0;
 
             .btn-primary, .btn-link  {
-                padding: $padding-small-vertical $padding-small-horizontal;
+                padding: $btn-padding-y-sm $btn-padding-x-sm;
             }
 
             .btn-link {
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 356433b2182..20c99bf341b 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -57,14 +57,13 @@ $component-active-bg: $gray-200;
 $font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
 
 $font-size-base: $o-font-size-base;
-
 $line-height-base: $o-line-height-base;
 
-$h1-font-size: $o-font-size-base + 13px;
-$h2-font-size: $o-font-size-base + 7px;
-$h3-font-size: $o-font-size-base + 3px;
-$h4-font-size: $o-font-size-base + 2px;
-$h5-font-size: $o-font-size-base + 1px;
+$h1-font-size: $o-font-size-base * 2.0;
+$h2-font-size: $o-font-size-base * 1.5;
+$h3-font-size: $o-font-size-base * 1.3;
+$h4-font-size: $o-font-size-base * 1.2;
+$h5-font-size: $o-font-size-base * 1.1;
 
 $headings-font-weight: bold;
 
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 080bf33760f..22a392b762b 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -418,7 +418,7 @@
         position: relative;
         border-radius: 5px;
         border: 1px solid $btn-primary-border;
-        font-size: $font-size-small;
+        font-size: $font-size-sm;
         color: $o-brand-optional;
         font-weight: $badge-font-weight;
         text-align: center;
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 51c584c916e..26431b969e6 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -377,7 +377,7 @@
 
     // Separators
     .o_horizontal_separator {
-        font-size: $font-size-h2;
+        font-size: $h2-font-size;
         margin: $o-form-spacing-unit 0;
         &:empty {
             height: $o-form-spacing-unit * 2;
diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index a96f1037c6d..e6a62f5230f 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -63,7 +63,7 @@
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: $font-size-small;
+        height: $font-size-sm;
         margin-bottom: 0;
         background-color: $gray-lighter-dark;
         box-shadow: none;
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index 0bf1a5cdc52..e9f6c0d74fc 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -70,9 +70,9 @@
                     padding-right: $o-kanban-dashboard-dropdown-complex-gap;
 
                     > .o_kanban_card_manage_title {
-                        margin: ($line-height-computed / 2) 0;
+                        margin: (($font-size-base * $line-height-base) / 2) 0;
                         color: $headings-color;
-                        font-size: $font-size-h5;
+                        font-size: $h5-font-size;
                         font-weight: 500;
                         line-height: $headings-line-height;
                     }
@@ -137,7 +137,7 @@
         // Identify subtitles without classes
         .o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
             font-weight: 500;
-            font-size: $font-size-small;
+            font-size: $font-size-sm;
             color: $text-muted;
         }
 
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index bd595243d84..749c84d69fc 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -270,7 +270,7 @@
                 margin-bottom: $o-kanban-inner-hmargin*0.5;;
                 padding-left: 0;
                 list-style: none;
-                font-size: $font-size-small;
+                font-size: $font-size-sm;
 
                 li {
                     margin-bottom: 2px;
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index c8fd2f05338..2589e201226 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -4,8 +4,9 @@
 ///
 
 // Font sizes
-$o-font-size-base: 13px;
-$o-line-height-base: 1.428571429; // This is BS default
+$o-root-font-size: 13px;
+$o-font-size-base: 1rem;
+$o-line-height-base: 1.5; // This is BS default
 
 // Colors
 $o-brand-primary: #7c7bad;
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index a01ba14f5a4..1762e4d34d9 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -163,7 +163,7 @@
     display: block;
     text-align: center;
     color: $o-main-text-color;
-    font-size: $font-size-small;
+    font-size: $font-size-sm;
     cursor: pointer;
     @include o-hover-opacity($base-opacity);
 }
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index caea4378aa4..a3a007276e6 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -1,3 +1,7 @@
+:root {
+    font-size: $o-root-font-size;
+}
+
 // ------------------------------------------------------------------
 //  General
 // ------------------------------------------------------------------
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index bb5cddcffe1..ebd3752b5e8 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -709,7 +709,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             height: $o-navbar-height;
             border: none;
             border-radius: 0;
-            padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes
+            padding: $btn-padding-y $btn-padding-y; // force this because of themes
             background-color: $o-we-color-dark;
             color: $o-we-color-text-normal;
             border-top: 2px solid transparent;
diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss
index 23befcee851..b12678005ae 100644
--- a/addons/website_rating/static/src/scss/website_rating.scss
+++ b/addons/website_rating/static/src/scss/website_rating.scss
@@ -35,7 +35,7 @@ $o-w-rating-star-color: #FACC2E;
         .o_website_rating_table_percent {
             text-align: right;
             padding-left: 5px;
-            font-size: $font-size-small;
+            font-size: $font-size-sm;
         }
         .o_website_rating_table_reset {
             .o_website_rating_select_text {
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
index 0da082e7477..159921d5b01 100644
--- a/addons/website_sale/static/src/scss/website_sale_backend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -51,7 +51,7 @@
             right: auto;
             border-radius: 0 0 2px;
             font-weight: normal;
-            font-size: $font-size-small - 1;
+            font-size: $font-size-sm - 1;
 
             &.label-normal {
                 background-color: $gray-lighter;
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index 6363757d8b9..049234ab7da 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -2,9 +2,9 @@
 //## ----------------------------
 
 // Theming variables
-$o-wsale-wizard-thickness: 2px;
-$o-wsale-wizard-dot-size: 10px;
-$o-wsale-wizard-dot-active-glow: 4px;
+$o-wsale-wizard-thickness: 0.125rem;
+$o-wsale-wizard-dot-size: 0.625rem;
+$o-wsale-wizard-dot-active-glow: 0.25rem;
 
 $o-wsale-wizard-color-inner: white;
 $o-wsale-wizard-color-default: $gray-lighter;
@@ -69,11 +69,11 @@ $o-wsale-wizard-label-completed: $state-success-text;
 
             @include media-breakpoint-up(md) {
                 display: block;
-                margin: (10px + $tmp-dot-radius) 0 20px 0;
+                margin: (0.625rem + $tmp-dot-radius) 0 20px 0;
             }
             @include media-breakpoint-down(sm) {
                 margin-left: -15px;
-                font-size:24px;
+                font-size: 24px;
             }
         }
 
@@ -86,7 +86,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
             .progress-wizard-dot {
                 animation: fadeIn 1s ease 0s 1 normal none running;
                 background: $o-wsale-wizard-dot-active;
-                box-shadow: 0 0 0 $o-wsale-wizard-dot-active-glow - 1px $o-wsale-wizard-color-inner,
+                box-shadow: 0 0 0 ($o-wsale-wizard-dot-active-glow - 0.0625rem) $o-wsale-wizard-color-inner,
                             0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5);
             }
 
diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss
index 721b6f33528..114e7d061f4 100644
--- a/addons/website_theme_install/static/src/scss/website_theme_install.scss
+++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss
@@ -87,7 +87,7 @@
             visibility: hidden;
 
             > .btn {
-                padding: $padding-large-vertical $padding-large-horizontal;
+                padding: $btn-padding-y-lg $btn-padding-x-lg;
             }
 
             hr {