safe-triangle.pcss.css

[data-has-safe-triangle] {
  --safe-triangle-cursor-y: 100px;
  --safe-triangle-cursor-x: 100px;
  --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
  --safe-triangle-submenu-start-y: 5vh;
  --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
  /* TODO: Replace with calculated value of popover content height. */
  --safe-triangle-submenu-end-y: 66vh;

  &:hover {
    [data-safe-triangle] {
      display: block;
    }
  }
}

[data-safe-triangle] {
  position: fixed;
  display: none;
  content: "";
  inset: 0;
  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
}

File

core/modules/navigation/css/components/safe-triangle.pcss.css

View source 
  1. [data-has-safe-triangle] {

  2.   --safe-triangle-cursor-y: 100px;

  3.   --safe-triangle-cursor-x: 100px;

  4.   --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);

  5.   --safe-triangle-submenu-start-y: 5vh;

  6.   --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);

  7.   /* TODO: Replace with calculated value of popover content height. */

  8.   --safe-triangle-submenu-end-y: 66vh;

  9. 

  10.   &:hover {

  11.     [data-safe-triangle] {

  12.       display: block;

  13.     }

  14.   }

  15. }

  16. 

  17. [data-safe-triangle] {

  18.   position: fixed;

  19.   display: none;

  20.   content: "";

  21.   inset: 0;

  22.   clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));

  23. }