<div class="padding">
  <p>Modal style</p>
  <div class="row">
  	<div class="col-sm-6">
  	  <div class="modal-content box-shadow-md m-b">
  			<div class="modal-header">
  			    <h5 class="modal-title">Modal!</h5>
  			</div>
  			<div class="modal-body">
  			    <p>Modal content</p>
  			</div>
  			<div class="modal-footer">                  
  			    <button class="btn dark-white">Cancel</button>
  			    <button class="btn primary">OK</button>
  			</div>
  		</div>
  	</div>
  	<div class="col-sm-6">
  	    <div class="modal-content box-shadow-md black lt m-b">
  			<div class="modal-header">
  			    <h5 class="modal-title">Modal!</h5>
  			</div>
  			<div class="modal-body">
  			    <p>Modal content</p>
  			</div>
  			<div class="modal-footer">                  
  			    <button class="btn white">Cancel</button>
  			    <button class="btn primary">OK</button>
  			</div>
  		</div>
  	</div>
  </div>
  <p>Modal size</p>
  <div class="m-b">
  	<button class="btn white" data-toggle="modal" data-target="#m">Normal</button>
  	<button class="btn white" data-toggle="modal" data-target="#m-sm">Small size</button>
  	<button class="btn white" data-toggle="modal" data-target="#m-md">Large size</button>
  </div>

  <p>Without Backdrop</p>
  <div class="m-b">
  	<button class="btn white" data-toggle="modal" data-target="#m-b">Without</button>
  	<button class="btn white" data-toggle="modal" data-target="#m-b-w">white style</button>
  	<button class="btn white" data-toggle="modal" data-target="#m-b-b">Dark style</button>
  </div>

  <p>Animation</p>
  <div class="m-b btn-groups">
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-f">Fade</button>

  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-right-big" ui-target="#animate">Right big</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-left-big" ui-target="#animate">Left big</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-up-big" ui-target="#animate">Up big</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-down-big" ui-target="#animate">Down big</button>
  	
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-right" ui-target="#animate">Right</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-left" ui-target="#animate">Left</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-up" ui-target="#animate">Up</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="fade-down" ui-target="#animate">Down</button>


  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="flip-x" ui-target="#animate">Flip x</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="flip-y" ui-target="#animate">Flip y</button>


  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="zoom" ui-target="#animate">Zoom</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="roll" ui-target="#animate">Roll</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="bounce" ui-target="#animate">Bounce</button>
  	<button class="btn btn-sm white" data-toggle="modal" data-target="#m-a-a" ui-toggle-class="rotate" ui-target="#animate">Rotate</button>
  </div>
  <p>Aside</p>
  <div class="m-b">
  	<button class="btn white" data-toggle="modal" data-target="#user" ui-toggle-class="modal-open-aside" ui-target="body">Right</button>
  	<button class="btn white" data-toggle="modal" data-target="#user-l" ui-toggle-class="modal-open-aside" ui-target="body">Left</button>
  	<button class="btn white" data-toggle="modal" data-target="#top">Top</button>
  	<button class="btn white" data-toggle="modal" data-target="#bottom">Bottom</button>
  </div>
</div>
<!-- .modal -->
<div id="m" class="modal" data-backdrop="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->

<!-- small modal -->
<div id="m-sm" class="modal" data-backdrop="true">
  <div class="row-col h-v">
    <div class="row-cell v-m">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
          	<h5 class="modal-title">Small modal</h5>
          </div>
          <div class="modal-body text-center p-lg">
            <p>Are you sure to execute this action?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
            <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
          </div>
        </div><!-- /.modal-content -->
      </div>
    </div>
  </div>
</div>
<!-- / .modal -->

<!-- large modal -->
<div id="m-md" class="modal" data-backdrop="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Large modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->

<!-- .modal -->
<div id="m-b" class="modal" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->


<!-- .modal -->
<div id="m-b-w" class="modal white-overlay" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content box-shadow-z3">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->


<!-- .modal -->
<div id="m-b-b" class="modal black-overlay" data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->


<!-- .modal -->
<div id="m-a-f" class="modal fade" data-backdrop="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->


<!-- .modal -->
<div id="m-a-a" class="modal fade animate" data-backdrop="true">
  <div class="modal-dialog" id="animate">
    <div class="modal-content">
      <div class="modal-header">
      	<h5 class="modal-title">Modal</h5>
      </div>
      <div class="modal-body text-center p-lg">
        <p>Are you sure to execute this action?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">No</button>
        <button type="button" class="btn danger p-x-md" data-dismiss="modal">Yes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
</div>
<!-- / .modal -->

<!-- right -->
<div class="modal inactive" id="user" data-backdrop="false">
  <div class="right w-xl white b-l">
    <div ui-include="'../views/blocks/modal.user.html'"></div>
  </div>
</div>

<div class="modal inactive" id="chat" data-backdrop="false">
  <div class="right w-xxl white b-l">
    <div ui-include="'../views/blocks/modal.chat.html'"></div>
  </div>
</div>

<!-- left -->
<div class="modal" id="user-l" data-backdrop="false">
  <div class="left w-xl white b-r">
    <div ui-include="'../views/blocks/modal.user.html'"></div>
  </div>
</div>

<!-- top -->
<div class="modal" id="top">
  <div class="top white b-b" style="height:240px">
    <div ui-include="'../views/blocks/modal.user.html'"></div>
  </div>
</div>

<!-- top -->
<div class="modal" id="bottom">
  <div class="bottom white b-t" style="height:240px">
    <div ui-include="'../views/blocks/modal.user.html'"></div>
  </div>
</div>
