feat: add pixel art cursor

Add two png files for the cursor, one to represent the default cursor and the other one to be a pointer cursor. Add the default one for the html tag. And a `inherited` property for label tag. The pointer one is being added on the button, radio, checkbox and a tags.
nostalgic-css · Dec 7, 2018 · f570d2c · f570d2c
1 parent f6b0fb3
commit f570d2c
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 8 deletions.
diff --git a/assets/cursor-click.png b/assets/cursor-click.png
diff --git a/assets/cursor.png b/assets/cursor.png
diff --git a/css/nes.css b/css/nes.css
diff --git a/css/nes.css.map b/css/nes.css.map
diff --git a/css/nes.min.css b/css/nes.min.css
diff --git a/scss/base/generic.scss b/scss/base/generic.scss
@@ -9,13 +9,26 @@ samp {
   font-family: $font-family;
 }
 
+html {
+  cursor: $cursor-url, auto;
+}
+
 body {
   font-size: $font-size;
   color: $base-color;
   background-color: $background-color;
   -webkit-font-smoothing: none;
 }
 
+label {
+  cursor: inherit;
+}
+
+a,
+button {
+  cursor: $cursor-click-url, pointer;
+}
+
 button,
 [type="button"],
 [type="reset"],

diff --git a/scss/base/variables.scss b/scss/base/variables.scss
@@ -4,3 +4,6 @@ $font-size: 16px !default;
 
 $base-color: $color-black;
 $background-color: $color-white;
+
+$cursor-url: url(../assets/cursor.png);
+$cursor-click-url: url(../assets/cursor-click.png);
diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
@@ -24,7 +24,7 @@
   margin: $border-size;
   text-align: center;
   vertical-align: middle;
-  cursor: pointer;
+  cursor: $cursor-click-url, pointer;
   user-select: none;
 
   @include btn-style($base-color, #fff, #e7e7e7, #adafbc);

diff --git a/scss/elements/checkboxes.scss b/scss/elements/checkboxes.scss
@@ -54,7 +54,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   & + span::before,

diff --git a/scss/elements/radios.scss b/scss/elements/radios.scss
@@ -28,7 +28,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   &:checked + span::before {