Address feedback

Polish the range slider for IE, Chrome and Firefox. This also optimizes the CSS a little bit.
WordPress · Jul 27, 2017 · da18cbd · da18cbd
1 parent c7c9623
commit da18cbd
Showing 1 changed file with 35 additions and 7 deletions.
diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
@@ -12,6 +12,7 @@
 	background: $dark-gray-500;
 	border: 4px solid transparent;
 	background-clip: padding-box;
+	box-sizing: border-box;
 }
 
 @mixin range-track() {
@@ -23,23 +24,18 @@
 
 .blocks-range-control__input {
 	width: 100%;
-	margin-top: -3px;
 	margin-left: $item-spacing;
-
+	padding: 0;
 	-webkit-appearance: none;
 	background: transparent;
 
-
 	/**
  	 * Thumb
  	 */
 
-	&::-webkit-slider-thumb {
-		-webkit-appearance: none;
-	}
-
 	// webkit
 	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
 		@include range-thumb();
 		margin-top: -7px;	// necessary for chrome
 	}
@@ -49,25 +45,57 @@
 		@include range-thumb();
 	}
 
+	// ie
+	&::-ms-thumb {
+		@include range-thumb();
+		margin-top: 0;	// necessary because edge inherits from chrome
+		height: 14px;
+		width: 14px;
+		border: 2px solid transparent;
+	}
+
 	&:focus {
 		outline: none;
 	}
 
+	// webkit
 	&:focus::-webkit-slider-thumb {
 		box-shadow: $button-focus-style;;
 	}
 
+	// moz
+	&:focus::-moz-range-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
+	// ie
+	&:focus::-ms-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
 	/**
  	 * Track
  	 */
 
+	 // webkit
 	&::-webkit-slider-runnable-track {
 		@include range-track();
+		margin-top: -4px;
 	}
 
+	// moz
 	&::-moz-range-track {
 		@include range-track();
 	}
+
+	// ie
+	&::-ms-track {
+		margin-top: -4px;
+		background: transparent;
+		border-color: transparent;
+		color: transparent;
+		@include range-track();
+	}
 }
 
 .blocks-range-control__hint {