mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-04-20 22:22:05 +02:00
Code Issues Releases Wiki Activity

fix(select): fixed select state styling

Browse Source 
select when `is-dark` can now have `is-error`, `is-success` and `is-warning`

#384
This commit is contained in:
HiKaylum 2019-12-22 15:41:33 +00:00
parent 2790eabed8
commit 6b6f68ee8c
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/form/selects.scss
View File

@ -47,11 +47,10 @@
// prettier-ignore
$types:
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
"error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover");
"error" map-get($error-colors, "normal") map-get($error-colors, "hover");
@each $type in $types {
&.is-#{nth($type, 1)} {
$color: nth($type, 2);

15
story/select/select.template.js
View File

@ -1,16 +1,23 @@
import { select } from '@storybook/addon-knobs';
import { boolean, select } from '@storybook/addon-knobs';
import classNames from 'classnames';
import sharedOptions from '../_helpers/shared';
export default () => {
const selectedClass = select('class', {
const isDark = boolean('is-dark', false);
const selectOptions = select('class', {
default: '',
...sharedOptions,
'is-dark': 'is-dark',
}, '');
const selectedClasses = classNames(
'nes-select',
selectOptions,
{ 'is-dark': isDark },
);
return `
<div class="nes-select ${selectedClass}">
<div class="${selectedClasses}">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>