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

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

/*font*/
/*size*/
/*icon*/
/*color*/
/*input/radio/checkbox*/
/*popup*/
/*table*/
/*filter*/
/*menu*/
/*loading*/
/*validate*/
/*grid*/
/*toolbar*/
/*tooltip*/
/*modal*/
/*checkbox*/
/*radio*/
/*button*/
/*input*/
/*textarea*/
/*form*/
/*select*/
/*switch*/
.vxe-button {
  position: relative;
  text-align: center;
  background-color: #fff;
  outline: 0;
  font-size: 14px;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: border 0.2s ease-in-out;
  transition: border 0.2s ease-in-out; }
  .vxe-button.is--disabled {
    color: #BFBFBF; }
    .vxe-button.is--disabled .vxe-button--icon.vxe-icon--zoomin {
      border-color: #BFBFBF; }
    .vxe-button.is--disabled:not(.is--loading) {
      cursor: no-drop; }
  .vxe-button:not(.is--disabled) {
    color: #606266;
    cursor: pointer; }
    .vxe-button:not(.is--disabled) .vxe-button--icon.vxe-icon--zoomin {
      border-color: #606266; }
  .vxe-button.is--loading:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none; }
  .vxe-button.type--text {
    text-decoration: none;
    border: 0;
    background-color: transparent; }
    .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):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):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):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):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):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):hover {
        color: white; }
      .vxe-button.type--text.theme--perfect.is--disabled {
        color: white; }
  .vxe-button.type--button {
    font-family: inherit;
    line-height: 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):hover .vxe-button--icon.vxe-icon--zoomin {
        border-color: #5faeff; }
    .vxe-button.type--button:not(.is--disabled):focus {
      border-color: #409eff;
      -webkit-box-shadow: 0 0 0.25em 0 #409eff;
              box-shadow: 0 0 0.25em 0 #409eff; }
    .vxe-button.type--button:not(.is--disabled):active {
      color: #3196ff;
      border-color: #3196ff;
      background-color: #f7f7f7; }
      .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomin {
        background-color: #f7f7f7; }
      .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomout:after {
        background-color: #f7f7f7; }
    .vxe-button.type--button.theme--primary {
      color: #fff; }
      .vxe-button.type--button.theme--primary .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #3196ff; }
          .vxe-button.type--button.theme--primary:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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 .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #61b636; }
          .vxe-button.type--button.theme--success:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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 .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #888b92; }
          .vxe-button.type--button.theme--info:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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 .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #e49c2e; }
          .vxe-button.type--button.theme--warning:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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 .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #f45e5e; }
          .vxe-button.type--button.theme--danger:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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 .vxe-button--icon.vxe-icon--zoomin {
        border-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):hover .vxe-button--icon.vxe-icon--zoomin {
            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:not(.is--disabled):active.vxe-icon--zoomin {
            background-color: #f0f0f2; }
          .vxe-button.type--button.theme--perfect:not(.is--disabled):active.vxe-icon--zoomout:after {
            background-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,
.vxe-button--content {
  vertical-align: middle; }

.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 {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }

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

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

.vxe-button--dropdown-wrapper {
  padding: 5px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
  .vxe-button--dropdown-wrapper > .vxe-button {
    margin: 2px 0;
    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; }