mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 01:39:50 +02:00
🚿 再開発
This commit is contained in:
BcRikko
@@ -1,9 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "title.scss";
|
||||
@import "button.scss";
|
||||
@import "radio.scss";
|
||||
@import "container.scss";
|
||||
@import "checkbox.scss";
|
||||
@import "description.scss";
|
||||
@import "balloon.scss";
|
||||
@@ -1,94 +0,0 @@
|
||||
.balloon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
margin-bottom: 26px;
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 -4px $background-color,
|
||||
0 -8px $black,
|
||||
4px 0 $background-color,
|
||||
4px -4px $black,
|
||||
8px 0 $black,
|
||||
0 4px $background-color,
|
||||
0 8px $black,
|
||||
-4px 0 $background-color,
|
||||
-4px 4px $black,
|
||||
-8px 0 $black,
|
||||
-4px -4px $black,
|
||||
4px 4px $black;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.-right {
|
||||
&::before,
|
||||
&::after {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: $background-color;
|
||||
border-right: 4px solid $black;
|
||||
border-left: 4px solid $black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-left: 8px;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $black,
|
||||
4px 0 $black,
|
||||
4px 4px $background-color,
|
||||
0 4px $black,
|
||||
8px 4px $black,
|
||||
4px 8px $black,
|
||||
8px 8px $black;
|
||||
}
|
||||
}
|
||||
|
||||
&.-left {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -14px;
|
||||
width: 26px;
|
||||
height: 10px;
|
||||
background-color: $background-color;
|
||||
border-right: 4px solid $black;
|
||||
border-left: 4px solid $black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -18px;
|
||||
width: 18px;
|
||||
height: 3px;
|
||||
margin-right: 8px;
|
||||
background-color: $background-color;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
-4px 0 $black,
|
||||
4px 0 $black,
|
||||
-4px 4px $background-color,
|
||||
0 4px $black,
|
||||
-8px 4px $black,
|
||||
-4px 8px $black,
|
||||
-8px 8px $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
$border-size: 6px;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 12px;
|
||||
margin: $border-size / 2;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-color: $background-color;
|
||||
outline: none;
|
||||
box-shadow: inset -4px -4px 0 0 $shadow-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-background-color;
|
||||
box-shadow: inset -6px -6px 0 0 $shadow-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 4px 4px 0 0 $shadow-color;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
// border
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border-color: $black;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: $border-size / 2 * -1;
|
||||
left: 0;
|
||||
border-right: $border-size;
|
||||
border-left: $border-size;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
left: $border-size / 2 * -1;
|
||||
border-top: $border-size;
|
||||
border-bottom: $border-size;
|
||||
}
|
||||
|
||||
// Button types(type background-color hover:background-color box-shadow)
|
||||
// prettier-ignore
|
||||
$btn-types:
|
||||
"primary" $primary-background-color $primary-hover-background-color $primary-shadow-color,
|
||||
"success" $success-background-color $success-hover-background-color $success-shadow-color,
|
||||
"warning" $warning-background-color $warning-hover-background-color $warning-shadow-color,
|
||||
"error" $error-background-color $error-hover-background-color $error-shadow-color;
|
||||
|
||||
@each $type in $btn-types {
|
||||
&.-#{nth($type, 1)} {
|
||||
color: $white;
|
||||
background-color: nth($type, 2);
|
||||
box-shadow: inset -4px -4px 0 0 nth($type, 4);
|
||||
|
||||
&:hover {
|
||||
background-color: nth($type, 3);
|
||||
box-shadow: inset -6px -6px 0 0 nth($type, 4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 4px 4px 0 0 nth($type, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
$btn-sizes:
|
||||
"small" $small-font-size,
|
||||
"medium" $medium-font-size,
|
||||
"large" $large-font-size;
|
||||
|
||||
@each $name, $size in $btn-sizes {
|
||||
&.-#{$name} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
.checkbox[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-right: 1rem;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -6px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
visibility: visible;
|
||||
content: "";
|
||||
background-color: transparent;
|
||||
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
6px 6px 0 $black,
|
||||
8px 6px 0 $black,
|
||||
10px 6px 0 $black,
|
||||
12px 6px 0 $black,
|
||||
14px 6px 0 $black,
|
||||
16px 6px 0 $black,
|
||||
18px 6px 0 $black,
|
||||
20px 6px 0 $black,
|
||||
6px 8px 0 $black,
|
||||
20px 8px 0 $black,
|
||||
6px 10px 0 $black,
|
||||
20px 10px 0 $black,
|
||||
6px 12px 0 $black,
|
||||
20px 12px 0 $black,
|
||||
6px 14px 0 $black,
|
||||
20px 14px 0 $black,
|
||||
6px 16px 0 $black,
|
||||
20px 16px 0 $black,
|
||||
6px 18px 0 $black,
|
||||
20px 18px 0 $black,
|
||||
6px 20px 0 $black,
|
||||
8px 20px 0 $black,
|
||||
10px 20px 0 $black,
|
||||
12px 20px 0 $black,
|
||||
14px 20px 0 $black,
|
||||
16px 20px 0 $black,
|
||||
18px 20px 0 $black,
|
||||
20px 20px 0 $black;
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
6px 6px 0 $black,
|
||||
8px 6px 0 $black,
|
||||
10px 6px 0 $black,
|
||||
12px 6px 0 $black,
|
||||
14px 6px 0 $black,
|
||||
16px 6px 0 $black,
|
||||
18px 6px 0 $black,
|
||||
22px 6px 0 $black,
|
||||
24px 6px 0 $black,
|
||||
6px 8px 0 $black,
|
||||
20px 8px 0 $black,
|
||||
22px 8px 0 $black,
|
||||
24px 8px 0 $black,
|
||||
6px 10px 0 $black,
|
||||
18px 10px 0 $black,
|
||||
20px 10px 0 $black,
|
||||
6px 12px 0 $black,
|
||||
8px 12px 0 $black,
|
||||
16px 12px 0 $black,
|
||||
18px 12px 0 $black,
|
||||
6px 14px 0 $black,
|
||||
8px 14px 0 $black,
|
||||
10px 14px 0 $black,
|
||||
14px 14px 0 $black,
|
||||
16px 14px 0 $black,
|
||||
20px 14px 0 $black,
|
||||
6px 16px 0 $black,
|
||||
10px 16px 0 $black,
|
||||
12px 16px 0 $black,
|
||||
14px 16px 0 $black,
|
||||
20px 16px 0 $black,
|
||||
6px 18px 0 $black,
|
||||
12px 18px 0 $black,
|
||||
20px 18px 0 $black,
|
||||
6px 20px 0 $black,
|
||||
8px 20px 0 $black,
|
||||
10px 20px 0 $black,
|
||||
12px 20px 0 $black,
|
||||
14px 20px 0 $black,
|
||||
16px 20px 0 $black,
|
||||
18px 20px 0 $black,
|
||||
20px 20px 0 $black;
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
background-color: $background-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
z-index: -1;
|
||||
border: 4px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&.-with-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
|
||||
&.-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
> .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: 400;
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&._dark {
|
||||
color: $white;
|
||||
|
||||
&::before {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
> .title {
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
dl.description {
|
||||
display: grid;
|
||||
grid-template: auto / 15rem 1fr;
|
||||
grid-gap: 0.8rem 2rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
> dt {
|
||||
position: relative;
|
||||
grid-column: 1;
|
||||
float: left;
|
||||
|
||||
&.-colon::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1.5rem;
|
||||
z-index: -1;
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
> dd {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
.radios {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
> label {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
> .radio[type="radio"] {
|
||||
margin-right: 0.3rem;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
visibility: visible;
|
||||
content: "";
|
||||
animation: blink 1s infinite steps(1);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
content: "\203A";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-columns {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
> label:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
.title {
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
$sizes:
|
||||
$h1-font-size,
|
||||
$h2-font-size,
|
||||
$h3-font-size,
|
||||
$h4-font-size,
|
||||
$h5-font-size,
|
||||
$h6-font-size;
|
||||
|
||||
@each $size in $sizes {
|
||||
$i: index($sizes, $size);
|
||||
|
||||
&.-is-#{$i} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 400;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
$sizes:
|
||||
$h1-font-size,
|
||||
$h2-font-size,
|
||||
$h3-font-size,
|
||||
$h4-font-size,
|
||||
$h5-font-size,
|
||||
$h6-font-size;
|
||||
|
||||
@each $size in $sizes {
|
||||
$i: index($sizes, $size);
|
||||
|
||||
&.-is-#{$i} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user