{% set active_page = 'Buttons' -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
  <style>
    .portal-fab-row {
      display: flex;
    }
    .portal-fab-row .mdc-fab {
      margin-top: 16px;
    }
    .mdc-button {
      margin-top: 16px;
      margin-bottom: 16px;
    }
    .portal-theme-color-swatch {
      -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      display: inline-block;
      box-sizing: border-box;
      width: 150px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-top: 16px;
      margin-bottom: 16px;
      border-radius: 4px;
    }
    .portal-pages__header__button {
      margin-top: 0;
      margin-bottom: 150px;
    }
    .portal-theme-bg--low-luminance {
      background-color: #3e2723;
    }
    .portal-theme-bg--low-luminance-light {
      background-color: #996057;
    }
    .portal-theme-bg--low-luminance-dark {
      background-color: #6c443d;
    }
    .portal-theme-bg--high-luminance {
      background-color: #fff8e1;
    }
    .portal-theme-bg--high-luminance-light {
      background-color: #ffe79a;
    }
    .portal-theme-bg--high-luminance-dark {
      background-color: #ffd752;
    }
    fieldset {
      border: 1px solid rgba(0,0,0,0.04);
      box-shadow: 0px 2px 4px rgba(0,0,0,0.04);
      margin-top: 24px;
    }
    fieldset > div {
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <button class="mdc-fab material-icons portal-pages__header__button" aria-label="Favorite">
      <span class="mdc-fab__icon">
        favorite_border
      </span>
    </button>
  </div>
  <section class="portal-pages__content">
    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-1-desktop"></div>
        <div class="mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone portal-pages__content-inner">
          <h3 class="portal-pages__heading">Buttons</h3>
          <p class="mdc-typography--body1">Buttons communicate the action that will occur when the user touches them.</p>
          <p class="mdc-typography--body1">Material buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types. There are three standard types of buttons:</p>
          <ul class="portal-list mdc-typography--body1">
            <li><strong>Floating action button:</strong> A circular material button that lifts and displays an ink reaction on press.</li>
            <li><strong>Raised button:</strong>  A typically rectangular material button that lifts and displays ink reactions on press.</li>
            <li><strong>Unelevated button:</strong>  A button made of ink that displays ink reactions on press but does not lift.</li>
          </ul>

          <fieldset>
            <legend class="mdc-typography--subheading2">Enabled</legend>
            <div>
              <button class="mdc-button">
                Text
              </button>
              <button class="mdc-button mdc-button--raised">
                Raised
              </button>
              <button class="mdc-button mdc-button--unelevated">
                Unelevated
              </button>
              <button class="mdc-button mdc-button--stroked">
                Stroked
              </button>
            </div>
          </fieldset><br>
          <fieldset disabled>
            <legend class="mdc-typography--subheading2">Disabled</legend>
            <div>
              <button class="mdc-button">
                Text
              </button>
              <button class="mdc-button mdc-button--raised">
                Raised
              </button>
              <button class="mdc-button mdc-button--unelevated">
                Unelevated
              </button>
              <button class="mdc-button mdc-button--stroked">
                Stroked
              </button>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Raised Button</legend>
            <div>
              <button class="mdc-button mdc-button--raised">
                Baseline
              </button>
              <button class="mdc-button mdc-button--raised mdc-button--compact">
                Compact
              </button>
              <button class="mdc-button mdc-button--raised mdc-button--dense">
                Dense
              </button>
              <button class="mdc-button mdc-button--raised mdc-theme--secondary-bg">
                Secondary
              </button>
              <button class="mdc-button mdc-button--raised">
                <i class="material-icons mdc-button__icon">favorite</i>
                Icon
              </button>
              <a href="javascript:void(0)" class="mdc-button mdc-button--raised">
                Link
              </a>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Unelevated Button</legend>
            <div>
              <button class="mdc-button mdc-button--unelevated">
                Baseline
              </button>
              <button class="mdc-button mdc-button--unelevated mdc-button--compact">
                Compact
              </button>
              <button class="mdc-button mdc-button--unelevated mdc-button--dense">
                Dense
              </button>
              <button class="mdc-button mdc-button--unelevated mdc-theme--secondary-bg">
                Secondary
              </button>
              <button class="mdc-button mdc-button--unelevated">
                <i class="material-icons mdc-button__icon">favorite</i>
                Icon
              </button>
              <a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
                Link
              </a>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Stroked Button</legend>
            <div>
              <button class="mdc-button mdc-button--stroked">
                Baseline
              </button>
              <button class="mdc-button mdc-button--stroked mdc-button--compact">
                Compact
              </button>
              <button class="mdc-button mdc-button--stroked mdc-button--dense">
                Dense
              </button>
              <button class="mdc-button mdc-button--stroked secondary-stroked-button">
                Secondary
              </button>
              <button class="mdc-button mdc-button--stroked">
                <i class="material-icons mdc-button__icon">favorite</i>
                Icon
              </button>
              <a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
                Link
              </a>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Floating Action Button (FAB)</legend>
            <div class="portal-fab-row">
              <figure>
                <figcaption>
                  Default
                  <div class="mdc-typography--body1">Secondary theme color</div>
                </figcaption>
                <button class="mdc-fab material-icons" aria-label="Favorite">
                  <span class="mdc-fab__icon">
                    favorite_border
                  </span>
                </button>
              </figure>
              <figure>
                <figcaption>
                  Mini
                  <div class="mdc-typography--body1"><code>mdc-fab--mini</code></div>
                </figcaption>
                <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
                  <span class="mdc-fab__icon">
                    favorite_border
                  </span>
                </button>
              </figure>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Theme colors as text</legend>
            <div>
              <div class="portal-theme-color-swatch mdc-theme--primary mdc-typography--body2">Primary</div>
              <div class="portal-theme-color-swatch mdc-theme--primary-light mdc-typography--body2">Primary Light</div>
              <div class="portal-theme-color-swatch mdc-theme--primary-dark mdc-typography--body2">Primary Dark</div>
            </div>
            <div>
              <div class="portal-theme-color-swatch mdc-theme--secondary mdc-typography--body2">Secondary</div>
              <div class="portal-theme-color-swatch mdc-theme--secondary-light mdc-typography--body2">Secondary Light</div>
              <div class="portal-theme-color-swatch mdc-theme--secondary-dark mdc-typography--body2">Secondary Dark</div>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Theme colors as background</legend>
            <div>
              <div class="portal-theme-color-swatch mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
              <div class="portal-theme-color-swatch mdc-theme--primary-light-bg mdc-theme--text-primary-on-primary-light">Primary Light</div>
              <div class="portal-theme-color-swatch mdc-theme--primary-dark-bg mdc-theme--text-primary-on-primary-dark">Primary Dark</div>
            </div>
            <div>
              <div class="portal-theme-color-swatch mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
              <div class="portal-theme-color-swatch mdc-theme--secondary-light-bg mdc-theme--text-primary-on-secondary-light">Secondary Light</div>
              <div class="portal-theme-color-swatch mdc-theme--secondary-dark-bg mdc-theme--text-primary-on-secondary-dark">Secondary Dark</div>
            </div>
            <div>
              <div class="portal-theme-color-swatch mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
            </div>
          </fieldset><br>
          <fieldset>
            <legend class="mdc-typography--subheading2">Light and dark tonal variants for extreme input luminance</legend>
            <div>
              <div class="portal-theme-color-swatch portal-theme-bg--low-luminance mdc-theme--text-primary-on-dark">Low Luminance</div>
              <div class="portal-theme-color-swatch portal-theme-bg--low-luminance-light mdc-theme--text-primary-on-dark">Light Variant</div>
              <div class="portal-theme-color-swatch portal-theme-bg--low-luminance-dark mdc-theme--text-primary-on-dark">Dark Variant</div>
            </div>
            <div>
              <div class="portal-theme-color-swatch portal-theme-bg--high-luminance mdc-theme--text-primary-on-light">High Luminance</div>
              <div class="portal-theme-color-swatch portal-theme-bg--high-luminance-light mdc-theme--text-primary-on-light">Light Variant</div>
              <div class="portal-theme-color-swatch portal-theme-bg--high-luminance-dark mdc-theme--text-primary-on-light">Dark Variant</div>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}{% endblock %}