cax-design-system 2.7.2 → 2.7.4

package/resources/cax.scss

@@ -106,6 +106,7 @@
 
     .cax-link:disabled {
         cursor: default;
+        opacity: 0.3;
     }
 
     .cax-sr-only {
@@ -1188,201 +1189,7 @@
         border-color: #fca5a5;
     }
 
-    .cax-multiselect {
-        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: 8px;
-        height: 40px;
-        min-width: 13.5rem;
-    }
-    .cax-multiselect:not(.cax-disabled):hover {
-        border-color: var(--neutral-400);
-    }
-    .cax-multiselect:not(.cax-disabled):active {
-        border-color: var(--primary-500);
-    }
-    .cax-multiselect:not(.cax-disabled):focus {
-        border-color: var(--primary-500);
-    }
-    .cax-multiselect .cax-highlight {
-        border-color: var(--primary-500);
-        background: var(--primary-500);
-    }
-    .cax-multiselect:not(.cax-disabled).cax-focus {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: var(--neutral-400);
-    }
-    .cax-multiselect .cax-multiselect-label {
-        padding: 0.65rem 0.75rem;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-multiselect .cax-multiselect-label.cax-placeholder {
-        color: var(--neutral-400);
-        font-weight: 400;
-    }
-    .cax-multiselect.active .cax-multiselect-label.cax-placeholder {
-        color: var(--neutral-400);
-    }
-    .cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
-        padding: 0.25rem 0.75rem;
-        margin-right: 0.5rem;
-        background: #3f3f46;
-        color: #ffffff;
-        border-radius: 16px;
-    }
-    .cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
-        margin-left: 0.5rem;
-    }
-    .cax-multiselect .cax-multiselect-trigger {
-        background: transparent;
-        color: var(--neutral-900);
-        width: 2.5rem;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-    }
-    .cax-multiselect.cax-variant-filled {
-        background: #27272a;
-    }
-    .cax-multiselect.cax-variant-filled:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-multiselect.cax-variant-filled:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    .cax-inputwrapper-filled .cax-multiselect.cax-multiselect-chip .cax-multiselect-label {
-        padding: 0.25rem 0.75rem;
-    }
-
-    .cax-multiselect-clearable .cax-multiselect-label-container {
-        padding-right: 1.75rem;
-    }
-    .cax-multiselect-clearable .cax-multiselect-clear-icon {
-        color: #a1a1aa;
-        right: 2.5rem;
-    }
-
-    .cax-multiselect-panel {
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 8px;
-        margin-top: 0.25rem;
-        background: var(--white-100);
-    }
-    .cax-multiselect-panel .cax-multiselect-header {
-        padding: 0.5rem 0.5rem 0 0.5rem;
-        border-bottom: 0 none;
-        color: var(--neutral-900);
-        margin: 0 0 0 0;
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-multiselect-filter-container {
-        margin-top: 0.25rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-inputtext {
-        padding-right: 0.75rem;
-        padding-left: 2.5rem;
-    }
-    .cax-multiselect-filter-icon {
-        width: 20px;
-        height: 20px;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-multiselect-filter-icon {
-        left: 0.75rem;
-        color: var(--neutral-900);
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-checkbox {
-        margin-right: 0.5rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close {
-        margin-left: 0.5rem;
-        width: 1.75rem;
-        height: 1.75rem;
-        color: #a1a1aa;
-        border: 0 none;
-        background: var(--white-100);
-        border-radius: 50%;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:enabled:hover {
-        color: #ffffff;
-        border-color: transparent;
-        background: rgba(255, 255, 255, 0.03);
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-    .cax-multiselect-panel .cax-multiselect-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: var(--neutral-900);
-        font-weight: 500;
-        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-multiselect-panel .cax-multiselect-items .cax-multiselect-item:first-child {
-        margin-top: 0;
-    }
-
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item .cax-checkbox {
-        margin-right: 0.5rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item-group {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: #71717a;
-        background: #18181b;
-        font-weight: 600;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-empty-message {
-        padding: 0.5rem 0.75rem;
-        color: #ffffff;
-        background: var(--white-100);
-    }
-
-    .cax-input-filled .cax-multiselect {
-        background: #27272a;
-    }
-    .cax-input-filled .cax-multiselect:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-input-filled .cax-multiselect:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
-        border-color: #fca5a5;
-    }
+    
 
     cax-password.ng-invalid.ng-dirty > .cax-password > .cax-inputtext {
         border-color: #fca5a5;
@@ -5655,7 +5462,7 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     background: transparent;
 }
 .cax-datepicker .cax-datepicker-header {
-    padding: 4px;
+    padding: 10px;
     color: var(--neutral-750);
     background: transparent;
     font-weight: 400;
@@ -5666,12 +5473,12 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
 }
 .cax-datepicker .cax-datepicker-header .cax-datepicker-prev,
 .cax-datepicker .cax-datepicker-header .cax-datepicker-next {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     color: var(--neutral-750);
-    border: 0 none;
+    border:1px solid #D4D7DD;
     background: transparent;
-    border-radius: 50%;
+    border-radius: 8px;
     transition:
         background-color 0.2s,
         color 0.2s,
@@ -5824,8 +5631,6 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
 }
 .cax-datepicker .cax-yearpicker {
     margin: 4px;
-    padding-right: 12px !important;
-    padding-left: 12px !important;
 }
 .cax-datepicker .cax-yearpicker .cax-yearpicker-year {
     padding: 0.25rem;
@@ -5877,7 +5682,22 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     outline-offset: 2px;
     box-shadow: none;
 }
-
+.cax-datepicker-icon{
+    color: var(--black-100);
+}
+.cax-datepicker-inline-input{
+    input{
+        border: 1px solid var(--neutral-200);
+        color: var(--neutral-750);
+    }
+}
+.cax-datepicker-inline-actions{
+    border-top: 1px solid var(--neutral-150);
+    border-bottom: 1px solid var(--neutral-150);
+}
+.cax-downarrow{
+    color: var(--black-100) !important;
+  }
 cax-calendar.cax-calendar-clearable .cax-inputtext {
     padding-right: 2.5rem;
 }
@@ -7542,7 +7362,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
         background-color 0.2s,
         color 0.2s,
         border-color 0.2s,
-        box-shadow 0.2s,
+        // box-shadow 0.2s,
         outline-color 0.2s;
 }
 .cax-sidebar .cax-sidebar-header .cax-sidebar-close:enabled:hover,
@@ -10321,7 +10141,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
 }
 
 .cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
-    background: var(--neutral-75);
+    background: var(--neutral-25);
     border: 1px solid var(--neutral-200);
     color: var(--neutral-900);
     border-bottom-right-radius: 0;
@@ -12446,3 +12266,215 @@ div.cax-cascadeselect-panel {
         }
     }
 }
+
+.cax-multiselect {
+    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: var(--space-100);
+    height: 40px;
+    width: 13.5rem;
+}
+.cax-multiselect:not(.cax-disabled):hover {
+    border-color: var(--neutral-400);
+}
+.cax-multiselect:not(.cax-disabled):active {
+    border-color: var(--primary-500);
+}
+.cax-multiselect:not(.cax-disabled):focus {
+    border-color: var(--primary-500);
+}
+.cax-multiselect .cax-highlight {
+    border-color: var(--primary-500);
+    background: var(--primary-500);
+}
+.cax-multiselect:not(.cax-disabled).cax-focus {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: var(--neutral-400);
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item.cax-highlight {
+    color: var(--black-100);
+    background: var(--primary-75);
+  }
+.cax-multiselect-panel :not(.cax-highlight):not(.cax-disabled).cax-focus{
+    color: var(--black-100);
+    background: var(--primary-75);
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--black-100);
+    background: var(--primary-25);
+  }
+.cax-multiselect .cax-multiselect-label {
+    padding: 0.65rem 0.75rem;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-multiselect .cax-multiselect-label.cax-placeholder {
+    color: var(--neutral-400);
+    font-weight: 400;
+}
+.cax-multiselect.active .cax-multiselect-label.cax-placeholder {
+    color: var(--neutral-400);
+}
+.cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #E3E4E6;
+    color: #4E5155;
+    border-radius: var(--radius-200);
+}
+.cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
+    margin-left: 0.5rem;
+}
+.cax-multiselect .cax-multiselect-trigger {
+    background: transparent;
+    color: var(--neutral-900);
+    width: 2.5rem;
+    border-top-right-radius: var(--radius-75);
+    border-bottom-right-radius: var(--radius-75);
+}
+.cax-multiselect.cax-variant-filled {
+    background: #27272a;
+}
+.cax-multiselect.cax-variant-filled:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-multiselect.cax-variant-filled:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+.cax-inputwrapper-filled .cax-multiselect.cax-multiselect-chip .cax-multiselect-label {
+    padding: 0.25rem 0.75rem;
+}
+
+.cax-multiselect-clearable .cax-multiselect-label-container {
+    padding-right: 1.75rem;
+}
+.cax-multiselect-clearable .cax-multiselect-clear-icon {
+    color: #a1a1aa;
+    right: 2.5rem;
+}
+
+.cax-multiselect-panel {
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    margin-top: 0.25rem;
+    background: var(--white-100);
+}
+.cax-multiselect-panel .cax-multiselect-header {
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    border-bottom: 0 none;
+    color: var(--neutral-900);
+    margin: 0 0 0 0;
+    border-top-right-radius: var(--radius-75);
+    border-top-left-radius: var(--radius-75);
+}
+.cax-multiselect-filter-container {
+    margin-top: 0.25rem;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-inputtext {
+    padding-right: 0.75rem;
+    padding-left: 2.5rem;
+}
+.cax-multiselect-filter-icon {
+    width: 20px;
+    height: 20px;
+}
+.cax-multiselect-filter-container .cax-inputtext {
+    padding-left: 2.2rem !important;
+    padding-right: 1.9rem !important;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-multiselect-filter-icon {
+    left: 0.75rem;
+    color: var(--neutral-900);
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-checkbox {
+    margin-right: 0.5rem;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close {
+    margin-left: 0.5rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: #a1a1aa;
+    border: 0 none;
+    background: var(--white-100);
+    border-radius: 50%;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:enabled:hover {
+    color: var(--white-100);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+.cax-multiselect-panel .cax-multiselect-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: var(--neutral-900);
+    font-weight: 500;
+    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-multiselect-panel .cax-multiselect-items .cax-multiselect-item:first-child {
+    margin-top: 0;
+}
+
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item .cax-checkbox {
+    margin-right: 0.5rem;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item-group {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: #71717a;
+    background: #18181b;
+    font-weight: 600;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-empty-message {
+    padding: var(--space-100) var(--space-150);
+    color: var(--white-100);
+    background: var(--white-100);
+}
+
+.cax-input-filled .cax-multiselect {
+    background: #27272a;
+}
+.cax-input-filled .cax-multiselect:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-input-filled .cax-multiselect:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
+    border-color: #fca5a5;
+}