wip

joomla · Apr 25, 2020 · d3c5959 · d3c5959
1 parent b573e65
commit d3c5959
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
@@ -227,13 +227,10 @@ $input-btn-submenu-icon-distance:   1rem;
 // Custom form
 $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;
+$custom-select-padding:             .625rem 1.25rem;
 
 //input
 $input-padding:                    .6rem 1rem;

diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -1,14 +1,40 @@
 // Custom Forms
+.select-wrapper {
+  position: relative;
+
+  &::before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f107";
+	//font-size: 20px;
+	position: absolute;
+	top: 0;
+    color: var(--atum-text-light);
+	background-color: theme-color("success");
+	padding: $custom-select-padding;
+	pointer-events: none;
+
+    [dir=ltr] & {
+  	  right: 0;
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    [dir=rtl] & {
+	  left: 0;
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+  }
+}
 
 .custom-select {
   max-width: $input-max-width;
   cursor: pointer;
   box-shadow: $custom-select-box-shadow;
-  background: $custom-select-bg $custom-select-background;
+  background: $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: $custom-select-bg $custom-select-background-rtl;
+//    padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding);
   }
 
   &[multiple] {

diff --git a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
@@ -23,6 +23,32 @@
   &.is-focused {
     box-shadow: $focusshadow;
   }
+
+  position: relative;
+
+  &::before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f107";
+	//font-size: 20px;
+	position: absolute;
+	top: 0;
+    color: var(--atum-text-light);
+	background-color: theme-color("success");
+	padding: $custom-select-padding;
+	pointer-events: none;
+
+    [dir=ltr] & {
+  	  right: 0;
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    [dir=rtl] & {
+	  left: 0;
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+  }
 }
 
 .choices__inner {
@@ -121,10 +147,10 @@
 .choices[data-type*="select-multiple"] {
   .choices__inner {
     padding-inline-end: $custom-select-indicator-padding;
-    background: $custom-select-bg $custom-select-background;
+//    background: $custom-select-bg $custom-select-background;
 
     [dir="rtl"] & {
-      background: $custom-select-bg $custom-select-background-rtl;
+//      background: $custom-select-bg $custom-select-background-rtl;
     }
   }
 }

diff --git a/libraries/src/HTML/Helpers/Select.php b/libraries/src/HTML/Helpers/Select.php
@@ -144,8 +144,8 @@ public static function genericlist($data, $name, $attribs = null, $optKey = 'val
 		}
 
 		$baseIndent = str_repeat($options['format.indent'], $options['format.depth']++);
-		$html = $baseIndent . '<select' . ($id !== '' ? ' id="' . $id . '"' : '') . ' name="' . $name . '"' . $attribs . '>' . $options['format.eol']
-			. static::options($data, $options) . $baseIndent . '</select>' . $options['format.eol'];
+		$html = $baseIndent . '<div class="select-wrapper"><select' . ($id !== '' ? ' id="' . $id . '"' : '') . ' name="' . $name . '"' . $attribs . '>' . $options['format.eol']
+			. static::options($data, $options) . $baseIndent . '</select></div>' . $options['format.eol'];
 
 		return $html;
 	}