<div id="my-search-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 role-search">
        <div role="document" class="dialog-body">
            <h1 id="dialog-title" tabindex="0" aria-hidden="true">Search</h1>

            <form class="form-simple">

                <div class="field-wrap">
                    <label for="q" aria-hidden="true">Search</label>
                    <div class="form-entry">
                        <input type="search" id="" required="required" aria-required="true" placeholder="Mango bingo" class="input-simple">
                        <button class="button button-icon icon-left action-info">
            <div>
              <svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg>
              <span>Search</span>
            </div>
          </button>
                    </div>
                </div>
            </form>

        </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-search-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 role-search">
    <div role="document" class="dialog-body">
      <h1 id="dialog-title" tabindex="0" aria-hidden="true">Search</h1>

      <form class="form-simple">
        
        <div class="field-wrap">
          <label for="q"  aria-hidden="true">Search</label>
          <div class="form-entry">
            <input type="search" id="{{ field_id }}" required="required" aria-required="true" placeholder="Mango bingo" class="input-simple">
            <button class="button button-icon icon-left action-info">
            <div>
              {{ icon 'core/search' }}
              <span>Search</span>
            </div>
          </button>
          </div>
        </div>
      </form>


    </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-content.role-search {
      width: 560px;
      top: 33%;
      -webkit-transform: translate(-50%, -33%);
      -ms-transform: translate(-50%, -33%);
      transform: translate(-50%, -33%);
    }
    
    .role-search .form-entry {
      width: 100%;
      display: flex;
      align-items: middle;
    }
    
    .dialog .form-simple input[type=search] {
      width: 83%;
    }
  • URL: /components/raw/search-dialog/search-dialog.scss
  • Filesystem Path: src/components/16-dialogs/02-molecules/03-search-dialog/search-dialog.scss
  • Size: 323 Bytes
  • Handle: @search-dialog
  • Preview:
  • Filesystem Path: src/components/16-dialogs/02-molecules/03-search-dialog/search-dialog.hbs

There are no notes for this item.