9 files changed, 384 insertions, 0 deletions
diff --git a/front-end/src/bootstrap/style/all.scss b/front-end/src/bootstrap/style/all.scss
new file mode 100644
index 0000000..ede0b30
--- /dev/null
+++ b/front-end/src/bootstrap/style/all.scss
@@ -0,0 +1,14 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+@import "./buttons.scss";
+@import "./footer.scss";
+@import "./header.scss";
+@import "./inputs.scss";
+@import "./headings.scss";
+@import "./toast.scss";
+@import "./etc.scss";
+@import "./modals.scss";
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/buttons.scss b/front-end/src/bootstrap/style/buttons.scss
new file mode 100644
index 0000000..a440def
--- /dev/null
+++ b/front-end/src/bootstrap/style/buttons.scss
@@ -0,0 +1,44 @@
+.button-group {
+    @apply inline-flex -space-x-0 divide-x overflow-hidden rounded-lg border border-transparent shadow-sm;
+    @apply divide-gray-300 border-gray-300 dark:divide-dark-500 dark:border-dark-500;
+
+    & .btn {
+        @apply border-0 ring-0 focus:ring-0;
+    }
+}
+
+.btn {
+    @apply ease-in-out duration-100 border-2 px-4 py-2 text-center text-sm font-medium transition-all focus:ring-2;
+    @apply bg-white border-gray-300 text-gray-700 shadow-sm hover:bg-gray-100 focus:ring-gray-100;
+
+    .dark & {
+        @apply bg-transparent text-inherit border-dark-300 hover:bg-transparent hover:border-gray-400 focus:ring-gray-300;
+    }
+
+    &.borderless,
+    &.no-border,
+    &.b-0{
+        @apply bg-transparent border-0 shadow-none ring-0 focus:ring-0 active:ring-0;
+    }
+
+    &:disabled {
+        @apply cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400;
+        @apply dark:bg-transparent dark:border-dark-400 dark:text-dark-300;
+    }
+
+    &.sm {
+        @apply px-3 py-1.5 text-sm;
+    }
+
+    &.xs {
+        @apply px-2 py-1;
+    }
+
+    &.lg {
+        @apply px-5 py-3 text-lg;
+    }
+
+    &.xl {
+        @apply px-6 py-4 text-xl;
+    }
+}
diff --git a/front-end/src/bootstrap/style/etc.scss b/front-end/src/bootstrap/style/etc.scss
new file mode 100644
index 0000000..5d65ff4
--- /dev/null
+++ b/front-end/src/bootstrap/style/etc.scss
@@ -0,0 +1,67 @@
+#header-mobile-nav a:hover,
+#header-desktop-nav a:hover,
+#header-mobile-nav .router-link-active,
+#header-desktop-nav .router-link-active,
+footer .footer-content .router-link-active {
+    @apply text-primary-500 dark:text-primary-600;
+}
+
+#header-mobile-nav a {
+    @apply text-2xl;
+}
+
+#site-title h3 {
+    @apply mb-0 text-xl;
+}
+
+
+.env-bg {
+    font-family: "Nunito";
+    background: #f7f7f7;
+    @apply dark:bg-dark-900;
+    @apply text-gray-700 dark:text-gray-300;
+}
+
+.env-bg-gradient {
+    background: #98E4C8;
+    background: -webkit-linear-gradient(bottom right, #98E4C8, #2C6BC3);
+    background: -moz-linear-gradient(bottom right, #98E4C8, #2C6BC3);
+    background: linear-gradient(to top left, #98E4C8, #2C6BC3);
+    @apply text-gray-700;
+}
+
+.app-component-entry {
+    @apply flex flex-col flex-auto mb-10;
+
+    @screen sm {
+        & {
+            min-height: 640px;
+        }
+    }
+}
+
+.vue-notification-group.general-toast {
+    @apply right-5;
+}
+
+.float-label {
+    @apply mt-5 relative;
+
+    &>label {
+        @apply absolute top-0 left-0 bottom-0 block pl-3 ease-linear duration-75 opacity-0;
+    }
+
+    &>input:focus+label {
+        @apply opacity-100 -mt-6;
+    }
+}
+
+.default-page-template {
+    min-height: 400px;
+    @apply container w-full max-w-4xl px-4 pt-3 mx-auto sm:pt-6 md:px-0;
+}
+
+a.link {
+    @apply duration-150 ease-in-out;
+    @apply text-primary-500 hover:text-primary-600;
+}
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/footer.scss b/front-end/src/bootstrap/style/footer.scss
new file mode 100644
index 0000000..4d05928
--- /dev/null
+++ b/front-end/src/bootstrap/style/footer.scss
@@ -0,0 +1,67 @@
+footer{
+    @apply text-center shadow-md bg-white dark:bg-dark-800 dark:text-gray-500;
+
+    .footer-content{
+        @apply mx-auto max-w-7xl p-4;
+        
+        nav,
+        .color-selector-container{
+            @apply col-span-4 sm:col-span-3 md:col-span-2 lg:col-span-2 ml-8 sm:ml-0;
+        }
+        .footer-link.router-link-active {
+            @apply text-primary-500 dark:text-primary-600;
+        }
+            
+        .footer-main-container {
+            @apply grid mb-3 sm:pl-0;
+            @apply grid-cols-4 sm:grid-cols-6 md:grid-cols-6 lg:grid-cols-11 gap-10 lg:gap-20;
+        }
+
+        p.nav-title {
+            @apply mb-3 text-xs font-semibold tracking-wider uppercase text-left;
+        }
+
+        a.footer-link {
+            @apply flex mb-3 text-sm font-medium md:mb-2 text-center transform hover:scale-105 ease-in-out duration-75;
+            @apply hover:text-primary-500 dark:hover:text-primary-600;
+        }
+
+        button.bg-sel-btn {
+            @apply text-sm ease-in-out duration-100 transform hover:scale-105;
+            @apply hover:text-primary-500 dark:hover:text-primary-600;
+        }
+
+        .footer-lower {
+            @apply flex flex-col flex-wrap items-start justify-between pt-10 mt-10 border-t md:flex-row md:items-center dark:border-dark-500;
+        }
+    }
+
+    .env-bg-gradient &{
+        @apply text-current text-gray-700 bg-transparent;
+        .footer-content {
+            border-top: 1px solid;
+            @apply border-gray-200;
+    
+            .nav-title {
+                @apply text-gray-700;
+            }
+
+            nav .footer-link,
+            button.bg-sel-btn{
+                @apply hover:text-white;
+
+                &.router-link-active {
+                    @apply text-white;
+                }
+            }
+
+            button.bg-sel-btn{
+                @apply hover:text-white;
+            }
+        }
+    
+        .footer-lower {
+            @apply border-t-0;
+        }
+    }
+}
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/header.scss b/front-end/src/bootstrap/style/header.scss
new file mode 100644
index 0000000..bc5789d
--- /dev/null
+++ b/front-end/src/bootstrap/style/header.scss
@@ -0,0 +1,40 @@
+header{
+    .header-container{
+        @apply h-12;
+    }
+    .header-container,
+    .side-menu{
+        @apply shadow-md;
+        @apply bg-white dark:bg-dark-800 dark:text-gray-100;
+    }
+    
+    .side-menu {
+        @apply absolute pt-2 ease-in-out duration-150;
+    }
+
+    .drop-controller {
+        min-width: 11rem;
+        @apply hidden md:flex mr-0 ml-auto my-0 relative;
+
+        .drop-menu{
+            @apply w-36 m-auto cursor-pointer text-left rounded-b-lg flex flex-col;
+
+            @apply text-gray-700 bg-white dark:bg-dark-800 dark:text-gray-300;
+
+            @apply bg-white border-b border-l border-r border-transparent;
+
+            a {
+                @apply px-3 py-1;
+                @apply text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-gray-100;
+            }
+        }
+
+        &.hovered .drop-menu {
+            @apply border-gray-200 shadow-md dark:border-dark-500;
+        }
+    }
+
+    .user-menu{
+        @apply m-auto cursor-default truncate whitespace-nowrap max-w-xs;
+    }
+}
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/headings.scss b/front-end/src/bootstrap/style/headings.scss
new file mode 100644
index 0000000..326a7c2
--- /dev/null
+++ b/front-end/src/bootstrap/style/headings.scss
@@ -0,0 +1,32 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @apply font-medium leading-tight mt-0 mb-2;
+}
+
+h1 {
+    @apply sm:text-5xl text-4xl;
+}
+
+h2 {
+    @apply sm:text-4xl text-3xl;
+}
+
+h3 {
+    @apply sm:text-3xl text-2xl;
+}
+
+h4 {
+    @apply sm:text-2xl text-xl;
+}
+
+h5 {
+    @apply sm:text-xl text-lg;
+}
+
+h6 {
+    @apply sm:text-base text-sm;
+}
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/inputs.scss b/front-end/src/bootstrap/style/inputs.scss
new file mode 100644
index 0000000..64f8901
--- /dev/null
+++ b/front-end/src/bootstrap/style/inputs.scss
@@ -0,0 +1,65 @@
+input.input,
+select.input,
+textarea.input {
+    @apply duration-100 ease-in-out outline-none border p-2;
+    @apply border-gray-200 bg-inherit dark:border-dark-400 dark:text-white hover:border-gray-300 hover:dark:border-dark-200;
+}
+
+
+/* CHECKBOXES */
+
+label.checkbox {
+    @apply flex items-center cursor-pointer;
+
+    input[type="checkbox"] {
+        @apply ease-in-out duration-100 w-5 h-5;
+        @apply border-2 rounded-sm border-gray-300 dark:border-dark-500;
+
+        &:checked {
+            @apply text-primary-500 dark:text-primary-600 border-primary-500 dark:border-primary-600;
+        }
+    }
+
+    &.primary {
+        input[type="checkbox"] {
+            @apply appearance-none;
+            @apply hover:border-primary-500 dark:hover:border-primary-600;
+
+            &:checked {
+                @apply bg-primary-500 dark:bg-primary-600 border-primary-500 dark:border-primary-600;
+            }
+
+            &+span.check {
+                clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+                @apply bg-white dark:bg-dark-500;
+            }
+        }
+
+        span.check {
+            margin: 0px 0px 1px 4px;
+            @apply absolute h-3 w-3;
+        }
+    }
+
+}
+
+/*Select */
+
+select.input.options {
+    @apply text-current;
+}
+
+select.input:disabled{
+    @apply appearance-none;
+}
+
+/*Validation inputs*/
+input.input.dirty.data-valid,
+select.input.dirty.data-valid {
+    @apply border-primary-500 dark:border-primary-600;
+}
+
+input.input.dirty.data-invalid,
+select.input.dirty.data-invalid {
+    @apply border-red-600 dark:border-red-500;
+}
diff --git a/front-end/src/bootstrap/style/modals.scss b/front-end/src/bootstrap/style/modals.scss
new file mode 100644
index 0000000..254b8e1
--- /dev/null
+++ b/front-end/src/bootstrap/style/modals.scss
@@ -0,0 +1,29 @@
+.modal-entry {
+    background: #00000077;
+    @apply fixed z-50 flex w-full px-6;
+
+    .modal-content-container {
+        @apply w-full max-w-md p-5 m-auto rounded-md shadow-2xl mt-44;
+        @apply bg-white border border-transparent dark:bg-dark-600 dark:border-primary-500 dark:text-white;
+
+        .modal-title {
+            @apply text-xl font-bold;
+        }
+
+        .modal-description {
+            @apply text-sm;
+        }
+    }
+
+    .modal-button-container {
+        @apply flex flex-row justify-end pt-3 gap-3;
+    }
+
+    .input-container {
+        @apply pt-5;
+
+        input {
+            @apply w-full;
+        }
+    }
+}
+\ No newline at end of file
diff --git a/front-end/src/bootstrap/style/toast.scss b/front-end/src/bootstrap/style/toast.scss
new file mode 100644
index 0000000..3ddc3ac
--- /dev/null
+++ b/front-end/src/bootstrap/style/toast.scss
@@ -0,0 +1,26 @@
+.general-toast {
+    .notification-title {
+        font-size: 16px;
+    }
+
+    .notification-content {
+        font-size: 14px;
+    }
+
+    .vue-notification {
+        @apply duration-200 ease-in-out shadow-md hover:shadow-lg;
+    }
+}
+
+.form-toast {
+    left: calc(50% - 150px);
+    @apply pt-2 mx-auto mb-3;
+
+    .notification-title {
+        font-size: 14px;
+    }
+
+    .notification-content {
+        font-size: 12px;
+    }
+}