_patterns_contextual-menu.scss

@import 'settings';

@mixin vf-p-contextual-menu {
  %p-contextual-menu {
    display: inline-block;
    margin: 0;
    position: relative;
  }

  .p-contextual-menu {
    @extend %p-contextual-menu;
  }

  // Dropdown element for contextual menu
  .p-contextual-menu__dropdown {
    @extend %vf-has-box-shadow;

    background: $colors--theme--background-default;
    display: none;
    margin: 0;
    max-width: 21rem;
    min-width: 10rem;
    padding: 0;
    position: absolute;
    right: 0;
    width: fit-content;
    z-index: 9; // to appear below main navigation dropdowns (that use z-index: 10)

    // When set to false will show the contextual menu
    &[aria-hidden='false'] {
      display: block;
    }
  }

  // Alignment extension to align the menu to the left
  .p-contextual-menu--left {
    @extend %p-contextual-menu;

    .p-contextual-menu__dropdown {
      left: 0;
    }
  }

  // Alignment extension to align the menu to the center of the parent
  .p-contextual-menu--center {
    @extend %p-contextual-menu;

    .p-contextual-menu__dropdown {
      left: 50%;
      // stylelint-disable property-no-vendor-prefix
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      // stylelint-enable property-no-vendor-prefix
    }
  }

  .p-contextual-menu__group {
    display: block;

    + .p-contextual-menu__group {
      border-top-color: $colors--theme--border-default;
      border-top-style: solid;
      border-top-width: $input-border-thickness;
      margin: -$input-border-thickness 0 0 0;
    }
  }

  .p-contextual-menu__link {
    @include vf-focus-themed;

    border: 0;
    clear: both;
    display: block;
    margin: 0;
    overflow: hidden;
    padding: $spv--x-small $sph--large;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    &,
    &:active,
    &:hover,
    &:visited {
      background-color: transparent;
      color: $colors--theme--text-default;
    }

    &:hover {
      background-color: $colors--theme--background-hover;
      text-decoration: none;
    }

    &:active {
      background-color: $colors--theme--background-active;
      cursor: default;
    }
  }

  .p-contextual-menu__toggle {
    // All buttons have a margin right, unless they are a last child.
    // In cases where contextual menu toggle is a button, we do not want it to
    // have a margin, but since it is never the last child in this pattern,
    // so we need to remove the margin.
    // https://github.com/canonical/vanilla-framework/pull/3584
    margin-right: 0;

    &[aria-expanded='true'] .p-contextual-menu__indicator {
      transform: rotate(180deg);
    }
  }
}