Goodbye, Bootstrap & added a button component

4 files changed, 31 insertions, 77 deletions

diff --git a/packages/client/src/scss/_bootstrap.scss b/packages/client/src/scss/_bootstrap.scss
deleted file mode 100644
index b7cc84f..0000000
--- a/packages/client/src/scss/_bootstrap.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-
-$theme-colors: (
-  "primary":    colors.$primary,
-  "secondary":  colors.$secondary,
-  "success":    colors.$success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     colors.$danger,
-  "light":      $light,
-  "dark":       $dark
-);
-
-$font-size-base: 0.75rem;
-
-$h1-font-size:                $font-size-base * 2.5;
-$h2-font-size:                $font-size-base * 2;
-$h3-font-size:                $font-size-base * 1.75;
-$h4-font-size:                $font-size-base * 1.5;
-$h5-font-size:                $font-size-base * 1.125;
-$h6-font-size:                $font-size-base;
-
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size
-);
-
-$input-bg: lighten(#000000, 12%);
-$input-disabled-bg: lighten(#000000, 12%);
-$input-color: colors.$text;
-$input-focus-color: colors.$text;
-$input-focus-box-shadow: none;
-$input-disabled-border-color: lighten(#000000, 50%);
-$input-height-sm: auto;
-
-$btn-padding-y-sm: 0.15rem;
-$btn-padding-x-sm: 0.4rem;
-
-$table-cell-padding-x: 1rem;
-$table-cell-padding-y: 0.2rem;
-
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       colors.$background,
-);
-
-@media (max-width: 1200px) {
-	.fs-1 {
-		font-size: calc(1.375rem + 0.667vw) !important;
-	}
-	.fs-2 {
-		font-size: calc(1.325rem + 1.584vw) !important;
-	}
-	.fs-3 {
-		font-size: calc(1.3rem + 0.017vw) !important;
-	}
-	.fs-4 {
-		font-size: calc(0.82rem + 0.4vw) !important;
-	}
-	.fs-5 {
-		font-size: calc(0.65rem + 0.25vw) !important;
-	}
-}
\ No newline at end of file
diff --git a/packages/client/src/scss/_fonts.scss b/packages/client/src/scss/_fonts.scss
index cc5561a..6af5233 100644
--- a/packages/client/src/scss/_fonts.scss
+++ b/packages/client/src/scss/_fonts.scss
@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap');
 
-$font-title: 'Oxygen', sans-serif;
-$font-primary: 'Open Sans', sans-serif;
\ No newline at end of file
+$title: 'Oxygen', sans-serif;
+$primary: 'Open Sans', sans-serif;
\ No newline at end of file
diff --git a/packages/client/src/scss/_mixins.scss b/packages/client/src/scss/_mixins.scss
new file mode 100644
index 0000000..a84de6a
--- /dev/null
+++ b/packages/client/src/scss/_mixins.scss
@@ -0,0 +1,20 @@
+@use "colors";
+
+@mixin header {
+	display: flex;
+	margin-top: 1rem;
+	margin-left: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+@mixin button {
+	color: colors.$text;
+	background-color: colors.$primary-light;
+	padding: 8px 12px 8px 12px;
+	border: 0;
+	border-radius: 5px;
+	transition: background-color 0.2s ease-in-out;
+	&:hover {
+		background-color: colors.$primary;
+	}
+}
\ No newline at end of file
diff --git a/packages/client/src/scss/_variables.scss b/packages/client/src/scss/_variables.scss
new file mode 100644
index 0000000..afd2347
--- /dev/null
+++ b/packages/client/src/scss/_variables.scss
@@ -0,0 +1,9 @@
+
+$base: 0.75rem;
+
+$font-size-1: $base * 2.5;
+$font-size-2: $base * 2;
+$font-size-3: $base * 1.75;
+$font-size-4: $base * 1.5;
+$font-size-5: $base * 1.125;
+$font-size-6: $base;
\ No newline at end of file