[FIX] payment, *: BS4, adapt ui of shop/payment page in website.

* website_sale, payment_authorize, payment_ogone, payment_stripe,
  website_sale_delivery

(Many bugs were only revealed by BS4, not created)

- Align payment method (Ex.Stripe) form attributes in row.
- Fix align between radio button and payment method name.
- Removed header div from 'billing & shipping'.
- Set badges (Ex.free) and align between badges and delivery method
  name in choose delivery method.
- Border subtraction from delivery methods div as already card class
  has border.

6 files changed, 15 insertions, 17 deletions

diff --git a/addons/payment/static/src/scss/payment_form.scss b/addons/payment/static/src/scss/payment_form.scss
index 2069fc93f8c..8735c24c790 100644
--- a/addons/payment/static/src/scss/payment_form.scss
+++ b/addons/payment/static/src/scss/payment_form.scss
@@ -1,6 +1,6 @@
 .o_payment_form {
     label > input[type="radio"], input[type="checkbox"]{
-        vertical-align: top;
+        vertical-align: middle;
         margin-right: 5px;
     }
 
@@ -17,20 +17,20 @@
         margin-top: 5px;
     }
 
-    .panel-body:first-child {
+    .card-body:first-child {
         border-top: 0px;
     }
 
-    .panel {
+    .card {
         border-radius: 10px;
     }
 
-    .panel-footer:last-child {
+    .card-footer:last-child {
         border-bottom-right-radius: 10px !important;
         border-bottom-left-radius: 10px !important;
     }
 
-    .panel-body {
+    .card-body {
         border-top: 1px solid #ddd;
         padding: 1.14em !important;
     }
@@ -43,7 +43,7 @@
         }
 
         .more_option {
-            @include o-position-absolute($right: 0px, $bottom: -10px);
+            @include o-position-absolute($right: 10px);
             font-size:10px;
         }
 
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index aea549fc0ba..68149c667cc 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -52,7 +52,7 @@
 
         <template id="authorize_s2s_form">
             <input type="hidden" name="data_set" data-create-route="/payment/authorize/s2s/create_json_3ds"/>
-            <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
+            <div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
                 <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
diff --git a/addons/payment_ogone/views/payment_ogone_templates.xml b/addons/payment_ogone/views/payment_ogone_templates.xml
index 0df3781626a..b27ce00a6f4 100644
--- a/addons/payment_ogone/views/payment_ogone_templates.xml
+++ b/addons/payment_ogone/views/payment_ogone_templates.xml
@@ -40,7 +40,7 @@
             <input type="hidden" name="acquirer_id" t-att-value="id"/>
             <input t-if="return_url" type="hidden" name="return_url" t-att-value="return_url"/>
             <input t-if="partner_id" type="hidden" name="partner_id" t-att-value="partner_id"/>
-            <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
+            <div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
                 <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
diff --git a/addons/payment_stripe/views/payment_stripe_templates.xml b/addons/payment_stripe/views/payment_stripe_templates.xml
index 80844389184..2e3101e5de0 100644
--- a/addons/payment_stripe/views/payment_stripe_templates.xml
+++ b/addons/payment_stripe/views/payment_stripe_templates.xml
@@ -26,7 +26,7 @@
 
         <template id="stripe_s2s_form">
             <input type="hidden" name="data_set" data-create-route="/payment/stripe/s2s/create_json_3ds"/>
-            <div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
+            <div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
                 <div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
                     <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 1d5010bc412..acdd77faa96 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1333,7 +1333,6 @@
                         </div>
                         <div class="col-12 col-xl order-xl-1 oe_cart">
                             <div class="card">
-                                <div class="card-header"></div>
                                 <div class="card-body" id="shipping_and_billing">
                                     <a class='float-right no-decoration' href='/shop/checkout'><i class="fa fa-edit"/> Edit</a>
                                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
@@ -1512,7 +1511,6 @@
                                 </table>
                                 <t t-call="website_sale.payment_confirmation_status"/>
                                 <div class="card mt-3">
-                                  <div class="card-header"></div>
                                   <div class="card-body">
                                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                                     <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 5b79b64a0c8..0a05cdef054 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -26,12 +26,12 @@
         <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'d-none' if delivery_nb == 1 else ''"/>
         <label class="label-optional" t-field="delivery.name" t-att-for="'delivery_%i' % delivery.id"/>
         <t t-if="delivery.delivery_type == 'fixed'">
-            <span t-if="delivery.fixed_price > 0.0" class="badge" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
-            <span t-else="" class="badge">Free</span>
+            <span t-if="delivery.fixed_price > 0.0" class="float-right badge badge-secondary" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
+            <span t-else="" class="float-right badge badge-secondary">Free</span>
         </t>
         <t t-else="">
-            <span class="badge d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
-            <span class="badge o_delivery_compute">Select to compute delivery rate</span>
+            <span class="float-right badge badge-secondary d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
+            <span class="float-right badge badge-secondary o_delivery_compute">Select to compute delivery rate</span>
         </t>
         <t t-if="delivery.website_description">
             <div t-field="delivery.website_description" class="text-muted mt8"/>
@@ -49,10 +49,10 @@
             </div>
         </xpath>
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-lg-12" id="delivery_carrier">
+            <div t-if="deliveries" id="delivery_carrier">
                 <t t-set="delivery_nb" t-value="len(deliveries)"/>
                 <h3 t-if="delivery_nb &gt; 1" class="mb24">Choose a delivery method</h3>
-                <div t-if="delivery_nb &gt; 1" class="card" id="delivery_method">
+                <div t-if="delivery_nb &gt; 1" class="card border-0" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">
                         <li class="list-group-item">