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

feat(component): implement select states, add examples to the demo page

Browse Source 
re #152
This commit is contained in:
Wojciech Olejnik
2018-12-20 20:41:24 +01:00
parent 6713344379
commit 13d4d7ec9b
3 changed files with 94 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@@ -14,7 +14,7 @@
<title>NES.css - NES-style CSS Framework</title>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
<link href="./css/nes.min.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />
<meta property="og:type" content="website" />
@@ -132,6 +132,39 @@
<label for="textarea_field">Textarea</label>
<textarea id="textarea_field" class="nes-textarea"></textarea>
</div>
<div class="field">
<label for="selects">Select</label>
<div id="selects" class="selects">
<div class="nes-select">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-success">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-warning">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-error">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
</div>
</div>
</section>
<section class="balloon nes-container with-title">

49
scss/form/select.scss
View File

@@ -8,20 +8,19 @@
(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;
padding: 0.5rem 2.5rem 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;
box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
&:invalid {
color: $color-00;
@@ -29,6 +28,8 @@
}
&::after {
$colors: ($base-color, map-get($default-colors, "shadow"));
@include pixelize($dropdown, $colors);
position: absolute;
@@ -40,4 +41,46 @@
content: "";
transform: scale(1.5);
}
&.is-success {
$color: map-get($success-colors, "normal");
&::after {
$colors: ($color, map-get($default-colors, "shadow"));
@include pixelize($dropdown, $colors);
}
select {
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
}
}
&.is-warning {
$color: map-get($warning-colors, "normal");
&::after {
$colors: ($color, map-get($default-colors, "shadow"));
@include pixelize($dropdown, $colors);
}
select {
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
}
}
&.is-error {
$color: map-get($error-colors, "normal");
&::after {
$colors: ($color, map-get($default-colors, "shadow"));
@include pixelize($dropdown, $colors);
}
select {
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
}
}
}

14
style.css
View File

@@ -16,6 +16,20 @@ div.containers > .nes-container {
max-width: 400px;
}
.selects {
display: flex;
justify-content: space-between;
margin-left: 4px;
}
.selects .nes-select {
display: inline-flex;
}
.nes-select + .nes-select {
margin: 0 0 0 24px;
}
.balloon.nes-container .nes-balloon {
max-width: 600px;
margin: 2rem 2rem;