From 07f9bed1aec8c3a162fa3a0e183790210411a2b5 Mon Sep 17 00:00:00 2001
From: Lalith Kumar Karikelli <lalithkarikelli@users.noreply.github.com>
Date: Wed, 9 Dec 2020 19:53:15 +0530
Subject: [PATCH] docs(hx-dropdownSelect): implement and document attribute and
 variables

---
 .../dropdown-select/mixins/SelectControl.scss | 27 ++++++---------
 .../dropdown-select/mixins/SelectFacade.scss  | 34 ++++++++-----------
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/src/scss/components/dropdown-select/mixins/SelectControl.scss b/src/scss/components/dropdown-select/mixins/SelectControl.scss
index 7684326ca..8aef574fb 100644
--- a/src/scss/components/dropdown-select/mixins/SelectControl.scss
+++ b/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);
   }
 }
diff --git a/src/scss/components/dropdown-select/mixins/SelectFacade.scss b/src/scss/components/dropdown-select/mixins/SelectFacade.scss
index febee88f4..92fbc02bf 100644
--- a/src/scss/components/dropdown-select/mixins/SelectFacade.scss
+++ b/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);
   }
 }