Contents

//
// Buttons
//

.rf-btn,
%rf-btn {
  border: 1px solid transparent;
  border-radius: $border-radius;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  height: 32px;
  line-height: 30px;
  padding: 0 15px;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;

  @include hocus {
    outline: none;
  }
}

.rf-btn--primary,
%rf-btn--primary {
  background-color: $blue-bright;
  border-color: $blue-bright;
  color: $white;

  @include hocus {
    background-color: $navy;
    border-color: $navy;
    color: $white;
    text-decoration: none;
  }
}

.rf-btn--secondary,
%rf-btn--secondary {
  background-color: $white;
  border-color: $cloudy;
  color: $charcoal;

  @include hocus {
    background-color: $prewhite;
    color: $charcoal;
    text-decoration: none;
  }
}

.rf-btn--small {
  min-width: 100px;
}

.rf-btn--large,
%rf-btn--large {
  font-size: 18px;
  height:  44px;
  min-width: 90px;
}

.rf-btn--xs {
  font-size: 11px;
  height: 24px;
  line-height: 14px;
  padding: 0px 6px;
}

// Disabled

.rf-btn--disabled,
.rf-btn[disabled] {
  cursor: not-allowed;
  opacity: .2;
  pointer-events: none;
}

// Side by side buttons

.rf-btn + .rf-btn {
  margin-left: 4px;
}


//
// ERROR BUTTON (should not click)
//

.rf-btn--error {
  @include hocus() {
    background-color: $red;
    border: 1px solid $red;
    color: $white;
  }
}


//
// LIGHT BUTTON
// For use on top of dark backgrounds
//

.rf-btn--light {
    background-color: rgba(255,255,255, .3);
    border: 1px solid $white;
    color: $white;

    @include hocus() {
      background-color: transparent;
      border-color: $white;
      color: $white;
    }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
ethosstyles-0.1.3	app/assets/stylesheets/components/_buttons.scss