mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-14 02:13:57 +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
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 // prettier-ignore
$types: $types:
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"), "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"), "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
"error" map-get($error-colors, "normal") map-get($error-colors, "hover"), "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover");
@each $type in $types { @each $type in $types {
&.is-#{nth($type, 1)} { &.is-#{nth($type, 1)} {
$color: nth($type, 2); $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'; import sharedOptions from '../_helpers/shared';
export default () => { export default () => {
const selectedClass = select('class', { const isDark = boolean('is-dark', false);
const selectOptions = select('class', {
default: '', default: '',
...sharedOptions, ...sharedOptions,
'is-dark': 'is-dark',
}, ''); }, '');
const selectedClasses = classNames(
'nes-select',
selectOptions,
{ 'is-dark': isDark },
);
return ` return `
<div class="nes-select ${selectedClass}"> <div class="${selectedClasses}">
<select required> <select required>
<option value="" disabled selected hidden>Select...</option> <option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option> <option value="0">To be</option>