ENGCOM-1805: [Resolved : Styling <select> by changing less variables in Luma theme… #15734

Author: Stanislav Idolov

app/design/frontend/Magento/luma/web/css/source/_forms.less

@@ -91,11 +91,7 @@
     .select-styling() {
         .lib-css(appearance, none, 1);
         appearance: none;
-        background: @select__background url('../images/select-bg.svg') no-repeat 100% 45%;
         background-size: 30px 60px;
-        border: 1px solid @border-color__base;
-        height: 32px;
-        padding-right: 25px;
         text-indent: .01em;
         text-overflow: '';
 

app/design/frontend/Magento/luma/web/css/source/_theme.less

@@ -166,6 +166,13 @@
 //  Forms
 //  ---------------------------------------------
 
+
+//  Select
+@select__background: @form-element-input__background url('../images/select-bg.svg') no-repeat 100% 45%;
+@select__border: 1px solid @border-color__base;
+@select__height: 32px;
+@select__padding: 4px 25px @indent__xs @indent__s;
+
 //  Form fieldset
 @form-fieldset-legend__font-size: 18px;
 @form-fieldset-legend__font-weight: @font-weight__light;

dev/tests/static/framework/Magento/Sniffs/Less/PropertiesSortingSniff.php

@@ -100,6 +100,14 @@ public function process(File $phpcsFile, $stackPtr)
      */
     private function validatePropertiesSorting(File $phpcsFile, $stackPtr, array $properties)
     {
+        // Fix needed for cases when incorrect properties passed for validation due to bug in PHP tokens.
+        $symbolsForSkip = ['(', 'block'];
+        $properties = array_filter(
+            $properties,
+            function ($var) use ($symbolsForSkip) {
+                return !in_array($var, $symbolsForSkip);
+            }
+        );
 
         $originalProperties = $properties;
         sort($properties);

lib/web/css/source/lib/variables/_forms.less

@@ -121,7 +121,7 @@
 @select__disabled__font-style: @form-element-input__disabled__font-style;
 
 //  Focus state
-@select__focus__background: @form-element-input__focus__background;
+@select__focus__background: false;
 @select__focus__border: @form-element-input__focus__border;
 @select__focus__color: @form-element-input__focus__color;
 @select__focus__font-style: @form-element-input__focus__font-style;