Refresh

resources/css/base/forms/_index.css

@@ -0,0 +1,8 @@
+@import "form.css";
+@import "form-group.css";
+@import "input-group.css";
+@import "label.css";
+@import "input.css";
+@import "button.css";
+@import "textarea.css";
+@import "select.css";

resources/css/base/forms/button.css

@@ -0,0 +1,53 @@
+button,
+a.button {
+    @apply rounded text-left flex-shrink flex items-center whitespace-nowrap space-x-1;
+
+    & svg {
+        @apply flex-none;
+    }
+
+    &[type="submit"],
+    &.info {
+        @apply px-2 py-1 text-sm;
+        @apply bg-blue-500 text-white;
+        @apply dark:bg-blue-800 dark:text-white;
+
+        &:hover {
+            @apply bg-blue-400;
+            @apply dark:bg-blue-700;
+        }
+    }
+
+    &.success {
+        @apply px-2 py-1 text-sm;
+        @apply bg-green-500 text-white;
+        @apply dark:bg-green-800 dark:text-white;
+
+        &:hover {
+            @apply bg-green-400;
+            @apply dark:bg-green-700;
+        }
+    }
+
+    &.danger {
+        @apply px-2 py-1 text-sm;
+        @apply bg-red-500 text-white;
+        @apply dark:bg-red-800 dark:text-white;
+
+        &:hover {
+            @apply bg-red-400;
+            @apply dark:bg-red-700;
+        }
+    }
+
+    &.secondary {
+        @apply px-2 py-1 text-sm;
+        @apply bg-gray-400 text-white;
+        @apply dark:bg-gray-700 dark:text-white;
+
+        &:hover {
+            @apply bg-gray-300;
+            @apply dark:bg-gray-600;
+        }
+    }
+}

resources/css/base/forms/form-group.css

@@ -0,0 +1,7 @@
+.form-group {
+    @apply mb-4 w-full;
+
+    &.last {
+        @apply mt-8 mb-0;
+    }
+}

resources/css/base/forms/form.css

@@ -0,0 +1,3 @@
+form {
+    @apply mb-2;
+}

resources/css/base/forms/input-group.css

@@ -0,0 +1,3 @@
+.input-group {
+    @apply flex items-stretch space-x-2 w-full;
+}

resources/css/base/forms/input.css

@@ -0,0 +1,24 @@
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"] {
+    @apply w-full flex-grow rounded px-2 py-1 border;
+    @apply bg-white text-gray-500 border-gray-300;
+    @apply dark:bg-gray-600 dark:text-gray-100 dark:border-gray-600;
+}
+
+input[type="search"] {
+    @apply w-full flex-grow rounded px-2 py-1 border;
+    @apply bg-white text-gray-500 border-gray-300;
+    @apply dark:bg-gray-500 dark:text-gray-100 dark:border-gray-600;
+}
+
+input[type="password"] {
+    @apply tracking-widest;
+}
+
+input[type="color"] {
+    @apply rounded p-0 m-0 h-8 w-12 border-none appearance-none;
+    @apply bg-white;
+    @apply dark:bg-gray-600;
+}

resources/css/base/forms/label.css

@@ -0,0 +1,3 @@
+label {
+    @apply mb-1 flex-shrink whitespace-nowrap flex items-center;
+}

resources/css/base/forms/select.css

@@ -0,0 +1,5 @@
+select {
+    @apply mt-1 block w-full py-0 px-2 border rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
+    @apply border-gray-300 bg-white;
+    @apply dark:border-gray-500 dark:bg-gray-500 dark:text-white;
+}

resources/css/base/forms/textarea.css

@@ -0,0 +1,5 @@
+textarea {
+    @apply rounded w-full;
+    @apply bg-white;
+    @apply dark:bg-gray-500 dark:text-white;
+}