mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 17:51:46 +02:00
feat(component): add a select component
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "inputs.scss";
|
||||
@import "select.scss";
|
||||
|
43
scss/form/select.scss
Normal file
43
scss/form/select.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user