safe-triangle.pcss.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/css/components/safe-triangle.pcss.css
:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  [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

View on git.drupalcode.org

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

View source 
  1. :is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  2.   [data-has-safe-triangle] {

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

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

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

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

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

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

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

  10. 

  11.     &:hover {

  12.       [data-safe-triangle] {

  13.         display: block;

  14.       }

  15.     }

  16.   }

  17. 

  18.   [data-safe-triangle] {

  19.     position: fixed;

  20.     display: none;

  21.     content: "";

  22.     inset: 0;

  23.     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));

  24.   }

  25. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.