easy-admin-rails 0.1.11 → 0.1.13

data/app/assets/builds/easy_admin.css

@@ -1963,6 +1963,187 @@ div.jsoneditor-statusbar > .jsoneditor-size-info {
   opacity: 1;
 }
 
+/* SweetAlert2 Admin Panel Customizations */
+
+/* Modal popup container */
+
+.easy-admin-swal-popup {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  border: 1px solid rgb(229 231 235);
+}
+
+/* Title styling to match admin panel headers */
+
+.easy-admin-swal-title {
+  color: rgb(17 24 39);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  margin: 0;
+}
+
+/* Content text styling */
+
+.easy-admin-swal-content {
+  color: rgb(75 85 99);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 1rem 1.5rem;
+  margin: 0;
+}
+
+/* Button container */
+
+.easy-admin-swal-actions {
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  gap: 0.75rem;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+
+/* Confirm button styling */
+
+.easy-admin-swal-confirm-button {
+  background-color: rgb(59 130 246);
+  color: white;
+  border: 1px solid rgb(59 130 246);
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  outline: none;
+}
+
+.easy-admin-swal-confirm-button:hover {
+  background-color: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+}
+
+.easy-admin-swal-confirm-button:focus {
+  ring: 2px solid rgb(59 130 246);
+  ring-offset: 2px;
+}
+
+/* Cancel button styling */
+
+.easy-admin-swal-cancel-button {
+  background-color: rgb(249 250 251);
+  color: rgb(75 85 99);
+  border: 1px solid rgb(209 213 219);
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  outline: none;
+}
+
+.easy-admin-swal-cancel-button:hover {
+  background-color: rgb(243 244 246);
+  border-color: rgb(156 163 175);
+}
+
+.easy-admin-swal-cancel-button:focus {
+  ring: 2px solid rgb(59 130 246);
+  ring-offset: 2px;
+}
+
+/* Success state confirm button (green) */
+
+.swal2-icon-success + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button {
+  background-color: rgb(34 197 94);
+  border-color: rgb(34 197 94);
+}
+
+.swal2-icon-success + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button:hover {
+  background-color: rgb(21 128 61);
+  border-color: rgb(21 128 61);
+}
+
+/* Error state confirm button (red) */
+
+.swal2-icon-error + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button {
+  background-color: rgb(239 68 68);
+  border-color: rgb(239 68 68);
+}
+
+.swal2-icon-error + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button:hover {
+  background-color: rgb(220 38 38);
+  border-color: rgb(220 38 38);
+}
+
+/* Loading spinner customization */
+
+.easy-admin-swal-popup .swal2-loader {
+  border-color: rgb(59 130 246) transparent rgb(59 130 246) transparent;
+}
+
+/* Icon customizations to match admin panel colors */
+
+.easy-admin-swal-popup .swal2-icon.swal2-success [class^=swal2-success-line] {
+  background-color: rgb(34 197 94);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
+  border-color: rgb(34 197 94);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
+  background-color: rgb(239 68 68);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-question {
+  border-color: rgb(59 130 246);
+  color: rgb(59 130 246);
+}
+
+/* Focus states for better accessibility */
+
+.easy-admin-swal-confirm-button:focus,
+.easy-admin-swal-cancel-button:focus {
+  outline: 2px solid rgb(59 130 246);
+  outline-offset: 2px;
+}
+
+/* Mobile responsiveness */
+
+@media (max-width: 640px) {
+  .easy-admin-swal-popup {
+    width: 90vw !important;
+    margin: 0 auto;
+  }
+
+  .easy-admin-swal-title {
+    font-size: 1rem;
+    padding: 1.25rem 1.25rem 0 1.25rem;
+  }
+
+  .easy-admin-swal-content {
+    padding: 0.75rem 1.25rem;
+    font-size: 0.875rem;
+  }
+
+  .easy-admin-swal-actions {
+    padding: 1rem 1.25rem 1.25rem 1.25rem;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .easy-admin-swal-confirm-button,
+  .easy-admin-swal-cancel-button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -3237,6 +3418,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   left: 50%;
 }
 
+.left-10 {
+  left: 2.5rem;
+}
+
 .left-2 {
   left: 0.5rem;
 }
@@ -3245,6 +3430,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   left: 1.5rem;
 }
 
+.left-8 {
+  left: 2rem;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -3563,6 +3752,14 @@ input:checked + .toggle-switch .toggle-slider:before {
   max-height: 15rem;
 }
 
+.max-h-96 {
+  max-height: 24rem;
+}
+
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
 .min-h-10 {
   min-height: 2.5rem;
 }
@@ -3579,6 +3776,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   width: 0px;
 }
 
+.w-0\.5 {
+  width: 0.125rem;
+}
+
 .w-1\/4 {
   width: 25%;
 }
@@ -3607,6 +3808,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   width: 0.5rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -3619,6 +3824,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   width: 60%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -3724,6 +3933,14 @@ input:checked + .toggle-switch .toggle-slider:before {
   flex-shrink: 0;
 }
 
+.\!grow {
+  flex-grow: 1 !important;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
 .origin-top-left {
   transform-origin: top left;
 }
@@ -3906,6 +4123,12 @@ input:checked + .toggle-switch .toggle-slider:before {
   gap: 1.5rem;
 }
 
+.-space-x-px > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1px * var(--tw-space-x-reverse));
+  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -4018,6 +4241,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   white-space: nowrap;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -4060,11 +4287,21 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-bottom-left-radius: 0.5rem;
 }
 
+.rounded-l-md {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
 .rounded-r-lg {
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
 }
 
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -4187,6 +4424,16 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
 }
 
+.border-green-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
+}
+
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
+}
+
 .border-red-100 {
   --tw-border-opacity: 1;
   border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
@@ -4202,6 +4449,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -4215,6 +4467,16 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(254 249 195 / var(--tw-border-opacity, 1));
 }
 
+.border-yellow-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -4260,6 +4522,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -4709,6 +4976,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   vertical-align: middle;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -4931,6 +5202,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   text-decoration-line: underline;
 }
 
+.line-through {
+  text-decoration-line: line-through;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -4946,6 +5221,16 @@ input:checked + .toggle-switch .toggle-slider:before {
   color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
 }
 
+.placeholder-red-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-placeholder-opacity, 1));
+}
+
+.placeholder-red-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-placeholder-opacity, 1));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -5046,6 +5331,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
@@ -5128,6 +5417,12 @@ input:checked + .toggle-switch .toggle-slider:before {
   transition-duration: 150ms;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5150,6 +5445,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   transition-duration: 500ms;
 }
 
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -5283,6 +5582,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
 
+.focus-within\:border-red-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
 .focus-within\:ring-1:focus-within {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5294,6 +5598,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
 }
 
+.focus-within\:ring-red-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -5534,6 +5843,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   z-index: 10;
 }
 
+.focus\:z-20:focus {
+  z-index: 20;
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -5553,6 +5866,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   outline-offset: 2px;
 }
 
+.focus\:outline-offset-0:focus {
+  outline-offset: 0px;
+}
+
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5748,6 +6065,10 @@ input:checked + .toggle-switch .toggle-slider:before {
     margin-bottom: 1.5rem;
   }
 
+  .sm\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .sm\:ml-16 {
     margin-left: 4rem;
   }
@@ -5844,6 +6165,12 @@ input:checked + .toggle-switch .toggle-slider:before {
     margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));

data/app/assets/stylesheets/easy_admin/application.tailwind.css

@@ -1,4 +1,5 @@
 @import "jsoneditor/dist/jsoneditor.css";
+@import "./swal_customizations.css";
 
 @tailwind base;
 @tailwind components;

data/app/assets/stylesheets/easy_admin/swal_customizations.css

@@ -0,0 +1,168 @@
+/* SweetAlert2 Admin Panel Customizations */
+
+/* Modal popup container */
+.easy-admin-swal-popup {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  border: 1px solid rgb(229 231 235);
+}
+
+/* Title styling to match admin panel headers */
+.easy-admin-swal-title {
+  color: rgb(17 24 39);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  margin: 0;
+}
+
+/* Content text styling */
+.easy-admin-swal-content {
+  color: rgb(75 85 99);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 1rem 1.5rem;
+  margin: 0;
+}
+
+/* Button container */
+.easy-admin-swal-actions {
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  gap: 0.75rem;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+
+/* Confirm button styling */
+.easy-admin-swal-confirm-button {
+  background-color: rgb(59 130 246);
+  color: white;
+  border: 1px solid rgb(59 130 246);
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  outline: none;
+}
+
+.easy-admin-swal-confirm-button:hover {
+  background-color: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+}
+
+.easy-admin-swal-confirm-button:focus {
+  ring: 2px solid rgb(59 130 246);
+  ring-offset: 2px;
+}
+
+/* Cancel button styling */
+.easy-admin-swal-cancel-button {
+  background-color: rgb(249 250 251);
+  color: rgb(75 85 99);
+  border: 1px solid rgb(209 213 219);
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  outline: none;
+}
+
+.easy-admin-swal-cancel-button:hover {
+  background-color: rgb(243 244 246);
+  border-color: rgb(156 163 175);
+}
+
+.easy-admin-swal-cancel-button:focus {
+  ring: 2px solid rgb(59 130 246);
+  ring-offset: 2px;
+}
+
+/* Success state confirm button (green) */
+.swal2-icon-success + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button {
+  background-color: rgb(34 197 94);
+  border-color: rgb(34 197 94);
+}
+
+.swal2-icon-success + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button:hover {
+  background-color: rgb(21 128 61);
+  border-color: rgb(21 128 61);
+}
+
+/* Error state confirm button (red) */
+.swal2-icon-error + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button {
+  background-color: rgb(239 68 68);
+  border-color: rgb(239 68 68);
+}
+
+.swal2-icon-error + .easy-admin-swal-title + .easy-admin-swal-content + .easy-admin-swal-actions .easy-admin-swal-confirm-button:hover {
+  background-color: rgb(220 38 38);
+  border-color: rgb(220 38 38);
+}
+
+/* Loading spinner customization */
+.easy-admin-swal-popup .swal2-loader {
+  border-color: rgb(59 130 246) transparent rgb(59 130 246) transparent;
+}
+
+/* Icon customizations to match admin panel colors */
+.easy-admin-swal-popup .swal2-icon.swal2-success [class^=swal2-success-line] {
+  background-color: rgb(34 197 94);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
+  border-color: rgb(34 197 94);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
+  background-color: rgb(239 68 68);
+}
+
+.easy-admin-swal-popup .swal2-icon.swal2-question {
+  border-color: rgb(59 130 246);
+  color: rgb(59 130 246);
+}
+
+/* Focus states for better accessibility */
+.easy-admin-swal-confirm-button:focus,
+.easy-admin-swal-cancel-button:focus {
+  outline: 2px solid rgb(59 130 246);
+  outline-offset: 2px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+  .easy-admin-swal-popup {
+    width: 90vw !important;
+    margin: 0 auto;
+  }
+  
+  .easy-admin-swal-title {
+    font-size: 1rem;
+    padding: 1.25rem 1.25rem 0 1.25rem;
+  }
+  
+  .easy-admin-swal-content {
+    padding: 0.75rem 1.25rem;
+    font-size: 0.875rem;
+  }
+  
+  .easy-admin-swal-actions {
+    padding: 1rem 1.25rem 1.25rem 1.25rem;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .easy-admin-swal-confirm-button,
+  .easy-admin-swal-cancel-button {
+    width: 100%;
+    justify-content: center;
+  }
+}