mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-01 18:13:32 +02:00
Code Issues Releases Wiki Activity

Merge pull request #393 from HiKaylum/select_comp

Browse Source 
fix(select): fixed select state styling
This commit is contained in:
Igor Guastalla
2019-12-27 13:24:53 -03:00
committed by GitHub
parent 02ac0d18b8 f85b17d22f
commit 83195ea658
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
$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>