Skip to content

Commit

Permalink
Admin Menu: Sync styles from prototype (#18039)
Browse files Browse the repository at this point in the history
  • Loading branch information
@obenland
obenland authored Dec 11, 2020
1 parent a1ceb9f commit 7f34eec
Showing 1 changed file with 75 additions and 104 deletions.
179 changes: 75 additions & 104 deletions modules/masterbar/admin-menu/admin-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@
/**
* Jetpack logo
*/
#adminmenu [class*='activity-log'] .wp-menu-image img {
#adminmenu [class*="activity-log"] .wp-menu-image img {
padding-top: 7px;
}

/**
* Site Switcher
*/
#adminmenu a.site-switcher {
color: #a2aab2;
color: #A2AAB2;
}

#adminmenu a.site-switcher:hover {
Expand Down Expand Up @@ -67,31 +67,32 @@
background-repeat: no-repeat;
background-size: 18px 18px;
height: 32px;
transform: translateZ( 0 );
transition-property: background-image, background-color;
transition-duration: 0.2s;
transform: translateZ(0);
transition-property: background-image,background-color;
transition-duration: .2s;
width: 32px;

}
#adminmenu .toplevel_page_site-card:not( .has-site-icon ) .wp-menu-image {
#adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image {
background-color: #c3c4c7;
}

#adminmenu .toplevel_page_site-card.has-site-icon img {
#adminmenu .toplevel_page_site-card img {
opacity: initial;
}

#adminmenu .toplevel_page_site-card.has-site-icon img {
padding: 0;
}

#adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
background-color: #006fad;
background-image: url( "data:image/svg+xml,%3Csvg class='gridicon gridicons-house' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='%230a4b78' d='M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z'/%3E%3C/g%3E%3C/svg%3E%0A" );
background-image: url("data:image/svg+xml,%3Csvg class='gridicon gridicons-house' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='%230a4b78' d='M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z'/%3E%3C/g%3E%3C/svg%3E%0A");
width: 34px;
}

#adminmenu
.toplevel_page_site-card:not( .has-site-icon )
.wp-menu-image
img[src^='data:image/svg'] {
#adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image img[src^="data:image/svg"] {
height: auto;
padding-top: 7px;
width: 18px;
Expand Down Expand Up @@ -126,14 +127,14 @@
}
.site__info .site__title::after,
.site__info .site__domain::after {
content: '';
content: "";
display: block;
position: absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
background: linear-gradient( 90deg, rgba( 35, 40, 45, 0 ), rgba( 35, 40, 45, 1 ) 90% );
background: linear-gradient(90deg,rgba(35,40,45,0),rgba(35,40,45,1) 90%);
top: 0;
bottom: 0;
right: 0;
Expand All @@ -157,8 +158,7 @@
/**
* Stats
*/
[class*="toplevel_page_https://wordpress.com/stats/day"] .sidebar-unified__sparkline
{
[class*="toplevel_page_https://wordpress.com/stats/day"] .sidebar-unified__sparkline {
float: right;
margin-right: 8px;
}
Expand All @@ -174,62 +174,15 @@
padding-left: 0;
}

#wpadminbar {
background: #101517 !important;
}

#wpadminbar #wp-admin-bar-notes #wpnt-notes-unread-count.wpn-unread {
top: 50%;
left: 50%;
transform: translate( -10px, -13px );
background-color: #f283aa !important;
border-color: #101517;
}

#wpadminbar .ab-top-menu > li.my-sites > .ab-item {
background: #23282d;
}

#wpadminbar:not( .mobile ) .ab-top-menu > li:hover > .ab-item {
background: #333333;
}

#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar {
transform: translateX( 1px );
}

#wpadminbar .ab-top-menu > li.wpnt-show > .ab-item,
#wpadminbar .ab-top-menu > li.ab-hover.wpnt-show > .ab-item {
background: #23282d !important;
color: #ffffff !important;
}

#wpadminbar > #wp-toolbar .wpnt-show span.noticon,
#wpadminbar #wp-admin-bar-notes.wpnt-show .noticon {
color: #ffffff;
}

#wpadminbar #wp-admin-bar-notes.active .noticon-bell:before {
background-image: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Zz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi4xNCAxNC45N2wyLjgyOCAyLjgyN2MtLjM2Mi4zNjItLjg2Mi41ODYtMS40MTQuNTg2LTEuMTA1IDAtMi0uODk1LTItMiAwLS41NTIuMjI0LTEuMDUyLjU4Ni0xLjQxNHptOC44NjcgNS4zMjRMMTQuMyAyMSAzIDkuN2wuNzA2LS43MDcgMS4xMDIuMTU3Yy43NTQuMTA4IDEuNjktLjEyMiAyLjA3Ny0uNTFsMy44ODUtMy44ODRjMi4zNC0yLjM0IDYuMTM1LTIuMzQgOC40NzUgMHMyLjM0IDYuMTM1IDAgOC40NzVsLTMuODg1IDMuODg2Yy0uMzg4LjM4OC0uNjE4IDEuMzIzLS41MSAyLjA3N2wuMTU3IDEuMXoiLz48L2c+PC9zdmc+' ) !important;
}

#wpadminbar .quicklinks ul#wp-admin-bar-root-default {
padding-left: 0 !important;
}

#wpadminbar #wp-admin-bar-menu-toggle {
display: none;
}

/* Auto-folding of the admin menu */
@media only screen and ( max-width: 960px ) {
@media only screen and (max-width: 960px) {
#adminmenu,
#adminmenuwrap,
#adminmenuback {
width: 272px;
}

.auto-fold #adminmenu a[class*='toplevel_page_http'].wp-first-item {
.auto-fold #adminmenu a[class*="toplevel_page_http"].wp-first-item {
height: auto;
}

Expand All @@ -242,7 +195,7 @@
}
}

@media screen and ( min-width: 782px ) and ( max-width: 960px ) {
@media screen and (min-width: 782px) and (max-width: 960px) {
.auto-fold #adminmenu a.menu-top {
height: 34px;
}
Expand All @@ -253,55 +206,23 @@
}
}

@media screen and ( max-width: 782px ) {
#adminmenu li.menu-top .wp-submenu > li > a,
.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
@media screen and (max-width: 782px) {
#adminmenu li.menu-top .wp-submenu>li>a,
.auto-fold #adminmenu li.menu-top .wp-submenu>li>a {
padding-left: 42px;
}

.auto-fold #adminmenu,
.auto-fold #adminmenuback,
.auto-fold #adminmenuwrap {
.auto-fold #adminmenu, .auto-fold #adminmenuback, .auto-fold #adminmenuwrap {
width: 272px;
}

.auto-fold #adminmenu a.site-switcher,
#adminmenu a.site-switcher {
font-size: 14px;
}

#wp-toolbar > ul > li {
display: block;
}

#wpadminbar li#wp-admin-bar-menu-toggle {
display: none;
}

#wpadminbar .quicklinks > ul > li > a,
#wpadminbar .quicklinks .ab-empty-item {
height: 32px;
line-height: 32px;
}

#wpadminbar #wp-admin-bar-my-account > .ab-item {
width: auto;
}

#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
position: static;
}

#wpadminbar #wp-admin-bar-my-sites > .ab-item,
#wpadminbar #wp-admin-bar-site-name > .ab-item,
#wpadminbar #wp-admin-bar-customize > .ab-item,
#wpadminbar #wp-admin-bar-edit > .ab-item,
#wpadminbar #wp-admin-bar-my-account > .ab-item {
text-indent: 0;
}
}

@media only screen and ( max-width: 660px ) {
@media only screen and (max-width: 660px) {
#adminmenuback,
#adminmenuwrap,
#adminmenu,
Expand All @@ -313,7 +234,7 @@
}

ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after,
ul#adminmenu>li.current>a.current:after,
ul#adminmenu li:hover a.wp-has-current-submenu:after,
.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
display: none;
Expand All @@ -323,3 +244,53 @@
padding: 18px 0 18px 12px;
}
}

/*
* Styles for the nav-unification prototype (see pbAPfg-O2)
* TODO: depending on project outcome move or delete styles
*/

#wpadminbar {
background: #101517;
}

#wpadminbar #wp-admin-bar-notes #wpnt-notes-unread-count.wpn-unread {
top: 50%;
left: 50%;
transform: translate( -10px, -13px );
background-color: #f283aa !important;
border-color: #101517;
}

#wpadminbar .ab-top-menu > li.my-sites > .ab-item {
background: #23282d;
}

#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item {
background: #333333;
}

#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar {
transform: translateX( 1px );
}

#wpadminbar .ab-top-menu > li.wpnt-show > .ab-item, #wpadminbar .ab-top-menu > li.ab-hover.wpnt-show > .ab-item {
background: #23282d !important;
color: #ffffff !important;
}

#wpadminbar > #wp-toolbar .wpnt-show span.noticon, #wpadminbar #wp-admin-bar-notes.wpnt-show .noticon {
color: #ffffff;
}

#wpadminbar #wp-admin-bar-notes.active .noticon-bell:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Zz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi4xNCAxNC45N2wyLjgyOCAyLjgyN2MtLjM2Mi4zNjItLjg2Mi41ODYtMS40MTQuNTg2LTEuMTA1IDAtMi0uODk1LTItMiAwLS41NTIuMjI0LTEuMDUyLjU4Ni0xLjQxNHptOC44NjcgNS4zMjRMMTQuMyAyMSAzIDkuN2wuNzA2LS43MDcgMS4xMDIuMTU3Yy43NTQuMTA4IDEuNjktLjEyMiAyLjA3Ny0uNTFsMy44ODUtMy44ODRjMi4zNC0yLjM0IDYuMTM1LTIuMzQgOC40NzUgMHMyLjM0IDYuMTM1IDAgOC40NzVsLTMuODg1IDMuODg2Yy0uMzg4LjM4OC0uNjE4IDEuMzIzLS41MSAyLjA3N2wuMTU3IDEuMXoiLz48L2c+PC9zdmc+") !important;
}

#wpadminbar ul#wp-admin-bar-root-default {
padding-left: 0 !important;
}

#wpadminbar #wp-admin-bar-menu-toggle {
display: none;
}

0 comments on commit 7f34eec

Please sign in to comment.