@dabapps/roe/src/less/buttons.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

/* @group Mixins */

.create-button-pew () {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
  transition: ease-in-out 0.2s background-color;
  border-radius: @button-border-radius;

  &::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 0;
    padding-bottom: 200%;
    border-radius: 50%;
    transition: 0.5s ease-out transform, 0.5s ease-out opacity;
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 0;
    pointer-events: none;
  }

  &:active:not([disabled]):not(.disabled) {
    &::before {
      transition: none;
      transform: translate(-50%, -50%) scale(0, 0);
      opacity: 1;
    }
  }
}

.create-button-styles (@background: @button-background-default, @color: @button-text-color-light) {
  .create-button-pew();
  background-color: @background;
  color: @color;

  &.link,
  &.hollow {
    color: @background;
  }

  &.hollow {
    border-color: @background;
  }

  &:hover:not([disabled]):not(.disabled) {
    background-color: darken(@background, 5%);
    color: @color;

    &.link,
    &.hollow {
      color: @background;
    }
  }

  &::before {
    background-color: contrast(@background, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
  }

  transition: ease-in-out 0.1s background-color, ease-in-out 0.1s box-shadow;
  box-shadow: @shadow-none;

  &:hover:not([disabled]):not(.disabled) {
    box-shadow: @shadow-inset-subtle;
  }

  &:active:not([disabled]):not(.disabled) {
    box-shadow: @shadow-inset-hard;
  }

  &.block + .button.block {
    margin-top: @margin-base;
  }

  &.block {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  &.large {
    font-size: @font-size-button-large;
    line-height: @line-height-button-large;
    padding: @button-padding-vertical-large @button-padding-horizontal-large;
  }

  &.small {
    font-size: @font-size-button-small;
    line-height: @line-height-button-small;
    padding: @button-padding-vertical-small @button-padding-horizontal-small;
  }

  &.link {
    color: @link-color;
    text-decoration: underline;

    a {
      text-decoration: underline;
    }

    &:hover:not([disabled]):not(.disabled) {
      color: @link-color-hover;

      a {
        text-decoration: underline;
      }
    }
  }

  &.hollow,
  &.link {
    background-color: @button-background-hollow;

    &::before {
      background-color: contrast(@color, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
    }

    &:hover:not([disabled]):not(.disabled) {
      background-color: darken(contrast(@color, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1)), 5%);
      box-shadow: @shadow-none;
    }
  }

  &.hollow {
    color: @background;
    border: @button-border-width solid @background;
    padding: @button-padding-vertical-base - @button-border-width
      @button-padding-horizontal-base - @button-border-width;

    &.large {
      padding: @button-padding-vertical-large - @button-border-width
      @button-padding-horizontal-large - @button-border-width;
    }

    &.small {
      padding: @button-padding-vertical-small - @button-border-width
      @button-padding-horizontal-small - @button-border-width;
    }

    &:hover:not([disabled]):not(.disabled) {
      color: @background;
    }
  }

  &.pill {
    border-radius: @button-border-radius-pill;
  }

  a {
    color: inherit; // lesshint variableValue: false

    &:hover,
    &:active {
      &:not([disabled]):not(.disabled) {
        color: inherit; // lesshint variableValue: false
      }
    }
  }
}

.create-button (@type, @background, @color) {
  &.@{type} {
    .create-button-styles(@background, @color);
  }
}

/* @end Mixins */

.button {
  .button-overrides();
  .create-button-styles();
  .create-button(primary, @primary, @button-text-color-light);
  .create-button(secondary, @secondary, @button-text-color-light);
  .create-button(tertiary, @tertiary, @button-text-color-light);
  .create-button(info, @info, @button-text-color-light);
  .create-button(success, @success, @button-text-color-light);
  .create-button(warning, @warning, @button-text-color-light);
  .create-button(error, @error, @button-text-color-light);
}

/* @group Animations */

@keyframes button-click {
  0 {
    transform: translate(-50%, -50%) scale(0, 0);
    opacity: 0.5;
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5, 0.5);
  }

  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1, 1);
  }
}

/* @end Animations */