acud/es/transfer/style/index.css

acg react 组件库

/**
 * @file transfer style
 * @author zhousheng
 */
/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-transfer {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5715;
  list-style: none;
  position: relative;
  display: flex;
  align-items: stretch;
}
.acud-transfer-datasource {
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 272px;
  border: 1px solid #E8E9EB;
  border-radius: 4px;
  background-color: #F7F7F9;
  overflow: hidden;
}
.acud-transfer-datasource-header {
  display: flex;
  flex: none;
  height: 40px;
  padding: 8px 12px;
  background-color: #F7F7F9;
  border-radius: 4px 4px 0 0;
  line-height: 22px;
}
.acud-transfer-datasource-header-checkall {
  margin-right: 12px;
}
.acud-transfer-datasource-label {
  color: #151B26;
  font-size: 12px;
  font-weight: 400;
  word-break: break-all;
}
.acud-transfer-datasource-body {
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  flex: auto;
}
.acud-transfer-datasource-list {
  overflow: auto;
}
.acud-transfer-datasource-list::-webkit-scrollbar {
  width: 6px;
}
.acud-transfer-datasource-list::-webkit-scrollbar-thumb {
  background: #D4D6D9;
  border-radius: 4px;
}
.acud-transfer-datasource-item {
  height: 32px;
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  line-height: 22px;
  align-items: center;
  color: #151B26;
  background-color: #FFFFFF;
  border-color: transparent;
}
.acud-transfer-datasource-item:hover {
  color: #151B26;
}
.acud-transfer-datasource-item:focus,
.acud-transfer-datasource-item:active {
  color: #151B26;
}
.acud-transfer-datasource-item[disabled],
.acud-transfer-datasource-item[aria-disabled="true"],
.acud-transfer-datasource-item[disabled]:hover,
.acud-transfer-datasource-item[aria-disabled="true"]:hover,
.acud-transfer-datasource-item[disabled]:focus,
.acud-transfer-datasource-item[aria-disabled="true"]:focus,
.acud-transfer-datasource-item[disabled]:active,
.acud-transfer-datasource-item[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-datasource-item:hover {
  background-color: #E6F0FF;
}
.acud-transfer-datasource-item:focus,
.acud-transfer-datasource-item:active {
  background-color: #FFFFFF;
}
.acud-transfer-datasource-item[disabled],
.acud-transfer-datasource-item[aria-disabled="true"],
.acud-transfer-datasource-item[disabled]:hover,
.acud-transfer-datasource-item[aria-disabled="true"]:hover,
.acud-transfer-datasource-item[disabled]:focus,
.acud-transfer-datasource-item[aria-disabled="true"]:focus,
.acud-transfer-datasource-item[disabled]:active,
.acud-transfer-datasource-item[aria-disabled="true"]:active {
  background-color: #FFFFFF;
}
.acud-transfer-datasource-item:hover {
  border-color: transparent;
}
.acud-transfer-datasource-item:focus,
.acud-transfer-datasource-item:active {
  border-color: transparent;
}
.acud-transfer-datasource-item[disabled],
.acud-transfer-datasource-item[aria-disabled="true"],
.acud-transfer-datasource-item[disabled]:hover,
.acud-transfer-datasource-item[aria-disabled="true"]:hover,
.acud-transfer-datasource-item[disabled]:focus,
.acud-transfer-datasource-item[aria-disabled="true"]:focus,
.acud-transfer-datasource-item[disabled]:active,
.acud-transfer-datasource-item[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-transfer-datasource-item[disabled],
.acud-transfer-datasource-item[aria-disabled="true"] {
  cursor: not-allowed;
}
.acud-transfer-datasource-item-title {
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acud-transfer-datasource-item-arrow {
  margin-right: 8px;
  color: #84868C;
  cursor: pointer;
  display: flex;
  width: 16px;
  height: 16px;
}
.acud-transfer-datasource-item-arrow:hover {
  color: #5C5F66;
}
.acud-transfer-datasource-item-arrow:focus,
.acud-transfer-datasource-item-arrow:active {
  color: #303540;
}
.acud-transfer-datasource-item-arrow[disabled],
.acud-transfer-datasource-item-arrow[aria-disabled="true"],
.acud-transfer-datasource-item-arrow[disabled]:hover,
.acud-transfer-datasource-item-arrow[aria-disabled="true"]:hover,
.acud-transfer-datasource-item-arrow[disabled]:focus,
.acud-transfer-datasource-item-arrow[aria-disabled="true"]:focus,
.acud-transfer-datasource-item-arrow[disabled]:active,
.acud-transfer-datasource-item-arrow[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-datasource-item-group-option {
  padding-left: 60px;
}
.acud-transfer-datasource-item-checkbox {
  height: 16px;
}
.acud-transfer-datasource-search {
  height: 40px;
  padding: 8px 12px;
  width: auto;
  flex-shrink: 0;
}
.acud-transfer-datasource-nodata {
  display: flex;
  align-items: center;
  flex: auto;
  justify-content: center;
}
.acud-transfer-datasource-nodata span {
  color: #B8BABF;
  font-size: 12px;
  margin-top: -16px;
}
.acud-transfer-target {
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 272px;
  border: 1px solid #E8E9EB;
  border-radius: 4px;
  background-color: #F7F7F9;
  margin-left: 16px;
  overflow: hidden;
}
.acud-transfer-target-header {
  display: flex;
  flex: none;
  height: 40px;
  padding: 8px 12px;
  background-color: #F7F7F9;
  border-radius: 4px 4px 0 0;
  line-height: 22px;
  justify-content: space-between;
}
.acud-transfer-target-label {
  color: #151B26;
  font-size: 12px;
  font-weight: #FFECD4;
}
.acud-transfer-target-clear-all {
  font-size: 12px;
  font-weight: #FFECD4;
  cursor: pointer;
  color: #2468F2;
}
.acud-transfer-target-clear-all:hover {
  color: #528EFF;
}
.acud-transfer-target-clear-all:focus,
.acud-transfer-target-clear-all:active {
  color: #144BCC;
}
.acud-transfer-target-clear-all[disabled],
.acud-transfer-target-clear-all[aria-disabled="true"],
.acud-transfer-target-clear-all[disabled]:hover,
.acud-transfer-target-clear-all[aria-disabled="true"]:hover,
.acud-transfer-target-clear-all[disabled]:focus,
.acud-transfer-target-clear-all[aria-disabled="true"]:focus,
.acud-transfer-target-clear-all[disabled]:active,
.acud-transfer-target-clear-all[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-target-clear-all[disabled],
.acud-transfer-target-clear-all[aria-disabled="true"] {
  cursor: not-allowed;
}
.acud-transfer-target-body {
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  flex: auto;
}
.acud-transfer-target-list {
  overflow: auto;
}
.acud-transfer-target-list::-webkit-scrollbar {
  width: 6px;
}
.acud-transfer-target-list::-webkit-scrollbar-thumb {
  background: #D4D6D9;
  border-radius: 4px;
}
.acud-transfer-target-item {
  height: 32px;
  padding: 5px 12px;
  display: flex;
  line-height: 22px;
  justify-content: space-between;
  color: #151B26;
  background-color: #FFFFFF;
  border-color: transparent;
}
.acud-transfer-target-item:hover {
  color: #151B26;
}
.acud-transfer-target-item:focus,
.acud-transfer-target-item:active {
  color: #151B26;
}
.acud-transfer-target-item[disabled],
.acud-transfer-target-item[aria-disabled="true"],
.acud-transfer-target-item[disabled]:hover,
.acud-transfer-target-item[aria-disabled="true"]:hover,
.acud-transfer-target-item[disabled]:focus,
.acud-transfer-target-item[aria-disabled="true"]:focus,
.acud-transfer-target-item[disabled]:active,
.acud-transfer-target-item[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-target-item:hover {
  background-color: #E6F0FF;
}
.acud-transfer-target-item:focus,
.acud-transfer-target-item:active {
  background-color: #FFFFFF;
}
.acud-transfer-target-item[disabled],
.acud-transfer-target-item[aria-disabled="true"],
.acud-transfer-target-item[disabled]:hover,
.acud-transfer-target-item[aria-disabled="true"]:hover,
.acud-transfer-target-item[disabled]:focus,
.acud-transfer-target-item[aria-disabled="true"]:focus,
.acud-transfer-target-item[disabled]:active,
.acud-transfer-target-item[aria-disabled="true"]:active {
  background-color: #FFFFFF;
}
.acud-transfer-target-item:hover {
  border-color: transparent;
}
.acud-transfer-target-item:focus,
.acud-transfer-target-item:active {
  border-color: transparent;
}
.acud-transfer-target-item[disabled],
.acud-transfer-target-item[aria-disabled="true"],
.acud-transfer-target-item[disabled]:hover,
.acud-transfer-target-item[aria-disabled="true"]:hover,
.acud-transfer-target-item[disabled]:focus,
.acud-transfer-target-item[aria-disabled="true"]:focus,
.acud-transfer-target-item[disabled]:active,
.acud-transfer-target-item[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-transfer-target-item[disabled],
.acud-transfer-target-item[aria-disabled="true"] {
  cursor: not-allowed;
}
.acud-transfer-target-item-wrap {
  overflow: hidden;
  display: flex;
}
.acud-transfer-target-item-title {
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acud-transfer-target-item-cancel.acudicon-outlined-close {
  display: flex;
  cursor: pointer;
  color: #84868C;
}
.acud-transfer-target-item-cancel.acudicon-outlined-close:hover {
  color: #5C5F66;
}
.acud-transfer-target-item-cancel.acudicon-outlined-close:focus,
.acud-transfer-target-item-cancel.acudicon-outlined-close:active {
  color: #303540;
}
.acud-transfer-target-item-cancel.acudicon-outlined-close[disabled],
.acud-transfer-target-item-cancel.acudicon-outlined-close[aria-disabled="true"],
.acud-transfer-target-item-cancel.acudicon-outlined-close[disabled]:hover,
.acud-transfer-target-item-cancel.acudicon-outlined-close[aria-disabled="true"]:hover,
.acud-transfer-target-item-cancel.acudicon-outlined-close[disabled]:focus,
.acud-transfer-target-item-cancel.acudicon-outlined-close[aria-disabled="true"]:focus,
.acud-transfer-target-item-cancel.acudicon-outlined-close[disabled]:active,
.acud-transfer-target-item-cancel.acudicon-outlined-close[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-target-item-arrow {
  margin-right: 8px;
  cursor: pointer;
  color: #84868C;
}
.acud-transfer-target-item-arrow:hover {
  color: #5C5F66;
}
.acud-transfer-target-item-arrow:focus,
.acud-transfer-target-item-arrow:active {
  color: #303540;
}
.acud-transfer-target-item-arrow[disabled],
.acud-transfer-target-item-arrow[aria-disabled="true"],
.acud-transfer-target-item-arrow[disabled]:hover,
.acud-transfer-target-item-arrow[aria-disabled="true"]:hover,
.acud-transfer-target-item-arrow[disabled]:focus,
.acud-transfer-target-item-arrow[aria-disabled="true"]:focus,
.acud-transfer-target-item-arrow[disabled]:active,
.acud-transfer-target-item-arrow[aria-disabled="true"]:active {
  color: #B8BABF;
}
.acud-transfer-target-item-group-option {
  padding-left: 56px;
}
.acud-transfer-target-search {
  padding: 8px 12px;
  width: auto;
  flex-shrink: 0;
  height: 40px;
}
.acud-transfer-target-nodata {
  display: flex;
  align-items: center;
  flex: auto;
  justify-content: center;
}
.acud-transfer-target-nodata span {
  color: #B8BABF;
  font-size: 12px;
  margin-top: -16px;
}
.acud-transfer .acud-input input {
  font-size: 12px;
}
.acud-transfer.acud-transfer-table .acud-transfer-datasource,
.acud-transfer.acud-transfer-table .acud-transfer-target {
  height: 360px;
}
.acud-transfer.acud-transfer-table .acud-transfer-datasource-search,
.acud-transfer.acud-transfer-table .acud-transfer-target-search {
  background-color: #F7F7F9;
  border-top: 1px solid #fff;
}
.acud-transfer.acud-transfer-table table {
  border-top: 1px solid #fff;
}
.acud-transfer.acud-transfer-table table thead tr th:nth-last-child(2) {
  border-right: none;
}
.acud-transfer.acud-transfer-table .acud-transfer-table-box {
  overflow: auto;
}