cax-design-system 2.7.2 → 2.7.3

package/resources/cax.scss

@@ -5655,7 +5655,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 +5666,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 +5824,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 +5875,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;
 }

package/resources/components/calendar/calendar.scss

@@ -1,198 +1,228 @@
 @layer cax {
-    .cax-calendar {
-        position: relative;
-        display: flex;
-        width: 216px !important;
-        height : 40px;
-    }
-
-    .cax-calendar .cax-inputtext {
-        flex: 1 1 auto;
-        text-overflow: ellipsis;
-        padding-left: 1.8rem !important;
-        padding-right: 1.8rem !important;
-    }
-
-    .cax-calendar-w-btn .cax-inputtext {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-calendar-w-btn .cax-datepicker-trigger {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-datepicker-calendar-container {
-        padding: 4px;
-    }
-
-    /* Fluid */
-    .cax-fluid .cax-calendar {
-        display: flex;
-    }
-
-    .cax-fluid .cax-calendar .cax-inputtext {
-        width: 1%;
-    }
-
-    /* Datepicker */
-    .cax-calendar .cax-datepicker {
-        min-width: fit-content;
-    }
-
-    .cax-datepicker {
-        width: 372px;
+   .cax-calendar {
+       position: relative;
+       display: inline-flex;
+       max-width: 100%;
+   }
+
+   .cax-calendar .cax-inputtext {
+       flex: 1 1 auto;
+       width: 1%;
+       text-overflow: ellipsis;
+       padding-left: 1.8rem !important;
+      padding-right: 1.8rem !important;
+   }
+
+   .cax-calendar-w-btn .cax-inputtext {
+       border-top-right-radius: 0;
+       border-bottom-right-radius: 0; 
+   }
+
+   .cax-calendar-w-btn .cax-datepicker-trigger {
+       border-top-left-radius: 0;
+       border-bottom-left-radius: 0;
+   }
+
+   /* Fluid */
+   .cax-fluid .cax-calendar {
+       display: flex;
+   }
+
+   .cax-fluid .cax-calendar .cax-inputtext {
+       width: 1%;
+   }
+
+   /* Datepicker */
+   .cax-calendar .cax-datepicker {
+       min-width: 100%;
+   }
+
+   .cax-datepicker {
+       width: auto;
+       position: absolute;
+       top: 0;
+       left: 0;
+   }
+
+   .cax-datepicker-inline {
+       display: inline-block;
+       position: static;
+       overflow-x: auto;
+   }
+
+   /* Header */
+   .cax-datepicker-header {
+       display: flex;
+       align-items: center;
+       justify-content: space-between;
+   }
+
+   .cax-datepicker-header .cax-datepicker-title {
+       margin: 0 auto;
+   }
+
+   .cax-datepicker-prev,
+   .cax-datepicker-next {
+       cursor: pointer;
+       display: inline-flex;
+       justify-content: center;
+       align-items: center;
+       overflow: hidden;
+       position: relative;
+      
+   }
+
+   /* Multiple Month DatePicker */
+   .cax-datepicker-multiple-month .cax-datepicker-group-container {
+       display: flex;
+   }
+
+   .cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group {
+       flex: 1 1 auto;
+   }
+
+   /* Multiple Month DatePicker */
+   .cax-datepicker-multiple-month .cax-datepicker-group-container {
+       display: flex;
+   }
+
+   /* DatePicker Table */
+   .cax-datepicker table {
+       width: 100%;
+       border-collapse: collapse;
+   }
+
+   .cax-datepicker td > span {
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       cursor: pointer;
+       margin: 0 auto;
+       overflow: hidden;
+       position: relative;
+   }
+
+   /* Month Picker */
+   .cax-monthpicker-month {
+       width: 33.3%;
+       display: inline-flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   /*  Button Bar */
+   .cax-datepicker-buttonbar {
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+   }
+
+   /* Time Picker */
+   .cax-timepicker {
+       display: flex;
+       justify-content: center;
+       align-items: center;
+   }
+
+   .cax-timepicker button {
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   .cax-timepicker > div {
+       display: flex;
+       align-items: center;
+       flex-direction: column;
+   }
+
+   /* Touch UI */
+   .cax-datepicker-touch-ui,
+   .cax-calendar .cax-datepicker-touch-ui {
+       position: fixed;
+       top: 50%;
+       left: 50%;
+       min-width: 80vw;
+       transform: translate(-50%, -50%);
+   }
+
+   /* Year Picker */
+   .cax-yearpicker-year {
+       width: 50%;
+       display: inline-flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   .cax-calendar-clear-icon {
+       position: absolute;
+       top: 50%;
+       margin-top: -0.5rem;
+       cursor: pointer;
+   }
+
+   .cax-datepicker-icon {
+       pointer-events: none;
+   }
+
+   .cax-calendar-clearable {
+       position: relative;
+   }
+   .cax-datepicker-icon {
+       pointer-events: none;
+       left: 1.67px;
+       margin-top: 1px !important;
+   }
+   .cax-input-icon-left {
+       order: -1; 
+   }
+
+   .cax-datepicker-inline-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 13px;
+    padding: 10px;
+    
+    
+    .cax-datepicker-inline-input {
+      margin-bottom: 10px;
+      position: relative;
+      display: inline-block;
+      input {
+        width: 130px;
+        height: 32px;
+        padding-left: 2rem;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .cax-datepicker-inline-input .cax-calendar-minimalistic {
         position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .cax-datepicker-inline {
-        display: inline-block;
-        position: static;
-        overflow-x: auto;
-    }
-
-    /* Header */
-    .cax-datepicker-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .cax-datepicker-header .cax-datepicker-title {
-        margin: 0 auto;
-    }
-
-    .cax-datepicker-prev,
-    .cax-datepicker-next {
-        cursor: pointer;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /* Multiple Month DatePicker */
-    .cax-datepicker-multiple-month .cax-datepicker-group-container {
-        display: flex;
-    }
-
-    .cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group {
-        flex: 1 1 auto;
-    }
-
-    /* Multiple Month DatePicker */
-    .cax-datepicker-multiple-month .cax-datepicker-group-container {
-        display: flex;
-    }
-
-    /* DatePicker Table */
-    .cax-datepicker table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    .cax-datepicker td > span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        margin: 0 auto;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /* Month Picker */
-    .cax-monthpicker-month {
-        width: 33.3%;
-        height: 56px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /*  Button Bar */
-    .cax-datepicker-buttonbar {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    /* Time Picker */
-    .cax-timepicker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .cax-timepicker button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .cax-timepicker > div {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    /* Touch UI */
-    .cax-datepicker-touch-ui,
-    .cax-calendar .cax-datepicker-touch-ui {
-        position: fixed;
+        left: 0.6rem;
         top: 50%;
-        left: 50%;
-        min-width: 80vw;
-        transform: translate(-50%, -50%);
-    }
+        transform: translateY(-50%);
+        font-size: 1rem;
+        pointer-events: none;
+      }
+  }
 
-    /* Year Picker */
-    .cax-yearpicker-year {
-        width: 33.3%;
-        height: 56px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
+  .left-side{
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+  }
 
-    .cax-calendar-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-    }
 
-    .cax-datepicker-icon {
-        pointer-events: none;
-        left: 1.67px;
-        color: black !important;
-        margin-top: 1px !important;
-    }
-    .cax-input-icon-left {
-        order: -1; 
-    }
-    
 
-    .cax-calendar-clearable {
-        position: relative;
-    }
-
-    .downarrow{
-         top: 1.5rem !important;
-         color: black !important;
-     
-    }
 }

package/resources/components/dropdown/dropdown.scss

@@ -27,6 +27,14 @@
         flex-shrink: 0;
     }
 
+    .cax-dropdown-trigger-icon {
+        transition: transform 0.3s ease;
+    }
+
+    .cax-dropdown-open .cax-dropdown-trigger-icon {
+        transform: rotate(180deg);
+    }
+
     .cax-dropdown-label {
         display: block;
         white-space: nowrap;

package/resources/components/navigation/navigation.scss

@@ -2,17 +2,20 @@
     .cax-nav {
         width: 88px;
         height: 100vh;
-        transition: width 0.3s ease-in-out;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         overflow: hidden;
         padding: 16px 8px;
         position: absolute;
         left: 0;
         top: 0;
         z-index: 1200;
+        will-change: width;
         .cax-nav-header {
             .cax-image img {
                 max-width: 26px;
                 object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                will-change: max-width;
             }
         }
     }
@@ -20,11 +23,13 @@
         width: 264px;
         .cax-nav-bottom-container {
             width: 248px;
+            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .cax-nav-header {
             .cax-image img {
                 max-width: 100px;
                 object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             }
         }
     }
@@ -67,6 +72,16 @@
                 cursor: pointer;
                 height: 56px;
                 line-height: 24px;
+
+                .cax-image {
+                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: transform;
+                }
+                .cax-image img {
+                    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: opacity;
+                    backface-visibility: hidden;
+                }
             }
         }
     }
@@ -88,13 +103,23 @@
         border-radius: 12px;
         padding: 12px;
         cursor: pointer;
-        transition: width 0.3s ease-in-out;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         display: flex;
         align-items: flex-start;
+        will-change: width;
         .cax-nav-account-icon {
             display: grid;
             margin-left: auto;
         }
+        .cax-avatar {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: transform;
+        }
+        .cax-avatar img {
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: opacity;
+            backface-visibility: hidden;
+        }
     }
 
     .cax-nav.cax-nav-expand .cax-nav-account-details {