acud/es/dropdown/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-dropdown::-webkit-scrollbar {
  width: 4px;
}
.acud-dropdown::-webkit-scrollbar-thumb {
  background: #D4D6D9;
}
.acud-dropdown {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 1050;
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(7, 12, 20, 0.12);
  background-color: #FFFFFF;
  padding: 4px 0;
}
.acud-dropdown::before {
  position: absolute;
  inset: -4px 0 -4px -7px;
  z-index: -9999;
  opacity: 0.0001;
  content: " ";
}
.acud-dropdown-hidden,
.acud-dropdown-menu-submenu-hidden,
.acud-dropdown-menu-hidden {
  display: none;
}
.acud-dropdown-demo-image > img {
  width: 18px;
  margin-right: 8px;
}
.acud-dropdown-trigger {
  cursor: pointer;
  position: relative;
  line-height: 20px;
}
.acud-dropdown-trigger .trigger-title {
  font-size: 12px;
  font-weight: 400;
  color: #151B26;
}
.acud-dropdown-trigger .trigger-title:hover {
  color: #2468F2;
}
.acud-dropdown-trigger .trigger-title:focus,
.acud-dropdown-trigger .trigger-title:active {
  color: #2468F2;
}
.acud-dropdown-trigger .trigger-title[disabled],
.acud-dropdown-trigger .trigger-title[aria-disabled="true"],
.acud-dropdown-trigger .trigger-title[disabled]:hover,
.acud-dropdown-trigger .trigger-title[aria-disabled="true"]:hover,
.acud-dropdown-trigger .trigger-title[disabled]:focus,
.acud-dropdown-trigger .trigger-title[aria-disabled="true"]:focus,
.acud-dropdown-trigger .trigger-title[disabled]:active,
.acud-dropdown-trigger .trigger-title[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-dropdown-trigger .trigger-title-withicon {
  color: #151B26;
}
.acud-dropdown-trigger .trigger-title-withicon:hover {
  color: #151B26;
}
.acud-dropdown-trigger .trigger-title-withicon:focus,
.acud-dropdown-trigger .trigger-title-withicon:active {
  color: #151B26;
}
.acud-dropdown-trigger .trigger-title-withicon[disabled],
.acud-dropdown-trigger .trigger-title-withicon[aria-disabled="true"],
.acud-dropdown-trigger .trigger-title-withicon[disabled]:hover,
.acud-dropdown-trigger .trigger-title-withicon[aria-disabled="true"]:hover,
.acud-dropdown-trigger .trigger-title-withicon[disabled]:focus,
.acud-dropdown-trigger .trigger-title-withicon[aria-disabled="true"]:focus,
.acud-dropdown-trigger .trigger-title-withicon[disabled]:active,
.acud-dropdown-trigger .trigger-title-withicon[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-dropdown-trigger a {
  color: #2468F2;
}
.acud-dropdown-trigger-arrow {
  position: relative;
  top: 2px;
  margin-left: 8px;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  font-size: 12px;
  line-height: 16px;
  transition: transform 0.48s;
}
.acud-dropdown-trigger-arrow-expand {
  transform: rotate(180deg);
}
.acud-dropdown-trigger-arrow > svg {
  width: 16px;
  height: 16px;
}
.acud-dropdown-trigger-disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: #B8BABF;
}
.acud-dropdown-trigger-disabled:focus,
.acud-dropdown-trigger-disabled:hover {
  color: #B8BABF;
}
.acud-dropdown-trigger-disabled:active {
  color: #B8BABF;
}
li.acud-dropdown-menu-submenu,
.acud-dropdown-menu-item {
  cursor: pointer;
  color: #151B26;
  background-color: #FFFFFF;
  border-color: transparent;
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
  white-space: nowrap;
}
li.acud-dropdown-menu-submenu:hover,
.acud-dropdown-menu-item:hover {
  color: #151B26;
}
li.acud-dropdown-menu-submenu:focus,
.acud-dropdown-menu-item:focus,
li.acud-dropdown-menu-submenu:active,
.acud-dropdown-menu-item:active {
  color: #2468F2;
}
li.acud-dropdown-menu-submenu[disabled],
.acud-dropdown-menu-item[disabled],
li.acud-dropdown-menu-submenu[aria-disabled="true"],
.acud-dropdown-menu-item[aria-disabled="true"],
li.acud-dropdown-menu-submenu[disabled]:hover,
.acud-dropdown-menu-item[disabled]:hover,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:hover,
.acud-dropdown-menu-item[aria-disabled="true"]:hover,
li.acud-dropdown-menu-submenu[disabled]:focus,
.acud-dropdown-menu-item[disabled]:focus,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:focus,
.acud-dropdown-menu-item[aria-disabled="true"]:focus,
li.acud-dropdown-menu-submenu[disabled]:active,
.acud-dropdown-menu-item[disabled]:active,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:active,
.acud-dropdown-menu-item[aria-disabled="true"]:active {
  color: #B8BABF;
}
li.acud-dropdown-menu-submenu:hover,
.acud-dropdown-menu-item:hover {
  background-color: #E6F0FF;
}
li.acud-dropdown-menu-submenu:focus,
.acud-dropdown-menu-item:focus,
li.acud-dropdown-menu-submenu:active,
.acud-dropdown-menu-item:active {
  background-color: #FFFFFF;
}
li.acud-dropdown-menu-submenu[disabled],
.acud-dropdown-menu-item[disabled],
li.acud-dropdown-menu-submenu[aria-disabled="true"],
.acud-dropdown-menu-item[aria-disabled="true"],
li.acud-dropdown-menu-submenu[disabled]:hover,
.acud-dropdown-menu-item[disabled]:hover,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:hover,
.acud-dropdown-menu-item[aria-disabled="true"]:hover,
li.acud-dropdown-menu-submenu[disabled]:focus,
.acud-dropdown-menu-item[disabled]:focus,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:focus,
.acud-dropdown-menu-item[aria-disabled="true"]:focus,
li.acud-dropdown-menu-submenu[disabled]:active,
.acud-dropdown-menu-item[disabled]:active,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:active,
.acud-dropdown-menu-item[aria-disabled="true"]:active {
  background-color: #FFFFFF;
}
li.acud-dropdown-menu-submenu:hover,
.acud-dropdown-menu-item:hover {
  border-color: transparent;
}
li.acud-dropdown-menu-submenu:focus,
.acud-dropdown-menu-item:focus,
li.acud-dropdown-menu-submenu:active,
.acud-dropdown-menu-item:active {
  border-color: transparent;
}
li.acud-dropdown-menu-submenu[disabled],
.acud-dropdown-menu-item[disabled],
li.acud-dropdown-menu-submenu[aria-disabled="true"],
.acud-dropdown-menu-item[aria-disabled="true"],
li.acud-dropdown-menu-submenu[disabled]:hover,
.acud-dropdown-menu-item[disabled]:hover,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:hover,
.acud-dropdown-menu-item[aria-disabled="true"]:hover,
li.acud-dropdown-menu-submenu[disabled]:focus,
.acud-dropdown-menu-item[disabled]:focus,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:focus,
.acud-dropdown-menu-item[aria-disabled="true"]:focus,
li.acud-dropdown-menu-submenu[disabled]:active,
.acud-dropdown-menu-item[disabled]:active,
li.acud-dropdown-menu-submenu[aria-disabled="true"]:active,
.acud-dropdown-menu-item[aria-disabled="true"]:active {
  border-color: transparent;
}
li.acud-dropdown-menu-submenu-disabled,
.acud-dropdown-menu-item-disabled {
  cursor: not-allowed;
  color: #B8BABF;
  background-color: #FFFFFF;
  border-color: transparent;
}
li.acud-dropdown-menu-submenu-disabled:focus,
.acud-dropdown-menu-item-disabled:focus,
li.acud-dropdown-menu-submenu-disabled:hover,
.acud-dropdown-menu-item-disabled:hover {
  color: #B8BABF;
}
li.acud-dropdown-menu-submenu-disabled:active,
.acud-dropdown-menu-item-disabled:active {
  color: #B8BABF;
}
li.acud-dropdown-menu-submenu-disabled:focus,
.acud-dropdown-menu-item-disabled:focus,
li.acud-dropdown-menu-submenu-disabled:hover,
.acud-dropdown-menu-item-disabled:hover {
  background-color: #FFFFFF;
}
li.acud-dropdown-menu-submenu-disabled:active,
.acud-dropdown-menu-item-disabled:active {
  background-color: #FFFFFF;
}
li.acud-dropdown-menu-submenu-disabled:focus,
.acud-dropdown-menu-item-disabled:focus,
li.acud-dropdown-menu-submenu-disabled:hover,
.acud-dropdown-menu-item-disabled:hover {
  border-color: transparent;
}
li.acud-dropdown-menu-submenu-disabled:active,
.acud-dropdown-menu-item-disabled:active {
  border-color: transparent;
}
li.acud-dropdown-menu-submenu-active:hover,
.acud-dropdown-menu-item-active:hover {
  background-color: #E6F0FF;
}
li.acud-dropdown-menu-submenu-selected,
.acud-dropdown-menu-item-selected {
  color: #2468F2;
}
li.acud-dropdown-menu-submenu-selected:hover,
.acud-dropdown-menu-item-selected:hover {
  color: #2468F2;
}
.acud-dropdown-menu-submenu-title,
.acud-dropdown-menu-item {
  padding-left: 12px;
  padding-right: 12px;
  height: 32px;
  display: flex;
  justify-content: space-between;
}
.acud-dropdown-menu-submenu-title .acud-dropdown-menu-submenu-expand-icon,
.acud-dropdown-menu-item .acud-dropdown-menu-submenu-expand-icon {
  display: flex;
}
.acud-dropdown-menu-submenu-title-selected,
.acud-dropdown-menu-item-selected {
  color: #2468F2;
}
.acud-dropdown-menu-submenu-title-selected:hover,
.acud-dropdown-menu-item-selected:hover {
  color: #2468F2;
}
.acud-dropdown-menu-item,
.acud-dropdown-menu > .acud-dropdown-menu-submenu > .acud-dropdown-menu-submenu-title {
  line-height: 32px;
}
.acud-dropdown-menu-submenu-popup {
  position: absolute;
  z-index: 1050;
  padding: 4px 0;
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(7, 12, 20, 0.12);
  overflow: hidden;
  background-color: #FFFFFF;
}
.acud-dropdown-submenu-vertical {
  position: relative;
}
.acud-dropdown-submenu-vertical > .acud-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 100%;
  margin-left: 4px;
  transform-origin: 0 0;
}
.acud-dropdown-menu-mul-colnum .acud-dropdown-menu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.acud-dropdown-menu-mul-colnum .acud-dropdown-menu-item-group {
  margin: 20px 4px 0 20px;
  width: 100px;
}
.acud-dropdown-menu-mul-colnum .acud-dropdown-menu-item-group-title {
  color: #84868C;
}
.acud-dropdown-menu-mul-colnum .acud-dropdown-menu-item {
  display: block;
  padding: 0;
  color: #151B26;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acud-dropdown-menu-mul-colnum .acud-dropdown-menu-item:hover {
  color: #2468F2;
  background-color: #FFF;
}