element-ui/packages/theme-default/src/button.css

A Component Library for Vue.js.

@charset "UTF-8";
@import "./common/var.css";
@import './mixins/button';

@component-namespace el {
  @b button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: var(--button-default-fill);
    border: var(--border-base);
    border-color: var(--button-default-border);
    color: var(--button-default-color);
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    @utils-user-select none;
    & + .el-button {
      margin-left: 10px;
    }
    
    @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);

    &:hover,
    &:focus {
      color: var(--color-primary);
      border-color: @color;
    }
    
    &:active {
      color: shade(var(--color-primary), var(--button-active-shade-percent));
      border-color: @color;
      outline: none;
    }

    &::-moz-focus-inner {
      border: 0;
    }

    & [class*="el-icon-"] {
      & + span {
        margin-left: 5px;
      }
    }

    @when plain {
      &:hover,
      &:focus {
        background: var(--color-white);
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
      
      &:active {
        background: var(--color-white);
        border-color: shade(var(--color-primary), var(--button-active-shade-percent));
        color: shade(var(--color-primary), var(--button-active-shade-percent));
        outline: none;
      }
    }

    @when active {
      color: shade(var(--color-primary), var(--button-active-shade-percent));
      border-color: @color;
    }

    @when disabled {
      &,
      &:hover,
      &:focus {
        color: var(--button-disabled-color);
        cursor: not-allowed;
        background-image: none;
        background-color: var(--button-disabled-fill);
        border-color: var(--button-disabled-border);
      }

      &.el-button--text {
        background-color: transparent;
      }

      &.is-plain {
        &,
        &:hover,
        &:focus {
          background-color: var(--color-white);
          border-color: var(--color-base-gray);
          color: var(--color-extra-light-silver);
        }
      }
    }

    @when loading {
      position: relative;
      pointer-events: none;

      &:before {
        pointer-events: none;
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: inherit;
        background-color: rgba(255,255,255,.35);
      }
    }
    @m primary {
      @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
    }
    @m success {
      @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
    }
    @m warning {
      @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
    }
    @m danger {
      @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
    }
    @m info {
      @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
    }
    @m large {
      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
    }
    @m small {
      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
    }
    @m mini {
      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
    }
    @m text {
      border: none;
      color: var(--color-primary);
      background: transparent;
      padding-left: 0;
      padding-right: 0;

      &:hover,
      &:focus {
        color: tint(var(--color-primary), var(--button-hover-tint-percent));
      }
      &:active {
        color: shade(var(--color-primary), var(--button-active-shade-percent));
      }
    }
  }

  @b button-group {
    @utils-clearfix;
    display: inline-block;
    vertical-align: middle;

    & .el-button {
      float: left;
      position: relative;
      & + .el-button {
        margin-left: 0;
      }

      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      &:not(:last-child) {
        margin-right: -1px;
      }

      &:hover,
      &:focus,
      &:active {
        z-index: 1;
      }

      @when active {
        z-index: 1;
      }
    }

    @each $type in (primary, success, warning, danger, info) {
      .el-button--$type {
        &:first-child {
          border-right-color: rgba(var(--color-white), 0.5);
        }
        &:last-child {
          border-left-color: rgba(var(--color-white), 0.5);
        }
        &:not(:first-child):not(:last-child) {
          border-left-color: rgba(var(--color-white), 0.5);
          border-right-color: rgba(var(--color-white), 0.5);
        }
      }
    }
  }
}