<form action="" class="frame-search">
<input class="frame-search__field" type="text" placeholder="Search...">
<input class="frame-search__submit frame-nav" type="submit">
</form>
<form action="" class="frame-search">
<input class="frame-search__field" type="text" placeholder="Search...">
<input class="frame-search__submit frame-nav" type="submit">
</form>
/* No context defined for this component. */
// document.querySelector('.frame-search__trigger').onclick = function(){
// const offCanvasMenu = document.querySelector('.frame__search');
// if (offCanvasMenu.hasAttribute('aria-hidden')) {
// offCanvasMenu.removeAttribute('aria-hidden')
// offCanvasMenu.classList.add('frame--expanded');
// } else {
// offCanvasMenu.setAttribute('aria-hidden', '')
// offCanvasMenu.classList.remove('frame--expanded');
// }
// };
.frame-search {
width: 100%;
height: 72px;
display: flex;
box-sizing: border-box;
&__submit,
&__button { flex: 0; }
&__field {
border: 0;
flex: 1;
padding: 4px 1rem;
background-color: transparent;
font-size: 1rem;
color: hsla(var(--navy-hsl), 1);
@include placeholder {
font-size: 1rem;
color: hsla(var(--navy-hsl), .6);
}
&:focus { outline: 0; }
}
&__submit {
@extend .u-button-reset;
--theme-hsl: var(--navy-hsl);
// Structure
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
cursor: pointer;
// Visuals
text-decoration: none;
font-weight: 600;
color: hsla(var(--navy-hsl), 1);
font-size: 1rem;
padding: 22px;
line-height: 1.62;
border-left: 1px solid hsla(var(--navy-hsl), .3);
&:hover {
background-color: hsla(var(--theme-hsl), .1);
color: hsla(var(--theme-hsl), 1);
}
&:active {
background-color: hsla(var(--theme-hsl), 1);
color: hsla(var(--white-hsl), 1);
}
}
}
There are no notes for this item.