Changeset 23581

Timestamp:

03/01/2013 07:24:03 PM (12 years ago)

Author:

helen

Message:

• 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.

Location:

trunk

Files:

• wp-admin/css/colors-classic.css (modified) (1 diff)
• wp-admin/css/colors-fresh.css (modified) (2 diffs)
• wp-admin/css/wp-admin.css (modified) (1 diff)
• wp-admin/revision.php (modified) (2 diffs)
• wp-includes/css/jquery-ui-slider.css (deleted)
• wp-includes/css/jquery-ui-slider.min.css (deleted)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/wp-admin/css/colors-classic.css

@@ -1477 +1477 @@
 #att-info {
     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);
 }
 

trunk/wp-admin/css/colors-fresh.css

@@ -176 +176 @@
 #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));
@@ -1380 +1381 @@
 #att-info {
     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);
 }
 

trunk/wp-admin/css/wp-admin.css

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

trunk/wp-admin/revision.php

@@ -74 +74 @@
     $parent_file = $submenu_file = 'edit.php';
 
-wp_enqueue_style( 'wp-jquery-ui-slider' );
 wp_enqueue_script( 'revisions' );
 
@@ -135 +134 @@
                 </div>
 
-            <div id="slider"></div>
+            <div id="slider" class="wp-slider"></div>
         </div>
     </div>

trunk/wp-includes/script-loader.php

@@ -543 +543 @@
     $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css", array( 'buttons' ) );
     $styles->add( 'buttons', "/wp-includes/css/buttons$suffix.css" );
-    $styles->add( 'wp-jquery-ui-slider', "/wp-includes/css/jquery-ui-slider$suffix.css" );
 
     foreach ( $rtl_styles as $rtl_style ) {