Changeset 34976

Timestamp:

10/09/2015 12:24:36 AM (9 years ago)

Author:

helen

Message:

Revisions: Update slider handle styling.

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.

Location:

trunk/src/wp-admin/css

Files:

• colors/_admin.scss (modified) (1 diff)
• revisions.css (modified) (3 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -485 +485 @@
 }
 
-/* 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 */
 

trunk/src/wp-admin/css/revisions.css

@@ -463 +463 @@
     border-radius: 50%;
     height: 18px;
-    margin-top: -3px;
+    margin-top: -5px;
     outline: none;
+    padding: 2px;
     position: absolute;
     width: 18px;
@@ -473 +474 @@
 
 .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;
@@ -492 +510 @@
     -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;
 }