| Vapor CSS

Popover

A simple popover, requires Tether from HubSpot

Style sheet: /scss/components/popover.scss

Insert popover content here!
<button type="button" class="btn js-tether-target">Popover toggle</button>
<div class="popover js-tether-element">
    <div class="popover-body">
        Insert popover content here!
    </div>
    <div class="popover-footer">
        <button type="button" class="btn mod-primary mod-small">Submit</button>
        <button type="button" class="btn mod-small">Cancel</button>
    </div>
</div>

<script>
    $(document).ready(function() {
        var myPopup = new Tether({
            element: '.js-tether-element',
            target: '.js-tether-target',
            attachment: 'top left',
            targetAttachment: 'bottom left',
            constraints: [{
                to: 'scrollParent',
                attachment: 'together'
            }]
        });

        $('.js-tether-target').click(function() {
            if (myPopup.enabled) {
                $('.js-tether-element').slideUp(200, function() {
                    myPopup.disable();
                });
            } else {
                myPopup.enable();

                $('.js-tether-element').slideDown(200);
            }
        });
    });
</script>

Prompt

Prompt styling

Style sheet: /scss/components/prompt.scss

<!-- Modal triggers -->
<button class="btn mod-primary js-modal-trigger" data-modal="prompt-confirmation">Prompt confirmation</button>
<button class="btn mod-danger js-modal-trigger" data-modal="prompt-warning">Prompt warning</button>
<button class="btn mod-info js-modal-trigger" data-modal="prompt-info">Prompt info</button>

<!-- Modals -->
<div class="modal-container mod-prompt" id="prompt-confirmation">
    <div class="modal-content">
        <header class="modal-header mod-confirmation">
            <h1>Prompt confirmation</h1>
            <span class="small-close js-modal-close">
                <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-pure-white">
                    <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
                </svg>
            </span>
        </header>
        <div class="modal-body mod-header-padding">
            <div class="prompt-message">
                Lorem ipsum dolor sit amet, invidunt probatus concludaturque at mei. Graecis percipitur at nec, pertinax praesent
                voluptatibus an his, vix veri omittam gubergren no. Eam eu sale nobis aliquip, stet adipisci pro at, sea an nonumy facilisi.
                Sanctus percipit definitionem duo et, duo eu sensibus reprimique, diceret scribentur usu an. Eam ex decore fabulas.

                Inimicus maluisset quo eu, hendrerit rationibus vel ad, at vis ridens pericula liberavisse. Usu eu tollit corpora
                persequeris. Porro convenire at duo. Porro augue vel ex, an est erat honestatis. Nec no quem tritani.

                Dicat commune oportere ei eos. Eu mucius quaestio mel. Per nonumy lobortis et. Ei vim case nulla nobis, id commune similique
                vix.
            </div>
        </div>
        <footer class="modal-footer">
            <button class="btn mod-small mod-primary js-modal-confirm">Confirmation</button>
            <button class="btn mod-small js-modal-close">Cancel</button>
        </footer>
    </div>
</div>
<div class="modal-container mod-prompt" id="prompt-warning">
    <div class="modal-content">
        <header class="modal-header mod-warning">
            <h1>Prompt warning</h1>
            <span class="small-close js-modal-close">
              <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-pure-white">
                  <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
              </svg>
          </span>
        </header>
        <div class="modal-body mod-header-padding">
            <div class="prompt-message ">
                Hella chambray forage four dollar toast, small batch affogato neutra blue bottle tousled vice plaid stumptown gentrify.
            </div>
        </div>
        <footer class="modal-footer">
            <button class="btn mod-small js-modal-close">Ok</button>
        </footer>
    </div>
</div>
<div class="modal-container mod-prompt" id="prompt-info">
    <div class="modal-content">
        <header class="modal-header mod-info">
            <h1>Prompt info</h1>
            <span class="small-close js-modal-close">
              <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-pure-white">
                  <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
              </svg>
          </span>
        </header>
        <div class="modal-body mod-header-padding">
            <div class="prompt-message ">
                Hella chambray forage four dollar toast, small batch affogato neutra blue bottle tousled vice plaid stumptown gentrify.
            </div>
        </div>
        <footer class="modal-footer">
            <button class="btn mod-small js-modal-close">Ok</button>
        </footer>
    </div>
</div>

Toast

Use it when you want to notify the user of an action result

Style sheet: /scss/components/toast.scss

Your settings have been saved
You have almost reached your download limit.
Ohno! Something went horribly wrong.
<button class="js-show-toast" data-target=".mod-success">Toggle success toast</button>
<button class="js-show-toast" data-target=".mod-warning">Toggle warning toast</button>
<button class="js-show-toast" data-target=".mod-error">Toggle error toast</button>

<div class='toast-container'>
    <div class="toast mod-success mod-hidden mod-animated">
        <span class="toast-close js-toast-close">
            <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                    <path d="m9-3.4h2v26.9h-2z"/>
                    <path d="m-3.4 9h26.9v2h-26.9z"/>
                </g>
            </svg>
        </span>
        <div class="toast-title">Your settings have been saved</div>
    </div>

    <div class="toast mod-warning mod-hidden mod-animated">
        <span class="toast-close js-toast-close">
            <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                    <path d="m9-3.4h2v26.9h-2z"/>
                    <path d="m-3.4 9h26.9v2h-26.9z"/>
                </g>
            </svg>
        </span>
        <div class="toast-title">You have almost reached your download limit.</div>
        <div class="toast-description"><a href="#">See your usage limits</a></div>
    </div>

    <div class="toast mod-error mod-hidden mod-animated">
        <span class="toast-close js-toast-close">
            <svg viewBox="0 0 22 22" class="icon fill-pure-white">
                <g transform="matrix(.7071-.7071.7071.7071-3.142 11)">
                    <path d="m9-3.4h2v26.9h-2z"/>
                    <path d="m-3.4 9h26.9v2h-26.9z"/>
                </g>
            </svg>
        </span>
        <div class="toast-title">Ohno! Something went horribly wrong.</div>
        <div class="toast-description"><a href="#">Status page</a></div>
    </div>
</div>

<script type="text/javascript">
    $('.js-show-toast').off('click').click(function() {
        var target = $(this).attr('data-target');
        $('.toast' + target).toggleClass('mod-hidden');
    });

    $('.js-toast-close').off('click').click(function() {
        $(this).closest('.toast').addClass('mod-hidden');
    });
</script>

Tooltip

Use to display a tooltip on any element. We use Bootstrap Tooltip plugin.

Style sheet: /scss/components/tooltip.scss

Another sample, click me!
<button class="btn mod-primary" title="Some helpful information!" data-placement="right">Hover me</button>
<div class="m2">
    <div class="inline-block" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
         data-placement="bottom" data-trigger="click">Another sample, click me!
    </div>
</div>