​
Basic Usage

This is the html needed to render a modal.

<div class="ui-modals" role="dialog" aria-modal="true">
  <div class="--overlay" ></div>
  <div class="--wrapper-outer" > 
    <div class="--wrapper-inner">
      <div class="--dialog">
        Content Here
      </div>
    </div>
  </div>
</div>

​
Showing and hiding

By default modals are hidden. To reveal a modal simply add .--visible to the outer div.

<div class="ui-modals --visible" role="dialog" aria-modal="true">
  <div class="--overlay" ></div>
  <div class="--wrapper-outer" > 
    <div class="--wrapper-inner">
      <div class="--dialog">
        Content Here
      </div>
    </div>
  </div>
</div>

​
Top and Bottom Sections

Modals can have top and bottom sections

<div class="ui-modals" role="dialog" aria-modal="true">
  <div class="--overlay" ></div>
  <div class="--wrapper-outer" > 
    <div class="--wrapper-inner">
      <div class="--dialog">
        <div class="--modal-top-section">
          <div class="flex justify-between w-full">
            <div class="ui-titlepair">
              <div class="--title">
                The History of Coffee
              </div>
            </div>
            <div class="ui-button --rounded --minimal">
              <%= inline_svg_tag('heroicons/x-mark.svg') %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​
Variables

--ui-modal-overlay-color: rgba(0, 0, 0, 0.5);
--ui-modal-overlay-opacity: 0.8;
--ui-modal-background-color: var(--ui-box-background);
--ui-modal-border-radius: var(--ui-shared-border-radius);
--ui-modal-box-shadow: var(--ui-shared-box-shadow);
--ui-modal-padding: var(--ui-shared-content-padding);
--ui-modal-max-width: 600px;
--ui-modal-max-width-xs: 400px;
--ui-modal-max-width-sm: 500px;
--ui-modal-max-width-lg: 700px;
--ui-modal-max-width-xl: 800px;
--ui-modal-max-width-2xl: 1000px;
Title PairsToasts