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

👍 inputフィールドを追加

Browse Source
This commit is contained in:
BcRikko
2018-09-29 16:51:11 +09:00
parent 831ede46b6
commit f399767f52
7 changed files with 144 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
css/nes.css
View File

@@ -549,6 +549,64 @@ dl.description > dd {
box-shadow: -4px 0 #333, 4px 0 #333, -4px 4px #f7f7f7, 0 4px #333, -8px 4px #333, -4px 8px #333, -8px 8px #333; box-shadow: -4px 0 #333, 4px 0 #333, -4px 4px #f7f7f7, 0 4px #333, -8px 4px #333, -4px 8px #333, -8px 8px #333;
} }
.field {
margin-bottom: 1rem;
}
.field .label {
display: block;
margin-bottom: 0.5rem;
}
.field .input {
position: relative;
width: 100%;
padding: 1rem 1rem 0.5rem;
background-color: #f7f7f7;
border: 4px solid #333;
}
.field .input:-ms-input-placeholder {
font-weight: lighter;
color: rgba(51, 51, 51, 0.3);
}
.field .input::-ms-input-placeholder {
font-weight: lighter;
color: rgba(51, 51, 51, 0.3);
}
.field .input::placeholder {
font-weight: lighter;
color: rgba(51, 51, 51, 0.3);
}
.field .input.-success {
border-color: #209cee;
}
.field .input.-warning {
color: #e59400;
border-color: #f7d51d;
}
.field .input.-error {
color: #e76e55;
border-color: #e76e55;
}
.field.-inline {
display: flex;
align-items: baseline;
}
.field.-inline .label {
width: 20rem;
margin: 0;
margin-right: 1rem;
text-align: right;
}
.icon { .icon {
position: relative; position: relative;
display: inline-block; display: inline-block;

4
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

6
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
index.html
View File

@@ -195,6 +195,34 @@
</div> </div>
</section> </section>
<section class="container">
<h2 class="title -is-3">Form</h2>
<form>
<h3 class="title -is-4">input</h3>
<div class="field">
<label class="label">field</label>
<input class="input" type="text" placeholder="hello nes">
</div>
<div class="field -inline">
<label class="label">inline field</label>
<input class="input" type="text" placeholder="hello nes">
</div>
<div class="field -inline">
<label class="label">success</label>
<input class="input -success" type="text" placeholder="hello nes" value="good">
</div>
<div class="field -inline">
<label class="label">warning</label>
<input class="input -warning" type="text" placeholder="hello nes" value="warn...">
</div>
<div class="
field -inline">
<label class="label">error</label>
<input class="input -error" type="text" placeholder="hello nes" value="error...">
</div>
</form>
</section>
<section class="container"> <section class="container">
<h2 class="title -is-3">Icons</h2> <h2 class="title -is-3">Icons</h2>
<h3 class="title -is-4">sns</h3> <h3 class="title -is-4">sns</h3>

3
scss/form/_index.scss Normal file
View File

@@ -0,0 +1,3 @@
@charset "utf-8";
@import "input.scss";

47
scss/form/input.scss Normal file
View File

@@ -0,0 +1,47 @@
.field {
margin-bottom: 1rem;
.label {
display: block;
margin-bottom: 0.5rem;
}
.input {
position: relative;
width: 100%;
padding: 1rem 1rem 0.5rem;
background-color: $background-color;
border: 4px solid $black;
&::placeholder {
font-weight: lighter;
color: rgba($black, 0.3);
}
&.-success {
border-color: $success-background-color;
}
&.-warning {
color: $warning-shadow-color;
border-color: $warning-background-color;
}
&.-error {
color: $error-background-color;
border-color: $error-background-color;
}
}
&.-inline {
display: flex;
align-items: baseline;
.label {
width: 20rem;
margin: 0;
margin-right: 1rem;
text-align: right;
}
}
}

1
scss/nes.scss
View File

@@ -6,4 +6,5 @@
@import "base/_index.scss"; @import "base/_index.scss";
@import "elements/_index.scss"; @import "elements/_index.scss";
@import "form/_index.scss";
@import "icons/_index.scss"; @import "icons/_index.scss";