[4.0] Custom select SVG improvements

administrator/templates/atum/scss/_variables.scss

@@ -87,12 +87,21 @@ $colors: (
   atum-bg-dark-90:                 adjust-color($base-color, $hue: +10%, $saturation: -1%, $lightness: -17%)
 );
 
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+) !default;
+
 // Alerts
 $alert-border-level:               0;
 $alert-color-level:                0;
 
 // Global
 $atum-box-shadow:                  0 2px 4px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .23);
+$atum-box-shadow-success:          inset 0 0 0 .1rem #a6cca7;
+$atum-box-shadow-danger:           inset 0 0 0 .1rem #cca6a6;
 $enable-rounded:                   true;
 $input-box-shadow:                 inset 0 0 0 .1rem lighten(theme-color("atum-link-color"), 45%);
 $input-btn-padding-y:              .6rem;
@@ -216,22 +225,19 @@ $input-btn-padding-x-sm-submenu:    1.625rem;
 $input-btn-submenu-icon-distance:   1rem;
 
 // Custom form
-$custom-select-indicator-padding:    3rem;
-$custom-select-bg:                   var(--atum-bg-light);
-$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-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;
-$custom-select-bg-size-sm:           75rem;
-$custom-select-multiple-padding-y:   .3rem;
+$custom-select-bg:                  var(--white-offset);
+$custom-select-bg-size:             14px 8px;
+$custom-select-indicator-color:     $gray-900;
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.5 8.4' width='14' height='8'><path fill='#{$custom-select-indicator-color}' d='M.1 1.5C2.4 3.8 4.7 6 6.9 8.3c.1.1.2.1.3.1.1 0 .2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1L7.3 5.9 1.5.1C1.4 0 1.3 0 1.2 0 1.1 0 1 0 .9.1L.2.8.1.9c0 .1-.1.1-.1.2v.2c0 .1.1.2.1.2z'/></svg>");
+$custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $input-btn-padding-x center / $custom-select-bg-size;
+$custom-select-background-rtl:      escape-svg($custom-select-indicator) no-repeat left $input-btn-padding-x center / $custom-select-bg-size;
+$custom-select-border-color:        #6d7784;
+$custom-select-box-shadow:          $input-box-shadow;
+$custom-select-multiple-padding-y:  .3rem;
 
 //input
 $input-padding:                    .6rem 1rem;
-$input-border:                     solid 1px  #6d7784;
+$input-border:                     solid 1px #6d7784;
 
 // Modals
 $modal-header-height:              2.875rem;

administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss

@@ -3,16 +3,12 @@
 .custom-select {
   max-width: $input-max-width;
   cursor: pointer;
-  background: $custom-select-background;
-  background-color: $custom-select-bg;
-  border: $input-border;
-  // var needed
-  box-shadow: $input-box-shadow;
+  box-shadow: $custom-select-box-shadow;
+  background: $custom-select-bg $custom-select-background;
 
   [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;
+    background: $custom-select-bg $custom-select-background-rtl;
   }
 
   &[multiple] {
@@ -28,33 +24,19 @@
         background-color: var(--atum-bg-dark) !important;
       }
     }
-
-
-
   }
 
   &.custom-select-color-state {
-
     &.custom-select-success {
       color: theme-color("success");
-      background-color: theme-color("success");
       border-color: theme-color("success");
-
-      option {
-        color: $custom-select-color;
-        background-color: var(--white-offset);
-      }
+      box-shadow: $atum-box-shadow-success;
     }
 
     &.custom-select-danger {
       color: theme-color("danger");
-      background-color: theme-color("danger");
       border-color: theme-color("danger");
-
-      option {
-        color: $custom-select-color;
-        background-color: var(--white-offset);
-      }
+      box-shadow: $atum-box-shadow-danger;
     }
   }
 

administrator/templates/atum/scss/vendor/choicesjs/choices.scss

@@ -121,10 +121,10 @@
 .choices[data-type*="select-multiple"] {
   .choices__inner {
     padding-inline-end: $custom-select-indicator-padding;
-    background: $custom-select-bg url("../../../images/select-bg.svg") no-repeat 100%/116rem;
+    background: $custom-select-bg $custom-select-background;
 
     [dir="rtl"] & {
-      background: $custom-select-bg url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
+      background: $custom-select-bg $custom-select-background-rtl;
     }
   }
 }