wagtail/client/scss/components/_dropdown.legacy.scss

.dropdown {
  @include clearfix();
  position: relative;

  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button,
  .button {
    padding: 0 5em 0 1em;
    display: block;
    width: 100%;
    height: 3em;
    line-height: 3em;
    text-align: start;
    float: left;
  }

  .action-secondary {
    opacity: 0.8;
  }

  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  button {
    line-height: inherit;
  }

  ul {
    @include unlist();
    background-color: $color-teal;
    position: absolute;
    overflow: hidden;
    top: 100%;
    inset-inline-start: -2000px;
    z-index: 500;
    opacity: 0;

    li {
      float: none;
      border-color: theme('colors.white-15');
      border-style: solid;
      border-width: 1px 0 0;
      overflow: hidden;

      a:focus,
      button:focus {
        border: 3px solid $color-focus-outline;
      }
    }

    // Media for Windows High Contrast
    @media (forced-colors: $media-forced-colours) {
      li {
        border-width: 1px;
      }

      li:hover {
        border-color: Highlight;
      }

      li a,
      li button {
        border-color: $color-white;
        color: $color-white;
      }

      li a:focus,
      li button:focus {
        background-color: $color-black;
        forced-color-adjust: none;
        border: 4px solid currentColor;
        color: $color-white;
      }
    }

    a {
      white-space: nowrap;
      position: relative;
      text-decoration: none;
      display: block;
      color: $color-white;
      padding: 1em;
      font-weight: normal;

      &:hover {
        background-color: $color-teal-darker;
      }

      &.icon {
        padding-inline-end: 5em;

        // stylelint-disable-next-line max-nesting-depth
        &:before,
        &:after {
          inset-inline-end: 1em;
        }
      }

      &.shortcut {
        padding-inline-end: 7em;
      }
    }

    a,
    input[type='submit'],
    input[type='reset'],
    input[type='button'],
    .button,
    button {
      border-radius: 0;
      -webkit-font-smoothing: auto;
    }

    label {
      padding: 1.3em;
    }

    .kbd {
      position: absolute;
      inset-inline-end: 1em;
      font-weight: 600;
      font-size: 0.8em;
      color: theme('colors.black-20');
    }
  }

  &.open ul {
    box-shadow: 0 3px 3px 0 theme('colors.black-20');
    opacity: 1;
    inset-inline-start: 0;
    display: block;
  }

  &.match-width ul {
    width: 100%;
    min-width: 110px;

    li {
      white-space: nowrap;
    }
  }

  &.dropup ul {
    box-shadow: 0 -3px 3px 0 theme('colors.black-20');
    top: auto;
    bottom: 100%;

    li {
      border-width: 0 0 1px;
    }
  }

  .dropdown-toggle {
    color: $color-white;
    background-color: $color-teal;
    line-height: 2.8em;
    cursor: pointer;
    height: 100%;
    border-inline-start: 1px solid theme('colors.white-15');
    position: absolute;
    inset-inline-end: 0;
    padding: 0 0.5em;
    text-align: center;

    &:before,
    &:after {
      margin: 0;
    }

    &:before {
      width: 1em;
      font-size: 1.2rem;
    }

    &:hover {
      background-color: $color-teal-darker;
    }

    svg.icon {
      // TODO: remove svg qualifier once the icon font styles are gone
      @include svg-icon(1.3em);
    }
  }

  .bicolor + .dropdown-toggle {
    background-color: $color-teal-darker;

    &:hover {
      background-color: $color-teal-dark;
    }
  }

  &.open .dropdown-toggle {
    background-color: $color-teal-darker;
  }

  .bicolor:hover {
    background-color: $color-teal-dark;
  }

  // Styles for dropdowns which are also buttons e.g page editor
  &.dropdown-button {
    // Media for Windows High Contrast
    @media (forced-colors: $media-forced-colours) {
      button {
        border-color: ActiveText;
      }

      button:hover {
        border-color: Highlight;
      }

      a.button.bicolor.button:hover {
        border-color: Highlight;
      }
    }

    .dropdown-toggle {
      border-radius: 0 3px 3px 0;
      // Media for Windows High Contrast
      @media (forced-colors: $media-forced-colours) {
        background: transparent;
        border: 1px solid ActiveText;
      }
    }

    .dropdown-toggle:hover {
      // Media for Windows High Contrast
      @media (forced-colors: $media-forced-colours) {
        background-color: transparent;
        border: 1px solid Highlight;
      }
    }

    &.open {
      > input[type='button'],
      > input[type='submit'],
      > button,
      > .button {
        border-radius: 3px 3px 0 0;
      }

      .dropdown-toggle {
        border-radius: 0 3px 0 0;
      }
    }
  }

  &.dropdown-button--white {
    ul {
      background-color: $color-grey-3;
    }

    li a,
    li .button {
      background-color: $color-white;
      color: $color-button;
      border: 0;

      &:hover {
        background-color: $color-grey-4;
      }

      &.no {
        color: $color-button-no;
      }

      &.warning {
        color: $color-button-warning;
      }
    }
  }

  &.dropup.dropdown-button {
    &.open {
      > input[type='button'],
      > input[type='submit'],
      > button,
      > .button {
        border-radius: 0 0 3px 3px;
      }

      .dropdown-toggle {
        border-radius: 0 0 3px;
      }
    }
  }
}

.dropdown.white {
  ul {
    background-color: $color-white;

    li {
      border-top: 1px solid theme('colors.black-10');
    }

    a {
      color: $color-grey-2;

      &:hover {
        background-color: $color-grey-3;
      }
    }
  }
}

.dropdown.warning {
  ul {
    background-color: $color-button-warning;
  }

  .dropdown-toggle {
    background-color: $color-button-warning;
  }
}

// Transitions
// stylelint-disable-next-line no-duplicate-selectors
.dropdown ul {
  @include transition(opacity 0.2s linear);
}

.dropdown-button {
  .button svg.icon {
    // TODO: leave only class when iconfont styles are removed
    @include svg-icon();
  }
}