fine-true/lib/button/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2021/06/28/22:39
*/

@keyframes button-shadow-opacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@setShadow: {
  button-shadow-default: var(--fine-button-type-primary-color);
  button-shadow-primary: var(--fine-button-type-primary-color);
  button-shadow-success: var(--fine-button-type-success-color);
  button-shadow-info: var(--fine-button-type-info-color);
  button-shadow-warning: var(--fine-button-type-warning-color);
  button-shadow-danger: var(--fine-button-type-danger-color);
};

.fine-button(@name; @color) {
  @keyframes @name {
    from {
      box-shadow: 0 0 0.5px 0 @color;
    }
    to {
      box-shadow: 0 0 0.5px 5.5px @color;
    }
  }
}

each(@setShadow, {
  .fine-button(@key;@value)
});

.fine-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;
  border-radius: var(--fine-button-border-radius);
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  cursor: pointer;
  color: var(--fine-white);
  white-space: nowrap;
  a {
    color: inherit;
  }
  > *:not([data-shadow]) {
    position: relative;
  }
  /*type theme*/
  &-type-default {
    color: var(--fine-button-type-default-color);
    background-color: var(--fine-button-type-default-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-default-border-color);

    [data-shadow='active'] {
      animation-name: button-shadow-default, button-shadow-opacity;
    }
  }

  &-type-primary {
    background-color: var(--fine-button-type-primary-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-primary-border-color);
    [data-shadow='active'] {
      animation-name: button-shadow-primary, button-shadow-opacity;
    }
  }
  &-type-success {
    background-color: var(--fine-button-type-success-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-success-border-color);
    [data-shadow='active'] {
      animation-name: button-shadow-success, button-shadow-opacity;
    }
  }
  &-type-info {
    background-color: var(--fine-button-type-info-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-info-border-color);
    [data-shadow='active'] {
      animation-name: button-shadow-info, button-shadow-opacity;
    }
  }

  &-type-danger {
    background-color: var(--fine-button-type-danger-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-danger-border-color);
    [data-shadow='active'] {
      animation-name: button-shadow-danger, button-shadow-opacity;
    }
  }

  &-type-warning {
    background-color: var(--fine-button-type-warning-background-color);
    border: var(--fine-button-border-width) solid
      var(--fine-button-type-warning-border-color);
    [data-shadow='active'] {
      animation-name: button-shadow-warning, button-shadow-opacity;
    }
  }
  /*size*/
  &-size-block {
    width: var(--fine-button-size-block-width);
    height: var(--fine-button-size-block-height);
    padding: var(--fine-button-padding-size-block-y)
      var(--fine-button-padding-size-block-x);
    font-size: var(--fine-button-size-block-font-size);
    line-height: var(--fine-button-size-block-line-height);
    .fine-icon {
      font-size: var(--fine-button-size-block-font-size);
    }
  }
  &-size-large {
    min-width: var(--fine-button-size-large-min-width);
    height: var(--fine-button-size-large-height);
    padding: var(--fine-button-padding-size-large-y)
      var(--fine-button-padding-size-large-x);
    font-size: var(--fine-button-size-large-font-size);
    line-height: var(--fine-button-size-large-line-height);
    .fine-icon {
      font-size: var(--fine-button-size-large-font-size);
    }
  }

  &-size-default {
    height: var(--fine-button-size-default-height);
    min-width: var(--fine-button-size-default-min-width);
    padding: var(--fine-button-padding-size-default-y)
      var(--fine-button-padding-size-default-x);
    font-size: var(--fine-button-size-default-font-size);
    line-height: var(--fine-button-size-default-line-height);
    .fine-icon {
      font-size: var(--fine-button-size-default-font-size);
    }
  }

  &-size-small {
    min-width: var(--fine-button-size-small-min-width);
    height: var(--fine-button-size-small-height);
    padding: var(--fine-button-padding-size-small-y)
      var(--fine-button-padding-size-small-x);
    font-size: var(--fine-button-size-small-font-size);
    line-height: var(--fine-button-size-small-line-height);
    .fine-icon {
      font-size: var(--fine-button-size-small-font-size);
    }
  }

  &-disabled {
    opacity: var(--fine-button-disabled-opacity);
    cursor: not-allowed;
    .fine-icon {
      cursor: not-allowed;
    }
  }

  &-plain {
    background-color: var(--fine-button-plain-background-color);

    &.fine-button-type-primary {
      color: var(--fine-button-type-primary-background-color);
    }
    &.fine-button-type-success {
      color: var(--fine-button-type-success-background-color);
    }
    &.fine-button-type-info {
      color: var(--fine-button-type-info-background-color);
    }

    &.fine-button-type-danger {
      color: var(--fine-button-type-danger-background-color);
    }

    &.fine-button-type-warning {
      color: var(--fine-button-type-warning-background-color);
    }
  }
  &-hairline {
    border-width: 0;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border-width: 1px;
      border-style: solid;
      border-color: inherit;
      transform: scale(0.5);
      border-radius: calc(var(--fine-button-border-radius) * 2);
    }

    &.fine-button-round::after {
      border-radius: var(--fine-button-round-border-radius);
    }

    &.fine-button-square::after {
      border-radius: 0;
    }
  }
  &-dashed {
    border-style: dashed;
  }
  &-round {
    border-radius: var(--fine-button-round-border-radius);
  }

  &-square {
    border-radius: 0;
  }
}