From 7a4fec532cdc478fc0ec2d5897c1762e1ba81dae Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 20 Jul 2020 16:58:29 -0400
Subject: [PATCH] Refactor host vars and remove non-display props

---
 src/components/alert/alert.scss                 | 1 -
 src/components/checkbox/checkbox.scss           | 3 +--
 src/components/color-picker/color-picker.scss   | 4 ++--
 src/components/details/details.scss             | 4 ++--
 src/components/input/input.scss                 | 3 +--
 src/components/progress-bar/progress-bar.scss   | 4 ++--
 src/components/progress-ring/progress-ring.scss | 4 ++--
 src/components/radio/radio.scss                 | 3 +--
 src/components/rating/rating.scss               | 4 ++--
 src/components/spinner/spinner.scss             | 4 ++--
 src/components/switch/switch.scss               | 3 +--
 src/components/tag/tag.scss                     | 3 +--
 src/components/textarea/textarea.scss           | 3 +--
 src/components/tooltip/tooltip.scss             | 4 ++--
 14 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 71baf49c..e7f4f8df 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -2,7 +2,6 @@
 
 :host {
   display: block;
-  border-radius: var(--sl-border-radius-medium);
 
   &[hidden] {
     display: none;
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 0a23404a..81f66e64 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: pointer;
 }
 
 .checkbox {
@@ -13,7 +12,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .checkbox__control {
diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss
index 4961253d..84e38365 100644
--- a/src/components/color-picker/color-picker.scss
+++ b/src/components/color-picker/color-picker.scss
@@ -8,13 +8,13 @@
  * @prop --slider-handle-size: The diameter of the slider's handle.
  */
 :host {
-  display: inline-block;
-
   --grid-width: 260px;
   --grid-height: 200px;
   --grid-handle-size: 12px;
   --slider-height: 10px;
   --slider-handle-size: 12px;
+
+  display: inline-block;
 }
 
 .color-picker {
diff --git a/src/components/details/details.scss b/src/components/details/details.scss
index 8f7f5fe4..3835976d 100644
--- a/src/components/details/details.scss
+++ b/src/components/details/details.scss
@@ -7,12 +7,12 @@
  * @prop --show-timing-function: The timing function (easing) to use for the show transition.
  */
 :host {
-  display: block;
-
   --hide-duration: var(--sl-transition-medium);
   --hide-timing-function: ease;
   --show-duration: var(--sl-transition-medium);
   --show-timing-function: ease;
+
+  display: block;
 }
 
 .details {
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index ece30977..92e5c94d 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -4,7 +4,6 @@
 
 :host {
   display: block;
-  cursor: text;
 }
 
 .input {
@@ -22,7 +21,7 @@
   vertical-align: middle;
   overflow: hidden;
   transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-  cursor: inherit;
+  cursor: text;
 
   &:hover:not(.input--disabled) {
     background-color: var(--sl-input-background-color-hover);
diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index a3fa118f..31e73515 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -4,9 +4,9 @@
  * @prop height: The progress bar's height.
  */
 :host {
-  display: block;
-
   --height: 16px;
+
+  display: block;
 }
 
 .progress-bar {
diff --git a/src/components/progress-ring/progress-ring.scss b/src/components/progress-ring/progress-ring.scss
index d8c5f57b..bddf442f 100644
--- a/src/components/progress-ring/progress-ring.scss
+++ b/src/components/progress-ring/progress-ring.scss
@@ -5,10 +5,10 @@
  * @prop --indicator-color: The indicator color.
  */
 :host {
-  display: inline-flex;
-
   --track-color: var(--sl-color-gray-90);
   --indicator-color: var(--sl-color-primary-50);
+
+  display: inline-flex;
 }
 
 .progress-ring {
diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss
index fdb30b3c..acb7ccb8 100644
--- a/src/components/radio/radio.scss
+++ b/src/components/radio/radio.scss
@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: pointer;
 }
 
 .radio {
@@ -13,7 +12,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .radio__icon {
diff --git a/src/components/rating/rating.scss b/src/components/rating/rating.scss
index 0c839d93..02783f2f 100644
--- a/src/components/rating/rating.scss
+++ b/src/components/rating/rating.scss
@@ -7,12 +7,12 @@
  * @prop --symbol-spacing: The spacing to use around symbols.
  */
 :host {
-  display: inline-block;
-
   --symbol-color: var(--sl-color-gray-85);
   --symbol-color-active: #ffbe00;
   --symbol-size: 1.2rem;
   --symbol-spacing: var(--sl-spacing-xxx-small);
+
+  display: inline-block;
 }
 
 .rating {
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index c8e3e138..490fc5be 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -6,11 +6,11 @@
  * @prop --stroke-width: The width of the indicator.
  */
 :host {
-  display: inline-flex;
-
   --track-color: transparent;
   --indicator-color: var(--sl-color-primary-50);
   --stroke-width: 2px;
+
+  display: inline-flex;
 }
 
 .spinner {
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index e995e0a7..19331212 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -7,7 +7,6 @@
   --width: calc(var(--height) * 2);
 
   display: inline-block;
-  cursor: pointer;
 }
 
 .switch {
@@ -18,7 +17,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .switch__control {
diff --git a/src/components/tag/tag.scss b/src/components/tag/tag.scss
index 8bd8e93c..11f3e401 100644
--- a/src/components/tag/tag.scss
+++ b/src/components/tag/tag.scss
@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: default;
 }
 
 .tag {
@@ -12,7 +11,7 @@
   line-height: 1;
   white-space: nowrap;
   user-select: none;
-  cursor: inherit;
+  cursor: default;
 }
 
 .tag__clear {
diff --git a/src/components/textarea/textarea.scss b/src/components/textarea/textarea.scss
index c8ca50a9..50162bf9 100644
--- a/src/components/textarea/textarea.scss
+++ b/src/components/textarea/textarea.scss
@@ -4,7 +4,6 @@
 
 :host {
   display: block;
-  cursor: text;
 }
 
 .textarea {
@@ -20,7 +19,7 @@
   border: solid var(--sl-input-border-width) var(--sl-input-border-color);
   vertical-align: middle;
   transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-  cursor: inherit;
+  cursor: text;
 
   &:hover:not(.textarea--disabled) {
     background-color: var(--sl-input-background-color-hover);
diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
index 71f22b16..1e051fac 100644
--- a/src/components/tooltip/tooltip.scss
+++ b/src/components/tooltip/tooltip.scss
@@ -10,8 +10,6 @@
  * @prop --show-timing-function: The timing function (easing) to use for the show transition.
  */
 :host {
-  display: contents;
-
   --max-width: 20rem;
   --hide-delay: 0s;
   --hide-duration: 0.125s;
@@ -19,6 +17,8 @@
   --show-delay: 0.125s;
   --show-duration: 0.125s;
   --show-timing-function: ease;
+
+  display: contents;
 }
 
 .tooltip {