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.


git-svn-id: https://develop.svn.wordpress.org/trunk@34976 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2015-10-09 00:24:36 +00:00
parent 654b633cb3
commit c010db6ae4
2 changed files with 32 additions and 19 deletions

View File

@ -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 {

View File

@ -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,20 +473,37 @@ 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;
@ -493,6 +511,11 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
-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;