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

👍 inputのooutlineの色をスタイルに合わせて調整

Browse Source
This commit is contained in:
BcRikko
2018-11-28 18:33:43 +09:00
parent da57a19a9c
commit b735f29340
5 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/nes.css
View File

@@ -702,18 +702,22 @@ button,
padding: 0.5rem 1rem;
margin: 4px;
border: none;
outline-color: #e7e7e7;
box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
}
.input.is-success {
outline-color: #108de0;
box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
}
.input.is-warning {
outline-color: #f2c409;
box-shadow: 0 4px #f7d51d, 0 -4px #f7d51d, 4px 0 #f7d51d, -4px 0 #f7d51d;
}
.input.is-error {
outline-color: #ce372b;
box-shadow: 0 4px #e76e55, 0 -4px #e76e55, 4px 0 #e76e55, -4px 0 #e76e55;
}

2
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

2
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
index.html
View File

@@ -11,7 +11,7 @@
<title>NES.css - NES-style CSS Framework</title>
<link href="./css/nes.min.css" rel="stylesheet" />
<link href="./css/nes.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />
<meta property="og:type" content="website" />

20
scss/form/inputs.scss
View File

@@ -1,26 +1,28 @@
.input {
@mixin border-style($color) {
@mixin border-style($border, $outline) {
outline-color: $outline;
// prettier-ignore
box-shadow:
0 4px $color,
0 -4px $color,
4px 0 $color,
-4px 0 $color;
0 4px $border,
0 -4px $border,
4px 0 $border,
-4px 0 $border;
}
padding: 0.5rem 1rem;
margin: 4px;
border: none;
@include border-style($base-color);
@include border-style($base-color, #e7e7e7);
&.is-success {
@include border-style(#209cee);
@include border-style(#209cee, #108de0);
}
&.is-warning {
@include border-style(#f7d51d);
@include border-style(#f7d51d, #f2c409);
}
&.is-error {
@include border-style(#e76e55);
@include border-style(#e76e55, #ce372b);
}
}