[Summary view] [Print] [Text view]

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