[FIX] portal, *: introduce responsive BS sizing classes

* website_sale

Bootstrap chose not to implement this feature, probably relying on their
grid system (see https://github.com/twbs/bootstrap/issues/21943).

We have a case where a responsive size of 0px is needed though: applied
on a table, this forces the table to its contents' natural width. So
this commit implements the behavior and adds the size of 0 to replace
the non-responsive class 'o_table_column_fit'.

addons/portal/static/src/scss/bootstrap.extend.scss

@@ -1,3 +1,17 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $infix != '' { // Standard ones are already created by bootstrap
+            @each $prop, $abbrev in (width: w, height: h) {
+                @each $size, $length in $sizes {
+                    .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+                }
+            }
+        }
+    }
+}
+
 .text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
     text-align: left;
 }

addons/portal/static/src/scss/bootstrap_overridden.scss

@@ -1,3 +1,8 @@
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: (
+    0: 0,
+);
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.

addons/portal/static/src/scss/portal.scss

@@ -184,11 +184,6 @@ hr {
     @extend %o-page-header;
 }
 
-// Force table to their minimum width for fitting their col-*-auto parent
-.table.o_table_column_fit {
-    width: 1px;
-}
-
 // Images spacing
 img, .media_iframe_video, .o_image {
     &.float-right {

addons/website_sale/views/templates.xml

@@ -1413,7 +1413,7 @@
                     Your cart is empty!
                 </div>
                 <div class="toggle_summary_div d-none d-xl-block">
-                    <table class="table table-striped table-sm o_table_column_fit" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
+                    <table class="table table-striped table-sm w-xl-0" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
                         <thead>
                             <tr>
                                 <th class="border-top-0 td-img">Product</th>