JSFiddle - React, Tailwind, and code Playground

adv sass button test

by Travis Almand

HTML

<p>these are plain body buttons</p>
<button class="btn-primary">primary button</button>
<button class="btn-secondary">secondary button</button>
<button class="btn-text">text button</button>
<button class="btn-cancel">cancel button</button>
<button class="btn-xray">xray button</button>

<div class="modal">
  <p>these are modal buttons</p>
  <button class="btn-primary">primary button</button>
  <button class="btn-secondary">secondary button</button>
  <button class="btn-text">text button</button>
  <button class="btn-cancel">cancel button</button>
  <button class="btn-xray">xray button</button>
</div>

<div class="cta">
  <p>these are cta buttons</p>
  <button class="btn-primary">primary button</button>
  <button class="btn-secondary">secondary button</button>
  <button class="btn-text">text button</button>
  <button class="btn-cancel">cancel button</button>
  <button class="btn-xray">xray button</button>
</div>

<p>these are disabled buttons</p>
<button class="btn-primary" disabled>primary button</button>
<button class="btn-secondary" disabled>secondary button</button>
<button class="btn-text" disabled>text button</button>
<button class="btn-cancel" disabled>cancel button</button>
<button class="btn-xray" disabled>xray button</button>

SCSS

@function set-text-color($color) {
  @return if(lightness($color) > 50, #000, #fff);
}

$primary-color: #006e2e;
$secondary-color: complement($primary-color);

$btn-list: "primary" "secondary" "text" "cancel" "xray";

$btn-colors: (
  primary-color: set-text-color($primary-color),
  primary-background: $primary-color,
  primary-border: darken($primary-color, 10%),
  secondary-color: set-text-color($secondary-color),
  secondary-background: $secondary-color,
  secondary-border: darken($secondary-color, 10%),
  text-color: $secondary-color,
  text-background: transparent,
  text-border: $secondary-color,
  cancel-color: set-text-color($primary-color),
  cancel-background: #d9534f,
  cancel-border: #d43f3a,
  xray-color: $primary-color,
  xray-background: #fff,
  xray-border: $primary-color
);

%button-default {
  border: {
    radius: 7px;
    width: 2px;
    style: solid;
  };
  font-size: 16px;
  margin: 10px;
  padding: 10px;
  transition: all 0.25s;
}
%button-modal {
  border: {
    radius: 3px;
    width: 4px;
    style: solid;
  };
  font-size: 14px;
  margin: 5px;
  padding: 5px 20px;
}
%button-cta {
  border: {
    radius: 10px;
    width: 6px;
    style: solid;
  }
  font-size: 18px;
  margin: 10px;
  padding: 20px 25px;
}

@mixin build-btn {
  @each $btn in $btn-list {
    &.btn-#{$btn} {
      @if index(nth(&, 1), ".modal") {
        @extend %button-modal;
      } @else if index(nth(&, 1), ".cta") {
        @extend %button-cta;
      } @else {
        @extend %button-default;
        background-color: map-get($btn-colors, #{$btn}-background);
        border-color: map-get($btn-colors, #{$btn}-border);
        color: map-get($btn-colors, #{$btn}-color);
        cursor: pointer;
      }
      
      &:hover {
        background-color: darken(map-get($btn-colors, #{$btn}-background), 5%);
      }
      
      &[disabled] {
        opacity: 0.5;
        pointer-events: none;
      }
      
      @if nth($btn, 1) == "text" {
        border: {
         ...