acud/es/button/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  outline: 0;
  cursor: pointer;
  height: 32px;
  padding-right: 11px;
  padding-left: 11px;
  font-size: 12px;
  border-radius: 4px;
}
.acud-btn-text-limited {
  min-width: 72px;
}
.acud-btn-has-icon {
  padding-left: 11px;
}
.acud-btn-only-icon {
  padding-right: 7px;
  padding-left: 7px;
}
.acud-btn-has-icon > .acudicon {
  height: 16px;
  font-size: 16px;
}
.acud-btn-lg {
  height: 40px;
  padding-right: 15px;
  padding-left: 15px;
  font-size: 14px;
  border-radius: 4px;
}
.acud-btn-lg-text-limited {
  min-width: 72px;
}
.acud-btn-lg-has-icon {
  padding-left: 15px;
}
.acud-btn-lg-only-icon {
  padding-right: 11px;
  padding-left: 11px;
}
.acud-btn-lg-has-icon > .acudicon {
  height: 16px;
  font-size: 16px;
}
.acud-btn-sm {
  height: 24px;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 12px;
  border-radius: 2px;
}
.acud-btn-sm-text-limited {
  min-width: 72px;
}
.acud-btn-sm-has-icon {
  padding-left: 7px;
}
.acud-btn-sm-only-icon {
  padding-right: 3px;
  padding-left: 3px;
}
.acud-btn-sm-has-icon > .acudicon {
  height: 16px;
  font-size: 16px;
}
.acud-btn,
.acud-btn:active,
.acud-btn:focus {
  outline: 0;
}
.acud-btn:not([disabled]):hover {
  text-decoration: none;
}
.acud-btn:not([disabled]):active {
  outline: 0;
  box-shadow: none;
}
.acud-btn[disabled] {
  cursor: not-allowed;
}
.acud-btn[disabled] > * {
  pointer-events: none;
}
.acud-btn-primary {
  color: #FFFFFF;
  background-color: #2468F2;
  border-color: transparent;
}
.acud-btn-primary:hover {
  color: #FFFFFF;
}
.acud-btn-primary:active {
  color: #FFFFFF;
}
.acud-btn-primary[disabled],
.acud-btn-primary[disabled]:hover,
.acud-btn-primary[disabled]:active {
  color: #B8BABF;
}
.acud-btn-primary:hover {
  background-color: #528EFF;
}
.acud-btn-primary:active {
  background-color: #144BCC;
}
.acud-btn-primary[disabled],
.acud-btn-primary[disabled]:hover,
.acud-btn-primary[disabled]:active {
  background-color: #F7F7F9;
}
.acud-btn-primary:hover {
  border-color: transparent;
}
.acud-btn-primary:active {
  border-color: transparent;
}
.acud-btn-primary[disabled],
.acud-btn-primary[disabled]:hover,
.acud-btn-primary[disabled]:active {
  border-color: transparent;
}
.acud-btn-default {
  color: #151B26;
  background-color: #FFFFFF;
  border-color: #E8E9EB;
}
.acud-btn-default:hover {
  color: #2468F2;
}
.acud-btn-default:active {
  color: #144BCC;
}
.acud-btn-default[disabled],
.acud-btn-default[disabled]:hover,
.acud-btn-default[disabled]:active {
  color: #B8BABF;
}
.acud-btn-default:hover {
  background-color: #FFFFFF;
}
.acud-btn-default:active {
  background-color: #FFFFFF;
}
.acud-btn-default[disabled],
.acud-btn-default[disabled]:hover,
.acud-btn-default[disabled]:active {
  background-color: #F7F7F9;
}
.acud-btn-default:hover {
  border-color: #2468F2;
}
.acud-btn-default:active {
  border-color: #144BCC;
}
.acud-btn-default[disabled],
.acud-btn-default[disabled]:hover,
.acud-btn-default[disabled]:active {
  border-color: #F7F7F9;
}
.acud-btn-highlight {
  color: #FFFFFF;
  background-color: #F33E3E;
  border-color: transparent;
}
.acud-btn-highlight:hover {
  color: #FFFFFF;
}
.acud-btn-highlight:active {
  color: #FFFFFF;
}
.acud-btn-highlight[disabled],
.acud-btn-highlight[disabled]:hover,
.acud-btn-highlight[disabled]:active {
  color: #B8BABF;
}
.acud-btn-highlight:hover {
  background-color: #FF6966;
}
.acud-btn-highlight:active {
  background-color: #CC292E;
}
.acud-btn-highlight[disabled],
.acud-btn-highlight[disabled]:hover,
.acud-btn-highlight[disabled]:active {
  background-color: #F7F7F9;
}
.acud-btn-highlight:hover {
  border-color: transparent;
}
.acud-btn-highlight:active {
  border-color: transparent;
}
.acud-btn-highlight[disabled],
.acud-btn-highlight[disabled]:hover,
.acud-btn-highlight[disabled]:active {
  border-color: transparent;
}
.acud-btn-enhance {
  color: #2468F2;
  background-color: #FFFFFF;
  border-color: #2468F2;
}
.acud-btn-enhance:hover {
  color: #528EFF;
}
.acud-btn-enhance:active {
  color: #144BCC;
}
.acud-btn-enhance[disabled],
.acud-btn-enhance[disabled]:hover,
.acud-btn-enhance[disabled]:active {
  color: #B8BABF;
}
.acud-btn-enhance:hover {
  background-color: #FFFFFF;
}
.acud-btn-enhance:active {
  background-color: #FFFFFF;
}
.acud-btn-enhance[disabled],
.acud-btn-enhance[disabled]:hover,
.acud-btn-enhance[disabled]:active {
  background-color: #F7F7F9;
}
.acud-btn-enhance:hover {
  border-color: #528EFF;
}
.acud-btn-enhance:active {
  border-color: #144BCC;
}
.acud-btn-enhance[disabled],
.acud-btn-enhance[disabled]:hover,
.acud-btn-enhance[disabled]:active {
  border-color: #F7F7F9;
}
.acud-btn-text {
  color: #151B26;
  background-color: transparent;
  border-color: transparent;
}
.acud-btn-text:hover {
  color: #2468F2;
}
.acud-btn-text:active {
  color: #144BCC;
}
.acud-btn-text[disabled],
.acud-btn-text[disabled]:hover,
.acud-btn-text[disabled]:active {
  color: #B8BABF;
}
.acud-btn-text:hover {
  background-color: transparent;
}
.acud-btn-text:active {
  background-color: transparent;
}
.acud-btn-text[disabled],
.acud-btn-text[disabled]:hover,
.acud-btn-text[disabled]:active {
  background-color: transparent;
}
.acud-btn-text:hover {
  border-color: transparent;
}
.acud-btn-text:active {
  border-color: transparent;
}
.acud-btn-text[disabled],
.acud-btn-text[disabled]:hover,
.acud-btn-text[disabled]:active {
  border-color: transparent;
}
.acud-btn-actiontext {
  color: #2468F2;
  background-color: transparent;
  border-color: transparent;
}
.acud-btn-actiontext:hover {
  color: #528EFF;
}
.acud-btn-actiontext:active {
  color: #144BCC;
}
.acud-btn-actiontext[disabled],
.acud-btn-actiontext[disabled]:hover,
.acud-btn-actiontext[disabled]:active {
  color: #B8BABF;
}
.acud-btn-actiontext:hover {
  background-color: transparent;
}
.acud-btn-actiontext:active {
  background-color: transparent;
}
.acud-btn-actiontext[disabled],
.acud-btn-actiontext[disabled]:hover,
.acud-btn-actiontext[disabled]:active {
  background-color: transparent;
}
.acud-btn-actiontext:hover {
  border-color: transparent;
}
.acud-btn-actiontext:active {
  border-color: transparent;
}
.acud-btn-actiontext[disabled],
.acud-btn-actiontext[disabled]:hover,
.acud-btn-actiontext[disabled]:active {
  border-color: transparent;
}
.acud-btn-loading {
  pointer-events: none;
  cursor: default;
}
.acud-btn > span {
  display: inline-block;
}
.acud-btn > .acudicon + span,
.acud-btn > span + .acudicon {
  margin-left: 4px;
}
.acud-btn-group {
  display: inline-flex;
}
.acud-btn-group > .acud-btn {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.acud-btn-group > .acud-dropdown-trigger .acud-btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.acud-btn-group .acudicon-outlined-down {
  transition: transform 0.48s;
}
.acud-btn-group-expand .acudicon-outlined-down {
  transform: rotate(-180deg);
  transform-origin: center;
}
.acud-btn-group .acud-btn {
  margin-left: -1px;
}
.acud-btn-group .acud-btn:hover {
  z-index: 2;
}
.acud-btn-group-border-left {
  border-left-color: #528EFF;
}
.acud-btn-group-border-left[disabled] {
  border-left-color: #FFFFFF;
}