Skip to content

Commit 3700f88

Browse files
johnbillionjohnbillion
committed
Extract the admin bar styles into a mixin.
1 parent 5ec7922 commit 3700f88

2 files changed

Lines changed: 142 additions & 152 deletions

File tree

‎src/wp-admin/css/colors/_admin-bar.scss‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;
2+
@use 'variables';
3+
4+
@mixin styles() {
5+
6+
/* Admin Bar */
7+
8+
#wpadminbar {
9+
color: variables.$menu-text;
10+
background: variables.$menu-background;
11+
}
12+
13+
#wpadminbar .ab-item,
14+
#wpadminbar a.ab-item,
15+
#wpadminbar > #wp-toolbar span.ab-label,
16+
#wpadminbar > #wp-toolbar span.noticon {
17+
color: variables.$menu-text;
18+
}
19+
20+
#wpadminbar .ab-icon,
21+
#wpadminbar .ab-icon:before,
22+
#wpadminbar .ab-item:before,
23+
#wpadminbar .ab-item:after {
24+
color: variables.$menu-icon;
25+
}
26+
27+
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
28+
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
29+
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
30+
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
31+
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
32+
color: variables.$menu-submenu-focus-text;
33+
background: variables.$menu-submenu-background;
34+
}
35+
36+
#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
37+
#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
38+
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
39+
color: variables.$menu-submenu-focus-text;
40+
}
41+
42+
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
43+
#wpadminbar:not(.mobile) li:hover .ab-item:before,
44+
#wpadminbar:not(.mobile) li:hover .ab-item:after,
45+
#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
46+
color: variables.$menu-submenu-focus-text;
47+
}
48+
49+
50+
/* Admin Bar: submenu */
51+
52+
#wpadminbar .menupop .ab-sub-wrapper {
53+
background: variables.$menu-submenu-background;
54+
}
55+
56+
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
57+
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
58+
background: variables.$menu-submenu-background-alt;
59+
}
60+
61+
#wpadminbar .ab-submenu .ab-item,
62+
#wpadminbar .quicklinks .menupop ul li a,
63+
#wpadminbar .quicklinks .menupop.hover ul li a,
64+
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
65+
color: variables.$menu-submenu-text;
66+
}
67+
68+
#wpadminbar .quicklinks li .blavatar,
69+
#wpadminbar .menupop .menupop > .ab-item:before {
70+
color: variables.$menu-icon;
71+
}
72+
73+
#wpadminbar .quicklinks .menupop ul li a:hover,
74+
#wpadminbar .quicklinks .menupop ul li a:focus,
75+
#wpadminbar .quicklinks .menupop ul li a:hover strong,
76+
#wpadminbar .quicklinks .menupop ul li a:focus strong,
77+
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
78+
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
79+
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
80+
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
81+
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
82+
#wpadminbar li:hover .ab-icon:before,
83+
#wpadminbar li:hover .ab-item:before,
84+
#wpadminbar li a:focus .ab-icon:before,
85+
#wpadminbar li .ab-item:focus:before,
86+
#wpadminbar li .ab-item:focus .ab-icon:before,
87+
#wpadminbar li.hover .ab-icon:before,
88+
#wpadminbar li.hover .ab-item:before,
89+
#wpadminbar li:hover #adminbarsearch:before,
90+
#wpadminbar li #adminbarsearch.adminbar-focused:before {
91+
color: variables.$menu-submenu-focus-text;
92+
}
93+
94+
#wpadminbar .quicklinks li a:hover .blavatar,
95+
#wpadminbar .quicklinks li a:focus .blavatar,
96+
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
97+
#wpadminbar .menupop .menupop > .ab-item:hover:before,
98+
#wpadminbar.mobile .quicklinks .ab-icon:before,
99+
#wpadminbar.mobile .quicklinks .ab-item:before {
100+
color: variables.$menu-submenu-focus-text;
101+
}
102+
103+
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
104+
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
105+
color: variables.$menu-icon;
106+
}
107+
108+
109+
/* Admin Bar: search */
110+
111+
#wpadminbar #adminbarsearch:before {
112+
color: variables.$menu-icon;
113+
}
114+
115+
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
116+
color: variables.$menu-text;
117+
background: variables.$adminbar-input-background;
118+
}
119+
120+
121+
/* Admin Bar: my account */
122+
123+
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
124+
border-color: variables.$adminbar-avatar-frame;
125+
background-color: variables.$adminbar-avatar-frame;
126+
}
127+
128+
#wpadminbar #wp-admin-bar-user-info .display-name {
129+
color: variables.$menu-text;
130+
}
131+
132+
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
133+
color: variables.$menu-submenu-focus-text;
134+
}
135+
136+
#wpadminbar #wp-admin-bar-user-info .username {
137+
color: variables.$menu-submenu-text;
138+
}
139+
140+
}

‎src/wp-admin/css/colors/_admin.scss‎

Lines changed: 2 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use 'variables';
55
@use 'mixins';
66
@use 'tokens';
7+
@use 'admin-bar' as admin-bar;
78

89
/**
910
* This function name uses British English to maintain backward compatibility, as developers
@@ -383,158 +384,7 @@ ul#adminmenu > li.current > a.current:after {
383384
color: variables.$menu-submenu-focus-text;
384385
}
385386

386-
/* Admin Bar */
387-
388-
#wpadminbar {
389-
color: variables.$menu-text;
390-
background: variables.$menu-background;
391-
}
392-
393-
#wpadminbar .ab-item,
394-
#wpadminbar a.ab-item,
395-
#wpadminbar > #wp-toolbar span.ab-label,
396-
#wpadminbar > #wp-toolbar span.noticon {
397-
color: variables.$menu-text;
398-
}
399-
400-
#wpadminbar .ab-icon,
401-
#wpadminbar .ab-icon:before,
402-
#wpadminbar .ab-item:before,
403-
#wpadminbar .ab-item:after {
404-
color: variables.$menu-icon;
405-
}
406-
407-
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
408-
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
409-
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
410-
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
411-
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
412-
color: variables.$menu-submenu-focus-text;
413-
background: variables.$menu-submenu-background;
414-
}
415-
416-
#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
417-
#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
418-
#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
419-
color: variables.$menu-submenu-focus-text;
420-
}
421-
422-
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
423-
#wpadminbar:not(.mobile) li:hover .ab-item:before,
424-
#wpadminbar:not(.mobile) li:hover .ab-item:after,
425-
#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
426-
color: variables.$menu-submenu-focus-text;
427-
}
428-
429-
430-
/* Admin Bar: submenu */
431-
432-
#wpadminbar .menupop .ab-sub-wrapper {
433-
background: variables.$menu-submenu-background;
434-
}
435-
436-
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
437-
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
438-
background: variables.$menu-submenu-background-alt;
439-
}
440-
441-
#wpadminbar .ab-submenu .ab-item,
442-
#wpadminbar .quicklinks .menupop ul li a,
443-
#wpadminbar .quicklinks .menupop.hover ul li a,
444-
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
445-
color: variables.$menu-submenu-text;
446-
}
447-
448-
#wpadminbar .quicklinks li .blavatar,
449-
#wpadminbar .menupop .menupop > .ab-item:before {
450-
color: variables.$menu-icon;
451-
}
452-
453-
#wpadminbar .quicklinks .menupop ul li a:hover,
454-
#wpadminbar .quicklinks .menupop ul li a:focus,
455-
#wpadminbar .quicklinks .menupop ul li a:hover strong,
456-
#wpadminbar .quicklinks .menupop ul li a:focus strong,
457-
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
458-
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
459-
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
460-
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
461-
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
462-
#wpadminbar li:hover .ab-icon:before,
463-
#wpadminbar li:hover .ab-item:before,
464-
#wpadminbar li a:focus .ab-icon:before,
465-
#wpadminbar li .ab-item:focus:before,
466-
#wpadminbar li .ab-item:focus .ab-icon:before,
467-
#wpadminbar li.hover .ab-icon:before,
468-
#wpadminbar li.hover .ab-item:before,
469-
#wpadminbar li:hover #adminbarsearch:before,
470-
#wpadminbar li #adminbarsearch.adminbar-focused:before {
471-
color: variables.$menu-submenu-focus-text;
472-
}
473-
474-
#wpadminbar .quicklinks li a:hover .blavatar,
475-
#wpadminbar .quicklinks li a:focus .blavatar,
476-
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
477-
#wpadminbar .menupop .menupop > .ab-item:hover:before,
478-
#wpadminbar.mobile .quicklinks .ab-icon:before,
479-
#wpadminbar.mobile .quicklinks .ab-item:before {
480-
color: variables.$menu-submenu-focus-text;
481-
}
482-
483-
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
484-
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
485-
color: variables.$menu-icon;
486-
}
487-
488-
489-
/* Admin Bar: search */
490-
491-
#wpadminbar #adminbarsearch:before {
492-
color: variables.$menu-icon;
493-
}
494-
495-
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
496-
color: variables.$menu-text;
497-
background: variables.$adminbar-input-background;
498-
}
499-
500-
/* Admin Bar: recovery mode */
501-
502-
#wpadminbar #wp-admin-bar-recovery-mode {
503-
color: variables.$adminbar-recovery-exit-text;
504-
background-color: variables.$adminbar-recovery-exit-background;
505-
}
506-
507-
#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
508-
#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
509-
color: variables.$adminbar-recovery-exit-text;
510-
}
511-
512-
#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
513-
#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
514-
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
515-
#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
516-
color: variables.$adminbar-recovery-exit-text;
517-
background-color: variables.$adminbar-recovery-exit-background-alt;
518-
}
519-
520-
/* Admin Bar: my account */
521-
522-
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
523-
border-color: variables.$adminbar-avatar-frame;
524-
background-color: variables.$adminbar-avatar-frame;
525-
}
526-
527-
#wpadminbar #wp-admin-bar-user-info .display-name {
528-
color: variables.$menu-text;
529-
}
530-
531-
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
532-
color: variables.$menu-submenu-focus-text;
533-
}
534-
535-
#wpadminbar #wp-admin-bar-user-info .username {
536-
color: variables.$menu-submenu-text;
537-
}
387+
@include admin-bar.styles();
538388

539389

540390
/* Pointers */

0 commit comments

Comments
 (0)