[add] scss pages

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';

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;
+
+    }
+}

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);
+  }
+}

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;
+  }
+}

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;

app/assets/style/utilities/_sizing.scss

@@ -15,19 +15,14 @@
 .w-540 {
   width: 540px;
 }
-.w-md-350 {
-  @include media-breakpoint-up(md) {
-    width: 350px;
-  }
-}
 
 /* height */
 
 .h-120 {
   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;
-  }
-}
-

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;
-  }
 }

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;

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>