rsuite/Dropdown/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../styles/mixins/menu.less';
@import '../../styles/mixins/combobox.less';
@import 'mixin.less';
@import '../../Button/styles/index.less';

//
// Dropdown menus
// --------------------------------------------------

.rs-dropdown-toggle-caret {
  .combobox-indicator-icon();
}

// The dropdown wrapper (div)
.rs-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle; // Make sure dropdown vertical alignment with button,button group and so on.

  &-disabled &-toggle.rs-btn {
    cursor: @cursor-disabled !important;
    box-shadow: none;

    &.rs-btn-subtle {
      &,
      &:focus,
      &:active {
        color: var(--rs-btn-subtle-disabled-text);
        background: none;
      }
    }

    &.rs-btn-primary {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
        background-color: var(--rs-btn-primary-bg);
      }
    }

    &.rs-btn-link {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
        text-decoration: none;
      }
    }

    &.rs-btn-ghost {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
      }
    }

    .rs-ripple-pond {
      display: none !important;
    }
  }
}

.rs-dropdown-toggle {
  .dropdown-toggle-size();

  &,
  &.rs-btn {
    // Force set style even if has `.btn`.
    .dropdown-toggle();
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  &.rs-dropdown-toggle-no-caret {
    padding-right: @padding-x;
  }
}

// The dropdown menu (ul)
.rs-dropdown-menu {
  margin: 0; // override default ul
  list-style: none;
  font-size: @font-size-base;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  background-color: var(--rs-bg-overlay);
  border-radius: @dropdown-menu-radius;
  padding: @dropdown-menu-padding-y 0;
  outline: 0;

  &:focus-visible {
    .focus-ring();
  }

  .rs-dropdown & {
    position: absolute;
    // dropdown-menu zindex value is greater than dropdown-toggle
    z-index: @zindex-dropdown + 1;
    float: left;
    box-shadow: var(--rs-dropdown-shadow);
    outline: none;

    .high-contrast-mode({
      border: 1px solid var(--rs-border-primary);
    });
  }

  &[hidden] {
    display: none;
  }
}

// Links within the dropdown menu
.rs-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  padding: @dropdown-item-padding-y @dropdown-item-padding-x;
  clear: both;
  font-weight: normal;
  line-height: @line-height-base;
  color: var(--rs-text-primary);
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  cursor: pointer; //fixed link has not [href] style
  .reset-link-text-decoration(none);

  &-content {
    flex: 1;
  }

  .rs-dropdown-item-shortcut {
    margin-inline-start: 20px;
    border: none;
  }

  > .rs-icon {
    width: @font-size-base;
    text-align: center;
  }

  &&-active {
    outline: 0;
    font-weight: bold;

    &,
    &:hover,
    &:focus {
      color: var(--rs-dropdown-item-text-active);
      background-color: var(--rs-dropdown-item-bg-active);

      .rs-text {
        color: var(--rs-dropdown-item-text-active);
      }
    }
  }

  // Hover/Focus state
  &:focus-visible,
  &&-focus {
    .menuitem-active();
  }
  &:focus {
    outline: 0;
  }

  // Disabled state
  //
  // Gray out text and ensure the hover/focus state remains gray
  &-disabled {
    color: var(--rs-text-disabled);
    cursor: @cursor-disabled;

    .rs-text {
      color: var(--rs-text-disabled);
    }

    // Nuke hover/focus effects
    &:hover,
    &:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
    }
  }
}

.rs-dropdown-item-divider {
  .nav-divider(var(--rs-dropdown-divider));
}

// The dropdown submenu
.rs-dropdown-item-submenu {
  position: relative;

  &:hover > .rs-dropdown-item-toggle {
    .menuitem-active();
  }

  &.rs-dropdown-item {
    position: relative;

    > .rs-dropdown-item-toggle {
      .rs-dropdown-menu-toggle-icon {
        position: absolute;
        top: 11px;
        margin: 0;
      }
    }

    > .rs-dropdown-menu {
      position: absolute;
      top: -@dropdown-menu-padding-y;
    }
  }

  // Set submenu icon
  .rs-dropdown-item& {
    padding: 0;

    .rs-dropdown-item-toggle {
      padding: @dropdown-item-padding-y @dropdown-item-padding-x;
      padding-right: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing+
        @dropdown-item-submenu-icon-angle-width;
    }

    .rs-dropdown-menu-toggle-icon {
      right: @dropdown-caret-icon-padding-horizontal;
    }
  }

  .rs-dropdown-menu {
    left: 100%;

    &[data-direction='start'] {
      left: unset;
      right: 100%;
    }
  }

  // Open
  &.rs-dropdown-item-open > .rs-dropdown-menu {
    //use display table to fix-content
    display: table;
    animation-name: slideUpIn;
    animation-play-state: running;
  }
}

// Active state
.rs-dropdown-menu > .rs-dropdown-menu-item-focus {
  outline: 0;
  background-color: var(--rs-dropdown-item-bg-active);

  &:hover,
  &:focus {
    .menuitem-active();
  }
}

// Open state for the dropdown
.rs-dropdown-open {
  > .rs-dropdown-menu {
    animation-play-state: running;
  }

  // Show the menu
  &.rs-dropdown-placement-top-start,
  &.rs-dropdown-placement-top-end {
    > .rs-dropdown-menu {
      bottom: 100%;
    }
  }

  &.rs-dropdown-placement-left-start,
  &.rs-dropdown-placement-left-end {
    > .rs-dropdown-menu {
      right: 100%;
    }
  }

  &.rs-dropdown-placement-right-start,
  &.rs-dropdown-placement-right-end {
    > .rs-dropdown-menu {
      left: 100%;
    }
  }

  &.rs-dropdown-placement-bottom-start,
  &.rs-dropdown-placement-bottom-end {
    > .rs-dropdown-menu {
      top: 100%;
    }
  }

  &.rs-dropdown-placement-top-start,
  &.rs-dropdown-placement-bottom-start {
    > .rs-dropdown-menu {
      left: 0;
    }
  }

  &.rs-dropdown-placement-top-end,
  &.rs-dropdown-placement-bottom-end {
    > .rs-dropdown-menu {
      right: 0;
    }
  }

  &.rs-dropdown-placement-left-start,
  &.rs-dropdown-placement-right-start {
    > .rs-dropdown-menu {
      top: 0;
    }
  }

  &.rs-dropdown-placement-right-end,
  &.rs-dropdown-placement-left-end {
    > .rs-dropdown-menu {
      bottom: 0;
    }
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
}

// Dropdown section headers
.rs-dropdown-header {
  display: block;
  padding: @dropdown-item-padding-y @dropdown-item-padding-x;
  line-height: @line-height-base;
  color: var(--rs-dropdown-header-text);
  border-bottom: 1px solid @dropdown-divider-bg;
  white-space: nowrap; // as with > li > a
}

// Opacity not working in Safari,so remove .
@keyframes slideUpIn {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }

  100% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}