atui/src/styles/buttons.less

components built with Vue.js

// Button
// --------------------------------------------------
@prefix-cls-btn: e("@{prefix-cls}-btn");

.@{prefix-cls-btn} {
  display: inline-block;
  padding: 5px 20px;
  background-color: @primary-color;
  background-image: none;
  font-size: 12px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

  &:hover {
    background-color: tint(@primary-color, 40%);
  }

  &:focus, &:active {
    background-color: shade(@primary-color, 10%);
  }
}

// Size of the button
// ----------------------------------------------------
.@{prefix-cls-btn} {
  &.@{prefix-cls-btn}-default {
    padding: 6px 20px;
  }

  &.@{prefix-cls-btn}-large {
    padding: 7px 20px;
  }

  &.@{prefix-cls-btn}-small {
    padding: 1px 10px;
  }
}

// Category button
// ----------------------------------------------------

.disabled() {
  background-color: #f2f2f2;
  color: #ccc;
  cursor: not-allowed;
}

.@{prefix-cls-btn} {
  &.@{prefix-cls-btn}-primary {
    background-color: @primary-color;
    color: #fff;

    &:hover {
      background-color: tint(@primary-color, 40%);

      &:focus, &:active, &.active {
        background-color: shade(@primary-color, 10%);
      }
    }

    &:focus, &:active, &.active {
      background-color: shade(@primary-color, 10%);
    }
  }

  &.@{prefix-cls-btn}-secondary {
    background-color: #fff;
    color: @primary-color;
    border-color: tint(@primary-color, 40%);

    &:hover {
      background-color: tint(@primary-color, 95%);
      color: tint(@primary-color, 40%);
      border-color: tint(@primary-color, 40%);

      &:focus, &:active, &.active {
        background-color: tint(@primary-color, 95%);
        color: shade(@primary-color, 10%);
        border-color: shade(@primary-color, 10%);
      }
    }

    &:focus, &:active, &.active {
      background-color: tint(@primary-color, 95%);
      color: shade(@primary-color, 10%);
      border-color: shade(@primary-color, 10%);
    }
  }

  &.@{prefix-cls-btn}-tertiary {
    background-color: #fff;
    color: #666;
    border-color: #d9d9d9;

    &:hover {
      background-color: #fff;
      color: tint(@primary-color, 40%);
      border-color: tint(@primary-color, 40%);

      &:focus, &:active, &.active {
        background-color: #fff;
        color: shade(@primary-color, 10%);
        border-color: shade(@primary-color, 10%);
      }
    }

    &:focus, &:active, &.active {
      background-color: #fff;
      color: shade(@primary-color, 10%);
      border-color: shade(@primary-color, 10%);
    }
  }

  &.@{prefix-cls-btn}-text {
    background-color: transparent;
    color: #666;

    &:hover, &:focus, &:active, &.active {
      background-color: tint(@primary-color, 95%);
    }

    &:hover {
      &:focus, &:active, &.active {
        background-color: tint(@primary-color, 95%);
      }
    }
  }

  &.@{prefix-cls-btn}-loading {

    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

    .@{prefix-cls-btn}-loadingWrap {
      span {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 100%;
        animation: bouncedelay 1.4s infinite ease-in-out;
        animation-fill-mode: both;
      }

      .@{prefix-cls}-loading-bounce1 {
        animation-delay: -0.32s;
      }

      .@{prefix-cls}-loading-bounce2 {
        animation-delay: -0.16s;
      }
    }
  }
}

.@{prefix-cls-btn}[disabled], .@{prefix-cls-btn}.disabled {
  .disabled();

  &:hover {
    .disabled();

    &:focus, &:focus {
      .disabled();
    }
  }

  &:focus, &:focus {
    .disabled();
  }
}


// button group
.@{prefix-cls-btn}-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  .clearfix();

  &.@{prefix-cls-btn}-default {
    .@{prefix-cls-btn} {
      padding: 6px 20px;
    }
  }

  &.@{prefix-cls-btn}-large {
    .@{prefix-cls-btn} {
      padding: 8px 20px;
    }
  }

  &.@{prefix-cls-btn}-small {
    .@{prefix-cls-btn} {
      padding: 2px 10px;
    }
  }

  .@{prefix-cls-btn} {
    float: left;
    margin-left: -1px;
    background-color: #fff;
    color: #666;
    border-color: #d9d9d9;

    &:hover {
      background-color: #fff;
      color: tint(@primary-color, 40%);
      border-color: tint(@primary-color, 40%);

      &:focus, &:active, &.active {
        background-color: @primary-color;
        color: #fff;
        border-color: @primary-color;
      }
    }

    &:focus, &:active, &.active {
      background-color: @primary-color;
      color: #fff;
      border-color: @primary-color;
    }

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

      &:hover {
        &+.@{prefix-cls-btn} {
          border-left-color: tint(@primary-color, 40%);
        }
      }
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;

      &:hover {
        &+.@{prefix-cls-btn} {
          border-left-color: tint(@primary-color, 40%);
        }
      }
    }

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

    &[disabled], &.disabled {
      .disabled();

      &:hover {
        .disabled();

        &:focus, &:focus {
          .disabled();
        }
      }

      &:focus, &:focus {
        .disabled();
      }

      &:first-child:not(:last-child) {

        &:hover {
          &+.@{prefix-cls-btn} {
            .disabled();
          }
        }
      }

      &:not(:first-child):not(:last-child) {

        &:hover {
          &+.@{prefix-cls-btn} {
            .disabled();
          }
        }
      }
    }

    // &:not(:first-child):not(.secondary):not(.tertiary):not(.text):not(.disabled):not([disabled]), &.primary:not(:first-child) {
    //   border-left-color: tint(@primary-color, 40%);
    // }
  }
}