Changeset 13395 for trunk/wp-admin/css/custom-navigation.dev.css

Timestamp:

02/25/2010 05:40:03 AM (14 years ago)

Author:

markjaquith

Message:

Nav Menu enhancements. Whole item is clickable to add. Refactored CSS. Scrollbar when more than 7 menu items. props ptahdunbar. see #11817

File:

• trunk/wp-admin/css/custom-navigation.dev.css (modified) (1 diff)

trunk/wp-admin/css/custom-navigation.dev.css

@@ -14 +14 @@
 .checkboxes  { float: right; margin: 10px 12px 0 0; }
 
-.list { zoom: 1; }
-.list li  { margin: 0; }
-.list dt  { display:none; float: left; width: 260px; margin: 0; padding: 0 0 0 5px; line-height: 30px; border-bottom: 1px solid #e3e3e3;  }
-.list dt span  { float: left; }
-.list dt img  { cursor: pointer; float: right; margin: 7px 5px 0 0 }
-
-
 #menus-container { clear: both; }
 #nav-container .inside { padding: 0px 10px 10px; }
 #menus-container .submit { padding: 0px; }
-#menu-settings-column .inside { padding: 10px; overflow: auto; }
+#menu-settings-column .inside { padding: 10px; }
 
 #custom-nav ul  { width: 100%; }
 #custom-nav li { margin: 0; }
 .ui-draggable-dragging  { width: 500px; }
-#custom-nav li dl dt { -webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;
-border:1px solid #E6E6E6;position: relative; padding-left:10px;background-color: #f1f1f1; height: 35px; line-height: 35px; }
+#custom-nav li dl dt { -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border: 1px solid #E6E6E6;position: relative; padding-left:10px; background-color: #f1f1f1; height: 35px; line-height: 35px; }
 #custom-nav li dl dt:hover  { cursor: move; }
 #custom-nav li dl dt .controls  { position: absolute; right: 15px; top: -1px; }
 #custom-nav li dl dt img { vertical-align: middle; }
 #custom-nav li dl dt a {}
-#custom-nav li .title { background:url(../images/ico-arrow.png) no-repeat 4px 5px; padding-left:15px; }
-#custom-nav li ul li { margin-left:20px; opacity:.7;}
+#custom-nav li .title { background:url(../images/ico-arrow.png) no-repeat 4px 5px; background-position: center left; padding-left: 15px; }
+#custom-nav li ul li { margin-left: 20px; opacity: .7;}
 #custom-nav li ul li ul li  { opacity: .9;}
 #custom-nav li ul li ul li ul li   { opacity: .9;}
 #custom-nav li ul li ul li ul li ul li   { opacity: .95; }
 
-#existing-pages li .title { background:url(../images/ico-arrow.png) no-repeat 4px 13px;  padding-left:15px; }
-#existing-pages li ul li .title  { margin-left:10px; }
-#existing-pages li ul li ul li .title  { margin-left:20px; }
-#existing-pages li ul li ul li ul li .title  { margin-left:30px; }
-#existing-pages li ul li ul li ul li ul li .title  { margin-left:40px; }
-#existing-pages li ul li ul li ul li ul li ul li .title  { margin-left:50px; }
-#existing-pages li ul li ul li ul li ul li ul li ul li .title  { margin-left:60px; }
-#existing-pages li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left:70px; }
-#existing-pages li ul li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left:80px; }
+#add-custom-link .howto { font-size: 11px; }
+#add-custom-link .widefat { width: 85%; margin-right: 5px; }
 
-#existing-categories li .title { background:url(../images/ico-arrow.png) no-repeat 4px 13px;  padding-left:15px; }
-#existing-categories li ul li .title  { margin-left:10px; }
-#existing-categories li ul li ul li .title  { margin-left:20px; }
-#existing-categories li ul li ul li ul li .title  { margin-left:30px; }
-#existing-categories li ul li ul li ul li ul li .title  { margin-left:40px; }
-#existing-categories li ul li ul li ul li ul li ul li .title  { margin-left:50px; }
-#existing-categories li ul li ul li ul li ul li ul li ul li .title  { margin-left:60px; }
-#existing-categories li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left:70px; }
-#existing-categories li ul li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left:80px; }
+.list-container { max-height: 203px; overflow-y: auto; padding-left: 2px; padding-right: 5px; }
 
+.list { zoom: 1; }
+.list li { margin: 0; }
+.list dt { display: none; margin: 0; border-bottom: 1px solid #e3e3e3; overflow: hidden; }
+.list dt { background: url(../images/ico-add.png) no-repeat right; }
 
-img.remove, img.edit  { cursor: pointer; margin: 0 5px 0 0; }
+.list li .title { cursor: pointer; display: block; width: 95%; padding: 5px 0px; }
+.list li .title { background: url(../images/ico-arrow.png) no-repeat 4px 13px; background-position: center left; padding-left: 5%; }
 
-.dropzone {height:7px;margin: 3px 0 3px 0;}
+/* Visually shows the menu item hierarchy. */
+.list li ul li .title  { margin-left: 14px; }
+.list li ul li ul li .title  { margin-left: 28px; }
+.list li ul li ul li ul li .title  { margin-left: 42px; }
+.list li ul li ul li ul li ul li .title  { margin-left: 56px; }
+.list li ul li ul li ul li ul li ul li .title  { margin-left: 70px; }
+.list li ul li ul li ul li ul li ul li ul li .title  { margin-left: 84px; }
+.list li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left: 98px; }
+.list li ul li ul li ul li ul li ul li ul li ul li ul li .title  { margin-left: 112px; }
 
-#custom-nav li dl {}
-
-.hide {display:none;}
-
-.type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right:10px; }
+img.remove, img.edit { cursor: pointer; margin: 0 5px 0 0; }
+.dropzone { height: 7px; margin: 3px 0 3px 0; }
+#custom-nav li dl { }
+.hide { display: none; }
+.type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; }
 
 #menu_select { width: 170px; }
-
 #dialog-confirm label { padding-left: 10px; }
 
 /* EDIT LINK BOX */
-.ui-dialog  { background: #fff; border: 1px solid #555555; -moz-box-shadow:0 4px 30px #000000; }
-.ui-dialog-titlebar  { color: #CFCFCF;font-family:"Lucida Grande",Verdana,Arial,sans-serif; padding: 6px 10px 6px; background-color: #222222!important; border: none!important; -moz-border-radius: none!important; }
-#dialog-confirm  { height: 168px !important; padding: 20px 10px 10px; }
-#dialog-confirm input  { margin: 0 0 15px 0; width: 280px; }
+.ui-dialog { background: #fff; border: 1px solid #555555; -moz-box-shadow:0 4px 30px #000000; }
+.ui-dialog-titlebar { color: #CFCFCF; font-family: "Lucida Grande", Verdana, Arial, sans-serif; padding: 6px 10px 6px; background-color: #222222 !important; border: none !important; -moz-border-radius: none !important; }
+#dialog-confirm { height: 168px !important; padding: 20px 10px 10px; }
+#dialog-confirm input { margin: 0 0 15px 0; width: 280px; }
 #dialog-confirm select { margin: 0 0 15px 0; }
-.ui-dialog-buttonpane  { padding: 10px; }
-.ui-dialog-buttonpane button  { margin: 0 10px 0 0; background:#F2F2F2; text-shadow:0 1px 0 #FFFFFF; border-color:#BBBBBB; color:#464646; -moz-border-radius-bottomleft:11px; -moz-border-radius-bottomright:11px; -moz-border-radius-topleft:11px; -moz-border-radius-topright:11px; border-style:solid; border-width:1px; cursor:pointer; font-size:11px !important; line-height:14px; padding:2px 8px; text-decoration:none; }
-
-.ui-dialog-buttonpane button:hover {color:#000;border-color:#666;}
-
+.ui-dialog-buttonpane { padding: 10px; }
+.ui-dialog-buttonpane button  { margin: 0 10px 0 0; background: #F2F2F2; text-shadow: 0 1px 0 #FFFFFF; border-color: #BBBBBB; color: #464646; -moz-border-radius-bottomleft: 11px; -moz-border-radius-bottomright: 11px; -moz-border-radius-topleft: 11px; -moz-border-radius-topright: 11px; border-style: solid; border-width: 1px; cursor: pointer; font-size: 11px !important; line-height: 14px; padding: 2px 8px; text-decoration: none; }
+.ui-dialog-buttonpane button:hover { color: #000; border-color: #666; }
 .ui-icon  { display: none; }
 
 /* Overlays */
 .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); }
-.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 8px; -webkit-border-radius: 8px; }
+.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60; filter:Alpha(Opacity=60); }
+.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60; filter: Alpha(Opacity=60); -moz-border-radius: 8px; -webkit-border-radius: 8px; }