page: txp5
form: txp5_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>