wp-admin/css/nav-menus.css

   1 /* nav-menu */
   2
   3 /* @todo: determine if this is truly for nav menus only */
   4 .no-js #message {
   5         display: block;
   6 }
   7
   8 ul.add-menu-item-tabs li {
   9         padding: 3px 5px 3px 8px;
  10 }
  11
  12 .accordion-section ul.category-tabs,
  13 .accordion-section ul.add-menu-item-tabs,
  14 .accordion-section ul.wp-tab-bar {
  15         margin: 0;
  16 }
  17
  18 .accordion-section .categorychecklist {
  19         margin: 13px 0;
  20 }
  21
  22 #nav-menu-meta .accordion-section-content {
  23         padding: 18px 13px;
  24 }
  25
  26 #nav-menu-meta .button-controls {
  27         margin-bottom: 0;
  28 }
  29
  30 #nav-menus-frame {
  31         margin-left: 300px;
  32         margin-top: 23px;
  33 }
  34
  35 #wpbody-content #menu-settings-column {
  36         display:inline;
  37         width:281px;
  38         margin-left: -300px;
  39         clear: both;
  40         float: left;
  41         padding-top: 0;
  42 }
  43
  44 #menu-settings-column .inside {
  45         clear: both;
  46         margin: 10px 0 0;
  47 }
  48
  49 .metabox-holder-disabled .postbox,
  50 .metabox-holder-disabled .accordion-section-content,
  51 .metabox-holder-disabled .accordion-section-title {
  52         opacity: 0.5;
  53         filter: alpha(opacity=50);
  54 }
  55
  56 .metabox-holder-disabled .button-controls .select-all {
  57         display: none;
  58 }
  59
  60 #wpbody {
  61         position: relative;
  62 }
  63
  64 .blank-slate .menu-name {
  65         height: 2em;
  66 }
  67
  68 .blank-slate .menu-settings {
  69         border: none;
  70         margin-top: 0;
  71         padding-top: 0;
  72         overflow: hidden;
  73 }
  74
  75 .is-submenu {
  76         color: #999;
  77         font-style: italic;
  78         font-weight: normal;
  79         margin-left: 4px;
  80 }
  81
  82 .manage-menus {
  83         margin-top: 23px;
  84         padding: 10px;
  85         overflow: hidden;
  86         background: #fbfbfb;
  87 }
  88
  89 .manage-menus select {
  90         float: left;
  91         margin-right: 6px;
  92 }
  93
  94 .manage-menus .selected-menu {
  95         float: left;
  96         margin: 5px 6px 0 0;
  97 }
  98
  99 .manage-menus .submit-btn {
 100         float: left;
 101         margin-top: 1px;
 102 }
 103
 104 .menu-edit #post-body-content h3 {
 105         margin: 1em 0 10px;
 106 }
 107
 108 .menu-settings {
 109         border-top: 1px solid #eee;
 110         margin-top: 2em;
 111 }
 112
 113 .menu-settings dl {
 114         margin: 0 0 10px;
 115         overflow: hidden;
 116         padding-left: 18%;
 117 }
 118
 119 .menu-settings dd {
 120         float: left;
 121         margin: 0;
 122         width: 100%;
 123 }
 124
 125 .menu-settings dt {
 126         float: left;
 127         clear: both;
 128         width: 21.951%;
 129         padding: 3px 0 0;
 130         margin-left: -21.951%;
 131 }
 132
 133 .menu-settings label {
 134         vertical-align: baseline;
 135 }
 136
 137 .menu-edit .checkbox-input {
 138         margin-top: 4px;
 139 }
 140
 141 .theme-location-set {
 142         color: #999;
 143         font-size: 11px;
 144 }
 145
 146 /* Menu Container */
 147 #menu-management-liquid {
 148         float: left;
 149         min-width: 100%;
 150         margin-top: 3px;
 151 }
 152
 153 #menu-management {
 154         position: relative;
 155         margin-right: 20px;
 156         margin-top: -3px;
 157         width: 100%;
 158         background: #f5f5f5;
 159 }
 160
 161 #menu-management .menu-edit {
 162         margin-bottom: 20px;
 163 }
 164
 165 .nav-menus-php #post-body {
 166         padding: 0 10px 10px;
 167         border-top: 1px solid #fff;
 168         border-bottom: 1px solid #dfdfdf;
 169         background: #fff;
 170 }
 171
 172 #nav-menu-header,
 173 #nav-menu-footer {
 174         padding: 0 10px;
 175 }
 176
 177 #nav-menu-header {
 178         border-bottom: 1px solid #dfdfdf;
 179         margin-bottom: 0;
 180 }
 181
 182 #nav-menu-header .menu-name-label {
 183         margin-top: 4px;
 184 }
 185
 186 .nav-menus-php #post-body div.updated,
 187 .nav-menus-php #post-body div.error {
 188         margin: 0;
 189 }
 190
 191 .nav-menus-php #post-body-content {
 192         position: relative;
 193         float: none;
 194 }
 195
 196 #menu-management .menu-add-new abbr {
 197         font-weight:600;
 198 }
 199
 200 #select-nav-menu-container {
 201         text-align: right;
 202         padding: 0 10px 3px 10px;
 203         margin-bottom: 5px;
 204 }
 205
 206 #select-nav-menu {
 207         width: 100px;
 208         display: inline;
 209 }
 210
 211 #menu-name-label {
 212         margin-top: -2px;
 213 }
 214
 215 .widefat .menu-locations tr + tr td {
 216         padding-top: 0;
 217 }
 218
 219 .widefat .menu-locations td {
 220         vertical-align: middle;
 221 }
 222
 223 .menu-location-title label {
 224         font-weight: bold;
 225 }
 226
 227 .menu-location-menus select {
 228         float: left;
 229 }
 230
 231 #locations-nav-menu-wrapper {
 232         padding: 5px 0;
 233 }
 234
 235 .locations-nav-menu-select select {
 236         float: left;
 237         width: 160px;
 238         margin-right: 5px;
 239 }
 240
 241 .locations-row-links {
 242         float: left;
 243         margin: 6px 0 0 6px;
 244 }
 245
 246 .locations-edit-menu-link,
 247 .locations-add-menu-link {
 248         margin: 0 3px;
 249 }
 250
 251 .locations-edit-menu-link {
 252         padding-right: 3px;
 253         border-right: 1px solid #ccc;
 254 }
 255
 256 #wpbody .open-label {
 257         display: block;
 258         float:left;
 259 }
 260
 261 #wpbody .open-label span {
 262         padding-right: 10px;
 263 }
 264
 265 .js .input-with-default-title {
 266         color: #a0a5aa;
 267         font-style: italic;
 268 }
 269
 270 #menu-management .inside {
 271         padding: 0 10px;
 272 }
 273
 274 /* Add Menu Item Boxes */
 275 .postbox .howto input,
 276 .accordion-container .howto input {
 277         width: 180px;
 278         float: right;
 279 }
 280
 281 .accordion-container .outer-border {
 282         margin: 0;
 283 }
 284
 285 .customlinkdiv .howto input {
 286         width: 180px;
 287 }
 288
 289 .customlinkdiv p {
 290         margin-top: 0
 291 }
 292
 293 #nav-menu-theme-locations .howto select {
 294         width: 100%;
 295 }
 296
 297 #nav-menu-theme-locations .button-controls {
 298         text-align: right;
 299 }
 300
 301 .add-menu-item-view-all {
 302         height: 400px;
 303 }
 304
 305 /* Button Primary Actions */
 306 #menu-container .submit {
 307         margin: 0 0 10px;
 308         padding: 0;
 309 }
 310
 311 .nav-menus-php .add-new-menu-action {
 312         float: left;
 313         margin: 6px 0 0 6px;
 314         line-height: 15px;
 315 }
 316
 317 .nav-menus-php .meta-sep,
 318 .nav-menus-php .submitdelete,
 319 .nav-menus-php .submitcancel {
 320         display: block;
 321         float: left;
 322         margin: 6px 0;
 323         line-height: 15px;
 324 }
 325
 326 .meta-sep {
 327         padding: 0 2px;
 328 }
 329
 330 /* @todo: is this actually used? */
 331 #cancel-save {
 332         text-decoration: underline;
 333         font-size: 12px;
 334         margin-left: 20px;
 335         margin-top: 5px;
 336 }
 337
 338 .button.right, .button-secondary.right, .button-primary.right {
 339         float: right;
 340 }
 341
 342 /* Button Secondary Actions */
 343 .list-controls {
 344         float: left;
 345         margin-top: 5px;
 346 }
 347
 348 .add-to-menu {
 349         float: right;
 350 }
 351
 352 .button-controls {
 353         clear:both;
 354         margin: 10px 0;
 355 }
 356
 357 .show-all,
 358 .hide-all {
 359         cursor: pointer;
 360 }
 361
 362 .hide-all {
 363         display: none;
 364 }
 365
 366 /* Create Menu */
 367 #menu-name {
 368         width: 270px;
 369 }
 370
 371 #manage-menu .inside {
 372         padding: 0px 0px;
 373 }
 374
 375 /* Custom Links */
 376 #available-links dt {
 377         display: block;
 378 }
 379
 380 #add-custom-link .howto {
 381         font-size: 12px;
 382 }
 383
 384 #add-custom-link label span {
 385         display: block;
 386         float: left;
 387         margin-top: 5px;
 388         padding-right: 5px;
 389 }
 390
 391 .menu-item-textbox {
 392         width: 180px;
 393 }
 394
 395 .nav-menus-php .howto span {
 396         margin-top: 6px;
 397         display: block;
 398         float: left;
 399 }
 400
 401 /* Menu item types */
 402 .quick-search {
 403         width: 190px;
 404 }
 405
 406 .quick-search-wrap .spinner {
 407         float: none;
 408         margin: 0 5px;
 409 }
 410
 411 .nav-menus-php .list-wrap {
 412         display: none;
 413         clear: both;
 414         margin-bottom: 10px;
 415 }
 416
 417 .nav-menus-php .postbox p.submit {
 418         margin-bottom: 0;
 419 }
 420
 421 /* Listings */
 422 .nav-menus-php .list li {
 423         display: none;
 424         margin: 0;
 425         margin-bottom: 5px;
 426 }
 427
 428 .nav-menus-php .list li .menu-item-title {
 429         cursor: pointer;
 430         display: block;
 431 }
 432
 433 .nav-menus-php .list li .menu-item-title input {
 434         margin-right: 3px;
 435         margin-top: -3px;
 436 }
 437
 438 .menu-item-title input[type=checkbox] {
 439         display: inline-block;
 440         margin-top: -4px;
 441 }
 442
 443 /* Nav Menu */
 444 #menu-container .inside {
 445         padding-bottom: 10px;
 446 }
 447
 448 .menu {
 449         padding-top:1em;
 450 }
 451
 452 #menu-to-edit {
 453         margin: 0;
 454         padding: 0.1em 0;
 455 }
 456
 457 .menu ul {
 458         width: 100%;
 459 }
 460
 461 .menu li {
 462         margin-bottom: 0;
 463         position:relative;
 464 }
 465
 466 .menu-item-bar {
 467         clear:both;
 468         line-height:1.5em;
 469         position:relative;
 470         margin: 9px 0 0;
 471 }
 472
 473 .menu-item-bar .menu-item-handle {
 474         border: 1px solid #dfdfdf;
 475         position: relative;
 476         padding: 10px 15px;
 477         height: auto;
 478         min-height: 20px;
 479         width: 382px;
 480         line-height: 30px;
 481         overflow: hidden;
 482         word-wrap: break-word;
 483 }
 484
 485 .menu-item-bar .menu-item-handle:hover {
 486         border-color: #999;
 487 }
 488
 489 #menu-to-edit .menu-item-invalid .menu-item-handle {
 490         background: #f6c9cc;
 491         border-color: #f1acb1;
 492 }
 493
 494 .no-js .menu-item-edit-active .item-edit {
 495         display: none;
 496 }
 497
 498 .js .menu-item-handle {
 499         cursor: move;
 500 }
 501
 502 .menu li.deleting .menu-item-handle {
 503         background-image: none;
 504         background-color: #f66;
 505 }
 506
 507 .menu-item-handle .item-title {
 508         font-size: 13px;
 509         font-weight: 600;
 510         line-height: 20px;
 511         display: block;
 512         margin-right: 13em;
 513 }
 514
 515 .menu-item-handle .menu-item-title.no-title {
 516         color: #999;
 517 }
 518
 519 /* Sortables */
 520 li.menu-item.ui-sortable-helper .menu-item-bar {
 521         margin-top: 0;
 522 }
 523
 524 li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar {
 525         margin-top: 13px;
 526 }
 527
 528 .menu .sortable-placeholder {
 529         height: 35px;
 530         width: 410px;
 531         margin-top: 13px;
 532 }
 533
 534 /* Hide the transport list when it's empty */
 535 .menu-item .menu-item-transport:empty {
 536         display: none;
 537 }
 538
 539 /* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */
 540 .menu-item-depth-0 { margin-left: 0px; }
 541 .menu-item-depth-1 { margin-left: 30px; }
 542 .menu-item-depth-2 { margin-left: 60px; }
 543 .menu-item-depth-3 { margin-left: 90px; }
 544 .menu-item-depth-4 { margin-left: 120px; }
 545 .menu-item-depth-5 { margin-left: 150px; }
 546 .menu-item-depth-6 { margin-left: 180px; }
 547 .menu-item-depth-7 { margin-left: 210px; }
 548 .menu-item-depth-8 { margin-left: 240px; }
 549 .menu-item-depth-9 { margin-left: 270px; }
 550 .menu-item-depth-10 { margin-left: 300px; }
 551 .menu-item-depth-11 { margin-left: 330px; }
 552
 553 .menu-item-depth-0 .menu-item-transport { margin-left: 0px; }
 554 .menu-item-depth-1 .menu-item-transport { margin-left: -30px; }
 555 .menu-item-depth-2 .menu-item-transport { margin-left: -60px; }
 556 .menu-item-depth-3 .menu-item-transport { margin-left: -90px; }
 557 .menu-item-depth-4 .menu-item-transport { margin-left: -120px; }
 558 .menu-item-depth-5 .menu-item-transport { margin-left: -150px; }
 559 .menu-item-depth-6 .menu-item-transport { margin-left: -180px; }
 560 .menu-item-depth-7 .menu-item-transport { margin-left: -210px; }
 561 .menu-item-depth-8 .menu-item-transport { margin-left: -240px; }
 562 .menu-item-depth-9 .menu-item-transport { margin-left: -270px; }
 563 .menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
 564 .menu-item-depth-11 .menu-item-transport { margin-left: -330px; }
 565
 566 body.menu-max-depth-0 { min-width: 950px !important; }
 567 body.menu-max-depth-1 { min-width: 980px !important; }
 568 body.menu-max-depth-2 { min-width: 1010px !important; }
 569 body.menu-max-depth-3 { min-width: 1040px !important; }
 570 body.menu-max-depth-4 { min-width: 1070px !important; }
 571 body.menu-max-depth-5 { min-width: 1100px !important; }
 572 body.menu-max-depth-6 { min-width: 1130px !important; }
 573 body.menu-max-depth-7 { min-width: 1160px !important; }
 574 body.menu-max-depth-8 { min-width: 1190px !important; }
 575 body.menu-max-depth-9 { min-width: 1220px !important; }
 576 body.menu-max-depth-10 { min-width: 1250px !important; }
 577 body.menu-max-depth-11 { min-width: 1280px !important; }
 578
 579 /* Menu item controls */
 580 .item-type {
 581         display: inline-block;
 582         padding: 12px 10px;
 583         color: #666;
 584         font-size: 12px;
 585         line-height: 18px;
 586 }
 587
 588 .item-controls {
 589         font-size: 12px;
 590         position: absolute;
 591         right: 20px;
 592         top: -1px;
 593 }
 594
 595 .item-controls a {
 596         text-decoration: none;
 597 }
 598
 599 .item-controls a:hover {
 600         cursor: pointer;
 601 }
 602
 603 .item-controls .item-order {
 604         padding-right: 10px;
 605 }
 606
 607 .nav-menus-php .item-edit {
 608         position: absolute;
 609         right: -20px;
 610         top: 0;
 611         display: block;
 612         width: 30px;
 613         height: 40px;
 614         margin-right: 0 !important;
 615         text-indent: 100%;
 616         outline: none;
 617         overflow: hidden;
 618         white-space: nowrap;
 619 }
 620
 621 /* Menu editing */
 622 .menu-instructions-inactive {
 623         display: none;
 624 }
 625
 626 .menu-item-settings {
 627         display: block;
 628         width: 402px;
 629         padding: 10px 0 10px 10px;
 630         position: relative;
 631         z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
 632         border: 1px solid #e5e5e5;
 633         border-top: none;
 634         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 635         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 636 }
 637
 638 .menu-item-settings .field-move a {
 639         display: none;
 640         margin: 0 2px;
 641 }
 642
 643 .menu-item-edit-active .menu-item-settings {
 644         display: block;
 645 }
 646
 647 .menu-item-edit-inactive .menu-item-settings {
 648         display: none;
 649 }
 650
 651 .add-menu-item-pagelinks {
 652         margin: .5em auto;
 653         text-align: center;
 654 }
 655
 656 .link-to-original {
 657         display: block;
 658         margin: 0 0 10px;
 659         padding: 3px 5px 5px;
 660         border: 1px solid #dfdfdf;
 661         color: #777;
 662         font-size: 12px;
 663         font-style: italic;
 664 }
 665
 666 .link-to-original a {
 667         padding-left: 4px;
 668         font-style: normal;
 669 }
 670
 671 .hidden-field {
 672         display: none;
 673 }
 674
 675 .menu-item-settings .description-thin,
 676 .menu-item-settings .description-wide {
 677         margin-right: 10px;
 678         float: left;
 679 }
 680
 681 .description-thin {
 682         width: 190px;
 683 }
 684
 685 .description-wide {
 686         width: 390px;
 687 }
 688
 689 .menu-item-actions {
 690         padding-top: 15px;
 691 }
 692
 693 #cancel-save {
 694         cursor: pointer;
 695 }
 696
 697 /* Major/minor publishing actions (classes) */
 698 .nav-menus-php .major-publishing-actions {
 699         clear: both;
 700         padding: 3px 0 6px;
 701 }
 702
 703 .nav-menus-php .major-publishing-actions .publishing-action {
 704         text-align: right;
 705         float: right;
 706         line-height: 23px;
 707         margin: 4px 0 1px;
 708 }
 709
 710 .nav-menus-php .blank-slate .menu-settings {
 711         display: none;
 712 }
 713
 714 .nav-menus-php .delete-action {
 715         float: left;
 716         margin-top: 2px;
 717 }
 718
 719 .nav-menus-php .submitbox .submitcancel {
 720         border-bottom: 1px solid #0073aa;
 721         padding: 1px 2px;
 722         color: #0073aa;
 723         text-decoration: none;
 724 }
 725
 726 .nav-menus-php .submitbox .submitcancel:hover {
 727         background: #0073aa;
 728         color: #fff;
 729 }
 730
 731 .nav-menus-php .major-publishing-actions .form-invalid {
 732         padding-left: 4px;
 733         margin-left: -4px;
 734 }
 735
 736 /* Clearfix */
 737 #menu-item-name-wrap:after,
 738 #menu-item-url-wrap:after,
 739 #menu-name-label:after,
 740 #menu-settings-column .inside:after,
 741 #nav-menus-frame:after,
 742 .nav-menus-php #post-body-content:after,
 743 .nav-menus-php .button-controls:after,
 744 .nav-menus-php .major-publishing-actions:after,
 745 .nav-menus-php .menu-item-settings:after {
 746         clear: both;
 747         content: ".";
 748         display: block;
 749         height: 0;
 750         visibility: hidden;
 751 }
 752
 753 #nav-menus-frame,
 754 .button-controls,
 755 #menu-item-url-wrap,
 756 #menu-item-name-wrap {
 757         display: block;
 758 }
 759
 760 /* =Media Queries
 761 -------------------------------------------------------------- */
 762
 763 @media screen and ( max-width: 782px ) {
 764         body.nav-menus-php {
 765                 min-width: 0 !important;
 766         }
 767
 768         #nav-menus-frame {
 769                 margin-left: 0;
 770                 float: none;
 771                 width: 100%;
 772         }
 773
 774         #wpbody-content #menu-settings-column {
 775                 display: block;
 776                 width: 100%;
 777                 float: none;
 778                 margin-left: 0;
 779         }
 780
 781         #side-sortables .add-menu-item-tabs {
 782                 margin: 15px 0 14px;
 783         }
 784
 785         ul.add-menu-item-tabs li.tabs {
 786                 padding: 13px 15px 14px;
 787         }
 788
 789         .nav-menus-php .item-controls .item-type {
 790                 margin-top: 2px;
 791         }
 792
 793         .nav-menus-php .customlinkdiv .howto input {
 794                 width: 65%;
 795         }
 796
 797         .nav-menus-php .quick-search {
 798                 width: 85%;
 799         }
 800
 801         #menu-management-liquid {
 802                 margin-top: 25px;
 803         }
 804
 805         .nav-menus-php .menu-name-label.howto span {
 806                 margin-top: 13px
 807         }
 808
 809         .menu-name-label #menu-name {
 810                 margin-top: 4px;
 811         }
 812
 813         .nav-menus-php .major-publishing-actions .publishing-action {
 814                 margin-top: 6px;
 815         }
 816
 817         .nav-menus-php .delete-action {
 818                 font-size: 14px;
 819                 line-height: 50px;
 820                 margin-top: 12px;
 821         }
 822
 823         .menu-item-bar .menu-item-handle,
 824         .menu-item-settings,
 825         .description-wide {
 826                 width: auto;
 827         }
 828
 829         .menu-item-settings {
 830                 padding: 10px;
 831         }
 832
 833         .menu-item-settings .description-thin,
 834         .menu-item-settings .description-wide {
 835                 width: 100%;
 836         }
 837
 838         .menu-item-settings input {
 839                 width: 100%;
 840         }
 841
 842         .menu-item-settings input[type="checkbox"],
 843         .menu-item-settings input[type="radio"] {
 844                 width: 25px;
 845         }
 846
 847         .menu-settings dl {
 848                 padding-left: 0;
 849         }
 850
 851         .menu-settings dd {
 852                 float: none;
 853                 width: 100%;
 854                 margin-bottom: 15px;
 855         }
 856
 857         .menu-settings dt {
 858                 float: none;
 859                 width: auto;
 860                 margin-left: 0;
 861                 margin-bottom: 15px;
 862         }
 863 }
 864
 865 @media only screen and (max-width: 768px) {
 866         /* menu locations */
 867         #menu-locations-wrap .widefat {
 868                 width: 100%;
 869         }
 870 }