cax-design-system 2.6.1 → 2.7.1

package/resources/cax.scss

@@ -978,140 +978,6 @@
             background-color: transparent;
         }
     }
-    .cax-cascadeselect {
-        border: 1px solid var(--neutral-200);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 7px;
-    }
-    .cax-cascadeselect:not(.cax-disabled):hover {
-        border-color: #52525b;
-    }
-    .cax-cascadeselect:not(.cax-disabled).cax-focus {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: #52525b;
-    }
-    .cax-cascadeselect .cax-cascadeselect-label {
-        background: transparent;
-        border: 0 none;
-        padding: 0.65rem 0.75rem;
-    }
-    .cax-cascadeselect .cax-cascadeselect-label.cax-placeholder {
-        color: var(--neutral-400);
-    }
-    .cax-cascadeselect .cax-cascadeselect-label:enabled:focus {
-        outline: 0 none;
-        box-shadow: none;
-    }
-    .cax-cascadeselect .cax-cascadeselect-trigger {
-        background: transparent;
-        color: #a1a1aa;
-        width: 2.5rem;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-    }
-    .cax-cascadeselect.cax-invalid.cax-component {
-        border-color: #fca5a5;
-    }
-    .cax-cascadeselect.cax-variant-filled {
-        background-color: #27272a;
-    }
-    .cax-cascadeselect.cax-variant-filled:enabled:hover {
-        background-color: #27272a;
-    }
-    .cax-cascadeselect.cax-variant-filled:enabled:focus {
-        background-color: #27272a;
-    }
-
-    .cax-cascadeselect-panel {
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 7px;
-        background: var(--white-100);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item {
-        margin: 2px 0;
-        border: 0 none;
-        color: var(--neutral-900);
-        background: var(--white-100);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:first-child {
-        margin-top: 0;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight {
-        color: var(--neutral-900);
-        background: var(--neutral-200);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight.cax-focus {
-        background: var(--neutral-200);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
-        color: var(--neutral-900);
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: var(--neutral-900);
-        background: var(--neutral-100);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-item-content {
-        padding: 0.5rem 0.75rem;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-group-icon {
-        font-size: 0.875rem;
-    }
-
-    .cax-input-filled .cax-cascadeselect {
-        background: #27272a;
-    }
-    .cax-input-filled .cax-cascadeselect:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-input-filled .cax-cascadeselect:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    cax-cascadeselect.ng-dirty.ng-invalid > .cax-cascadeselect {
-        border-color: #fca5a5;
-    }
-
-    cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-label {
-        padding-right: 0.75rem;
-    }
-    cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-clear-icon {
-        color: #a1a1aa;
-        right: 2.5rem;
-    }
-
-    .cax-overlay-modal .cax-cascadeselect-sublist .cax-cascadeselect-panel {
-        box-shadow: none;
-        border-radius: 0;
-        padding: 0.25rem 0 0.25rem 0.5rem;
-    }
-    .cax-overlay-modal .cax-cascadeselect-item-active > .cax-cascadeselect-item-content .cax-cascadeselect-group-icon {
-        transform: rotate(90deg);
-    }
-
-    .cax-overlay-scroll {
-        max-height: 300px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
 
     .cax-input-filled .cax-checkbox .cax-checkbox-box {
         background-color: #27272a;
@@ -2756,39 +2622,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;
     }
@@ -4848,6 +4681,7 @@
         font-size: 1rem;
     }
 }
+
 @layer cax {
     .cax-accordion .cax-accordion-header .cax-accordion-header-link {
         border-radius: 6px !important;
@@ -4891,21 +4725,6 @@
         background-color: #22d3ee;
     }
 
-    .cax-cascadeselect .cax-cascadeselect-label {
-        box-shadow: none;
-    }
-    .cax-cascadeselect.cax-disabled {
-        opacity: 1;
-    }
-    .cax-cascadeselect.cax-disabled .cax-cascadeselect-label {
-        color: #a1a1aa;
-    }
-
-    div.cax-cascadeselect-panel {
-        border: 0 none;
-        box-shadow: none;
-    }
-
     // .cax-checkbox .cax-checkbox-box {
     //     box-shadow:
     //         0 0 #0000,
@@ -7744,9 +7563,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;
@@ -12154,6 +11970,133 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
     text-decoration: underline;
 }
 
+.cax-cascadeselect {
+    height: 40px;
+    align-items: center;
+    border: var(--border-100) solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    padding: var(--space-100) 10px var(--space-100) 10px;
+}
+
+.cax-cascadeselect:not(.cax-disabled):hover {
+    border-color: var(--neutral-300);
+}
+.cax-cascadeselect:not(.cax-disabled).cax-focus {
+    outline: none;
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: var(--primary-500);
+}
+.cax-cascadeselect .cax-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+}
+.cax-cascadeselect .cax-cascadeselect-label.cax-placeholder {
+    color: var(--neutral-300);
+}
+.cax-cascadeselect .cax-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+}
+.cax-cascadeselect .cax-cascadeselect-trigger {
+    background: transparent;
+    color: var(--neutral-750);
+    width: 20px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+.cax-cascadeselect.cax-invalid.cax-component {
+    border-color: #fca5a5;
+}
+.cax-cascadeselect.cax-variant-filled {
+    background-color: #27272a;
+}
+.cax-cascadeselect.cax-variant-filled:enabled:hover {
+    background-color: #27272a;
+}
+.cax-cascadeselect.cax-variant-filled:enabled:focus {
+    background-color: #27272a;
+}
+
+.cax-cascadeselect-panel {
+    min-width: 14rem;
+    color: var(--neutral-900);
+    border: var(--border-100) solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    background: var(--white-100);
+    margin-top: var(--space-50);
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items {
+    padding: var(--space-150) var(--space-50) var(--space-150) var(--space-50);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item {
+    margin: 2px 0;
+    border: 0 none;
+    color: var(--neutral-750);
+    background: var(--white-100);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:first-child {
+    margin-top: 0;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight {
+    color: var(--primary-500);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight:hover {
+    background: var(--primary-25);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight.cax-focus {
+    // background: var(--neutral-200);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
+    color: var(--neutral-900);
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--neutral-900);
+    background: var(--primary-25);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-item-content {
+    padding: 0.5rem 0.75rem;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-group-icon {
+    font-size: 0.875rem;
+}
+
+.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;
@@ -12175,10 +12118,13 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
 .cax-column-filter-menu-button:hover {
     color: var(--neutral-900);
     border-color: transparent;
+    background: var(--primary-100);
+    border-radius: 6px;
 }
 .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);
+    background: var(--primary-100);
 }
 .cax-column-filter-menu-button.cax-column-filter-menu-button-active,
 .cax-column-filter-menu-button.cax-column-filter-menu-button-active:hover {
@@ -12241,6 +12187,66 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
         outline-color 0.2s;
     border-radius: 4px;
 }
+
+.cax-input-filled .cax-cascadeselect {
+    background: #27272a;
+}
+.cax-input-filled .cax-cascadeselect:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-input-filled .cax-cascadeselect:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+cax-cascadeselect.ng-dirty.ng-invalid > .cax-cascadeselect {
+    border-color: #fca5a5;
+}
+
+cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-label {
+    padding-right: 0.75rem;
+}
+cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-clear-icon {
+    color: #a1a1aa;
+    right: 2.5rem;
+}
+
+.cax-overlay-modal .cax-cascadeselect-sublist .cax-cascadeselect-panel {
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0.25rem 0 0.25rem 0.5rem;
+}
+.cax-overlay-modal .cax-cascadeselect-item-active > .cax-cascadeselect-item-content .cax-cascadeselect-group-icon {
+    transform: rotate(90deg);
+}
+
+.cax-cascadeselect .cax-cascadeselect-label {
+    box-shadow: none;
+}
+.cax-cascadeselect.cax-disabled {
+    opacity: 1;
+}
+.cax-cascadeselect.cax-disabled .cax-cascadeselect-label {
+    color: #a1a1aa;
+}
+
+.cax-cascadeselect-sublist {
+    box-shadow:
+        var(--shadow-lg-1) #16181d14,
+        var(--shadow-lg-2) #16181d0f;
+}
+
+div.cax-cascadeselect-panel {
+    border: 0 none;
+    box-shadow:
+        var(--shadow-lg-1) #16181d14,
+        var(--shadow-lg-2) #16181d0f;
+}
+
+.cax-overlay-scroll {
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:first-child {
     margin-top: 0;
 }
@@ -12375,3 +12381,52 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
     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 {

package/resources/components/cascadeselect/cascadeselect.scss

@@ -66,7 +66,8 @@
         z-index: 1;
         display: none;
         max-height: 300px;
-        overflow-y: auto;
+    }
+    .cax-cascadeselect-items-wrapper {
         overflow-x: hidden;
     }
 
@@ -77,8 +78,8 @@
     .cax-cascadeselect-item-active > .cax-cascadeselect-sublist {
         display: block;
         left: 100%;
-        top: 0;
-        margin-left: 4px;
+        top: 4px;
+        margin-left: 8px;
     }
 
     .cax-cascadeselect-clear-icon {