Current File : /home/virtualki/22346/wp-content/themes/Boldtheme/sass/elements/_buttons.scss

/*------------------------------------*\
  Elements > Buttons
\*------------------------------------*/

$btn-bg:       $color-brand;
$btn-bg-hover: #238CF6;

.c-btn,
input[type='submit'] {
  display: inline-block;
  padding: half($base-spacing-unit) double($base-spacing-unit);
  border-radius: half(quarter($base-spacing-unit));
  cursor: pointer;
  transition: $global-transition;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  border: 0;
  color: $color-white;
  background-color: $btn-bg;
  font-size: $font-size-medium;
  font-family: $font-sans-serif;

  @include attention() {
    color: $color-white;
    text-decoration: none;
    background-color: $btn-bg-hover;
  }

  &.outline {
    border: 1px solid $color-border;
    color: $color-text;
    background-color: $color-white;

    @include attention() {
      background-color: $bg-gray;
    }
  }

  &.tiny {
    padding: quarter($base-spacing-unit) $base-spacing-unit;
    font-size: $font-size-tiny;
    line-height: $line-height-tiny;
  }
}

.c-btn {
  &--disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  &--full {
    width: 100%;
  }

  &--small {
    padding: quarter($base-spacing-unit) $base-spacing-unit;
  }

  &--loading {
    position: relative;
    padding-right: triple($base-spacing-unit);

    &:after {
      position: absolute;
      top: $base-spacing-unit;
      right: $base-spacing-unit;
      content: '';
      display: block;
      height: $base-spacing-unit;
      width: $base-spacing-unit;
      border: 2px solid $color-white;
      border-radius: 100%;
      border-right-color: transparent;
      border-top-color: transparent;
      animation: spinAround 500ms infinite linear;
    }
  }
}