diff --git a/docs/select.stories.js b/docs/select.stories.js new file mode 100644 index 0000000..7ed10b6 --- /dev/null +++ b/docs/select.stories.js @@ -0,0 +1,26 @@ +import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies +import { // eslint-disable-line import/no-extraneous-dependencies + withKnobs, radios, +} from '@storybook/addon-knobs'; + +const stories = storiesOf('Select', module); +stories.addDecorator(withKnobs); + +stories.add('select', () => { + const selectedClass = radios('class', { + default: '', + 'is-success': 'is-success', + 'is-warning': 'is-warning', + 'is-error': 'is-error', + }, ''); + + return ` +
+ +
+ `; +}); diff --git a/scss/form/_index.scss b/scss/form/_index.scss index b38295f..70c4e1f 100644 --- a/scss/form/_index.scss +++ b/scss/form/_index.scss @@ -1,3 +1,4 @@ @charset "utf-8"; @import "inputs.scss"; +@import "select.scss"; diff --git a/scss/form/select.scss b/scss/form/select.scss new file mode 100644 index 0000000..ab2ca2e --- /dev/null +++ b/scss/form/select.scss @@ -0,0 +1,43 @@ +.nes-select { + // prettier-ignore + $dropdown: ( + (1,1,1,1,1,1,1), + (1,1,1,1,1,1,1), + (0,1,1,1,1,1,0), + (0,1,1,1,1,1,0), + (0,0,1,1,1,0,0), + (0,0,0,1,0,0,0), + ); + $colors: ($base-color, map-get($default-colors, "shadow")); + + position: relative; + width: 100%; + + select { + width: 100%; + padding: 0.5rem 1rem; + -webkit-appearance: none; + appearance: none; + cursor: $cursor-click-url, pointer; + border: none; + border-radius: 0; + box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529; + + &:invalid { + color: $color-00; + } + } + + &::after { + @include pixelize($dropdown, $colors); + + position: absolute; + top: calc(50% - 11px); + right: 36px; + width: 2px; + height: 2px; + font-size: 2px; + content: ""; + transform: scale(1.5); + } +}