Repository navigation
Expand file tree
/
Copy pathview-transitions.css
More file actions
76 lines (71 loc) · 3.15 KB
/
Copy pathview-transitions.css
File metadata and controls
76 lines (71 loc) · 3.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
/*
* Give each top-level menu item its own view transition name — its id,
* such as "menu-posts" — so each one is captured as an independent group
* and animates from its old position and size to its new ones across a
* navigation. This produces the accordion effect: the previously open
* section collapses as the newly current one expands, instead of the
* whole menu simply cross-fading. attr() falls back to "none" for any
* item whose id is missing or is not a valid custom identifier. The
* shared wp-menu-top class lets the image-pair rule below address every
* menu-top group at once.
*/
#adminmenu > .menu-top {
view-transition-name: attr(id type(<custom-ident>), none);
view-transition-class: wp-menu-top;
}
/*
* Name the collapse button too, so it slides into place with the menu
* items instead of cross-fading as part of the page root.
*/
#collapse-menu {
view-transition-name: collapse-menu;
}
/*
* Clip each menu-top's snapshot to its animating group box. By default a
* captured snapshot keeps its full intrinsic height, so the new (expanded)
* submenu paints at full height from the first frame and overlaps the
* items below while they are still sliding down. Clipping the image pair
* to the group — whose height animates from the link row to the full
* expanded height — makes the submenu wipe open, and closed in reverse,
* in step with those items.
*/
::view-transition-image-pair(.wp-menu-top) {
overflow: clip;
}
/*
* Capture an open flyout submenu — one shown on hover or focus — as its own
* group, so that it fades out instead of being cut off by the clip above,
* since it extends outside its menu-top box. match-element gives each
* flyout a unique name, so two open at once cannot collide and abort the
* transition. view-transition-group nests the flyout's group inside its
* menu-top's group, so it moves along with its menu item while fading out
* instead of staying behind at its old position. Since the nested group is
* a sibling of the menu-top's image pair, it is not cut off by the clip.
*
* In the expanded menu, the current item's submenu is in the normal flow,
* so it is left to the clipped menu-top. When the menu is folded, either
* explicitly or automatically on narrower screens, every submenu is a
* flyout, including the current one. Below 783px the menu is responsive and
* its submenus are in the normal flow, so none are named there.
*/
@media screen and (min-width: 783px) {
#adminmenu > .wp-not-current-submenu.opensub > .wp-submenu,
#adminmenu > .wp-not-current-submenu > a.menu-top:focus + .wp-submenu,
.folded #adminmenu > .opensub > .wp-submenu,
.folded #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu {
view-transition-name: match-element;
view-transition-group: nearest;
}
}
@media screen and (min-width: 783px) and (max-width: 960px) {
.auto-fold #adminmenu > .opensub > .wp-submenu,
.auto-fold #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu {
view-transition-name: match-element;
view-transition-group: nearest;
}
}
}