https://shipow.github.io/searchbox/

:mag: Searchbox wizard that output all the markup and styles for your search input field.
https://shipow.github.io/searchbox/

Last synced: 5 months ago
JSON representation

:mag: Searchbox wizard that output all the markup and styles for your search input field.

Host: GitHub
URL: https://shipow.github.io/searchbox/
Owner: Shipow
Created: 2016-01-13T08:20:02.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2020-07-07T19:04:01.000Z (almost 5 years ago)
Last Synced: 2024-05-09T11:33:19.671Z (12 months ago)
Language: CSS
Homepage: http://shipow.github.io/searchbox/
Size: 2.26 MB
Stars: 142
Watchers: 6
Forks: 13
Open Issues: 4
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# SEARCHBOX
Just a searchbox generator

## use the generator
http://shipow.github.io/searchbox/

## use the mixin in your project
https://github.com/Shipow/searchbox/blob/master/scss/_searchbox.scss

### html

```html

```

### scss

```scss
@import 'searchbox';

$custom:(
input-width: 300px,
input-height: 50px,
border-width: 2px,
border-radius: 25px,
input-border-color: #ccc,
input-focus-border-color: #FF2E83,
input-background: white,
input-focus-background: white,
font-size: 14px,
placeholder-color: #bbb,
icon: sbx-icon-search-18,
icon-size: 30px,
icon-position: left,
icon-color: #FF2E83,
icon-background: #FFFFFF,
icon-background-opacity: 0,
icon-clear: sbx-icon-clear-5,
icon-clear-size: 18px
);

.sbx-custom{
@include searchbox($custom...);
}
```

### js (optionnal)

```javascript
// focus input after reset
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
this.parentNode.querySelector('input').focus();
});
```

### With Instantsearch.js

```javascript
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search',
placeholder: 'Search for product, brands, SKU, ...',
wrapInput: false
})
);
```

### Icons

#### Clear

#### Search