drip-table/es/components/react-components/dropdown/index.less

A tiny and powerful enterprise-class solution for building tables.

/**
 * This file is part of the drip-table project.
 * @link     : https://drip-table.jd.com/
 * @author   : Emil Zhai (root@derzh.com)
 * @modifier : Emil Zhai (root@derzh.com)
 * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
 */

@import url("../../../styles/theme/default.less");

@prefixCls: jfe-drip-table-rc-dropdown;

.@{prefixCls}-menu-item.@{prefixCls}-menu-item-danger {
  color: #ff4d4f;
}

.@{prefixCls}-menu-item.@{prefixCls}-menu-item-danger:hover {
  color: #ffffff;
  background-color: #ff4d4f;
}

.@{prefixCls} {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @drip-table-text-color;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 1050;
  display: block;
}

.@{prefixCls}:before {
  position: absolute;
  top: -4px;
  right: 0;
  bottom: -4px;
  left: -7px;
  z-index: -9999;
  opacity: .0001;
  content: " ";
}

.@{prefixCls}-wrap {
  position: relative;
}

.@{prefixCls}-hidden,
.@{prefixCls}-menu-hidden,
.@{prefixCls}-menu-submenu-hidden {
  display: none;
}

.@{prefixCls}-show-arrow.@{prefixCls}-placement-topLeft,
.@{prefixCls}-show-arrow.@{prefixCls}-placement-top,
.@{prefixCls}-show-arrow.@{prefixCls}-placement-topRight {
  padding-bottom: 15.3137px;
}

.@{prefixCls}-show-arrow.@{prefixCls}-placement-bottomLeft,
.@{prefixCls}-show-arrow.@{prefixCls}-placement-bottom,
.@{prefixCls}-show-arrow.@{prefixCls}-placement-bottomRight {
  padding-top: 15.3137px;
}

.@{prefixCls}-arrow {
  position: absolute;
  z-index: 1;
  display: block;
  width: 11.3137px;
  height: 11.3137px;
  border-radius: 0 0 2px;
  pointer-events: none;
}

.@{prefixCls}-arrow:before {
  position: absolute;
  top: -11.3137px;
  left: -11.3137px;
  width: 33.9411px;
  height: 33.9411px;
  background: #ffffff;
  background-repeat: no-repeat;
  background-position: -10px -10px;
  content: "";
  clip-path: inset(33% 33%);
}

.@{prefixCls}-placement-top>.@{prefixCls}-arrow,
.@{prefixCls}-placement-topLeft>.@{prefixCls}-arrow,
.@{prefixCls}-placement-topRight>.@{prefixCls}-arrow {
  bottom: 10px;
  box-shadow: 3px 3px 7px -3px #0000001a;
  transform: rotate(45deg);
}

.@{prefixCls}-placement-top>.@{prefixCls}-arrow {
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}

.@{prefixCls}-placement-topLeft>.@{prefixCls}-arrow {
  left: 16px;
}

.@{prefixCls}-placement-topRight>.@{prefixCls}-arrow {
  right: 16px;
}

.@{prefixCls}-placement-bottom>.@{prefixCls}-arrow,
.@{prefixCls}-placement-bottomLeft>.@{prefixCls}-arrow,
.@{prefixCls}-placement-bottomRight>.@{prefixCls}-arrow {
  top: 9.4142px;
  box-shadow: 2px 2px 5px -2px #0000001a;
  transform: rotate(-135deg) translateY(-.5px);
}

.@{prefixCls}-placement-bottom>.@{prefixCls}-arrow {
  left: 50%;
  transform: translate(-50%) rotate(-135deg) translateY(-.5px);
}

.@{prefixCls}-placement-bottomLeft>.@{prefixCls}-arrow {
  left: 16px;
}

.@{prefixCls}-placement-bottomRight>.@{prefixCls}-arrow {
  right: 16px;
}

.@{prefixCls}-menu {
  position: relative;
  margin: 0;
  padding: 4px 0;
  text-align: left;
  list-style-type: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 2px;
  outline: none;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
}

.@{prefixCls}-menu-item-group-title {
  padding: 5px 12px;
  color: #00000073;
  transition: all .3s;
}

.@{prefixCls}-menu-submenu-popup {
  position: absolute;
  z-index: 1050;
  background: transparent;
  box-shadow: none;
  transform-origin: 0 0;
}

.@{prefixCls}-menu-submenu-popup ul,
.@{prefixCls}-menu-submenu-popup li {
  list-style: none;
}

.@{prefixCls}-menu-submenu-popup ul {
  margin-right: .3em;
  margin-left: .3em;
}

.@{prefixCls}-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.@{prefixCls}-menu-item-icon {
  min-width: 12px;
  margin-right: 8px;
  font-size: 12px;
}

.@{prefixCls}-menu-title-content {
  flex: auto;
}

.@{prefixCls}-menu-title-content>a {
  color: inherit;
  transition: all .3s;
}

.@{prefixCls}-menu-title-content>a:hover {
  color: inherit;
}

.@{prefixCls}-menu-title-content>a:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.@{prefixCls}-menu-item,
.@{prefixCls}-menu-submenu-title {
  clear: both;
  margin: 0;
  padding: 5px 12px;
  color: @drip-table-text-color;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  transition: all .3s;
}

.@{prefixCls}-menu-item-selected,
.@{prefixCls}-menu-submenu-title-selected {
  color: @drip-table-primary-color;
  background-color: #e6f7ff;
}

.@{prefixCls}-menu-item:hover,
.@{prefixCls}-menu-submenu-title:hover,
.@{prefixCls}-menu-item.@{prefixCls}-menu-item-active,
.@{prefixCls}-menu-item.@{prefixCls}-menu-submenu-title-active,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-item-active,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-submenu-title-active {
  background-color: #f5f5f5;
}

.@{prefixCls}-menu-item.@{prefixCls}-menu-item-disabled,
.@{prefixCls}-menu-item.@{prefixCls}-menu-submenu-title-disabled,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-item-disabled,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-submenu-title-disabled {
  color: #00000040;
  cursor: not-allowed;
}

.@{prefixCls}-menu-item.@{prefixCls}-menu-item-disabled:hover,
.@{prefixCls}-menu-item.@{prefixCls}-menu-submenu-title-disabled:hover,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-item-disabled:hover,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-submenu-title-disabled:hover {
  color: #00000040;
  background-color: #ffffff;
  cursor: not-allowed;
}

.@{prefixCls}-menu-item.@{prefixCls}-menu-item-disabled a,
.@{prefixCls}-menu-item.@{prefixCls}-menu-submenu-title-disabled a,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-item-disabled a,
.@{prefixCls}-menu-submenu-title.@{prefixCls}-menu-submenu-title-disabled a {
  pointer-events: none;
}

.@{prefixCls}-menu-item-divider,
.@{prefixCls}-menu-submenu-title-divider {
  height: 1px;
  margin: 4px 0;
  overflow: hidden;
  line-height: 0;
  background-color: #f0f0f0;
}

.@{prefixCls}-menu-item .@{prefixCls}-menu-submenu-expand-icon,
.@{prefixCls}-menu-submenu-title .@{prefixCls}-menu-submenu-expand-icon {
  position: absolute;
  right: 8px;
}

.@{prefixCls}-menu-item .@{prefixCls}-menu-submenu-expand-icon .@{prefixCls}-menu-submenu-arrow-icon,
.@{prefixCls}-menu-submenu-title .@{prefixCls}-menu-submenu-expand-icon .@{prefixCls}-menu-submenu-arrow-icon {
  margin-right: 0 !important;
  color: #00000073;
  font-size: 10px;
  font-style: normal;
}

.@{prefixCls}-menu-item-group-list {
  margin: 0 8px;
  padding: 0;
  list-style: none;
}

.@{prefixCls}-menu-submenu-title {
  padding-right: 24px;
}

.@{prefixCls}-menu-submenu-vertical {
  position: relative;
}

.@{prefixCls}-menu-submenu-vertical>.@{prefixCls}-menu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 100%;
  margin-left: 4px;
  transform-origin: 0 0;
}

.@{prefixCls}-menu-submenu.@{prefixCls}-menu-submenu-disabled .@{prefixCls}-menu-submenu-title,
.@{prefixCls}-menu-submenu.@{prefixCls}-menu-submenu-disabled .@{prefixCls}-menu-submenu-title .@{prefixCls}-menu-submenu-arrow-icon {
  color: #00000040;
  background-color: #ffffff;
  cursor: not-allowed;
}

.@{prefixCls}-menu-submenu-selected .@{prefixCls}-menu-submenu-title {
  color: @drip-table-primary-color;
}

.@{prefixCls}-button {
  white-space: nowrap;
}

.@{prefixCls}-menu-dark,
.@{prefixCls}-menu-dark .@{prefixCls}-menu {
  background: #001529;
}

.@{prefixCls}-menu-dark .@{prefixCls}-menu-item-selected,
.@{prefixCls}-menu-dark .@{prefixCls}-menu-item-selected:hover,
.@{prefixCls}-menu-dark .@{prefixCls}-menu-item-selected>a {
  color: #ffffff;
  background: @drip-table-primary-color;
}

.@{prefixCls}-rtl {
  direction: rtl;
}

.@{prefixCls}-rtl.@{prefixCls}:before {
  right: -7px;
  left: 0;
}

.@{prefixCls}-menu.@{prefixCls}-menu-rtl,
.@{prefixCls}-rtl .@{prefixCls}-menu-item-group-title,
.@{prefixCls}-menu-submenu-rtl .@{prefixCls}-menu-item-group-title {
  direction: rtl;
  text-align: right;
}

.@{prefixCls}-menu-submenu-popup.@{prefixCls}-menu-submenu-rtl {
  transform-origin: 100% 0;
}

.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-popup ul,
.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-popup li,
.@{prefixCls}-rtl .@{prefixCls}-menu-item,
.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-title {
  text-align: right;
}

.@{prefixCls}-rtl .@{prefixCls}-menu-item .@{prefixCls}-menu-submenu-expand-icon,
.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-title .@{prefixCls}-menu-submenu-expand-icon {
  right: auto;
  left: 8px;
}

.@{prefixCls}-rtl .@{prefixCls}-menu-item .@{prefixCls}-menu-submenu-expand-icon .@{prefixCls}-menu-submenu-arrow-icon,
.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-title .@{prefixCls}-menu-submenu-expand-icon .@{prefixCls}-menu-submenu-arrow-icon {
  margin-left: 0 !important;
  transform: scaleX(-1);
}

.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-title {
  padding-right: 12px;
  padding-left: 24px;
}

.@{prefixCls}-rtl .@{prefixCls}-menu-submenu-vertical>.@{prefixCls}-menu {
  right: 100%;
  left: 0;
  margin-right: 4px;
  margin-left: 0;
}