JSFiddle - React, Tailwind, and code Playground

adv sass button test refactored

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

$buttons:  
  ("btn-primary", #006e2e, darken(#006e2e, 10%), if(lightness(#006e2e) > 50, #000, #fff)), 
  ("btn-secondary", #6e0040, darken(#6e0040, 10%), if(lightness(#6e0040) > 50, #000, #fff)),
  ("btn-text", transparent, #6e0040, #6e0040),
  ("btn-cancel", #d9534f, #d43f3a, if(lightness(#006e2e) > 50, #000, #fff)),
  ("btn-xray", transparent, #006e2e, #006e2e)
;

$btn-types:
  ("default", 7px, 2px, solid, 16px, 10px, 10px),
  ("modal", 3px, 4px, solid, 14px, 5px, 5px, 20px),
  ("cta", 10px, 6px, solid, 18px, 10px, 20px, 25px)
;

@each $type in $btn-types {
  %#{nth($type, 1)} {
    border: {
      @if (nth($type, 2)) { radius: nth($type, 2); };
      @if (nth($type, 3)) { width: nth($type, 3); };
      @if (nth($type, 4)) { style: nth($type, 4); };
    };
    @if (nth($type, 5)) { font-size: nth($type, 5); };
    @if (nth($type, 6)) { margin: nth($type, 6); };
    @if (nth($type, 7)) { padding: nth($type, 7); };
  }
}

@mixin build-btn($type) {
  @each $btn in $buttons {
    &.#{nth($btn, 1)} {
      @extend %#{$type};
      @if $type == 'default' {
        background-color: nth($btn, 2);
        border-color: nth($btn, 3);
        color: nth($btn, 4);
        cursor: pointer;
        transition: all 0.25s;
      
        &:hover {
          background-color: darken(nth($btn, 2), 5%);
        }
        
        &[disabled] {
          opacity: 0.5;
          pointer-events: none;
        }
      }
      
      @if nth($btn, 1) == "btn-text" {
        border: {
          top-style: none;
          right-style: none;
          left-style: none;
          radius: 0;
        }
      }
    }
  }
}

button { @include build-btn("default"); }
.modal button { @include build-btn("modal"); }
.cta button { @include build-btn("cta"); }



/* default styles for page */
/* do not change any of this */
body {
  text-align: center;
}
.modal,
.cta{
  border: 1px solid black;
  margin: 20px;
  padding: 10px;
}