initial commit

assets/css/app.scss

@@ -0,0 +1,93 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "components";
+
+/* LiveView specific classes for your customizations */
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+  display: none;
+}
+
+.phx-click-loading {
+  opacity: 0.5;
+  transition: opacity 1s ease-out;
+}
+
+.phx-disconnected{
+  cursor: wait;
+}
+.phx-disconnected *{
+  pointer-events: none;
+}
+
+.phx-modal {
+  opacity: 1!important;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.phx-modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.phx-modal-close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.phx-modal-close:hover,
+.phx-modal-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* Alerts and form errors */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.alert p {
+  margin-bottom: 0;
+}
+.alert:empty {
+  display: none;
+}
+.invalid-feedback {
+  color: #a94442;
+  display: block;
+  margin: -1rem 0 2rem;
+}

assets/css/components.scss

@@ -0,0 +1,41 @@
+@layer components {
+  .input {
+    @apply rounded-lg px-4 py-2 border;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .input-primary {
+    @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+    @apply text-black;
+  }
+  
+  .checkbox {
+    -ms-transform: scale(1.5);
+    -moz-transform: scale(1.5);
+    -webkit-transform: scale(1.5);
+    -o-transform: scale(1.5);
+    transform: scale(1.5);
+    padding: 10px;
+  }
+  
+  .title {
+    @apply leading-5 tracking-wide;
+  }
+  
+  .btn {
+    @apply focus:outline-none px-4 py-2 rounded-lg;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .btn-primary {
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply text-white;
+  }
+  
+  .hr {
+    @apply border border-primary-500 w-full max-w-2xl;
+  }
+}