wip: continue implementation

assets/styles/_base.css

@@ -0,0 +1,42 @@
+/* lato-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-700 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-900 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+.htmx-indicator{
+    @apply invisible;
+}
+.htmx-request .htmx-indicator{
+    @apply visible;
+}
+.htmx-request.htmx-indicator{
+    @apply visible;
+}

assets/styles/_components.css

@@ -0,0 +1,5 @@
+@import "components/forms.css";
+@import "components/button.css";
+@import "components/menu.css";
+/*@import "components/toast.css";*/
+/*@import "components/tooltip.css";*/

assets/styles/app.css

@@ -1,21 +1,7 @@
-#content {
-    position: relative;
-}
+@import "tailwindcss/base";
+@import "_base.css";
 
-#loading-indicator {
-    display: none;
-}
+@import "tailwindcss/components";
+@import "_components.css";
 
-#loading-indicator.htmx-request {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: white;
-}
-
-[disabled] {
-    cursor: not-allowed;
-}
+@import "tailwindcss/utilities";

assets/styles/components/button.css

@@ -0,0 +1,16 @@
+.btn {
+    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
+    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+}
+
+.btn--small {
+    @apply text-xs py-1 px-2 rounded-md;
+}
+
+.btn--secondary {
+    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+}
+
+.btn--active {
+    @apply shadow-none;
+}

assets/styles/components/forms.css

@@ -0,0 +1,4 @@
+label.required:after {
+    @apply inline-block text-sm;
+    content: '*';
+}

assets/styles/components/menu.css

@@ -0,0 +1,12 @@
+.menu--main {
+    @apply flex items-center space-x-2;
+}
+
+.menu--main a {
+    @apply uppercase text-lg font-semibold pb-1 px-2 border-b-2 border-white;
+    @apply hover:border-primary;
+}
+
+.menu--main .current a {
+    @apply border-primary;
+}

assets/styles/components/toast.css

@@ -0,0 +1,20 @@
+@import "toastify-js/src/toastify.css";
+
+.toastify {
+    @apply shadow-lg rounded;
+}
+
+.toastify--success {
+    @apply text-gray-100;
+    background: theme('colors.emerald.600');
+}
+
+.toastify--warning {
+    @apply text-gray-100;
+    background: theme('colors.red.600');
+}
+
+.toastify--info {
+    @apply text-gray-100;
+    background: theme('colors.blue.600');
+}

assets/styles/components/tooltip.css

@@ -0,0 +1,18 @@
+@import "tippy.js/dist/tippy.css";
+
+.tippy-box {
+  background-color: theme('colors.primary');
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: theme('colors.primary');
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: theme('colors.primary');
+}