init

public/scss/abstract/_abstract.scss

@@ -0,0 +1,3 @@
+@import "./variable";
+@import "./mixins";
+@import "./maps";

public/scss/abstract/_maps.scss

@@ -0,0 +1,15 @@
+// $theme_backgrounds: (
+//   "color_1": $color_background_1,
+//   "color_2": $color_background_2,
+//   "color_3": $color_background_3,
+//   "color_4": $color_background_4,
+//   "color_5": $color_background_5
+// );
+
+// $theme_primary_color: (
+//   "color_1": $color_primary_1,
+//   "color_2": $color_primary_2,
+//   "color_3": $color_primary_3,
+//   "color_4": $color_primary_4,
+//   "color_5": $color_primary_5
+// );

public/scss/abstract/_mixins.scss

@@ -0,0 +1,60 @@
+//MEDIA QUERY MANAGER
+// 0 - 600: Phone 
+// 600 - 900: Tablet portrait
+// 900 - 1200: Tablet landscape
+// 1200 - 1800: Normal styles
+// 1800+ : Big Desktop
+// 1em = 16px
+// The smaller device rules always should write below the bigger device rules
+// Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
+@mixin respond($breakpoint) {
+    @if($breakpoint=="phone") {
+        @media only screen and (max-width: 575px) {
+            @content;
+        }
+    }
+    @if($breakpoint=="phone-land") {
+        @media only screen and (max-width: 767px) {
+            @content;
+        }
+    }
+    @if($breakpoint=="tab-port") {
+        @media only screen and (max-width: 991px) {
+            @content;
+        }
+    }
+    @if($breakpoint=="tab-land") {
+        @media only screen and (max-width: 1199px) {
+            @content;
+        }
+    }
+    @if ($breakpoint=="desktop") {
+        @media only screen and (min-width: 1200px) {
+            @content;
+        }
+    }
+    @if($breakpoint=="big-desktop") {
+        @media only screen and (min-width: 1800px) {
+            @content;
+        }
+    }
+}
+
+//don't use it untill you need this too much
+@mixin custommq($min: null, $max: null) {
+    @if ($min !=null and $max !=null) {
+        @media only screen and (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @if ($min==null and $max !=null) {
+        @media only screen and (max-width: $max) {
+            @content;
+        }
+    }
+    @if ($min !=null and $max==null) {
+        @media only screen and (min-width: $min) {
+            @content;
+        }
+    }
+}

public/scss/abstract/_variable.scss

@@ -0,0 +1,48 @@
+// stylelint-disable-next-line scss/dollar-variable-default
+$primary  : #1652F0;
+$secondary: #f73164 !default;
+$success  : #51BB25 !default;
+$info     : #A927F9 !default;
+$warning  : #F8D62B !default;
+$danger   : #DC3545 !default;
+$light    : #F7F6FF !default;
+$dark     : #070707;
+$purple   : #5848BB;
+
+// Body
+$body-bg   : #f0f0f0;
+$body-color: #a2a5b9;
+
+// Typography
+$font-family-base: "Roboto",
+sans-serif;
+$headings-font-weight   : 600;
+$font-size-base         : 0.875rem !default;
+$font-weight-base       : 400 !default;
+// $line-height-base    : 1.6;
+$headings-line-height   : 1.6;
+$h1-font-size           : 2.25rem;
+$h2-font-size           : 1.875rem;
+$h3-font-size           : 1.5rem;
+$h4-font-size           : 1.125rem;
+$h5-font-size           : 1rem;
+$h6-font-size           : 1rem;
+
+$text-muted: #7184ad;
+
+$heading-primary-size : 1.8rem;
+$sub-heading-size     : 1.6rem !default;
+$grid-gutter-width    : 30px;
+$dropdown-lik-color   : $body-color;
+$border-color         : #e5e5e5;
+$headings-color       : #212529 !default;
+$table-striped-bg     : $body-bg;
+$border-radius        : 6px !default;
+$input-btn-focus-width: 0rem !default;
+
+// custom
+$radius    : $border-radius;
+$shadow    : 0 0 20px rgba(89, 102, 122, 0.05);
+$shadow-sm : 0 0.125rem 0.25rem rgba(227, 230, 236, 0.9);
+$shadow-lg : 0 1rem 3rem rgba(35, 38, 45, 0.275);
+$sidebar-width : 80px;