[4.0] [RTL] Adding specific bootstrap-rtl.scss to Cassiopea (#32297)

templates/cassiopeia/scss/template-rtl.scss

@@ -1,4 +1,5 @@
 @import "template";
+@import "vendor/bootstrap/bootstrap-rtl";
 
 body,
 .dropdown-item {
@@ -57,11 +58,6 @@ body,
   }
 }
 
-.me-2 {
-  margin-right: 0 !important;
-  margin-left: .5rem;
-}
-
 // SearchTools rounded corners
 .awesomplete {
   input {

templates/cassiopeia/scss/vendor/bootstrap/_bootstrap-rtl.scss

@@ -0,0 +1,196 @@
+// Bootstrap rtl overrides
+
+.float-start {
+  float: right !important;
+}
+
+.float-end {
+  float: left !important;
+}
+
+.modal-header {
+  .btn-close {
+    margin: -.5rem auto -.5rem -.5rem;
+  }
+}
+
+.text-start {
+  text-align: right !important;
+}
+
+.text-end {
+  text-align: left !important;
+}
+
+.me-0 {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.me-1 {
+  margin-right: auto !important;
+  margin-left: .25rem !important;
+}
+
+.me-2 {
+  margin-right: auto !important;
+  margin-left: .5rem !important;
+}
+
+.me-3 {
+  margin-right: auto !important;
+  margin-left: 1rem !important;
+}
+
+.me-4 {
+  margin-right: auto !important;
+  margin-left: 1.5rem !important;
+}
+
+.me-5 {
+  margin-right: auto !important;
+  margin-left: 3rem !important;
+}
+
+.me-auto {
+  margin-right: 0 !important;
+  margin-left: auto !important;
+}
+
+.ms-0 {
+  margin-right: 0 !important;
+  margin-left: auto !important;
+}
+
+.ms-1 {
+  margin-right: .25rem !important;
+  margin-left: auto !important;
+}
+
+.ms-2 {
+  margin-right: .5rem !important;
+  margin-left: auto !important;
+}
+
+.ms-3 {
+  margin-right: 1rem !important;
+  margin-left: auto !important;
+}
+
+.ms-4 {
+  margin-right: 1.5rem !important;
+  margin-left: auto !important;
+}
+
+.ms-5 {
+  margin-right: 3rem !important;
+  margin-left: auto !important;
+}
+
+.ms-auto {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.pe-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+.pe-1 {
+  padding-right: 0 !important;
+  padding-left: .25rem !important;
+}
+.pe-2 {
+  padding-right: 0 !important;
+  padding-left: .5rem !important;
+}
+.pe-3 {
+  padding-right: 0 !important;
+  padding-left: 1rem !important;
+}
+.pe-4 {
+  padding-right: 0 !important;
+  padding-left: 1.5rem !important;
+}
+.pe-5 {
+  padding-right: 0 !important;
+  padding-left: 3rem !important;
+}
+
+.ps-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+.ps-1 {
+  padding-right: .25rem !important;
+  padding-left: 0 !important;
+}
+.ps-2 {
+  padding-right: .5rem !important;
+  padding-left: 0 !important;
+}
+.ps-3 {
+  padding-right: 1rem !important;
+  padding-left: 0 !important;
+}
+.ps-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 0 !important;
+}
+.ps-5 {
+  padding-right: 3rem !important;
+  padding-left: 0 !important;
+}
+
+
+.input-group {
+  &:not(.has-validation) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 3) {
+      @include border-end-radius($border-radius);
+    }
+  }
+
+  &.has-validation {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
+    > .dropdown-toggle:nth-last-child(n + 4) {
+      @include border-end-radius(0);
+    }
+  }
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+    margin-left: -$input-border-width;
+    @include border-start-radius(0);
+    @include border-end-radius(0);
+  }
+
+  > :last-child:not(.dropdown-menu)#{$validation-messages} {
+    margin-left: -$input-border-width;
+    @include border-start-radius($border-radius);
+    @include border-end-radius(0);
+  }
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-right: $breadcrumb-item-padding-x;
+    padding-left: 0 !important;
+
+    &::before {
+      float: right; // Suppress inline spacings and underlining of the separator
+      padding-right: 0 !important;
+      padding-left: $breadcrumb-item-padding-x;
+      color: $breadcrumb-divider-color;
+      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+    }
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}