vxe-table-select-area/lib/button/style/style.css

一个基于 vxe-table 的可区域选中复制、粘贴的组件

/*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*/
.vxe-button {
  position: relative;
  text-align: center;
  background-color: #fff;
  outline: 0;
  font-size: 14px;
  max-width: 500px;
  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: #606266;
  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(0, 0%, 100%, 0.35);
  pointer-events: none;
}
.vxe-button.is--disabled {
  color: #BFBFBF;
}
.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: #2f3031;
}
.vxe-button.type--text:not(.is--disabled):hover {
  color: #73b8ff;
}
.vxe-button.type--text.theme--primary {
  color: #409eff;
}
.vxe-button.type--text.theme--primary:not(.is--disabled):focus {
  color: #0d84ff;
}
.vxe-button.type--text.theme--primary:not(.is--disabled):hover {
  color: #73b8ff;
}
.vxe-button.type--text.theme--primary.is--disabled {
  color: #a6d2ff;
}
.vxe-button.type--text.theme--success {
  color: #67c23a;
}
.vxe-button.type--text.theme--success:not(.is--disabled):focus {
  color: #529b2e;
}
.vxe-button.type--text.theme--success:not(.is--disabled):hover {
  color: #85cf60;
}
.vxe-button.type--text.theme--success.is--disabled {
  color: #a3db87;
}
.vxe-button.type--text.theme--info {
  color: #909399;
}
.vxe-button.type--text.theme--info:not(.is--disabled):focus {
  color: #767980;
}
.vxe-button.type--text.theme--info:not(.is--disabled):hover {
  color: #abadb1;
}
.vxe-button.type--text.theme--info.is--disabled {
  color: #c5c7ca;
}
.vxe-button.type--text.theme--warning {
  color: #e6a23c;
}
.vxe-button.type--text.theme--warning:not(.is--disabled):focus {
  color: #d48a1b;
}
.vxe-button.type--text.theme--warning:not(.is--disabled):hover {
  color: #ecb869;
}
.vxe-button.type--text.theme--warning.is--disabled {
  color: #f2cd96;
}
.vxe-button.type--text.theme--danger {
  color: #f56c6c;
}
.vxe-button.type--text.theme--danger:not(.is--disabled):focus {
  color: #f23c3c;
}
.vxe-button.type--text.theme--danger:not(.is--disabled):hover {
  color: #f89c9c;
}
.vxe-button.type--text.theme--danger.is--disabled {
  color: #fbcccc;
}
.vxe-button.type--text.theme--perfect {
  color: #f8f8f9;
}
.vxe-button.type--text.theme--perfect:not(.is--disabled):focus {
  color: #dddde1;
}
.vxe-button.type--text.theme--perfect:not(.is--disabled):hover {
  color: white;
}
.vxe-button.type--text.theme--perfect.is--disabled {
  color: white;
}
.vxe-button.type--button {
  font-family: inherit;
  height: 34px;
  line-height: 1;
  border: 1px solid #dcdfe6;
}
.vxe-button.type--button.is--round {
  border-radius: 17px;
}
.vxe-button.type--button:not(.is--round) {
  border-radius: 4px;
}
.vxe-button.type--button.is--circle {
  padding: 0 0.5em;
  min-width: 34px;
  border-radius: 50%;
}
.vxe-button.type--button:not(.is--circle) {
  padding: 0 1em;
}
.vxe-button.type--button:not(.is--disabled):hover {
  color: #5faeff;
}
.vxe-button.type--button:not(.is--disabled):focus {
  border-color: #409eff;
}
.vxe-button.type--button:not(.is--disabled):active {
  color: #3196ff;
  border-color: #3196ff;
  background-color: #f7f7f7;
}
.vxe-button.type--button.theme--primary {
  color: #fff;
}
.vxe-button.type--button.theme--primary:not(.is--disabled) {
  border-color: #409eff;
  background-color: #409eff;
}
.vxe-button.type--button.theme--primary:not(.is--disabled):hover {
  color: #fff;
  background-color: #5faeff;
  border-color: #5faeff;
}
.vxe-button.type--button.theme--primary:not(.is--disabled):active {
  color: #fff;
  background-color: #3196ff;
  border-color: #3196ff;
}
.vxe-button.type--button.theme--primary.is--disabled {
  border-color: #a6d2ff;
  background-color: #a6d2ff;
}
.vxe-button.type--button.theme--primary.is--loading {
  border-color: #409eff;
  background-color: #409eff;
}
.vxe-button.type--button.theme--success {
  color: #fff;
}
.vxe-button.type--button.theme--success:not(.is--disabled) {
  border-color: #67c23a;
  background-color: #67c23a;
}
.vxe-button.type--button.theme--success:not(.is--disabled):hover {
  color: #fff;
  background-color: #79cb50;
  border-color: #79cb50;
}
.vxe-button.type--button.theme--success:not(.is--disabled):active {
  color: #fff;
  background-color: #61b636;
  border-color: #61b636;
}
.vxe-button.type--button.theme--success.is--disabled {
  border-color: #a3db87;
  background-color: #a3db87;
}
.vxe-button.type--button.theme--success.is--loading {
  border-color: #67c23a;
  background-color: #67c23a;
}
.vxe-button.type--button.theme--info {
  color: #fff;
}
.vxe-button.type--button.theme--info:not(.is--disabled) {
  border-color: #909399;
  background-color: #909399;
}
.vxe-button.type--button.theme--info:not(.is--disabled):hover {
  color: #fff;
  background-color: #a0a3a8;
  border-color: #a0a3a8;
}
.vxe-button.type--button.theme--info:not(.is--disabled):active {
  color: #fff;
  background-color: #888b92;
  border-color: #888b92;
}
.vxe-button.type--button.theme--info.is--disabled {
  border-color: #c5c7ca;
  background-color: #c5c7ca;
}
.vxe-button.type--button.theme--info.is--loading {
  border-color: #909399;
  background-color: #909399;
}
.vxe-button.type--button.theme--warning {
  color: #fff;
}
.vxe-button.type--button.theme--warning:not(.is--disabled) {
  border-color: #e6a23c;
  background-color: #e6a23c;
}
.vxe-button.type--button.theme--warning:not(.is--disabled):hover {
  color: #fff;
  background-color: #e9af57;
  border-color: #e9af57;
}
.vxe-button.type--button.theme--warning:not(.is--disabled):active {
  color: #fff;
  background-color: #e49c2e;
  border-color: #e49c2e;
}
.vxe-button.type--button.theme--warning.is--disabled {
  border-color: #f2cd96;
  background-color: #f2cd96;
}
.vxe-button.type--button.theme--warning.is--loading {
  border-color: #e6a23c;
  background-color: #e6a23c;
}
.vxe-button.type--button.theme--danger {
  color: #fff;
}
.vxe-button.type--button.theme--danger:not(.is--disabled) {
  border-color: #f56c6c;
  background-color: #f56c6c;
}
.vxe-button.type--button.theme--danger:not(.is--disabled):hover {
  color: #fff;
  background-color: #f78989;
  border-color: #f78989;
}
.vxe-button.type--button.theme--danger:not(.is--disabled):active {
  color: #fff;
  background-color: #f45e5e;
  border-color: #f45e5e;
}
.vxe-button.type--button.theme--danger.is--disabled {
  border-color: #fbcccc;
  background-color: #fbcccc;
}
.vxe-button.type--button.theme--danger.is--loading {
  border-color: #f56c6c;
  background-color: #f56c6c;
}
.vxe-button.type--button.theme--perfect {
  color: #606266;
}
.vxe-button.type--button.theme--perfect:not(.is--disabled) {
  border-color: #f8f8f9;
  background-color: #f8f8f9;
}
.vxe-button.type--button.theme--perfect:not(.is--disabled):hover {
  color: #606266;
  background-color: white;
  border-color: white;
}
.vxe-button.type--button.theme--perfect:not(.is--disabled):active {
  color: #606266;
  background-color: #f0f0f2;
  border-color: #f0f0f2;
}
.vxe-button.type--button.theme--perfect.is--disabled {
  border-color: white;
  background-color: white;
}
.vxe-button.type--button.theme--perfect.is--loading {
  border-color: #f8f8f9;
  background-color: #f8f8f9;
}
.vxe-button.size--medium {
  font-size: 14px;
}
.vxe-button.size--medium.type--button {
  height: 32px;
}
.vxe-button.size--medium.type--button.is--circle {
  min-width: 32px;
}
.vxe-button.size--medium.type--button.is--round {
  border-radius: 16px;
}
.vxe-button.size--medium .vxe-button--loading-icon,
.vxe-button.size--medium .vxe-button--icon {
  min-width: 14px;
}
.vxe-button.size--small {
  font-size: 13px;
}
.vxe-button.size--small.type--button {
  height: 30px;
}
.vxe-button.size--small.type--button.is--circle {
  min-width: 30px;
}
.vxe-button.size--small.type--button.is--round {
  border-radius: 15px;
}
.vxe-button.size--small .vxe-button--loading-icon,
.vxe-button.size--small .vxe-button--icon {
  min-width: 13px;
}
.vxe-button.size--mini {
  font-size: 12px;
}
.vxe-button.size--mini.type--button {
  height: 28px;
}
.vxe-button.size--mini.type--button.is--circle {
  min-width: 28px;
}
.vxe-button.size--mini.type--button.is--round {
  border-radius: 14px;
}
.vxe-button.size--mini .vxe-button--loading-icon,
.vxe-button.size--mini .vxe-button--icon {
  min-width: 12px;
}

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

.vxe-button--loading-icon,
.vxe-button--icon {
  min-width: 14px;
}
.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, .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: #606266;
}
.vxe-button--dropdown.is--active > .vxe-button:not(.is--disabled) {
  color: #5faeff;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--primary {
  color: #73b8ff;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--success {
  color: #85cf60;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--info {
  color: #abadb1;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--warning {
  color: #ecb869;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--danger {
  color: #f89c9c;
}
.vxe-button--dropdown.is--active > .vxe-button.type--text.theme--perfect {
  color: white;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--primary {
  color: #fff;
  background-color: #5faeff;
  border-color: #5faeff;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--success {
  color: #fff;
  background-color: #79cb50;
  border-color: #79cb50;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--info {
  color: #fff;
  background-color: #a0a3a8;
  border-color: #a0a3a8;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--warning {
  color: #fff;
  background-color: #e9af57;
  border-color: #e9af57;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--danger {
  color: #fff;
  background-color: #f78989;
  border-color: #f78989;
}
.vxe-button--dropdown.is--active > .vxe-button.type--button.theme--perfect {
  color: #606266;
  background-color: white;
  border-color: white;
}
.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: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.vxe-button--dropdown-wrapper > .vxe-button {
  margin-left: 0;
  margin-top: 0.4em;
  display: block;
  width: 100%;
  border: 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;
}