safe-triangle.css

Same filename and directory in other branches
  1. 10 core/modules/navigation/css/components/safe-triangle.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  [data-has-safe-triangle] {
    --safe-triangle-cursor-y: 6.25rem;
    --safe-triangle-cursor-x: 6.25rem;
    --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.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

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

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

  9.     --safe-triangle-cursor-y: 6.25rem;

  10.     --safe-triangle-cursor-x: 6.25rem;

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

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

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

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

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

  16. 

  17.     &:hover {

  18.       [data-safe-triangle] {

  19.         display: block;

  20.       }

  21.     }

  22.   }

  23. 

  24.   [data-safe-triangle] {

  25.     position: fixed;

  26.     display: none;

  27.     content: "";

  28.     inset: 0;

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

  30.   }

  31. }

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