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

refactor(select): add @BcRikko's suggestions for the select component

Browse Source 
Change select.scss to selects.scss, add margin to .nes-select, use different color variables,
refactor handling of different select states
This commit is contained in:
Wojciech Olejnik
2018-12-22 20:31:29 +01:00
parent 607828fd93
commit b8686b6af5
3 changed files with 20 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/form/_index.scss
View File

@@ -1,4 +1,4 @@
@charset "utf-8"; @charset "utf-8";
@import "inputs.scss"; @import "inputs.scss";
@import "select.scss"; @import "selects.scss";

52
scss/form/select.scss → scss/form/selects.scss
View File

@@ -12,6 +12,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
margin: 4px;
select { select {
width: 100%; width: 100%;
@@ -25,7 +26,7 @@
box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black; box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
&:invalid { &:invalid {
color: $color-00; color: map-get($disabled-colors, shadow);
} }
} }
@@ -36,45 +37,28 @@
top: calc(50% - 11px); top: calc(50% - 11px);
right: 36px; right: 36px;
font-size: 3px; font-size: 3px;
pointer-events: none;
content: ""; content: "";
} }
&.is-success { // prettier-ignore
$color: map-get($success-colors, "normal"); $types:
"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");
&::after { @each $type in $types {
color: $color; &.is-#{nth($type, 1)} {
} $color: nth($type, 2);
select { &::after {
outline-color: map-get($success-colors, "hover"); color: $color;
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; }
}
}
&.is-warning { select {
$color: map-get($warning-colors, "normal"); outline-color: nth($type, 3);
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
&::after { }
color: $color;
}
select {
outline-color: map-get($warning-colors, "hover");
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
}
}
&.is-error {
$color: map-get($error-colors, "normal");
&::after {
color: $color;
}
select {
outline-color: map-get($error-colors, "hover");
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
} }
} }
} }

2
style.css
View File

@@ -27,7 +27,7 @@ div.containers > .nes-container {
} }
.nes-select + .nes-select { .nes-select + .nes-select {
margin: 0 0 0 24px; margin-left: 24px;
} }
.balloon.nes-container .nes-balloon { .balloon.nes-container .nes-balloon {