page: txp5

Core SASS

form: txp5_scss

_txp-search.scss ➔ modified 83 days ago

GitHub: _txp-search.scss

    
      // *>:has(.txp-search) {
//   container-type: inline-size;
// }
@use "../2-atoms/beam";
.txp-search {
  @extend %beam !optional;
  column-gap: var(--base-unit);
  &-buttons {
    display: contents;
  }

  &-button {
   // background-color: var(--clr-brand);
    //grid-area: searchbut;
  }

  &-input {
    //grid-area: searchinput;
  }

  &-options {
    //grid-area: searchopts;
    text-align: start;
  }

  details {
    width: max-content;
  }
  summary {
    margin-bottom: 0;
  }
  .ui-icon,
  .ui-button-icon-space {
    //display: none;
  }
  .txp-dropdown {
    padding-left: 0;
    input {
      margin-inline-end: var(--base-unit--s);
    }
  }
  // this version is more grid-like, and changes the feel entirely.
  // worth exploring further…

  // @container (min-width: #{$small}) {
  //   display: grid;
  //   grid-template-areas: 'searchinput searchbut'
  //     'searchopts .';
  //   grid-template-columns: auto 1fr;
  // }
}

Source html

 
        
          <form class="txp-search" method="get" action="index.php" role="search" aria-label="Search articles">
  <span class="txp-search-clear ui-helper-hidden"><a href="?event=list">Clear search</a></span>
  <input name="crit" class="txp-search-input" type="search" size="24" placeholder="Search articles" value="">
  <input name="event" type="hidden" value="list">
  <input name="step" type="hidden" value="list">
  <span class="txp-search-buttons ui-controlgroup ui-controlgroup-horizontal ui-helper-clearfix" role="toolbar">
    <button class="txp-search-button ui-widget ui-button-icon-only ui-controlgroup-item ui-button ui-corner-left" title="Search">
      <span class="ui-button-icon ui-icon ui-icon-search"></span>
      <span class="ui-button-icon-space"> </span>
      Search
    </button>
  </span>
  <details>
    <summary>
      Search options
    </summary>
    <ul class="txp-dropdown ui-menu ui-widget ui-widget-content" id="ui-id-13" role="menu" tabindex="0">
      <li class="txp-dropdown-toggle-all ui-menu-item">
        <div id="ui-id-14" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="select_all" type="checkbox" tabindex="-1" value="all"> Toggle all/none selected</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-15" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="id"> ID#</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-16" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="title_body_excerpt"> Title, body and excerpt</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-17" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="section"> Section</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-18" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="keywords"> Keywords</label>
        </div>
      </li>
      <li class="ui-menu-item selected">
        <div id="ui-id-19" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox active" name="search_method[]" type="checkbox" checked="checked" tabindex="-1" value="categories"> Categories</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-20" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="status"> Status</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-21" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="author"> Author</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-22" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="article_image"> Article image</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-23" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="posted"> Posted</label>
        </div>
      </li>
      <li class="ui-menu-item">
        <div id="ui-id-24" tabindex="-1" role="menuitem" class="ui-menu-item-wrapper">
          <label>
            <input class="checkbox" name="search_method[]" type="checkbox" tabindex="-1" value="lastmod"> Modified</label>
        </div>
      </li>
    </ul>
  </details>
  <input name="_txp_token" type="hidden" value="f85350a0f32d80bdaab9db06c6e3ac87">
</form>