<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">
    <div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>
    <div role="dialog" aria-labelledby="dialog-title" class="dialog-content">
        <div role="document" class="dialog-body">

            <h1 id="dialog-title" tabindex="0">Select as Asset</h1>

            <div class="smartbar">
                <ul>
                    <li>
                        <div class="button-group button-toggle">
                            <a class="button button-small toggle-active" href="/foo"><svg width="12" height="12" class="icon icon-grid-big"><use xlink:href="/assets/svg/core.svg#grid-big" /></svg> Grid</a>
                            <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> List</a>
                        </div>

                    </li>
                    <li>
                        <div class="breadcrumb tab-active">
                            <a href="/grandparent">Grandparent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent">Parent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent/me">Current Item</a>
                        </div>

                    </li>
                    <li>
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-end smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <button type="submit" name="btnUndo" id="btnUndo" value="Undo" class="button">
<svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Undo</span>
</button>
                    </li>
                </ul>
            </div>
            <div class="asset-grid js">

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/05-loadingbay.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-letterbox" data-id="114">
                    <img src="/assets/img/04-canon-logo@2x.png" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/03-dukespecial@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-letterbox" data-id="114">
                    <img src="/assets/img/04-canon-logo@2x.png" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-thumbless" data-id="114">
                    <svg width="64" height="64" class="icon icon-o-video"><use xlink:href="/assets/svg/assets.svg#o-video" /></svg>
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/03-dukespecial@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-thumbless" data-id="114">
                    <svg width="64" height="64" class="icon icon-o-video"><use xlink:href="/assets/svg/assets.svg#o-video" /></svg>
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

                <div class="grid-asset asset-image asset-display-square" data-id="114">
                    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
                    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
                    <span class="asset-ratio asset-landscape"></span>
                </div>

            </div>

            <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
            <script src="/assets/js/asset-grid.js"></script>

        </div>
        <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        <svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
      </button>
    </div>
</div>
<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">
<div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>
  <div role="dialog" aria-labelledby="dialog-title" class="dialog-content">
    <div role="document" class="dialog-body">

        <h1 id="dialog-title" tabindex="0">Select as Asset</h1>

        {{ render "@tabbed-smartbar" }}
        {{ render "@asset-grid" }}
      </div>
      <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        {{ icon 'core/cancel' 24 }}
      </button>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .dialog .smartbar {
    	margin-left: 0;
    	margin-right: 0;
    }
    
    .asset-chooser-dialog .dialog-content {
    	min-height: 80vh;
    }
    
    .dialog .title-panel {
    	padding: 0;
    }
    
    .dialog .title-panel h1 {
    	padding-bottom: 0;
    	padding-top: ($main-gutter)/4;
    }
    
  • URL: /components/raw/asset-chooser/asset-chooser.scss
  • Filesystem Path: src/components/16-dialogs/02-molecules/04-asset-chooser/asset-chooser.scss
  • Size: 239 Bytes

There are no notes for this item.