[FIX] website: add some compatibility for old BS3

This commit adds a compatibility file which can be added on demand by
enabling its associated view. This will basically map old BS3 classes
and structures to the related style with BS4.

closes odoo/odoo#27981

addons/website/static/src/scss/compatibility/bs3_for_12_0.scss

@@ -0,0 +1,300 @@
+/**
+ * This file's purpose is to *ease* migration from 11.0.
+ */
+
+// Restore gray utilities
+$-compat-gray-map: (
+    'gray-darker': '900',
+    'gray-dark': '900',
+    'gray': '700',
+    'gray-light': '600',
+    'gray-lighter': '200',
+);
+@each $old, $new in $-compat-gray-map {
+    @include bg-variant(".bg-#{$old}", gray($new));
+    @include text-emphasis-variant(".text-#{$old}", gray($new));
+}
+
+// Restore media ?
+
+// Restore progress bars
+@each $color, $value in $theme-colors {
+    @include bg-variant(".progress-bar-#{$color}", $value);
+}
+
+// Adapt radio ?
+
+// Adapt labels
+.label {
+    @extend .badge;
+}
+@each $color, $value in $theme-colors {
+    .label-#{$color} {
+        @include badge-variant($value);
+    }
+}
+.label-default {
+    @include badge-variant(theme-color('secondary'));
+}
+
+// Adapt center-block
+.center-block {
+    display: block;
+    margin: auto;
+}
+
+// Adapt pull-* classes
+.pull-left {
+    float: left;
+}
+.pull-right {
+    float: right;
+}
+
+// Adapt pagination
+.pagination > li {
+    @extend .page-item;
+    > a {
+        @extend .page-link;
+    }
+}
+
+// Adapt carousel
+.carousel .item {
+    @extend .carousel-item;
+}
+
+// Adapt checkboxes ?
+
+// Adapt tables
+.table-condensed {
+    @extend .table-sm;
+}
+
+// Adapt forms
+.control-label {
+    @extend .col-form-label;
+}
+.help-block {
+    @extend .form-text;
+}
+.has-error .form-control {
+    @extend .is-invalid;
+}
+.has-success .form-control {
+    @extend .is-valid;
+}
+.form-horizontal .form-group {
+    @extend .row;
+}
+
+// Adapt list-inline
+.list-inline > li {
+    @extend .list-inline-item;
+}
+
+// Adapt list-group
+.panel .list-group {
+    @extend .list-group-flush;
+}
+
+// Adapt image utilies
+.img-rounded {
+    @extend .rounded;
+}
+.img-circle {
+    @extend .rounded-circle;
+}
+
+// Adapt input group
+.input-group {
+    .input-group-btn:first-child {
+        @extend .input-group-prepend;
+    }
+    .form-control ~ .input-group-btn {
+        @extend .input-group-append;
+    }
+    .input-group-addon {
+        @extend .input-group-append;
+        @extend .input-group-text;
+    }
+}
+
+// Adapt panels
+.panel {
+    @extend .card;
+}
+@each $color, $value in $theme-colors {
+    @include bg-variant(".panel-#{$color}", $value);
+}
+@include bg-variant(".panel-default", $white);
+.panel-heading {
+    @extend .card-header;
+}
+.panel-body {
+    @extend .card-body;
+}
+.panel-footer {
+    @extend .card-footer;
+}
+.well {
+    @extend .card;
+    @extend .card-body;
+}
+
+// Adapt grid (push-pull, xs ?)
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $infix: if($infix != "", $infix, "-xs");
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+        // `$grid-columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($grid-columns - 1) {
+            .col#{$infix}-offset-#{$i} {
+                @include make-col-offset($i, $grid-columns);
+            }
+        }
+    }
+}
+
+// Adapt breadcrumb
+.breadcrumb > li {
+    @extend .breadcrumb-item;
+}
+
+// Adapt nav
+.nav > li {
+    @extend .nav-item;
+    > a {
+        @extend .nav-link;
+    }
+}
+.nav-stacked {
+    flex-direction: column;
+}
+@include bg-variant(".navbar-default", $light);
+
+// Adapt img-responsive
+.img-responsive {
+    @extend .img-fluid;
+}
+
+// Adapt dropdowns
+.dropdown-menu {
+    a {
+        @extend .dropdown-item;
+    }
+    .divider {
+        @extend .dropdown-divider;
+    }
+}
+.dropdown-toggle .caret {
+    display: none;
+}
+
+// Adapt buttons
+.btn-default {
+    @include button-variant(theme-color('secondary'), theme-color('secondary'));
+}
+
+// Adapt display classes
+.hidden, .hide {
+    display: none !important;
+}
+.hidden {
+    &-xs {
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+    }
+    &-sm {
+        @include media-breakpoint-only(md) {
+            display: none;
+        }
+    }
+    &-md {
+        @include media-breakpoint-only(lg) {
+            display: none;
+        }
+    }
+    &-lg {
+        @include media-breakpoint-only(xl) {
+            display: none;
+        }
+    }
+    &-print {
+        @media print {
+            display: none;
+        }
+    }
+}
+.show {
+    display: block !important;
+}
+.visible {
+    &-xs {
+        &-block, &-inline-block {
+            display: none;
+        }
+        @include media-breakpoint-down(sm) {
+            &-block {
+                display: block;
+            }
+            &-inline-block {
+                display: inline-block;
+            }
+        }
+    }
+    &-sm {
+        &-block, &-inline-block {
+            display: none;
+        }
+        @include media-breakpoint-only(md) {
+            &-block {
+                display: block;
+            }
+            &-inline-block {
+                display: inline-block;
+            }
+        }
+    }
+    &-md {
+        &-block, &-inline-block {
+            display: none;
+        }
+        @include media-breakpoint-only(lg) {
+            &-block {
+                display: block;
+            }
+            &-inline-block {
+                display: inline-block;
+            }
+        }
+    }
+    &-lg {
+        &-block, &-inline-block {
+            display: none;
+        }
+        @include media-breakpoint-only(xl) {
+            &-block {
+                display: block;
+            }
+            &-inline-block {
+                display: inline-block;
+            }
+        }
+    }
+    &-print {
+        &-block, &-inline-block {
+            display: none;
+        }
+        @media print {
+            &-block {
+                display: block;
+            }
+            &-inline-block {
+                display: inline-block;
+            }
+        }
+    }
+}

addons/website/views/website_templates.xml

@@ -60,6 +60,12 @@
     </xpath>
 </template>
 
+<template id="assets_frontend_compatibility_for_12_0" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/compatibility/bs3_for_12_0.scss"/>
+    </xpath>
+</template>
+
 <template id="website.assets_editor" name="Website Editor Assets (used in website editor)">
     <t t-call="web._assets_helpers"/>