Start fixing custom-select

joomla · Apr 22, 2020 · fd630b8 · fd630b8
1 parent 9a3f71e
commit fd630b8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 21 deletions.
diff --git a/administrator/templates/atum/images/select-bg.svg b/administrator/templates/atum/images/select-bg.svg
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
@@ -216,22 +216,20 @@ $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-indicator-padding:   3rem;
+$custom-select-bg:                  var(--atum-bg-light);
+$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-border-color:         $atum-box-shadow;
 $custom-select-box-shadow:           $atum-box-shadow;
 $custom-select-bg-size-sm:           75rem;
 $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;

diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -3,17 +3,7 @@
 .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;
-
-  [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;