<h2 class="toc">Overlay</h2>
<p>
  The <code>.overlay-black</code> and <code>.overlay-white</code> classes
  overlay a light or dark layer on top of a relatively positioned element.
</p>

{% apply view_source %}
<div class="bg-primary d-inline-block position-relative text-white">
  <svg width="400" height="150"></svg>
  <div class="overlay-black pos-t py-2 text-light text-center">.overlay-black</div>
  <div class="overlay-white pos-b py-2 text-dark text-center">.overlay-white</div>
</div>
{% end %}

<h3>Overlay panel</h3>
UIComponents library extends <code>.modal</code> as overlay panel. Overlay panel's position can be controlled by <code>.modal-left</code> and <code>.modal-right</code>.

{% apply view_source %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-overlay-sm-left">.modal.modal-left</button>
<div class="modal fade bd-overlay-sm-left modal-left" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content no-border-radius">
      <div class="modal-header">
        <h5 class="modal-title">Left Overlay</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Left panel content here.</p>
      </div>
      <div class="modal-footer text-muted justify-content-center">
        Copyright information
      </div>
    </div>
  </div>
</div>
{% end %}

{% apply view_source %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-overlay-sm-right">.modal.modal-right</button>
<div class="modal fade bd-overlay-sm-right modal-right" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content no-border-radius">
      <div class="modal-header">
        <h5 class="modal-title">Right Overlay</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Left panel content here.</p>
      </div>
      <div class="modal-footer text-muted justify-content-center">
        Copyright information
      </div>
    </div>
  </div>
</div>
{% end %}
