<form method="get" action="?" class="smartbar-search">
    <label><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> 
    	<input name="q" type="text" placeholder="Search" class="search" value="">
    </label>
    <button class="button button-small action-search">
Submit
</button>

</form>
<form method="get" action="?" class="smartbar-search">
	<label>{{ icon 'core/search' }} 
    	<input name="q" type="text" placeholder="Search" class="search" value="">
    </label>
    {{ render "@button-small--button-search" }}
    {{!-- <button type="submit">{{ icon 'core/search' }}</button> --}}
</form>
/* No context defined for this component. */
  • Content:
    .smartbar-search {
    	margin-right: 8px;
    	@include font-scale(m, helvetica);
    	white-space: nowrap;
    }
    
    .smartbar-search .button {
    	@include font-scale(s, helvetica);
    }
    
    .smartbar-search label {
    	margin-left: $half-gutter;
    	vertical-align: middle;
    }
    
    .smartbar-search label svg {
    	vertical-align: middle;
    }
    
    .smartbar-search input {
    	border: 0;
    	background: transparent;
    	padding-left: ($half-gutter/2);
    	padding-top: .5rem;
    	padding-bottom: .5rem;
    	@include font-scale(sm, helvetica);
    	width: 6em;	
    	margin-right: 6px;
    	
    }
    
    .smartbar-search input:focus {
    	background-color: rgba(255, 255, 255, 0.7);
    	outline: 0;
    }
    
    .smartbar-search .button-small.action-search.button-small {
    	background-color: palette(ui, darker-active);
    	color: #fff;
    }
    
    .smartbar-search .button-small.action-search:hover,
    .smartbar-search .button-small.action-search:focus,
    .smartbar-search .button-small.action-search:active {
    	background-color: palette(ui, darker);
    	color: #fff;
    }
    
    @include media(">bp-m") {
    	.smartbar-search input {
    		width: 10em;	
    	}
    }
  • URL: /components/raw/smartbar-search/smartbar-search.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/01-atoms/04-smartbar-search/smartbar-search.scss
  • Size: 1 KB

There are no notes for this item.