[4.0] Cassiopea: fixing XTD display plus more RTL

administrator/templates/atum/scss/_variables.scss

@@ -222,7 +222,7 @@ $custom-select-bg-size:              116rem;
 $custom-select-indicator:            url(../images/select-bg.svg);
 $custom-select-indicator-rtl:        url(../images/select-bg-rtl.svg);
 $custom-select-indicator-active:     url(../../../images/select-bg.svg);
-$custom-select-indicator-active-rtl: url(../../../images/select-bg-active-rtl.svg);
+$custom-select-indicator-active-rtl: url(../../../images/select-bg-rtl.svg);
 $custom-select-background:           $custom-select-indicator no-repeat right center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-box-shadow:           $atum-box-shadow;

build/build-modules-js/compilecss.es6.js

@@ -45,6 +45,7 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/template.scss`,
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
           `${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
+          `${RootPath}/templates/cassiopeia/scss/vendor/choicesjs/choices.scss`,
           `${RootPath}/administrator/templates/atum/scss/template.scss`,
           `${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
           `${RootPath}/administrator/templates/atum/scss/system/searchtools/searchtools.scss`,

templates/cassiopeia/scss/_variables.scss

@@ -9,7 +9,7 @@ $cassiopeia-box-shadow:              0 0 3px rgba(0,0,0,.04) !default;
 $cassiopeia-block-header-bg:         #f5f5f5 !default;
 $white-offset:                       #fefefe;
 $cassiopeia-header-grad:             linear-gradient(135deg, $cassiopeia-template-color-dark 0%, $cassiopeia-template-color 100%);
-$input-max-width:                    240px;
+$input-max-width:                    100%;
 
 $white:                              #fff;
 $gray-100:                           #f8f9fa;
@@ -149,6 +149,12 @@ $custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left
 $custom-select-bg-size-sm:           75rem;
 $custom-select-multiple-padding-y:   .3rem;
 
+//input
+$input-padding:                    .6rem 1rem;
+$input-border:                     solid 1px  #6d7784;
+$input-btn-padding-y:              .6rem;
+$input-btn-padding-x:              1rem;
+
 // Modals
 $modal-header-height:                46px;
 

templates/cassiopeia/scss/blocks/_form.scss

@@ -30,6 +30,12 @@
   width: auto;
 }
 
+@include media-breakpoint-down(sm) {
+  .form-inline .custom-select {
+    width: 100%;
+  }
+}
+
 td .form-control {
   display: inline-block;
   width: auto;

templates/cassiopeia/scss/blocks/_modals.scss

@@ -1,7 +1,6 @@
 // Modals
 
 .modal {
-
   .btn {
     margin-right: .5rem;
   }
@@ -13,9 +12,7 @@
     &:hover {
       color: #fff;
     }
-
   }
-
 }
 
 .modal-header {
@@ -24,12 +21,19 @@
   .close {
     width: $modal-header-height;
     margin-top: 0;
-    margin-right: -15px;
     font-size: 2rem;
     line-height: $modal-header-height;
-    border-left: 1px solid $cassiopeia-border-color;
-  }
 
+    [dir=ltr] & {
+      margin-right: -15px;
+      border-left: 1px solid $cassiopeia-border-color;
+    }
+
+    [dir=rtl] & {
+      margin-left: -15px;
+      border-right: 1px solid $cassiopeia-border-color;
+    }
+  }
 }
 
 .modal-body {

templates/cassiopeia/scss/system/searchtools/searchtools.scss

@@ -36,7 +36,7 @@
   position: relative;
   width: 100%;
   padding: .25rem 0 0;
-  margin: 1rem 0 .5rem;
+  margin: 1rem .5rem .5rem;
 
   > div {
     margin-bottom: 1rem;

templates/cassiopeia/scss/template-rtl.scss

@@ -13,15 +13,6 @@ body,
   float: right !important;
 }
 
-.input-group > .input-group-append > .btn,
-.input-group > .input-group-append > .input-group-text,
-.input-group > .input-group-prepend:not(:first-child) > .btn,
-.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
-.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
-.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
-  border-radius: .25rem 0 0 .25rem;
-}
-
 .input-group-prepend .btn,
 .input-group-append .btn {
   right: -1px;
@@ -48,3 +39,47 @@ dd {
 .nav {
   padding-right: 0;
 }
+
+.mr-2 {
+  margin-right: 0 !important;
+  margin-left: .5rem;
+}
+
+// SearchTools rounded corners
+.input-group > .input-group-prepend > .btn,
+.input-group > .input-group-prepend > .input-group-text,
+.input-group > .input-group-append:not(:last-child) > .btn,
+.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
+  @include border-left-radius($border-radius);
+  @include border-right-radius(0);
+}
+
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius($border-radius);
+  @include border-right-radius(0);
+}
+
+.input-group > .form-control:not(:last-child),
+.input-group > .custom-select:not(:last-child) {
+  @include border-left-radius(0);
+  @include border-right-radius($border-radius);
+}
+
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group > .btn-group:not(:last-child) > .btn {
+  @include border-left-radius(0);
+  @include border-right-radius($border-radius);
+}
+
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) {
+  @include border-left-radius($border-radius);
+  @include border-right-radius(0);
+}

templates/cassiopeia/scss/template.scss

@@ -56,7 +56,6 @@
 @import "vendor/bootstrap/pagination";
 @import "vendor/bootstrap/table";
 @import "vendor/chosen";
-@import "vendor/choicesjs";
 @import "vendor/dragula";
 @import "vendor/minicolors";
 @import "vendor/tinymce";

templates/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss

@@ -1,6 +1,35 @@
 // Custom Forms
 
 .custom-select {
+  max-width: $input-max-width;
+  cursor: pointer;
+  background: $custom-select-background;
+  background-color: $custom-select-bg;
+  border: $input-border;
+  height: 3.45rem;
+  // var needed
+  box-shadow: $input-box-shadow;
+
+  [dir=rtl] & {
+    padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding);
+    background: $custom-select-background-rtl;
+    background-color: $custom-select-bg;
+  }
+
+  &[multiple] {
+    padding: 0;
+    background-color: var(--white-offset);
+
+    option {
+      padding: $custom-select-multiple-padding-y $custom-select-padding-x;
+      background-color: var(--white);
+
+      &:checked {
+        color: var(--white);
+        background-color: $cassiopeia-template-color-dark !important;
+      }
+    }
+  }
 
   &.custom-select-color-state {
 
@@ -12,7 +41,6 @@
         color: $custom-select-color;
         background-color: $white-offset;
       }
-
     }
 
     &.custom-select-danger {
@@ -23,9 +51,6 @@
         color: $custom-select-color;
         background-color: $white-offset;
       }
-
     }
-
   }
-
 }

templates/cassiopeia/scss/vendor/_choicesjs.scss → templates/cassiopeia/scss/vendor/choicesjs/choices.scss

@@ -1,4 +1,17 @@
+@import "../../../../../media/vendor/bootstrap/scss/functions";
+
+// Cassiopea Variables
+@import "../../variables";
+
+// Mixins
+@import "../../mixin";
+
+@import "../../../../../media/vendor/bootstrap/scss/variables";
+@import "../../../../../media/vendor/bootstrap/scss/mixins";
+
 // choices.js
+@import "../../../../../node_modules/choices.js/src/styles/choices";
+
 
 // Fix position
 .choices__list--dropdown {
@@ -62,6 +75,22 @@
       margin-left: 25px;
     }
   }
+
+  &::after {
+    display: none;
+  }
+
+  .choices__inner {
+    padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+    background: url("../../../images/select-bg.svg") no-repeat right center / $custom-select-bg-size;
+    background-color: $custom-select-bg;
+
+    [dir=rtl] & {
+      padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding);
+      background: url("../../../images/select-bg-rtl.svg") no-repeat left center / $custom-select-bg-size;
+      background-color: $custom-select-bg;
+    }
+  }
 }
 
 .choices[data-type*="select-multiple"],