new design implement for login screen, organization onboarding form changes, new filter implement in all screens, remove icons from validation,

2026-07-29 19:12:51 +05:30
parent 0907e0f5dc
commit 4838e16dc8
40 changed files with 2407 additions and 793 deletions
@@ -253,4 +253,158 @@

 .data-table-modern .custom-floating-input[type='number'] {
  -moz-appearance: textfield;
+}
+
+
+/* Filter toggle button (in the toolbar) */
+.filter-btn-enter {
+  animation: filterButtonIn 0.2s ease-out;
+}
+
+.filter-btn-leave {
+  animation: filterButtonOut 0.15s ease-in forwards;
+}
+
+@keyframes filterButtonIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes filterButtonOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+/* Full-width filter row, joined to the table card */
+.table-filter-row {
+  display: grid;
+  grid-template-rows: 0fr;
+  border-bottom-width: 0;
+  background-color: color-mix(in srgb, var(--color-primary) 3%, transparent);
+  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
+    border-bottom-width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.table-filter-row.is-open {
+  grid-template-rows: 1fr;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--color-defaultborder);
+}
+
+:host-context(.dark) .table-filter-row {
+  border-color: color-mix(in srgb, #fff 10%, transparent);
+  background-color: color-mix(in srgb, #fff 3%, transparent);
+}
+
+.table-filter-row-inner {
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
+  min-height: 0;
+  min-width: 0;
+  opacity: 0;
+  transition: opacity 0.28s ease 0.06s, padding 0.38s cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: baseline;
+}
+
+.table-filter-row:not(.is-open) .table-filter-row-inner {
+  overflow: hidden;
+}
+
+.table-filter-row.is-open .table-filter-row-inner {
+  padding: 0.875rem 1.25rem;
+  opacity: 1;
+  transition: opacity 0.32s ease 0.08s, padding 0.38s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.table-filter-row-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  gap: 0.75rem;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.5rem;
+  margin-bottom: -0.5rem;
+  padding-top: 10px;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-primary) 40%, transparent) transparent;
+}
+
+.table-filter-row-content>* {
+  flex: 0 0 auto;
+}
+
+.table-filter-row-content::-webkit-scrollbar {
+  height: 2px;
+}
+
+.table-filter-row-content::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+  border-radius: 999px;
+  transition: background-color 0.2s ease;
+}
+
+.table-filter-row-content:hover::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--color-primary) 65%, transparent);
+}
+
+.table-filter-row-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-filter-row-actions {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75rem;
+  flex: 0 0 auto;
+}
+
+.table-filter-row-actions.is-pinned {
+  position: sticky;
+  right: 0;
+  margin-left: auto;
+  padding-left: 0.75rem;
+  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-primary) 3%, var(--color-white)) 1rem);
+}
+
+:host-context(.dark) .table-filter-row-actions.is-pinned {
+  background: linear-gradient(to right, transparent, color-mix(in srgb, #fff 3%, var(--color-bodybg)) 1rem);
+}
+
+.table-filter-row .filter-close-btn {
+  margin-top: 0.125rem;
+}
+
+.filter-close-btn {
+  transition: transform 0.15s ease, background-color 0.15s ease;
+  border-color: #7c3deb;
+}
+
+.filter-close-btn:hover {
+  transform: rotate(90deg);
+}
+
+.filter-close-btn:active {
+  transform: rotate(90deg) scale(0.9);
 }