cax-design-system 2.7.0 → 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;
@@ -4859,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,
@@ -12118,6 +11969,102 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
     color: var(--white-100);
     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);
@@ -12171,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 {
@@ -12237,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,49 +12385,48 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
 .cax-files {
     color: var(--neutral-900);
 }
-.cax-upload-menu{
+.cax-upload-menu {
     border: 1px solid var(--neutral-200);
-        &:has(.cax-upload-status.uploading),
-        &:has(.cax-upload-status.complete) {
+    &:has(.cax-upload-status.uploading),
+    &:has(.cax-upload-status.complete) {
         border: 1px solid var(--primary-500);
-        }
-      &:has(.cax-error-upload){
+    }
+    &:has(.cax-error-upload) {
         border: 1px solid var(--error-600);
-      }
+    }
 }
-.cax-error-upload{
-    color: var(--error-600) ;
+.cax-error-upload {
+    color: var(--error-600);
 }
-.cax-upload-options{
-    .hint-text{
+.cax-upload-options {
+    .hint-text {
         color: var(--neutral-750);
     }
-    .drop-files{
+    .drop-files {
         color: var(--primary-500);
     }
-    .max-size{
+    .max-size {
         color: var(--neutral-750);
     }
 }
 
-.cax-upload-option{
-
-    .icon-container{
+.cax-upload-option {
+    .icon-container {
         background: var(--neutral-75);
     }
 }
-.cax-file-preview{
-    background-color: var(--neutral-50) ;
+.cax-file-preview {
+    background-color: var(--neutral-50);
     &.canceled {
         background-color: var(--error-50) !important;
-      }
+    }
 }
 .status-container {
-      .success-icon {
-        background-color: var( --success-500);
+    .success-icon {
+        background-color: var(--success-500);
 
         i {
             color: var(--white-100);
         }
-      }
-  }
+    }
+}

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 {

package/resources/components/table/table.scss

@@ -446,6 +446,6 @@ $checkbox-size-xl: 22px;
 }
 
 cax-sorticon {
-    float: right;
+    position: absolute;
     margin-left: 4px;
 }