vxe-table-demonic/es/button/style.css

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

/*font*/
/*size*/
/*icon*/
/*color*/
/*input/radio/checkbox*/
/*popup*/
/*table*/
/*filter*/
/*menu*/
/*loading*/
/*validate*/
/*grid*/
/*toolbar*/
/*tooltip*/
/*pager*/
/*modal*/
/*checkbox*/
/*radio*/
/*button*/
/*input*/
/*textarea*/
/*form*/
/*select*/
/*switch*/
/*pulldown*/
/*tag*/
.vxe-button {
  position: relative;
  text-align: center;
  background-color: var(--vxe-button-default-background-color);
  outline: 0;
  font-size: var(--vxe-font-size);
  max-width: var(--vxe-button-max-width);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border 0.2s ease-in-out;
}
.vxe-button:not(.is--disabled) {
  color: var(--vxe-font-color);
  cursor: pointer;
}
.vxe-button.is--loading {
  cursor: progress;
}
.vxe-button.is--loading:before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: hsla(0deg, 0%, 100%, 0.35);
  pointer-events: none;
}
.vxe-button.is--disabled {
  color: var(--vxe-font-disabled-color);
}
.vxe-button.is--disabled:not(.is--loading) {
  cursor: no-drop;
}
.vxe-button.type--text {
  text-decoration: none;
  border: 0;
  padding: 0.1em 0.5em;
  background-color: transparent;
}
.vxe-button.type--text:not(.is--disabled):focus {
  color: var(--vxe-font-darken-color);
}
.vxe-button.type--text:not(.is--disabled):hover {
  color: var(--vxe-primary-lighten-color);
}
.vxe-button.type--text.theme--primary {
  color: var(--vxe-primary-color);
}
.vxe-button.type--text.theme--primary:not(.is--disabled):focus {
  color: var(--vxe-primary-darken-color);
}
.vxe-button.type--text.theme--primary:not(.is--disabled):hover {
  color: var(--vxe-primary-lighten-color);
}
.vxe-button.type--text.theme--primary.is--disabled {
  color: var(--vxe-primary-disabled-color);
}
.vxe-button.type--text.theme--success {
  color: var(--vxe-success-color);
}
.vxe-button.type--text.theme--success:not(.is--disabled):focus {
  color: var(--vxe-success-darken-color);
}
.vxe-button.type--text.theme--success:not(.is--disabled):hover {
  color: var(--vxe-success-lighten-color);
}
.vxe-button.type--text.theme--success.is--disabled {
  color: var(--vxe-success-disabled-color);
}
.vxe-button.type--text.theme--info {
  color: var(--vxe-info-color);
}
.vxe-button.type--text.theme--info:not(.is--disabled):focus {
  color: var(--vxe-info-darken-color);
}
.vxe-button.type--text.theme--info:not(.is--disabled):hover {
  color: var(--vxe-info-lighten-color);
}
.vxe-button.type--text.theme--info.is--disabled {
  color: var(--vxe-info-disabled-color);
}
.vxe-button.type--text.theme--warning {
  color: var(--vxe-warning-color);
}
.vxe-button.type--text.theme--warning:not(.is--disabled):focus {
  color: var(--vxe-warning-darken-color);
}
.vxe-button.type--text.theme--warning:not(.is--disabled):hover {
  color: var(--vxe-warning-lighten-color);
}
.vxe-button.type--text.theme--warning.is--disabled {
  color: var(--vxe-warning-disabled-color);
}
.vxe-button.type--text.theme--danger {
  color: var(--vxe-danger-color);
}
.vxe-button.type--text.theme--danger:not(.is--disabled):focus {
  color: var(--vxe-danger-darken-color);
}
.vxe-button.type--text.theme--danger:not(.is--disabled):hover {
  color: var(--vxe-danger-lighten-color);
}
.vxe-button.type--text.theme--danger.is--disabled {
  color: var(--vxe-danger-disabled-color);
}
.vxe-button.type--text.theme--perfect {
  color: var(--vxe-table-header-background-color);
}
.vxe-button.type--text.theme--perfect:not(.is--disabled):focus {
  color: var(--vxe-table-header-background-color);
}
.vxe-button.type--text.theme--perfect:not(.is--disabled):hover {
  color: var(--vxe-table-header-background-color);
}
.vxe-button.type--text.theme--perfect.is--disabled {
  color: var(--vxe-table-header-background-color);
}
.vxe-button.type--button {
  font-family: inherit;
  height: var(--vxe-button-height-default);
  line-height: 1;
  border: 1px solid var(--vxe-input-border-color);
}
.vxe-button.type--button.is--round {
  border-radius: var(--vxe-button-round-border-radius-default);
}
.vxe-button.type--button:not(.is--round) {
  border-radius: var(--vxe-border-radius);
}
.vxe-button.type--button.is--circle {
  padding: 0 0.5em;
  min-width: var(--vxe-button-height-default);
  border-radius: 50%;
}
.vxe-button.type--button:not(.is--circle) {
  padding: 0 1em;
}
.vxe-button.type--button:not(.is--disabled):hover {
  color: var(--vxe-primary-lighten-color);
}
.vxe-button.type--button:not(.is--disabled):focus {
  border-color: var(--vxe-primary-color);
}
.vxe-button.type--button:not(.is--disabled):active {
  color: var(--vxe-primary-darken-color);
  border-color: var(--vxe-primary-darken-color);
  background-color: var(--vxe-button-default-background-color);
}
.vxe-button.type--button.theme--primary {
  color: #fff;
}
.vxe-button.type--button.theme--primary:not(.is--disabled) {
  border-color: var(--vxe-primary-color);
  background-color: var(--vxe-primary-color);
}
.vxe-button.type--button.theme--primary:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-primary-lighten-color);
  border-color: var(--vxe-primary-lighten-color);
}
.vxe-button.type--button.theme--primary:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-primary-darken-color);
  border-color: var(--vxe-primary-darken-color);
}
.vxe-button.type--button.theme--primary.is--disabled {
  border-color: var(--vxe-primary-disabled-color);
  background-color: var(--vxe-primary-disabled-color);
}
.vxe-button.type--button.theme--primary.is--loading {
  border-color: var(--vxe-primary-color);
  background-color: var(--vxe-primary-color);
}
.vxe-button.type--button.theme--success {
  color: #fff;
}
.vxe-button.type--button.theme--success:not(.is--disabled) {
  border-color: var(--vxe-success-color);
  background-color: var(--vxe-success-color);
}
.vxe-button.type--button.theme--success:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-success-lighten-color);
  border-color: var(--vxe-success-lighten-color);
}
.vxe-button.type--button.theme--success:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-success-darken-color);
  border-color: var(--vxe-success-darken-color);
}
.vxe-button.type--button.theme--success.is--disabled {
  border-color: var(--vxe-success-disabled-color);
  background-color: var(--vxe-success-disabled-color);
}
.vxe-button.type--button.theme--success.is--loading {
  border-color: var(--vxe-success-color);
  background-color: var(--vxe-success-color);
}
.vxe-button.type--button.theme--info {
  color: #fff;
}
.vxe-button.type--button.theme--info:not(.is--disabled) {
  border-color: var(--vxe-info-color);
  background-color: var(--vxe-info-color);
}
.vxe-button.type--button.theme--info:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-info-lighten-color);
  border-color: var(--vxe-info-lighten-color);
}
.vxe-button.type--button.theme--info:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-info-darken-color);
  border-color: var(--vxe-info-darken-color);
}
.vxe-button.type--button.theme--info.is--disabled {
  border-color: var(--vxe-info-disabled-color);
  background-color: var(--vxe-info-disabled-color);
}
.vxe-button.type--button.theme--info.is--loading {
  border-color: var(--vxe-info-color);
  background-color: var(--vxe-info-color);
}
.vxe-button.type--button.theme--warning {
  color: #fff;
}
.vxe-button.type--button.theme--warning:not(.is--disabled) {
  border-color: var(--vxe-warning-color);
  background-color: var(--vxe-warning-color);
}
.vxe-button.type--button.theme--warning:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-warning-lighten-color);
  border-color: var(--vxe-warning-lighten-color);
}
.vxe-button.type--button.theme--warning:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-warning-darken-color);
  border-color: var(--vxe-warning-darken-color);
}
.vxe-button.type--button.theme--warning.is--disabled {
  border-color: var(--vxe-warning-disabled-color);
  background-color: var(--vxe-warning-disabled-color);
}
.vxe-button.type--button.theme--warning.is--loading {
  border-color: var(--vxe-warning-color);
  background-color: var(--vxe-warning-color);
}
.vxe-button.type--button.theme--danger {
  color: #fff;
}
.vxe-button.type--button.theme--danger:not(.is--disabled) {
  border-color: var(--vxe-danger-color);
  background-color: var(--vxe-danger-color);
}
.vxe-button.type--button.theme--danger:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-danger-lighten-color);
  border-color: var(--vxe-danger-lighten-color);
}
.vxe-button.type--button.theme--danger:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-danger-darken-color);
  border-color: var(--vxe-danger-darken-color);
}
.vxe-button.type--button.theme--danger.is--disabled {
  border-color: var(--vxe-danger-disabled-color);
  background-color: var(--vxe-danger-disabled-color);
}
.vxe-button.type--button.theme--danger.is--loading {
  border-color: var(--vxe-danger-color);
  background-color: var(--vxe-danger-color);
}
.vxe-button.type--button.theme--perfect {
  color: #fff;
}
.vxe-button.type--button.theme--perfect:not(.is--disabled) {
  border-color: var(--vxe-table-header-background-color);
  background-color: var(--vxe-table-header-background-color);
}
.vxe-button.type--button.theme--perfect:not(.is--disabled):hover {
  color: #fff;
  background-color: var(--vxe-table-header-background-color);
  border-color: var(--vxe-table-header-background-color);
}
.vxe-button.type--button.theme--perfect:not(.is--disabled):active {
  color: #fff;
  background-color: var(--vxe-table-header-background-color);
  border-color: var(--vxe-table-header-background-color);
}
.vxe-button.type--button.theme--perfect.is--disabled {
  border-color: var(--vxe-table-header-background-color);
  background-color: var(--vxe-table-header-background-color);
}
.vxe-button.type--button.theme--perfect.is--loading {
  border-color: var(--vxe-table-header-background-color);
  background-color: var(--vxe-table-header-background-color);
}
.vxe-button.size--medium {
  font-size: var(--vxe-font-size-medium);
}
.vxe-button.size--medium.type--button {
  height: var(--vxe-button-height-medium);
}
.vxe-button.size--medium.type--button.is--circle {
  min-width: var(--vxe-button-height-medium);
}
.vxe-button.size--medium.type--button.is--round {
  border-radius: var(--vxe-button-round-border-radius-medium);
}
.vxe-button.size--medium .vxe-button--loading-icon,
.vxe-button.size--medium .vxe-button--icon {
  min-width: var(--vxe-font-size-medium);
}
.vxe-button.size--small {
  font-size: var(--vxe-font-size-small);
}
.vxe-button.size--small.type--button {
  height: var(--vxe-button-height-small);
}
.vxe-button.size--small.type--button.is--circle {
  min-width: var(--vxe-button-height-small);
}
.vxe-button.size--small.type--button.is--round {
  border-radius: var(--vxe-button-round-border-radius-small);
}
.vxe-button.size--small .vxe-button--loading-icon,
.vxe-button.size--small .vxe-button--icon {
  min-width: var(--vxe-font-size-small);
}
.vxe-button.size--mini {
  font-size: var(--vxe-font-size-mini);
}
.vxe-button.size--mini.type--button {
  height: var(--vxe-button-height-mini);
}
.vxe-button.size--mini.type--button.is--circle {
  min-width: var(--vxe-button-height-mini);
}
.vxe-button.size--mini.type--button.is--round {
  border-radius: var(--vxe-button-round-border-radius-mini);
}
.vxe-button.size--mini .vxe-button--loading-icon,
.vxe-button.size--mini .vxe-button--icon {
  min-width: var(--vxe-font-size-mini);
}

.vxe-input + .vxe-button.type--button, .vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button.type--button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 12px;
}

.vxe-button--loading-icon,
.vxe-button--icon {
  min-width: var(--vxe-font-size);
}
.vxe-button--loading-icon + .vxe-button--content,
.vxe-button--icon + .vxe-button--content {
  margin-left: 4px;
}

.vxe-button--wrapper,
.vxe-button--dropdown {
  display: inline-block;
}

.vxe-button--dropdown {
  position: relative;
}
.vxe-button--dropdown + .vxe-button.type--button, .vxe-button--dropdown + .vxe-button--dropdown {
  margin-left: 12px;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--primary {
  color: #fff;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--success {
  color: #fff;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--info {
  color: #fff;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--warning {
  color: #fff;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--danger {
  color: #fff;
}
.vxe-button--dropdown > .vxe-button.type--button.theme--perfect {
  color: #fff;
}
.vxe-button--dropdown.is--active > .vxe-button:not(.is--disabled) {
  color: var(--vxe-primary-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--primary {
  color: var(--vxe-primary-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--success {
  color: var(--vxe-success-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--info {
  color: var(--vxe-info-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--warning {
  color: var(--vxe-warning-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--danger {
  color: var(--vxe-danger-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--perfect {
  color: var(--vxe-table-header-background-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--primary {
  color: #fff;
  background-color: var(--vxe-primary-lighten-color);
  border-color: var(--vxe-primary-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--success {
  color: #fff;
  background-color: var(--vxe-success-lighten-color);
  border-color: var(--vxe-success-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--info {
  color: #fff;
  background-color: var(--vxe-info-lighten-color);
  border-color: var(--vxe-info-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--warning {
  color: #fff;
  background-color: var(--vxe-warning-lighten-color);
  border-color: var(--vxe-warning-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--danger {
  color: #fff;
  background-color: var(--vxe-danger-lighten-color);
  border-color: var(--vxe-danger-lighten-color);
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--perfect {
  color: #fff;
  background-color: var(--vxe-table-header-background-color);
  border-color: var(--vxe-table-header-background-color);
}
.vxe-button--dropdown.is--active .vxe-button--dropdown-arrow {
  transform: rotate(180deg);
}

.vxe-button--dropdown-arrow {
  display: inline-block;
  font-size: 12px;
  margin-left: 4px;
  transition: transform 0.2s ease-in-out;
}

.vxe-button--dropdown-panel {
  display: none;
  position: absolute;
  right: 0;
  padding: 4px 0;
}
.vxe-button--dropdown-panel.animat--leave {
  display: block;
  opacity: 0;
  transform: scaleY(0.5);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.vxe-button--dropdown-panel.animat--leave[placement=top] {
  transform-origin: center bottom;
}
.vxe-button--dropdown-panel.animat--enter {
  opacity: 1;
  transform: scaleY(1);
}

.vxe-button--dropdown-wrapper {
  padding: 5px;
  background-color: var(--vxe-button-dropdown-panel-background-color);
  border-radius: var(--vxe-border-radius);
  border: 1px solid var(--vxe-input-border-color);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.vxe-button--dropdown-wrapper > .vxe-button.type--text, .vxe-button--dropdown-wrapper > .vxe-button.type--button {
  display: block;
  width: 100%;
  border: 0;
  margin: 0.4em 0 0 0;
}
.vxe-button--dropdown-wrapper > .vxe-button.type--text {
  padding: 2px 8px;
}
.vxe-button--dropdown-wrapper > .vxe-button:first-child {
  margin-top: 0;
}
.vxe-button--dropdown-wrapper > .vxe-button:last-child {
  margin-bottom: 0;
}