[ADD] web, *: transition-x utility classes

Define classes for some default bootstrap transitions + 'none'.
These values are generic enough to fit different circumstances.

Classes added:
- transition-base
- transition-fade
- transition-none

Part of the overall v16 SCSS optimization/restyle, task-2704984.

task-2918463

closes odoo/odoo#97051

Related: odoo/enterprise#30066
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/mail/static/src/components/attachment_card/attachment_card.scss

@@ -35,11 +35,3 @@
 .o_AttachmentCard_image.o-attachment-viewable {
     cursor: zoom-in;
 }
-
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-
-.o_AttachmentCard_asideItemUnlink.o-pretty {
-    transition: transform 0.3s ease 0s;
-}

addons/mail/static/src/components/attachment_card/attachment_card.xml

@@ -42,7 +42,7 @@
                         </t>
                         <!-- Remove button -->
                         <t t-if="attachmentCard.attachment.isDeletable">
-                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary' : 'bg-200' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
+                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary transition-base' : 'bg-200' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
                                 <i class="fa fa-trash" role="img" aria-label="Remove"/>
                             </button>
                         </t>

addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss

@@ -57,11 +57,3 @@
     box-shadow: 0 0 40px $black;
     outline: none;
 }
-
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-
-.o_AttachmentViewer_viewImage {
-    transition: transform 0.3s ease;
-}

addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml

@@ -43,7 +43,7 @@
                                     <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
                                 </div>
                             </t>
-                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
+                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black transition-base" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isPdf">

addons/rating/static/src/scss/rating_templates.scss

@@ -6,7 +6,6 @@
         margin-left: 0 !important;
     }
     .o_rating_label {
-        transition: .3s;
         &:hover {
             transform: scale(1.1);
         }

addons/rating/views/rating_templates.xml

@@ -25,7 +25,7 @@
                         <form class="col-md-6" t-attf-action="/rate/#{token}/submit_feedback" method="post">
                             <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-bs-toggle="buttons">
                                 <t t-foreach="rate_names" t-as="rate_name">
-                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
+                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none transition-base {{rate == rate_name and 'active' or ''}}">
                                         <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
                                         <a class="o_rating d-block bg-white rounded-circle" href="#">
                                             <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.svg' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>

addons/web/static/src/libs/bootstrap/utilities_custom.scss

@@ -145,6 +145,14 @@ $utilities: map-merge(
             property: overflow-y,
             values: auto hidden visible scroll,
         ),
+        "transition": (
+            property: transition,
+            values: (
+                none: none,
+                base: $transition-base,
+                fade: $transition-fade,
+            ),
+        ),
         "min-width": (
             class: min-w,
             property: min-width,