{% set active_page = 'Checkbox' -%}

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

{% block styles %}
  <style>
    .portal-pages__header__form {
      margin-top: 0;
      margin-bottom: 150px;
    }
    .portal-checkbox--custom-all::before, .portal-checkbox--custom-all::after {
      background-color: #f44336;
    }
    .portal-checkbox--custom-all .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
      border-color: #f44336;
      background-color: rgba(244, 67, 54, 0.25);
    }
    .portal-checkbox--custom-all .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .portal-checkbox--custom-all .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
      border-color: #f44336;
      background-color: #f44336;
    }
    .portal-checkbox--custom-stroke-and-fill .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
      border-color: #2196f3;
      background-color: transparent;
    }
    .portal-checkbox--custom-stroke-and-fill .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .portal-checkbox--custom-stroke-and-fill .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
      border-color: #9c27b0;
      background-color: #9c27b0;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div class="mdc-form-field portal-pages__header__form">
      <div class="mdc-checkbox">
        <input type="checkbox"
                id="my-checkbox"
                class="mdc-checkbox__native-control"/>
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark"
                viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path"
                  fill="none"
                  stroke="white"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      </div>

      <label for="my-checkbox">Check me out</label>
    </div>
  </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">Checkbox</h3>
          <p class="mdc-typography--body1">Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.</p>
          <p class="mdc-typography--body1">The MDC Checkbox component is a spec-aligned checkbox component adhering to the <a target="_blank" href="https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox">Material Design checkbox requirements</a>. It works without JavaScript with basic functionality for all states. If you use the JavaScript object for a checkbox, it will add more intricate animation effects when switching between states.</p>

          <h3 class="portal-pages__subheading">
            Light Theme
          </h3>
          <div>
            <div class="mdc-form-field">
              <div class="mdc-checkbox">
                <input type="checkbox"
                        id="basic-checkbox"
                        class="mdc-checkbox__native-control"/>
                <div class="mdc-checkbox__background">
                  <svg class="mdc-checkbox__checkmark"
                        viewBox="0 0 24 24">
                    <path class="mdc-checkbox__checkmark-path"
                          fill="none"
                          stroke="white"
                          d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                  </svg>
                  <div class="mdc-checkbox__mixedmark"></div>
                </div>
              </div>
              <label for="basic-checkbox">Default checkbox</label>
            </div>
          </div>
          <div>
            <div class="mdc-form-field">
              <div class="mdc-checkbox mdc-checkbox--disabled">
                <input type="checkbox"
                      id="basic-disabled-checkbox"
                      class="mdc-checkbox__native-control"
                      disabled />
                <div class="mdc-checkbox__background">
                  <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
                    <path class="mdc-checkbox__checkmark-path"
                          fill="none"
                          stroke="white"
                          d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                  </svg>
                  <div class="mdc-checkbox__mixedmark"></div>
                </div>
              </div>
              <label for="basic-disabled-checkbox">Disabled checkbox</label>
            </div>
          </div>
          <div>
            <div class="mdc-form-field">
              <div class="mdc-checkbox">
                <input type="checkbox"
                        id="basic-indeterminate-checkbox"
                        class="mdc-checkbox__native-control"/>
                <div class="mdc-checkbox__background">
                  <svg class="mdc-checkbox__checkmark"
                        viewBox="0 0 24 24">
                    <path class="mdc-checkbox__checkmark-path"
                          fill="none"
                          stroke="white"
                          d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                  </svg>
                  <div class="mdc-checkbox__mixedmark"></div>
                </div>
              </div>
              <label for="basic-indeterminate-checkbox">Indeterminate checkbox</label>
            </div>
            <div>
              <div class="mdc-form-field">
                <div class="mdc-checkbox portal-checkbox--custom-all">
                  <input type="checkbox"
                          id="basic-custom-checkbox-all"
                          class="mdc-checkbox__native-control" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark"
                          viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path"
                            fill="none"
                            stroke="white"
                            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                </div>
                <label for="basic-custom-checkbox-all">Custom colored checkbox (stroke, fill, ripple, and focus)</label>
              </div>
            </div>
            <div>
              <div class="mdc-form-field">
                <div class="mdc-checkbox portal-checkbox--custom-stroke-and-fill">
                  <input type="checkbox"
                          id="basic-custom-checkbox-stroke-and-fill"
                          class="mdc-checkbox__native-control" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark"
                          viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path"
                            fill="none"
                            stroke="white"
                            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                </div>
                <label for="basic-custom-checkbox-stroke-and-fill">Custom colored checkbox (stroke and fill only)</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <script type="text/javascript">
    document.getElementById('basic-indeterminate-checkbox').indeterminate = true;
  </script>
{% endblock %}