mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 09:41:47 +02:00
🚿 再開発
This commit is contained in:
BcRikko
@@ -1,7 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "reset.scss";
|
||||
@import "variables.scss";
|
||||
@import "generic.scss";
|
||||
@import "animation.scss";
|
||||
@import "helper.scss";
|
||||
@@ -1,9 +0,0 @@
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
// Define
|
||||
html {
|
||||
font-size: $font-size;
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
pre,
|
||||
code {
|
||||
font-family: $font-family;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
._dark {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
._right {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
audio,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
// Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
|
||||
$font-family: "Press Start 2P" !default;
|
||||
|
||||
// Sizes
|
||||
$font-size: 16px !default;
|
||||
|
||||
$h1-font-size: $font-size * 3 !default;
|
||||
$h2-font-size: $font-size * 2.5 !default;
|
||||
$h3-font-size: $font-size * 2 !default;
|
||||
$h4-font-size: $font-size * 1.5 !default;
|
||||
$h5-font-size: $font-size * 1.25 !default;
|
||||
$h6-font-size: $font-size !default;
|
||||
|
||||
$small-font-size: 0.6em;
|
||||
$medium-font-size: 1em;
|
||||
$large-font-size: 2em;
|
||||
|
||||
// Colors
|
||||
$black: #333 !default;
|
||||
$white: #f7f7f7 !default;
|
||||
|
||||
$background-color: $white !default;
|
||||
$hover-background-color: #e7e7e7 !default;
|
||||
$shadow-color: #adafbc !default;
|
||||
|
||||
$primary-background-color: #92cc41 !default;
|
||||
$primary-hover-background-color: #76c442 !default;
|
||||
$primary-shadow-color: #4aa52e !default;
|
||||
|
||||
$success-background-color: #209cee !default;
|
||||
$success-hover-background-color: #108de0 !default;
|
||||
$success-shadow-color: #006bb3 !default;
|
||||
|
||||
$warning-background-color: #f7d51d !default;
|
||||
$warning-hover-background-color: #f2c409 !default;
|
||||
$warning-shadow-color: #e59400 !default;
|
||||
|
||||
$error-background-color: #e76e55 !default;
|
||||
$error-hover-background-color: #ce372b !default;
|
||||
$error-shadow-color: #8c2022 !default;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "input.scss";
|
||||
@import "group.scss";
|
||||
@@ -1,14 +0,0 @@
|
||||
.group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 1rem 0;
|
||||
|
||||
&.-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.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,3 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "icons.scss";
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$facebook: (
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0) ,
|
||||
( 1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1) ,
|
||||
( 0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,0)
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$github: (
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1 ),
|
||||
( 1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
||||
( 1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1 ),
|
||||
( 1,0,0,1,1,1,1,0,0,0,0,1,1,1,1,1 ),
|
||||
( 1,1,1,0,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$heart: (
|
||||
( 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ),
|
||||
( 0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0 ),
|
||||
( 0,1,1,1,1,1,0,0,0,1,1,1,1,1,0,0 ),
|
||||
( 1,1,0,0,1,1,1,0,1,1,1,1,1,1,1,0 ),
|
||||
( 1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0 ),
|
||||
( 0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0 ),
|
||||
( 0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0 ),
|
||||
( 0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 )
|
||||
);
|
||||
@@ -1,73 +0,0 @@
|
||||
@import "pixelize.scss";
|
||||
@import "twitter.scss";
|
||||
@import "facebook.scss";
|
||||
@import "github.scss";
|
||||
@import "youtube.scss";
|
||||
@import "heart.scss";
|
||||
@import "star.scss";
|
||||
@import "like.scss";
|
||||
|
||||
@mixin setup($pixel) {
|
||||
$size: $pixel * 16;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
&::before {
|
||||
top: $pixel * -1;
|
||||
left: $pixel * -1;
|
||||
width: $pixel;
|
||||
height: $pixel;
|
||||
}
|
||||
|
||||
&.-twitter::before {
|
||||
@include pixelize($twitter, $pixel, #1c9ceb);
|
||||
}
|
||||
|
||||
&.-facebook::before {
|
||||
@include pixelize($facebook, $pixel, #4566ae);
|
||||
}
|
||||
|
||||
&.-github::before {
|
||||
@include pixelize($github, $pixel, #333333);
|
||||
}
|
||||
|
||||
&.-youtube::before {
|
||||
@include pixelize($youtube, $pixel, #ff0100);
|
||||
}
|
||||
|
||||
&.-heart::before {
|
||||
@include pixelize($heart, $pixel, #f11416);
|
||||
}
|
||||
|
||||
&.-star::before {
|
||||
@include pixelize($star, $pixel, #f7de4e);
|
||||
}
|
||||
|
||||
&.-like::before {
|
||||
@include pixelize($like, $pixel, #1e77be);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// -default
|
||||
@include setup(2px);
|
||||
|
||||
&.-medium {
|
||||
@include setup(3px);
|
||||
}
|
||||
|
||||
&.-large {
|
||||
@include setup(4px);
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$like: (
|
||||
( 0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0 ),
|
||||
( 0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0 ),
|
||||
( 1,1,1,0,1,0,0,0,0,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
||||
( 1,1,1,0,1,0,0,0,0,0,0,0,0,0,1,0 ),
|
||||
( 1,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0 )
|
||||
);
|
||||
@@ -1,21 +0,0 @@
|
||||
@mixin pixelize($matrix, $size, $color) {
|
||||
$ret: "";
|
||||
|
||||
@for $i from 1 through length($matrix) {
|
||||
$row: nth($matrix, $i);
|
||||
|
||||
@for $j from 1 through length($row) {
|
||||
$dot: nth($row, $j);
|
||||
|
||||
@if $dot != 0 {
|
||||
@if $ret != "" {
|
||||
$ret: $ret + ",";
|
||||
}
|
||||
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " 0 " + $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: unquote($ret + ";");
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$star: (
|
||||
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0),
|
||||
(0,0,0,0,0,1,0,0,1,1,0,0,0,0,0,0),
|
||||
(1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0),
|
||||
(1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0),
|
||||
(0,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0),
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
||||
(0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0),
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
||||
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
|
||||
(0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0),
|
||||
(0,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0),
|
||||
(1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,0),
|
||||
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$twitter: (
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1 ),
|
||||
( 1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1 ),
|
||||
( 1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1 ),
|
||||
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
||||
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1 ),
|
||||
( 1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1 ),
|
||||
( 1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
// prettier-ignore
|
||||
$youtube: (
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
|
||||
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
|
||||
);
|
||||
@@ -1,10 +1,5 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/*!
|
||||
* NES.css v0.0.1(alpha)
|
||||
* NES.css v0.0.2(alpha)
|
||||
*/
|
||||
|
||||
@import "base/_index.scss";
|
||||
@import "elements/_index.scss";
|
||||
@import "form/_index.scss";
|
||||
@import "icons/_index.scss";
|
||||
|
||||
Reference in New Issue
Block a user