From 5f292b6748d0b6670af6673334d73e5625c95c14 Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Wed, 18 Aug 2021 19:48:34 +0800
Subject: [PATCH] [add] scss pages

---
 app/assets/style/all.scss                     |  4 +++
 .../style/components/_notification.scss       | 18 ++++++++++
 app/assets/style/mixin/_sizing.scss           | 35 +++++++++++++++++++
 app/assets/style/mixin/_spacing.scss          | 18 ++++++++++
 app/assets/style/pages/_index.scss            | 20 -----------
 app/assets/style/utilities/_sizing.scss       | 20 +----------
 app/assets/style/utilities/_spacing.scss      | 19 ----------
 app/assets/style/utilities/_utilities.scss    | 14 --------
 app/layout.ejs                                |  2 +-
 9 files changed, 77 insertions(+), 73 deletions(-)
 create mode 100644 app/assets/style/components/_notification.scss
 create mode 100644 app/assets/style/mixin/_sizing.scss
 create mode 100644 app/assets/style/mixin/_spacing.scss

diff --git a/app/assets/style/all.scss b/app/assets/style/all.scss
index 2166021..c1458b9 100644
--- a/app/assets/style/all.scss
+++ b/app/assets/style/all.scss
@@ -9,6 +9,10 @@
 @import './utilities/spacing';
 @import './utilities/sizing';
 
+@import './mixin/spacing';
+@import './mixin/sizing';
+
+@import './components/notification';
 @import './components/swiper';
 @import './components/timeline';
 @import './components/scrollbar';
diff --git a/app/assets/style/components/_notification.scss b/app/assets/style/components/_notification.scss
new file mode 100644
index 0000000..812d1f8
--- /dev/null
+++ b/app/assets/style/components/_notification.scss
@@ -0,0 +1,18 @@
+.notification-circle{
+
+    &::after{
+        content:"";
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        width: 20px;
+        height: 20px;
+
+        border-radius: 50%;
+        background-color: $secondary;
+        color: $white;
+        font-size: $font-size-base;
+        font-family: Roboto, sans-serif;
+
+    }
+}
\ No newline at end of file
diff --git a/app/assets/style/mixin/_sizing.scss b/app/assets/style/mixin/_sizing.scss
new file mode 100644
index 0000000..bed6523
--- /dev/null
+++ b/app/assets/style/mixin/_sizing.scss
@@ -0,0 +1,35 @@
+/* width */
+.w-md-350 {
+  @include media-breakpoint-up(md) {
+    width: 350px;
+  }
+}
+
+/* height */
+.h-md-256 {
+  @include media-breakpoint-up(md) {
+    height: 256px;
+  }
+}
+
+.h-md-350 {
+  @include media-breakpoint-up(md) {
+    height: 350px;
+  }
+}
+
+/* vh */
+
+.vh-100-minus-header {
+  height: calc(100vh - 60px);
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - 82px);
+  }
+}
+
+.vh-100-minus-header-navbar {
+  height: calc(100vh - 115px);
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - 135px);
+  }
+}
diff --git a/app/assets/style/mixin/_spacing.scss b/app/assets/style/mixin/_spacing.scss
new file mode 100644
index 0000000..4dc202a
--- /dev/null
+++ b/app/assets/style/mixin/_spacing.scss
@@ -0,0 +1,18 @@
+/* rwd */
+.pb-md-52 {
+  @include media-breakpoint-up(md) {
+    padding-bottom: 52px;
+  }
+}
+
+.pt-md-80 {
+  @include media-breakpoint-up(md) {
+    padding-top: 80px;
+  }
+}
+
+.mb-md-42 {
+  @include media-breakpoint-up(md) {
+    margin-bottom: 42px;
+  }
+}
diff --git a/app/assets/style/pages/_index.scss b/app/assets/style/pages/_index.scss
index 59b6762..8558572 100644
--- a/app/assets/style/pages/_index.scss
+++ b/app/assets/style/pages/_index.scss
@@ -5,26 +5,6 @@
         text-indent: 101%;
     }
 }
-
-.shopping-cart{
-
-    &::after{
-        content:"";
-        position: absolute;
-        top: -10px;
-        right: -10px;
-        width: 20px;
-        height: 20px;
-
-        border-radius: 50%;
-        background-color: $secondary;
-        color: $white;
-        font-size: $font-size-base;
-        font-family: Roboto, sans-serif;
-
-    }
-}
-
 /* menu */
 .menu-list{
     height: 3.25rem;
diff --git a/app/assets/style/utilities/_sizing.scss b/app/assets/style/utilities/_sizing.scss
index 9506f4c..69ebcc8 100644
--- a/app/assets/style/utilities/_sizing.scss
+++ b/app/assets/style/utilities/_sizing.scss
@@ -15,11 +15,6 @@
 .w-540 {
   width: 540px;
 }
-.w-md-350 {
-  @include media-breakpoint-up(md) {
-    width: 350px;
-  }
-}
 
 /* height */
 
@@ -27,7 +22,7 @@
   height: 120px;
 }
 
-.h-128{
+.h-128 {
   height: 128px;
 }
 .h-256 {
@@ -45,16 +40,3 @@
 .h-560 {
   height: 560px;
 }
-
-.h-md-256 {
-  @include media-breakpoint-up(md) {
-    height: 256px;
-  }
-}
-
-.h-md-350 {
-  @include media-breakpoint-up(md) {
-    height: 350px;
-  }
-}
-
diff --git a/app/assets/style/utilities/_spacing.scss b/app/assets/style/utilities/_spacing.scss
index e1dc083..55fb24f 100644
--- a/app/assets/style/utilities/_spacing.scss
+++ b/app/assets/style/utilities/_spacing.scss
@@ -20,23 +20,4 @@
 
 .mb-42 {
   margin-bottom: 42px;
-}
-
-/* rwd */
-.pb-md-52 {
-  @include media-breakpoint-up(md) {
-    padding-bottom: 52px;
-  }
-}
-
-.pt-md-80 {
-  @include media-breakpoint-up(md) {
-    padding-top: 80px;
-  }
-}
-
-.mb-md-42 {
-  @include media-breakpoint-up(md) {
-    margin-bottom: 42px;
-  }
 }
\ No newline at end of file
diff --git a/app/assets/style/utilities/_utilities.scss b/app/assets/style/utilities/_utilities.scss
index a80e1f8..c032e4b 100644
--- a/app/assets/style/utilities/_utilities.scss
+++ b/app/assets/style/utilities/_utilities.scss
@@ -18,20 +18,6 @@
   }
 }
 
-.vh-100-minus-header {
-  height: calc(100vh - 60px);
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 82px);
-  }
-}
-
-.vh-100-minus-header-navbar {
-  height: calc(100vh - 115px);
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 135px);
-  }
-}
-
 /* color */
 .bg-primary-dark{
   background-color: #190014CC;
diff --git a/app/layout.ejs b/app/layout.ejs
index 0273884..b19c094 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -54,7 +54,7 @@
               aria-controls="cart-offcanvas"
             >
               <span
-                class="material-icons | shopping-cart | text-black align-middle"
+                class="material-icons | notification-circle | text-black align-middle"
               >
                 confirmation_number
               </span>