Merge pull request #799 from lalithkarikelli/surf2105

docs(dropdown): implement and document attrs and vars

Author: 100stacks

src/scss/components/dropdown-select/mixins/SelectControl.scss

@@ -8,10 +8,9 @@
       color: transparent;
       text-shadow: 0 0 0 $gray-900;
     }
-  }
-  @else {
-    background-color: $gray-0;
-    color: $gray-900;
+  } @else {
+    background-color: var(--hxDropdown-hxSelect-unfocused-backgroundColor, $gray-0);
+    color: var(--hxDropdown-hxSelect-unfocused-color, $gray-900);
   }
 }
 
@@ -23,10 +22,9 @@
       color: transparent;
       text-shadow: 0 0 0 $gray-900;
     }
-  }
-  @else {
-    background-color: $gray-0;
-    color: $gray-900;
+  } @else {
+    background-color: var(--hxDropdown-hxSelect-unfocused-invalid-backgroundColor, $gray-0);
+    color: var(--hxDropdown-hxSelect-unfocused-invalid-color, $gray-900);
   }
 }
 
@@ -38,10 +36,9 @@
       color: transparent;
       text-shadow: 0 0 0 $gray-900;
     }
-  }
-  @else {
-    background-color: $gray-100;
-    color: $gray-700;
+  } @else {
+    background-color: var(--hxDropdown-hxSelect-unfocused-disabled-backgroundColor, $gray-100);
+    color: var(--hxDropdown-hxSelect-unfocused-disabled-color, $gray-700);
     opacity: 1;
   }
 }
@@ -56,11 +53,9 @@
 @mixin hxSelectControl($state: null, $focused: false) {
   @if $state == invalid {
     @include __selectControl--invalid($focused);
-  }
-  @else if $state == disabled {
+  } @else if $state == disabled {
     @include __selectControl--disabled($focused);
-  }
-  @else {
+  } @else {
     @include __selectControl($focused);
   }
 }

src/scss/components/dropdown-select/mixins/SelectFacade.scss

@@ -2,40 +2,36 @@
 
 @mixin __selectFacade($focused: false) {
   @if $focused {
-    border: 1px solid $cyan-700;
+    border: 1px solid var(--hxDropdown-hxSelect-focused-borderColor, $blue-700);
     box-shadow: $focus-glow;
-  }
-  @else {
-    border: 1px solid $gray-500;
-    color: $gray-900;
+  } @else {
+    border: 1px solid var(--hxDropdown-hxSelect-unfocused-borderColor, $gray-500);
+    color: var(--hxDropdown-hxSelect-color, $gray-900);
   }
 }
 
 @mixin __selectFacade--invalid($focused: false) {
   @if $focused {
-    border: 2px solid $red-900;
+    border: 2px solid var(--hxDropdown-hxSelect-invalid-focused-borderColor, $red-status-900);
     box-shadow: $focus-glow-invalid;
-  }
-  @else {
-    border: 2px solid $red-900;
-    color: $gray-900;
+  } @else {
+    border: 2px solid var(--hxDropdown-hxSelect-invalid-unfocused-borderColor, $red-status-900);
+    color: var(--hxDropdown-hxSelect-invalid-color, $gray-900);
   }
 }
 
 @mixin __selectFacade--disabled($focused: false) {
   @if $focused {
-    border: 1px solid $gray-500;
+    border: 1px solid var(--hxDropdown-hxSelect-disabled-focused-borderColor, $gray-500);
     box-shadow: $focus-glow;
-  }
-  @else {
+  } @else {
     --hxTrigger-backgroundColor: #{$gray-100};
 
-    border: 1px solid $gray-500;
-    color: $gray-700;
+    border: 1px solid var(--hxDropdown-hxSelect-disabled-unfocused-borderColor, $gray-500);
+    color: var(--hxDropdown-hxSelect-disabled-color, $gray-700);
   }
 }
 
-
 // LESS                            SCSS
 // .SelectFacade(pristine)       -> hxSelectFacade;
 // .SelectFacade(pristine-focus) -> hxSelectFacade($focused: true);
@@ -46,11 +42,9 @@
 @mixin hxSelectFacade($state: null, $focused: false) {
   @if $state == invalid {
     @include __selectFacade--invalid($focused);
-  }
-  @else if $state == disabled {
+  } @else if $state == disabled {
     @include __selectFacade--disabled($focused);
-  }
-  @else {
+  } @else {
     @include __selectFacade($focused);
   }
 }