From 546cd9d161eed98b0f3e06bc61087ebb04ab76d1 Mon Sep 17 00:00:00 2001
From: jas0ncn <me@ijason.cc>
Date: Mon, 10 Sep 2018 00:54:25 +0800
Subject: [PATCH] Improve: separate style file

---
 configs/webpack/common.js         | 14 +++++++-------
 src/containers/Sidebar/style.scss | 10 +++++-----
 src/styles/common.scss            | 25 +++++++++++++++++++++++++
 src/styles/variables.scss         | 19 +++++++++++++++++++
 src/views/App.scss                | 23 +----------------------
 tsconfig.json                     |  4 +++-
 6 files changed, 60 insertions(+), 35 deletions(-)
 create mode 100644 src/styles/common.scss
 create mode 100644 src/styles/variables.scss

diff --git a/configs/webpack/common.js b/configs/webpack/common.js
index 97aaf3f..7591b16 100644
--- a/configs/webpack/common.js
+++ b/configs/webpack/common.js
@@ -6,7 +6,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],
+        plugins: [
+            new TsConfigPathsPlugin()
+        ],
+        alias: {
+            '@styles': resolve(__dirname, 'src/styles/')
+        },
     },
     context: resolve(__dirname, '../../src'),
     module: {
@@ -53,10 +59,4 @@ module.exports = {
     performance: {
         hints: false,
     },
-    resolve: {
-        extensions: ['.jsx', '.js', '.tsx', '.ts'],
-        plugins: [
-            new TsConfigPathsPlugin()
-        ]
-    },
 }
diff --git a/src/containers/Sidebar/style.scss b/src/containers/Sidebar/style.scss
index 274ee6c..39b972c 100644
--- a/src/containers/Sidebar/style.scss
+++ b/src/containers/Sidebar/style.scss
@@ -1,12 +1,11 @@
-$color: #d8dee2;
-$active-color: #57befc;
-$active-color-right: #2c8af8;
+@import '~@styles/variables';
 
 .slidebar {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 120px;
+    background: #fff;
 }
 
 .slidebar-logo {
@@ -37,13 +36,14 @@ $active-color-right: #2c8af8;
         > a,
         a:active,
         a:visited {
-            color: $color;
+            color: $color-gray;
             text-decoration: none;
         }
 
         > a.active {
-            background: linear-gradient(to right, $active-color, $active-color-right);
+            background: linear-gradient(to right, $color-primary, $color-primary-dark);
             color: #fff;
+            box-shadow: 0 2px 8px rgba($color: $color-primary-dark, $alpha: 0.5);
         }
     }
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
new file mode 100644
index 0000000..19411ed
--- /dev/null
+++ b/src/styles/common.scss
@@ -0,0 +1,25 @@
+@import 'variables';
+
+// styles initial
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.app {
+    display: flex;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..654926d
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,19 @@
+/**
+ * Clash Dashboard
+ * Style Common Variables
+ */
+
+// primary colors
+$color-primary: #57befc;
+$color-primary-dark: #2c8af8;
+$color-primary-darken: #54759a;
+$color-primary-light: #7fcae4;
+$color-primary-lightly: #b4ddf5;
+
+// common colors
+$color-gray: #d8dee2;
+$color-gray-dark: #b7c5d6;
+$color-gray-darken: #909399;
+$color-green: #67c23a;
+$color-orange: #e6a23c;
+$color-red: #f56c6c;
diff --git a/src/views/App.scss b/src/views/App.scss
index 9f45f9d..7a9c625 100644
--- a/src/views/App.scss
+++ b/src/views/App.scss
@@ -1,22 +1 @@
-html {
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-}
-
-.app {
-    display: flex;
-    min-height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
+@import '~@styles/common';
diff --git a/tsconfig.json b/tsconfig.json
index fa76458..bd9b91f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,9 @@
             "@i18n": ["src/i18n"],
             "@i18n/*": ["src/i18n/*"],
             "@stores": ["src/stores"],
-            "@stores/*": ["src/stores/*"]
+            "@stores/*": ["src/stores/*"],
+            "@styles": ["src/styles"],
+            "@styles/*": ["src/styles/*"]
         }
     },
     "include": [