{% extends "layouts/base.html" %}

{% block title %} Buttons {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
  <div class="yoo-uikits-heading">
    <h2 class="yoo-uikits-title">Buttons</h2>
  </div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Button tags</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#button-tags"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="button-tags">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">General Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">&gt;</span>Light<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/button&gt;</span> 
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-disabled"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/button&gt;</span>
</code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="kit-btns">
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-secondary">Secondary</button>
              <button type="button" class="btn btn-success">Success</button>
              <button type="button" class="btn btn-danger">Danger</button>
              <button type="button" class="btn btn-warning">Warning</button>
              <button type="button" class="btn btn-info">Info</button>
              <button type="button" class="btn btn-light">Light</button>
              <button type="button" class="btn btn-dark">Dark</button>
              <button type="button" class="btn btn-disabled" disabled>Disabled</button>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Outline buttons</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#outline-tags"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="outline-tags">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Outline buttons</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(98, 0, 238, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(3, 218, 198, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 200, 83, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(213, 0, 0, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(255, 214, 0, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 122, 255, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 0, 0, 0.3)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">&gt;</span>Light<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 0, 0, 0.3"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-disabled"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/button&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="kit-btns">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-secondary">Secondary</button>
              <button type="button" class="btn btn-outline-success">Success</button>
              <button type="button" class="btn btn-outline-danger">Danger</button>
              <button type="button" class="btn btn-outline-warning">Warning</button>
              <button type="button" class="btn btn-outline-info">Info</button>
              <button type="button" class="btn btn-outline-light">Light</button>
              <button type="button" class="btn btn-outline-dark">Dark</button>
              <button type="button" class="btn btn-outline-disabled" disabled>Disabled</button>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Large buttons</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#large-btn"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="large-btn">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Large buttons</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="kit-btns">
              <button type="button" class="btn btn-primary btn-lg">Large button</button>
              <button type="button" class="btn btn-secondary btn-lg">Large button</button>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Small buttons</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#small-btn"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="small-btn">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Small buttons</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="kit-btns">
              <button type="button" class="btn btn-primary btn-sm">Small button</button>
              <button type="button" class="btn btn-secondary btn-sm">Small button</button>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Block level button</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#block-level-button"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="block-level-button">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Block level button</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="kit-btns">
              <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
              <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
      <div class="yoo-height-b30 yoo-height-lg-b30"></div>
      <div class="yoo-card yoo-style1">
        <div class="yoo-card-heading">
          <div class="yoo-card-heading-left">
            <h2 class="yoo-card-title">Checkbox and radio buttons</h2>
          </div>
          <div class="yoo-card-heading-right">
            <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#checkbox-radio-buttons"><ion-icon name="code"></ion-icon></button>
            <!-- Code Modal -->
            <div class="modal fade" id="checkbox-radio-buttons">
              <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Checkbox and radio buttons</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <ion-icon name="close"></ion-icon>
                    </button>
                  </div>
                  <div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary active"</span><span class="nt">&gt;</span> 
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checked
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<br>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">&gt;</span> Active
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yoo-card-body">
          <div class="yoo-padd-lr-20 yoo-alert-wrap">
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            <div class="btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-primary active">
                <input type="checkbox" checked > Checked
              </label>
            </div>
            <div class="yoo-height-b10 yoo-height-lg-b10"></div>
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-primary active">
                <input type="radio" name="options" id="option1"  checked> Active
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" name="options" id="option2" > Radio
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" name="options" id="option3" > Radio
              </label>
            </div>
            <div class="yoo-height-b20 yoo-height-lg-b20"></div>
          </div>
        </div>
      </div><!-- .yoo-card -->
  </div>
</div>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}