Revisions: Update slider handle styling.

helen · helen · commit c010db6ae4f2 · 2015-10-09T00:24:36.000Z
This brings them in line with updated buttons as done in [34948] for #31459. It also gives it secondary action styling as opposed to primary, as restoring is considered the primary action. props hugobaeta. fixes #34220. git-svn-id: https://develop.svn.wordpress.org/trunk@34976 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
@@ -484,16 +484,6 @@ body.more-filters-opened .more-filters:focus:before {
 	color: $menu-highlight-text;
 }
 
-/* jQuery UI Slider */
-
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-	background: $button-color;
-	border-color: darken( $button-color, 10% );
-	box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
-}
-
 /* Responsive Component */
 
 div#wp-responsive-toggle a:before {
diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css
@@ -462,8 +462,9 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 	height: 18px;
-	margin-top: -3px;
+	margin-top: -5px;
 	outline: none;
+	padding: 2px;
 	position: absolute;
 	width: 18px;
 	z-index: 2;
@@ -472,27 +473,49 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 }
 
 .wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
 .wp-slider .ui-slider-handle.focus {
-	background: #00a0d2;
-	border: 1px solid #0073aa;
-	-webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
-	box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
+	background: #f7f7f7;
+	border: 1px solid #ccc;
+	-webkit-box-shadow: 0 1px 0 #cccccc;
+	box-shadow: 0 1px 0 #cccccc;
 }
 
+.wp-slider .ui-slider-handle:hover,
+.wp-slider .ui-slider-handle.ui-state-hover {
+	background: #fafafa;
+	border-color: #999;
+}
+
+.wp-slider .ui-slider-handle:active,
+.wp-slider .ui-slider-handle.ui-state-active {
+	background: #eee;
+	border-color: #999;
+ 	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+ 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+ 	-webkit-transform: translateY(1px);
+ 	-ms-transform: translateY(1px);
+ 	transform: translateY(1px);
+}
+
+
 .wp-slider .ui-slider-handle:before {
 	background: none;
 	position: absolute;
-	top: 0;
-	left: 0;
-	color: #fff;
+	top: 2px;
+	left: 2px;
+	color: #555;
 	content: "\f229";
 	font: normal 18px/1 dashicons;
 	speak: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.wp-slider .ui-slider-handle:hover:before,
+.wp-slider .ui-slider-handle.ui-state-hover:before {
+	color: #23282d;
+}
+
 .wp-slider .ui-slider-handle.from-handle:before,
 .wp-slider .ui-slider-handle.to-handle:before {
 	font-size: 20px !important;
