Fix specificity issue in color slider thumb (#3849)

snowystinger · web-flow · commit c8d98a49695c · 2022-12-15T07:45:31.000+11:00
diff --git a/packages/@adobe/spectrum-css-temp/components/colorslider/index.css b/packages/@adobe/spectrum-css-temp/components/colorslider/index.css
@@ -52,6 +52,10 @@
 
   cursor: default;
 
+  .spectrum-ColorSlider-handle.spectrum-ColorSlider-handle {
+    margin: 0;
+  }
+
   /* The checkerboard is a separate element so that the gradient is overlaid on top. */
   &:before {
     content: "";
diff --git a/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css b/packages/@adobe/spectrum-css-temp/components/colorslider/skin.css
@@ -20,10 +20,6 @@
     background: var(--spectrum-colorslider-fill-color-disabled) !important;
     box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);
   }
-
-  .spectrum-ColorSlider-handle {
-    margin: 0;
-  }
 }
 
 @media (forced-colors: active) {
@@ -34,4 +30,4 @@
     --spectrum-colorslider-border-color: ButtonText;
     --spectrum-colorarea-border-color: ButtonText;
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -20,10 +20,6 @@`
`20`	`20`	`background: var(--spectrum-colorslider-fill-color-disabled) !important;`
`21`	`21`	`box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);`
`22`	`22`	`}`
`23`		`-`
`24`		`- .spectrum-ColorSlider-handle {`
`25`		`- margin: 0;`
`26`		`- }`
`27`	`23`	`}`
`28`	`24`
`29`	`25`	`@media (forced-colors: active) {`
`@@ -34,4 +30,4 @@`
`34`	`30`	`--spectrum-colorslider-border-color: ButtonText;`
`35`	`31`	`--spectrum-colorarea-border-color: ButtonText;`
`36`	`32`	`}`
`37`		`-}`
	`33`	`+}`