wp/wp-admin/css/nav-menus.css
changeset 18 be944660c56a
parent 16 a86126ab1dd4
child 19 3d72ae0968f4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
    64 #wpbody {
    64 #wpbody {
    65 	position: relative;
    65 	position: relative;
    66 }
    66 }
    67 
    67 
    68 .is-submenu {
    68 .is-submenu {
    69 	color: #555d66; /* #fafafa background */
    69 	color: #50575e; /* #fafafa background */
    70 	font-style: italic;
    70 	font-style: italic;
    71 	font-weight: 400;
    71 	font-weight: 400;
    72 	margin-left: 4px;
    72 	margin-left: 4px;
    73 }
    73 }
    74 
    74 
    75 .manage-menus {
    75 .manage-menus {
    76 	margin-top: 23px;
    76 	margin-top: 23px;
    77 	padding: 10px;
    77 	padding: 10px;
    78 	overflow: hidden;
    78 	overflow: hidden;
    79 	background: #fbfbfb;
    79 	background: #fff;
    80 }
    80 }
    81 
    81 
    82 .manage-menus .selected-menu,
    82 .manage-menus .selected-menu,
    83 .manage-menus select,
    83 .manage-menus select,
    84 .manage-menus .submit-btn,
    84 .manage-menus .submit-btn,
    95 
    95 
    96 .menu-edit #post-body-content h3 {
    96 .menu-edit #post-body-content h3 {
    97 	margin: 1em 0 10px;
    97 	margin: 1em 0 10px;
    98 }
    98 }
    99 
    99 
       
   100 #nav-menu-bulk-actions-top {
       
   101 	margin: 1em 0;
       
   102 }
       
   103 
       
   104 #nav-menu-bulk-actions-bottom {
       
   105 	margin: 1em 0;
       
   106 	margin: calc( 1em + 9px ) 0 ; 
       
   107 }
       
   108 
       
   109 .bulk-actions input.button {
       
   110 	margin-right: 12px;
       
   111 }
       
   112 
       
   113 .bulk-select-button {
       
   114 	position: relative;
       
   115 	display: inline-block;
       
   116 	padding: 0 10px;
       
   117 	font-size: 13px;
       
   118 	line-height: 2.15384615;
       
   119 	height: auto;
       
   120 	min-height: 30px;
       
   121 	background: #f6f7f7;
       
   122 	vertical-align: top;
       
   123 	border: 1px solid #dcdcde;
       
   124 	margin: 0;
       
   125 	cursor: pointer;
       
   126 	border-radius: 3px;
       
   127 	white-space: nowrap;
       
   128 	box-sizing: border-box;
       
   129 }
       
   130 
       
   131 .bulk-selection .bulk-select-button {
       
   132 	color: #2271b1;
       
   133 	border-color: #2271b1;
       
   134 	background: #f6f7f7;
       
   135 	vertical-align: top;
       
   136 }
       
   137 
       
   138 #pending-menu-items-to-delete {
       
   139 	display: none;
       
   140 }
       
   141 
       
   142 .bulk-selection #pending-menu-items-to-delete {
       
   143 	display: block;
       
   144 	margin-top: 1em;
       
   145 }
       
   146 
       
   147 #pending-menu-items-to-delete p {
       
   148 	margin-bottom: 0;
       
   149 }
       
   150 
       
   151 #pending-menu-items-to-delete ul {
       
   152 	margin-top: 0;
       
   153 	list-style: none;
       
   154 }
       
   155 
       
   156 #pending-menu-items-to-delete ul li {
       
   157 	display: inline;
       
   158 }
       
   159 
       
   160 input.bulk-select-switcher + .bulk-select-button-label {
       
   161 	vertical-align: inherit;
       
   162 }
       
   163 
       
   164 label.bulk-select-button:hover,
       
   165 label.bulk-select-button:active,
       
   166 label.bulk-select-button:focus-within {
       
   167 	background: #f0f0f1;
       
   168 	border-color: #0a4b78;
       
   169 	color: #0a4b78;
       
   170 }
       
   171 
       
   172 input.bulk-select-switcher:focus + .bulk-select-button-label{
       
   173 	color: #0a4b78;
       
   174 }
       
   175 
       
   176 .bulk-actions input.menu-items-delete {
       
   177 	-webkit-appearance: none;
       
   178 	appearance: none;
       
   179 	font-size: inherit;
       
   180 	border: 0;
       
   181 	line-height: 2.1em;
       
   182 	background: none;
       
   183 	cursor: pointer;
       
   184 	text-decoration: underline;
       
   185 	color: #b32d2e;
       
   186 }
       
   187 
       
   188 .bulk-actions input.menu-items-delete:hover {
       
   189 	color: #b32d2e;
       
   190 	border: none;
       
   191 }
       
   192 
       
   193 .bulk-actions input.menu-items-delete.disabled {
       
   194 	cursor: default;
       
   195 	color: #a7aaad;
       
   196 	box-shadow: none;
       
   197 }
       
   198 
   100 .menu-settings {
   199 .menu-settings {
   101 	border-top: 1px solid #eee;
   200 	border-top: 1px solid #f0f0f1;
   102 	margin-top: 2em;
   201 	margin-top: 2em;
   103 }
   202 }
   104 
   203 
   105 .menu-settings-group {
   204 .menu-settings-group {
   106 	margin: 0 0 10px;
   205 	margin: 0 0 10px;
   133 .menu-edit .checkbox-input {
   232 .menu-edit .checkbox-input {
   134 	margin-top: 4px;
   233 	margin-top: 4px;
   135 }
   234 }
   136 
   235 
   137 .theme-location-set {
   236 .theme-location-set {
   138 	color: #72777c;
   237 	color: #646970;
   139 	font-size: 11px;
   238 	font-size: 11px;
   140 }
   239 }
   141 
   240 
   142 /* Menu Container */
   241 /* Menu Container */
   143 
   242 
   161 }
   260 }
   162 
   261 
   163 .nav-menus-php #post-body {
   262 .nav-menus-php #post-body {
   164 	padding: 0 10px;
   263 	padding: 0 10px;
   165 	border-top: 1px solid #fff;
   264 	border-top: 1px solid #fff;
   166 	border-bottom: 1px solid #ddd;
   265 	border-bottom: 1px solid #dcdcde;
   167 	background: #fff;
   266 	background: #fff;
   168 }
   267 }
   169 
   268 
   170 #nav-menu-header,
   269 #nav-menu-header,
   171 #nav-menu-footer {
   270 #nav-menu-footer {
   172 	padding: 0 10px;
   271 	padding: 0 10px;
   173 	background: #f5f5f5;
   272 	background: #f6f7f7;
   174 }
   273 }
   175 
   274 
   176 #nav-menu-header {
   275 #nav-menu-header {
   177 	border-bottom: 1px solid #ddd;
   276 	border-bottom: 1px solid #dcdcde;
   178 	margin-bottom: 0;
   277 	margin-bottom: 0;
   179 }
   278 }
   180 
   279 
   181 #nav-menu-header .menu-name-label {
   280 #nav-menu-header .menu-name-label {
   182 	display: inline-block;
   281 	display: inline-block;
   249 	margin: 0 3px;
   348 	margin: 0 3px;
   250 }
   349 }
   251 
   350 
   252 .locations-edit-menu-link {
   351 .locations-edit-menu-link {
   253 	padding-right: 3px;
   352 	padding-right: 3px;
   254 	border-right: 1px solid #ccc;
   353 	border-right: 1px solid #c3c4c7;
   255 }
   354 }
   256 
   355 
   257 #menu-management .inside {
   356 #menu-management .inside {
   258 	padding: 0 10px;
   357 	padding: 0 10px;
   259 }
   358 }
   384 }
   483 }
   385 
   484 
   386 /* Listings */
   485 /* Listings */
   387 .nav-menus-php .list li {
   486 .nav-menus-php .list li {
   388 	display: none;
   487 	display: none;
   389 	margin: 0;
   488 	margin: 0 0 5px;
   390 	margin-bottom: 5px;
       
   391 }
   489 }
   392 
   490 
   393 .nav-menus-php .list li .menu-item-title {
   491 .nav-menus-php .list li .menu-item-title {
   394 	cursor: pointer;
   492 	cursor: pointer;
   395 	display: block;
   493 	display: block;
   438 	position: relative;
   536 	position: relative;
   439 	margin: 9px 0 0;
   537 	margin: 9px 0 0;
   440 }
   538 }
   441 
   539 
   442 .menu-item-bar .menu-item-handle {
   540 .menu-item-bar .menu-item-handle {
   443 	border: 1px solid #ddd;
   541 	border: 1px solid #dcdcde;
   444 	position: relative;
   542 	position: relative;
   445 	padding: 10px 15px;
   543 	padding: 10px 15px;
   446 	height: auto;
   544 	height: auto;
   447 	min-height: 20px;
   545 	min-height: 20px;
   448 	width: 382px;
   546 	max-width: 382px;
   449 	line-height: 2.30769230;
   547 	line-height: 2.30769230;
   450 	overflow: hidden;
   548 	overflow: hidden;
   451 	word-wrap: break-word;
   549 	word-wrap: break-word;
   452 }
   550 }
   453 
   551 
   454 .menu-item-bar .menu-item-handle:hover {
   552 .menu-item-bar .menu-item-handle:hover {
   455 	border-color: #999;
   553 	border-color: #8c8f94;
   456 }
   554 }
   457 
   555 
   458 #menu-to-edit .menu-item-invalid .menu-item-handle {
   556 #menu-to-edit .menu-item-invalid .menu-item-handle {
   459 	background: #f6c9cc;
   557 	background: #fcf0f1;
   460 	border-color: #f1acb1;
   558 	border-color: #d63638;
   461 }
   559 }
   462 
   560 
   463 .no-js .menu-item-edit-active .item-edit {
   561 .no-js .menu-item-edit-active .item-edit {
   464 	display: none;
   562 	display: none;
   465 }
   563 }
   468 	cursor: move;
   566 	cursor: move;
   469 }
   567 }
   470 
   568 
   471 .menu li.deleting .menu-item-handle {
   569 .menu li.deleting .menu-item-handle {
   472 	background-image: none;
   570 	background-image: none;
   473 	background-color: #f66;
   571 	background-color: #f86368;
   474 }
   572 }
   475 
   573 
   476 .menu-item-handle .item-title {
   574 .menu-item-handle .item-title {
   477 	font-size: 13px;
   575 	font-size: 13px;
   478 	font-weight: 600;
   576 	font-weight: 600;
   480 	display: block;
   578 	display: block;
   481 	/* @todo: responsive view. */
   579 	/* @todo: responsive view. */
   482 	margin-right: 13em;
   580 	margin-right: 13em;
   483 }
   581 }
   484 
   582 
       
   583 .menu-item-handle .menu-item-checkbox {
       
   584 	display: none;
       
   585 }
       
   586 
       
   587 .bulk-selection .menu-item-handle .menu-item-checkbox {
       
   588 	display: inline-block;
       
   589 	margin-right: 6px;
       
   590 }
       
   591 
   485 .menu-item-handle .menu-item-title.no-title {
   592 .menu-item-handle .menu-item-title.no-title {
   486 	color: #72777c;
   593 	color: #646970;
   487 }
   594 }
   488 
   595 
   489 /* Sortables */
   596 /* Sortables */
   490 li.menu-item.ui-sortable-helper .menu-item-bar {
   597 li.menu-item.ui-sortable-helper .menu-item-bar {
   491 	margin-top: 0;
   598 	margin-top: 0;
   548 
   655 
   549 /* Menu item controls */
   656 /* Menu item controls */
   550 .item-type {
   657 .item-type {
   551 	display: inline-block;
   658 	display: inline-block;
   552 	padding: 12px 16px;
   659 	padding: 12px 16px;
   553 	color: #666;
   660 	color: #646970;
   554 	font-size: 12px;
   661 	font-size: 12px;
   555 	line-height: 1.5;
   662 	line-height: 1.5;
   556 }
   663 }
   557 
   664 
   558 .item-controls {
   665 .item-controls {
   589 	float: right;
   696 	float: right;
   590 	width: auto;
   697 	width: auto;
   591 	height: auto;
   698 	height: auto;
   592 	margin: 12px -10px 12px 0;
   699 	margin: 12px -10px 12px 0;
   593 	padding: 0;
   700 	padding: 0;
   594 	color: #0073aa;
   701 	color: #2271b1;
   595 	text-decoration: underline;
   702 	text-decoration: underline;
   596 	font-size: 12px;
   703 	font-size: 12px;
   597 	line-height: 1.5;
   704 	line-height: 1.5;
   598 }
   705 }
   599 
   706 
   626 	box-shadow: none;
   733 	box-shadow: none;
   627 }
   734 }
   628 
   735 
   629 .nav-menus-php .item-edit:focus:before {
   736 .nav-menus-php .item-edit:focus:before {
   630 	box-shadow:
   737 	box-shadow:
   631 		0 0 0 1px #5b9dd9,
   738 		0 0 0 1px #4f94d4,
   632 		0 0 2px 1px rgba(30, 140, 190, 0.8);
   739 		0 0 2px 1px rgba(79, 148, 212, 0.8);
   633 }
   740 }
   634 
   741 
   635 /* Menu editing */
   742 /* Menu editing */
   636 .menu-instructions-inactive {
   743 .menu-instructions-inactive {
   637 	display: none;
   744 	display: none;
   638 }
   745 }
   639 
   746 
   640 .menu-item-settings {
   747 .menu-item-settings {
   641 	display: block;
   748 	display: block;
   642 	width: 402px;
   749 	max-width: 392px;
   643 	padding: 10px 0 10px 10px;
   750 	padding: 10px;
   644 	position: relative;
   751 	position: relative;
   645 	z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
   752 	z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
   646 	border: 1px solid #ccd0d4;
   753 	border: 1px solid #c3c4c7;
   647 	border-top: none;
   754 	border-top: none;
   648 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
   755 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
   649 }
   756 }
   650 
   757 
   651 .menu-item-settings .field-move {
   758 .menu-item-settings .field-move {
   687 
   794 
   688 .link-to-original {
   795 .link-to-original {
   689 	display: block;
   796 	display: block;
   690 	margin: 0 0 15px;
   797 	margin: 0 0 15px;
   691 	padding: 3px 5px 5px;
   798 	padding: 3px 5px 5px;
   692 	border: 1px solid #ddd;
   799 	border: 1px solid #dcdcde;
   693 	color: #72777c;
   800 	color: #646970;
   694 	font-size: 12px;
   801 	font-size: 12px;
   695 }
   802 }
   696 
   803 
   697 .link-to-original a {
   804 .link-to-original a {
   698 	padding-left: 4px;
   805 	padding-left: 4px;
   708 	margin-right: 10px;
   815 	margin-right: 10px;
   709 	float: left;
   816 	float: left;
   710 }
   817 }
   711 
   818 
   712 .description-thin {
   819 .description-thin {
   713 	width: 190px;
   820 	width: calc(50% - 5px);
       
   821 }
       
   822 
       
   823 .menu-item-settings .description-thin + .description-thin {
       
   824 	margin-right: 0;
   714 }
   825 }
   715 
   826 
   716 .description-wide {
   827 .description-wide {
   717 	width: 390px;
   828 	width: 100%;
   718 }
   829 }
   719 
   830 
   720 .menu-item-actions {
   831 .menu-item-actions {
   721 	padding-top: 15px;
   832 	padding-top: 15px;
   722 	padding-bottom: 7px;
   833 	padding-bottom: 7px;
   757 }
   868 }
   758 
   869 
   759 /* =Media Queries
   870 /* =Media Queries
   760 -------------------------------------------------------------- */
   871 -------------------------------------------------------------- */
   761 
   872 
   762 @media only screen and (min-width: 769px) and (max-width: 1000px){
   873 @media only screen and (min-width: 769px) and (max-width: 1000px) {
   763 	body.menu-max-depth-0 {
   874 	body.menu-max-depth-0 {
   764 		min-width: 0 !important;
   875 		min-width: 0 !important;
   765 	}
   876 	}
   766 
   877 
   767 	#menu-management-liquid{
   878 	#menu-management-liquid {
   768 		width: 100%;
   879 		width: 100%;
   769 	}
   880 	}
   770 
   881 
   771 	.nav-menus-php #post-body-content{
   882 	.nav-menus-php #post-body-content {
   772 		min-width: 0;
   883 		min-width: 0;
   773 	}
       
   774 
       
   775 	.menu-item-bar .menu-item-handle{
       
   776 		width: 90%;
       
   777 	}
   884 	}
   778 }
   885 }
   779 
   886 
   780 @media screen and (max-width: 782px) {
   887 @media screen and (max-width: 782px) {
   781 	body.nav-menus-php,
   888 	body.nav-menus-php,
   857 		width: 25px;
   964 		width: 25px;
   858 	}
   965 	}
   859 
   966 
   860 	.menu-settings-group {
   967 	.menu-settings-group {
   861 		padding-left: 0;
   968 		padding-left: 0;
       
   969 		overflow: visible;
   862 	}
   970 	}
   863 
   971 
   864 	.menu-settings-group-name {
   972 	.menu-settings-group-name {
   865 		float: none;
   973 		float: none;
   866 		width: auto;
   974 		width: auto;
   879 
   987 
   880 	.manage-menus select {
   988 	.manage-menus select {
   881 		margin: 0.5em 0;
   989 		margin: 0.5em 0;
   882 	}
   990 	}
   883 
   991 
       
   992 	.wp-core-ui .manage-menus .button {
       
   993 		margin-bottom: 0;
       
   994 	}
       
   995 
   884 	.widefat .menu-locations .menu-location-title {
   996 	.widefat .menu-locations .menu-location-title {
   885 		padding-top: 16px;
   997 		padding-top: 16px;
   886 	}
   998 	}
       
   999 }
       
  1000 
       
  1001 @media only screen and (min-width: 783px) {
       
  1002     @supports (position: sticky) and (scroll-margin-bottom: 130px) {
       
  1003 		
       
  1004 		#nav-menu-footer {
       
  1005                 position: sticky;
       
  1006 				bottom: 0;
       
  1007 				z-index: 10;
       
  1008 				box-shadow: 0 -1px 0 0px #ddd;
       
  1009         }
       
  1010 
       
  1011         #save_menu_header {
       
  1012                 display: none;
       
  1013         }
       
  1014     }
   887 }
  1015 }
   888 
  1016 
   889 @media only screen and (max-width: 768px) {
  1017 @media only screen and (max-width: 768px) {
   890 	/* menu locations */
  1018 	/* menu locations */
   891 	#menu-locations-wrap .widefat {
  1019 	#menu-locations-wrap .widefat {