feat: new feats (button, transition, config)

next.config.js

@@ -4,6 +4,9 @@ const path = require("path");
 module.exports = {
   reactStrictMode: true,
   sassOptions: {
-    includePaths: [path.join(__dirname, "styles/abstracts")],
+    includePaths: [
+      path.join(__dirname, "styles/abstracts"),
+      path.join(__dirname, "styles/base"),
+    ],
   },
 };

package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint:next": "next lint",
+    "lint:scss": "npx stylelint \"**/*.scss\" --fix"
   },
   "dependencies": {
     "next": "12.0.10",

styles/abstracts/_variables.scss

@@ -1,3 +1,4 @@
+$default-transition: 0.3s ease;
 $breakpoints: (
   small: 320px,
   medium: 768px,

styles/base/_helpers.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 %content {
   position: absolute;
   content: "";
@@ -27,3 +29,11 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+%button {
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: $default-transition;
+}

styles/base/_root.scss

@@ -7,3 +7,11 @@
     }
   }
 }
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}