* Simplify jQuery UI slider CSS and bring into line with admin styles.

* Merge styles into wp-admin.css and colors-*.css.
* Scope the CSS with a class so as not to conflict with the color picker, which also utilizes jQuery UI slider. Authors wanting to use built-in styling for sliders should add a class of `.wp-slider` to the container to be intialized.

props karmatosed, helen. see #23497.


git-svn-id: https://develop.svn.wordpress.org/trunk@23581 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2013-03-01 19:24:03 +00:00
parent b617e4742a
commit 45b4d47b02
7 changed files with 141 additions and 553 deletions
+31
View File
@@ -1478,6 +1478,37 @@ table.diff .diff-addedline ins {
background-color: #e4f2fd;
}
/* jQuery UI Slider */
.wp-slider.ui-slider {
border-color: #d1e5ee;
background: #eff8ff;
}
.wp-slider .ui-slider-handle {
border-color: #acd;
background: #f4f9fc;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f4f9fc), to(#fff));
background-image: -webkit-linear-gradient(bottom, #f4f9fc, #fff);
background-image: -moz-linear-gradient(bottom, #f4f9fc, #fff);
background-image: -o-linear-gradient(bottom, #f4f9fc, #fff);
background-image: linear-gradient(to top, #f4f9fc, #fff);
}
.wp-slider .ui-slider-handle.ui-state-hover,
.wp-slider .ui-slider-handle.ui-state-focus {
border-color: #79afca;
}
.wp-slider .ui-slider-handle.ui-state-active {
border-color: #79afca;
background: #eff8ff;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f4f9fc));
background-image: -webkit-linear-gradient(bottom, #fff, #f4f9fc);
background-image: -moz-linear-gradient(bottom, #fff, #f4f9fc);
background-image: -o-linear-gradient(bottom, #fff, #f4f9fc);
background-image: linear-gradient(to top, #fff, #f4f9fc);
}
/* edit image */
#sidemenu a {
background-color: #f9f9f9;
+27 -1
View File
@@ -175,7 +175,8 @@ h3.dashboard-widget-title small,
.sidebar-name,
#nav-menu-header,
#nav-menu-footer,
.menu-item-handle {
.menu-item-handle,
.wp-slider .ui-slider-handle {
background: #f1f1f1;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
@@ -1381,6 +1382,31 @@ table.diff .diff-addedline ins {
background-color: #e4f2Fd;
}
/* jQuery UI Slider */
.wp-slider.ui-slider {
border-color: #d7d7d7;
background: #f7f7f7;
}
.wp-slider .ui-slider-handle {
border-color: #d7d7d7;
}
.wp-slider .ui-slider-handle.ui-state-hover,
.wp-slider .ui-slider-handle.ui-state-focus {
border-color: #aaa;
}
.wp-slider .ui-slider-handle.ui-state-active {
border-color: #aaa;
background: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f9f9f9), to(#ececec));
background-image: -webkit-linear-gradient(bottom, #f9f9f9, #ececec);
background-image: -moz-linear-gradient(bottom, #f9f9f9, #ececec);
background-image: -o-linear-gradient(bottom, #f9f9f9, #ececec);
background-image: linear-gradient(to top, #f9f9f9, #ececec);
}
/* edit image */
#sidemenu a {
background-color: #f9f9f9;
+82
View File
@@ -3749,6 +3749,88 @@ span#diff_left_count_inner,
float: left;
}
/* jQuery UI Slider */
.wp-slider.ui-slider {
position: relative;
border-width: 1px;
border-style: solid;
border-radius: 3px;
text-align: left;
cursor: pointer;
}
.wp-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
border-width: 1px;
border-style: solid;
border-radius: 3px;
}
.wp-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-color: #8cc1e9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9));
background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
background-image: -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
background-image: -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
}
.wp-slider.ui-slider-horizontal {
height: .8em;
}
.wp-slider.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.wp-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.wp-slider.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.wp-slider.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.wp-slider.ui-slider-vertical {
width: .8em;
height: 100px;
}
.wp-slider.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.wp-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.wp-slider.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.wp-slider.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
/*------------------------------------------------------------------------------
11.3 - Featured Images