SLDS Button HTML Import

slds-button.html

<!--
https://www.lightningdesignsystem.com/components/buttons/
-->
<template id="slds-button-template">
  <style>
    :host {
      /* Examples of custom properties */
      --color-text-link-hover: #005fb2;
      --color-text-link-active: #00396b;
    }
    button {
      margin: 0;
      overflow: visible;
      cursor: pointer;
      position: relative;
      display: inline-block;
      padding: 0;
      background: 0 0;
      background-clip: padding-box;
      border: 0;
      border-radius: .25rem;
      color: #0070d2;
      font-size: inherit;
      line-height: 2.125rem;
      text-decoration: none;
      -webkit-appearance: none;
      white-space: normal;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-appearance: button;
      user-select: none;
      transition: color 50ms linear,background-color 50ms linear;
    }
    button:active,
    button:focus,
    button:hover,
    button:visited {
      text-decoration: none;
    }
    button:focus,
    button:hover {
      color: var(--color-text-link-hover);
    }
    button:active {
      color: var(--color-text-link-active);
    }
    button:focus {
      outline: 0;
      box-shadow: 0 0 3px #0070D2;
    }
    button[disabled] {
      cursor: default;
      color: #d8dde6;
    }

    /**
     * Flavors
     */
    .neutral {
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: center;
      vertical-align: middle;
      border: 1px solid #d8dde6;
      background-color: #fff;
    }
    .neutral:focus,
    .neutral:hover {
      background-color: #f4f6f9;
    }
    .neutral:active {
      background-color: #eef1f6;
    }
    .neutral[disabled] {
      background-color: #fff;
      cursor: default;
    }

    .brand {
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: center;
      vertical-align: middle;
      background-color: #0070d2;
      border: 1px solid #0070d2;
      color: #fff;
    }
    .brand:focus,
    .brand:hover {
      background-color: #005fb2;
      color: #fff;
    }
    .brand:active {
      background-color: #00396b;
    }
    .brand[disabled] {
      background: #e0e5ee;
      border-color: transparent;
      color: #fff;
    }

    .destructive {
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: center;
      vertical-align: middle;
      background-color: #c23934;
      border: 1px solid #c23934;
      color: #fff
    }
    .destructive:focus,
    .destructive:hover {
      background-color: #a61a14;
      color: #fff;
    }
    .destructive:active {
      background-color: #870500;
      border-color: #870500;
    }
    .destructive[disabled] {
      background: #e0e5ee;
      border-color: transparent;
      color: #fff;
    }

    .inverse {
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: center;
      vertical-align: middle;
      border: 1px solid #d8dde6;
      background-color: transparent;
      color: #e0e5ee;
    }
    .inverse:active,
    .inverse:focus,
    .inverse:hover {
      color: #0070d2;
    }
    .inverse:focus {
      outline: 0;
      box-shadow: 0 0 3px #E0E5EE;
    }
    .inverse:focus,
    .inverse:hover {
      background-color: #f4f6f9;
    }
    .inverse:active {
      background-color: #eef1f6;
    }
    .inverse[disabled] {
      background-color: transparent;
      border-color: rgba(255, 255, 255, .15);
      color: rgba(255, 255, 255, .15)
    }

    /**
     * Sizes
     */
    .small {
      line-height: 1.75rem;
      min-height: 2rem;
    }
  </style>
  <button>
    <content></content>
  </button>
</template>

<script>
  var doc = this.document._currentScript.ownerDocument;

  var flavors = [
    'neutral',
    'brand',
    'destructive',
    'inverse'
  ];

  var sizes = [
    'small'
  ];

  var SLDSButtonPrototype = Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var caller = this;
        var template = doc.getElementById('slds-button-template');
        var box = template.content.cloneNode(true);

        this.shadow = this.createShadowRoot();
        this.shadow.appendChild(box);

        var button = this.shadow.querySelector('button');

        // Set (non-custom) attributes
        var attributes = Array.prototype.filter.call(caller.attributes, function(attribute) {
          return attribute.name.indexOf('slds') < 0;
        });

        attributes.forEach(function(attribute) {
          button.setAttribute(attribute.name, attribute.value);
        });

        // Set class names
        var classes = [];

        classes.push(flavors.filter(function(flavor) {
          return flavor === caller.getAttribute('slds-flavor');
        }).join());

        classes.push(sizes.filter(function(size) {
          return size === caller.getAttribute('slds-size');
        }).join());

        button.className = (button.className + ' ' + classes.join(' ')).trim();
      }
    }
  });

  var SLDSButton = document.registerElement('slds-button', {
    prototype: SLDSButtonPrototype
  });

</script>