cax-design-system 2.6.0 → 2.7.0

package/resources/cax.scss

@@ -2050,193 +2050,6 @@
         padding: 0 1.125rem 1.125rem 1.125rem;
     }
 
-    .cax-column-filter-row .cax-column-filter-menu-button,
-    .cax-column-filter-row .cax-column-filter-clear-button {
-        margin-left: 0.5rem;
-    }
-
-    .cax-column-filter-menu-button {
-        width: 1.75rem;
-        height: 1.75rem;
-        color: var(--neutral-900);
-        border: 0 none;
-        background: transparent;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-column-filter-menu-button:hover {
-        color: var(--neutral-900);
-        border-color: transparent;
-    }
-    .cax-column-filter-menu-button.cax-column-filter-menu-button-open,
-    .cax-column-filter-menu-button.cax-column-filter-menu-button-open:hover {
-        color: var(--neutral-900);
-    }
-    .cax-column-filter-menu-button.cax-column-filter-menu-button-active,
-    .cax-column-filter-menu-button.cax-column-filter-menu-button-active:hover {
-        background: var(--primary-100);
-        color: var(--primary-color);
-    }
-    .cax-column-filter-menu-button:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-
-    .cax-column-filter-clear-button {
-        width: 1.75rem;
-        height: 1.75rem;
-        color: #a1a1aa;
-        border: 0 none;
-        background: transparent;
-        border-radius: 50%;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-column-filter-clear-button:hover {
-        color: #ffffff;
-        border-color: transparent;
-        background: rgba(255, 255, 255, 0.03);
-    }
-    .cax-column-filter-clear-button:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-
-    .cax-column-filter-overlay {
-        background: var(--white-100);
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 6px;
-
-        min-width: 12.5rem;
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: #ffffff;
-        background: transparent;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:first-child {
-        margin-top: 0;
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item.cax-highlight {
-        color: rgba(255, 255, 255, 0.87);
-        background: rgba(34, 211, 238, 0.16);
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.03);
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: 0 none;
-    }
-    .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-separator {
-        border-top: 1px solid #3f3f46;
-        margin: 2px 0;
-    }
-
-    .cax-column-filter-overlay-menu .cax-column-filter-operator {
-        padding: 0.5rem 0.5rem 0 0.5rem;
-        border-bottom: 0 none;
-        color: #ffffff;
-        margin: 0 0 0 0;
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-        border-bottom: 1px solid #3f3f46;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-matchmode-dropdown {
-        margin-bottom: 0.5rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-remove-button {
-        margin-top: 0.5rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint:last-child {
-        border-bottom: 0 none;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-add-rule {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-buttonbar {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-    }
-    .cax-column-filter-custom-container .cax-divider.cax-divider-horizontal:before {
-        border-color: var(--neutral-200);
-    }
-    .cax-column-filter-custom-list-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 10px;
-        border-radius: 8px;
-        border: 1px solid var(--neutral-200);
-        cursor: pointer;
-        font-weight: 500;
-        span {
-            color: var(--neutral-300);
-        }
-        i {
-            font-size: 20px;
-        }
-    }
-    .cax-column-filter-custom-list {
-        border: 1px solid var(--neutral-200);
-        padding: 16px 8px;
-        border-radius: 8px;
-        margin-top: 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        max-height: 300px;
-        overflow: auto;
-        .cax-column-filter-custom-list-item {
-            padding: 6px 8px;
-            cursor: pointer;
-            font-weight: 500;
-            &:hover {
-                background: var(--neutral-50);
-                border-radius: 6px;
-            }
-        }
-    }
-
-    .cax-column-filter-custom-list::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-    }
-    .cax-column-filter-custom-list::-webkit-scrollbar-track {
-        background: transparent;
-    }
-    .cax-column-filter-custom-list::-webkit-scrollbar-thumb {
-        background: #888;
-        border-radius: 10px;
-    }
-
     .cax-orderlist .cax-orderlist-controls {
         padding: 0 1.125rem 1.125rem 1.125rem;
     }
@@ -2943,39 +2756,6 @@
         border-bottom-right-radius: 6px;
     }
 
-    .cax-card {
-        background: var(--white-900);
-        color: var(--neutral-900);
-        border: 1px solid #e0e5eb;
-        border-radius: 12px;
-        width: 386px;
-    }
-    .cax-card:hover {
-        cursor: pointer;
-        box-shadow:
-            0 1px 3px 0 rgba(0, 0, 0, 0.1),
-            0 1px 2px -1px rgba(0, 0, 0, 0.1);
-    }
-    .cax-card .cax-card-body {
-        padding: 0px 24px 24px 24px;
-    }
-    .cax-card .cax-card-title {
-        font-size: 1.25rem;
-        font-weight: 700;
-        overflow: hidden;
-    }
-    .cax-card .cax-card-subtitle {
-        font-weight: 400;
-        color: var(--neutral-900);
-        overflow: hidden;
-    }
-    .cax-card .cax-card-content {
-        padding: 0 0 0 0;
-    }
-    .cax-card .cax-card-footer {
-        padding: 0 0 0 0;
-    }
-
     .cax-divider .cax-divider-content {
         background-color: #18181b;
     }
@@ -5035,6 +4815,7 @@
         font-size: 1rem;
     }
 }
+
 @layer cax {
     .cax-accordion .cax-accordion-header .cax-accordion-header-link {
         border-radius: 6px !important;
@@ -5159,36 +4940,6 @@
         padding: 0;
     }
 
-    .cax-column-filter-overlay-menu {
-        padding: 0.75rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-operator {
-        padding: 0;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraints {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint {
-        padding: 0 0 0 0;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-remove-button {
-        margin-bottom: 0.5rem;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-constraint:last-child .cax-column-filter-remove-button {
-        margin-bottom: 0;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-add-rule {
-        padding: 0;
-    }
-    .cax-column-filter-overlay-menu .cax-column-filter-buttonbar {
-        padding: 0;
-    }
-
     .cax-fileupload .cax-fileupload-content {
         border-top: 0 none;
         padding-top: 1.125rem;
@@ -7961,9 +7712,6 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-sidebar .cax-sidebar-content {
     padding: 24px;
 }
-.cax-sidebar .cax-sidebar-footer {
-    padding: 24px;
-}
 .cax-progressbar-indeterminate {
     display: flex;
     position: relative;
@@ -11881,7 +11629,7 @@ cax-selectbutton.ng-dirty.ng-invalid > .cax-selectbutton > .cax-button {
 }
 .cax-dialog .cax-dialog-content {
     background: var(--white-100);
-    color: var(--neutral-600);
+    color: var(--neutral-900);
     padding: 0 1.5rem 1.5rem 1.5rem;
 }
 .cax-confirm-dialog-content {
@@ -12370,3 +12118,306 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
     color: var(--white-100);
     text-decoration: underline;
 }
+.cax-card {
+    background: var(--white-900);
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-100);
+    border-radius: 12px;
+    width: 386px;
+}
+.cax-card:hover {
+    cursor: pointer;
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}
+.cax-card .cax-card-body {
+    padding: 0px 24px 24px 24px;
+}
+.cax-card .cax-card-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    overflow: hidden;
+}
+.cax-card .cax-card-subtitle {
+    font-weight: 400;
+    color: var(--neutral-900);
+    overflow: hidden;
+}
+.cax-card .cax-card-content {
+    padding: 0 0 0 0;
+}
+.cax-card .cax-card-footer {
+    padding: 0 0 0 0;
+}
+.cax-column-filter-row .cax-column-filter-menu-button,
+.cax-column-filter-row .cax-column-filter-clear-button {
+    margin-left: 0.5rem;
+}
+
+.cax-column-filter-menu-button {
+    width: 1.75rem;
+    height: 1.75rem;
+    color: var(--neutral-900);
+    border: 0 none;
+    background: transparent;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-column-filter-menu-button:hover {
+    color: var(--neutral-900);
+    border-color: transparent;
+}
+.cax-column-filter-menu-button.cax-column-filter-menu-button-open,
+.cax-column-filter-menu-button.cax-column-filter-menu-button-open:hover {
+    color: var(--neutral-900);
+}
+.cax-column-filter-menu-button.cax-column-filter-menu-button-active,
+.cax-column-filter-menu-button.cax-column-filter-menu-button-active:hover {
+    background: var(--primary-100);
+    color: var(--primary-color);
+}
+.cax-column-filter-menu-button:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+
+.cax-column-filter-clear-button {
+    width: 1.75rem;
+    height: 1.75rem;
+    color: #a1a1aa;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-column-filter-clear-button:hover {
+    color: #ffffff;
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+}
+.cax-column-filter-clear-button:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+
+.cax-column-filter-overlay {
+    background: var(--white-100);
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-200);
+    border-radius: 6px;
+
+    min-width: 12.5rem;
+}
+.cax-column-filter-overlay .cax-column-filter-row-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: #ffffff;
+    background: transparent;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:first-child {
+    margin-top: 0;
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item.cax-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: 0 none;
+}
+.cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-separator {
+    border-top: 1px solid #3f3f46;
+    margin: 2px 0;
+}
+
+.cax-column-filter-overlay-menu .cax-column-filter-operator {
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    border-bottom: 0 none;
+    color: #ffffff;
+    margin: 0 0 0 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+    border-bottom: 1px solid #3f3f46;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-remove-button {
+    margin-top: 0.5rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-add-rule {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-buttonbar {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+}
+.cax-column-filter-custom-container .cax-divider.cax-divider-horizontal:before {
+    border-color: var(--neutral-200);
+}
+.cax-column-filter-custom-list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    border-radius: 8px;
+    border: 1px solid var(--neutral-200);
+    cursor: pointer;
+    font-weight: 500;
+    span {
+        color: var(--neutral-300);
+    }
+    i {
+        font-size: 20px;
+    }
+}
+.cax-column-filter-custom-list {
+    border: 1px solid var(--neutral-200);
+    padding: 16px 8px;
+    border-radius: 8px;
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 300px;
+    overflow: auto;
+    .cax-column-filter-custom-list-item {
+        padding: 6px 8px;
+        cursor: pointer;
+        font-weight: 500;
+        &:hover {
+            background: var(--neutral-50);
+            border-radius: 6px;
+        }
+    }
+}
+
+.cax-column-filter-custom-list::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+.cax-column-filter-custom-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+.cax-column-filter-custom-list::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+.cax-column-filter-overlay-menu {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-operator {
+    padding: 0;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraints {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint {
+    padding: 0 0 0 0;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint .cax-column-filter-remove-button {
+    margin-bottom: 0.5rem;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-constraint:last-child .cax-column-filter-remove-button {
+    margin-bottom: 0;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-add-rule {
+    padding: 0;
+}
+.cax-column-filter-overlay-menu .cax-column-filter-buttonbar {
+    padding: 0;
+}
+
+.cax-sort-icon-button-active {
+    background-color: var(--primary-100) !important;
+    border-radius: 6px;
+}
+
+.cax-files {
+    color: var(--neutral-900);
+}
+.cax-upload-menu{
+    border: 1px solid var(--neutral-200);
+        &:has(.cax-upload-status.uploading),
+        &:has(.cax-upload-status.complete) {
+        border: 1px solid var(--primary-500);
+        }
+      &:has(.cax-error-upload){
+        border: 1px solid var(--error-600);
+      }
+}
+.cax-error-upload{
+    color: var(--error-600) ;
+}
+.cax-upload-options{
+    .hint-text{
+        color: var(--neutral-750);
+    }
+    .drop-files{
+        color: var(--primary-500);
+    }
+    .max-size{
+        color: var(--neutral-750);
+    }
+}
+
+.cax-upload-option{
+
+    .icon-container{
+        background: var(--neutral-75);
+    }
+}
+.cax-file-preview{
+    background-color: var(--neutral-50) ;
+    &.canceled {
+        background-color: var(--error-50) !important;
+      }
+}
+.status-container {
+      .success-icon {
+        background-color: var( --success-500);
+
+        i {
+            color: var(--white-100);
+        }
+      }
+  }

package/resources/components/card/card.scss

@@ -19,7 +19,7 @@
         width: 100%;
         height: 180px;
         border-radius: 12px;
-        border: 1px solid #e0e5eb;
+        border: 1px solid var(--neutral-100);
     }
 
     .cax-card-header i {