<div class="section head">
  <div class="corset">
    <h1>Splited and divided Buttons</h1>
  </div>
</div>

<div class="section dark flatted">
  <div class="corset">
    <h4>dependency:</h4> 
    <code>@import "magic/content/buttons";</code><br/>
    <code>@import "magic/content/buttons_nice";</code>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    
    
    <div class="btn btn-success btn-lg btn-splited">
      <div class="text">
        .btn-splited
      </div>
      <div class="icn">
        <i class="magicons-caret-right"></i>
      </div>
    </div>
    
    <div class="btn btn-success btn-blank btn-lg btn-splited">
      <div class="text">
        .btn-splited.btn-blank
      </div>
      <div class="icn">
        <i class="magicons-caret-right"></i>
      </div>
    </div>
    
    <div class="btn btn-default btn-lg btn-block btn-splited half">
      <div class="icn">
        <i class="olicons-message-full"></i>
      </div>
      <div class="text">
        .btn-splited.half
      </div>
    </div>
    <div class="btn btn-default btn-blank btn-lg btn-block btn-splited half">
      <div class="icn">
        <i class="olicons-message-full"></i>
      </div>
      <div class="text">
        .btn-splited.half
      </div>
    </div>
    
    <div class="btn btn-primary btn-lg btn-block btn-divided">
      <div class="icn">
        <i class="olicons-overview"></i>
      </div>
      <div class="text">
        .btn-divided
      </div>
    </div>
    <div class="btn btn-primary btn-blank btn-lg btn-block btn-divided">
      <div class="icn">
        <i class="olicons-overview"></i>
      </div>
      <div class="text">
        .btn-divided.btn-blank
      </div>
    </div>
    
    <div class="btn btn-warning btn-block btn-divided half">
      <div class="icn">
        <i class="olicons-overview"></i>
      </div>
      <div class="text">
        .btn-divided.half
      </div>
    </div>
    
    <div class="btn btn-danger btn-sm btn-divided">
      <div class="icn">
        <i class="olicons-contact-data"></i>
      </div>
      <div class="text">
        .btn-divided
      </div>
      <div class="icn">
        <i class="olicons-male"></i>
      </div>
    </div>
    
    <div class="btn btn-danger btn-blank btn-sm btn-divided">
      <div class="icn">
        <i class="olicons-contact-data"></i>
      </div>
      <div class="text">
        .btn-divided
      </div>
      <div class="icn">
        <i class="olicons-male"></i>
      </div>
    </div>
    
    <div class="btn btn-default btn-xs btn-splited">
      <div class="icn">
        <i class="olicons-ok"></i>
      </div>
      <div class="text">
        .btn-splited
      </div>
      <div class="icn">
        <i class="olicons-close"></i>
      </div>
    </div>
    
  </div>
</div>


<div class="section flat-bottom hard-top">
  <div class="corset">
    <h2>Social Buttons</h2>
  </div>
</div>

<div class="section">
  <div class="corset">
    <div class="row">
      <div class="col-md-6">
        <h4 class="center_text">Flat</h4>
        <hr/>
        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
        <% for btn, i in buttons: %>
          <div class="btn btn-<%= btn %> btn-lg btn-divided">
            <div class="icn">
              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
            </div>
            <div class="text">
              .btn-<%= btn %>
            </div>
          </div>
        <% end%>
      </div>
      <div class="col-md-6">
        <h4 class="center_text">Nice</h4>
        <hr/>
        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
        <% for btn, i in buttons: %>
          <div class="btn btn-<%= btn %>-nice btn-lg btn-divided">
            <div class="icn">
              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
            </div>
            <div class="text">
              .btn-<%= btn %>-nice
            </div>
          </div>
        <% end%>
      </div>
    </div>
  </div>
</div>

<div class="section shine-top">
  <div class="corset">
    <p class="loud">splited and divided buttons are nice little helper for buttons that contain an icon</p>
    <p class="loud"><strong>Be carefull! .btn-splited & .btn-divided are always block elements.</strong></p>
    <pre>
      <code>
  &lt;div class=&quot;btn btn-success btn-lg btn-splited&quot;&gt;<br/>    &lt;span&gt;.btn-splited&lt;/span&gt;<br/>    &lt;span class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;magicons-caret-right&quot;&gt;&lt;/i&gt;<br/>    &lt;/span&gt;<br/>  &lt;/div&gt;<br/>  <br/>  <br/>  &lt;div class=&quot;btn btn-primary btn-lg btn-divided&quot;&gt;<br/>    &lt;div class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;icomoon-globe&quot;&gt;&lt;/i&gt;<br/>    &lt;/div&gt;<br/>    &lt;div&gt;<br/>      .btn-divided<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>
      </code>
    </pre>
    <p class="loud">tag of inner element doesn't matter just the element conaining the icon need class <strong>.icn</strong></p>
  </div>
</div>

<div class="section flat-bottom hard-top">
  <div class="corset">
    <h2>Available Colors</h2>
  </div>
</div>

<div class="section">
  <div class="corset">
    <div class="row">
      <% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %>
      <% scl_btns = ["facebook", "google", "paypal", "twitter"] %>
      <% brnd_btns = ["brand"] %>
      <% cstm_btns = ["one", "two", "three"] %>
      
      <% buttons = { default: dflt_btns, socials: scl_btns, brand: brnd_btns, custom: cstm_btns } %>
      <div class="col-md-4">
        <h4 class="center_text">Flat</h4>
        <% for key, value of buttons: %>
          <hr/>
          <h5 class="center_text"><%= key %></h5>
          <% for btn, i in value: %>
            <div class="btn btn-<%= btn %> btn-lg btn-block">
              .btn-<%= btn %>
            </div>
          <% end %>
        <% end %>
      </div>
      <div class="col-md-4">
        <h4 class="center_text">Blank</h4>
        <% for key, value of buttons: %>
          <hr/>
          <h5 class="center_text"><%= key %></h5>
          <% for btn, i in value: %>
            <div class="btn btn-<%= btn %> btn-blank btn-lg btn-block">
              .btn-<%= btn %> + .btn-blank
            </div>
          <% end %>
        <% end %>
      </div>
      
      <div class="col-md-4">
        <h4 class="center_text">Nice</h4>
        <% for key, value of buttons: %>
          <hr/>
          <h5 class="center_text"><%= key %></h5>
          <% for btn, i in value: %>
            <div class="btn btn-<%= btn %>-nice btn-lg btn-block">
              .btn-<%= btn %>-nice
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>

<br/>
<br/>
<br/>