cax-design-system 2.0.0 → 2.2.0

package/resources/components/avatar/avatar.scss

@@ -15,7 +15,7 @@
     }
 
     .cax-avatar.cax-avatar-circle {
-        border-radius: 50%;
+        border-radius: 50% !important;
     }
 
     .cax-avatar .cax-avatar-icon {
@@ -29,6 +29,6 @@
     }
 
     .cax-avatar.cax-avatar-circle img {
-        border-radius: 50%;
+        border-radius: 50% !important;
     }
 }

package/resources/components/avatargroup/{avatargroup.css → avatargroup.scss}

@@ -1,9 +1,9 @@
 @layer cax {
-    .p-avatar-group p-avatar + p-avatar {
+    .cax-avatar-group cax-avatar + cax-avatar {
         margin-left: -1rem;
     }
 
-    .p-avatar-group {
+    .cax-avatar-group {
         display: flex;
         align-items: center;
     }

package/resources/components/badge/badge.scss

@@ -31,4 +31,37 @@
         padding: 0;
         border-radius: 50%;
     }
+
+    .cax-badge-button-wrapper {
+        position: relative;
+        display: inline-flex;
+
+        .cax-badge {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            transform: none;
+            min-width: 20px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 12px;
+            z-index: 1;
+        }
+    }
+
+    .cax-button-badge {
+        position: relative !important;
+
+        .cax-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            z-index: 1;
+            min-width: 1.5rem;
+            height: 1.5rem;
+            line-height: 1.5rem;
+            font-size: 0.75rem;
+        }
+    }
 }

package/resources/components/button/button.scss

@@ -10,7 +10,6 @@
         text-align: center;
         overflow: hidden;
         position: relative;
-        
     }
 
     .cax-button-label {
@@ -102,12 +101,22 @@
     .cax-button-content-wrapper {
         display: inline-flex;
         align-items: center;
-        gap: 1rem; 
+        gap: 1rem;
         max-width: fit-content;
+        position: relative;
+    }
+    .cax-button-loading-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
     }
 
-    .cax-button-icon-left, .cax-button-icon-right, .cax-button-label {
-         flex: 0 0 auto;
+    .cax-button-icon-left,
+    .cax-button-icon-right,
+    .cax-button-label {
+        flex: 0 0 auto;
     }
 
     .center-icon {
@@ -117,14 +126,38 @@
         align-items: center;
         justify-content: center;
     }
+    .cax-main-loader {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: transparent;
+        .cax-button-sm {
+            height: 32px !important;
+            padding: var(--space-100) var(--space-150) var(--space-100) var(--space-150) !important;
+            gap: var(--space-75);
+        }
+        .cax-button-md {
+            height: 40px !important;
+            padding: var(--space-100) var(--space-200) var(--space-100) var(--space-200) !important;
+            gap: var(--space-100);
+        }
+        .cax-button-lg {
+            height: 48px !important;
+            padding: var(--space-100) var(--space-200) var(--space-100) var(--space-200) !important;
+            gap: var(--space-100);
+        }
+    }
     .spin {
         display: inline-block;
         animation: spin 1s linear infinite;
-      }
-      
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-      }
-      
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
 }

package/resources/components/dropdown/dropdown.scss

@@ -41,7 +41,6 @@
     }
 
     .cax-dropdown .cax-dropdown-panel {
-       
     }
 
     .cax-dropdown-items-wrapper {
@@ -54,7 +53,7 @@
         white-space: nowrap;
         position: relative;
         overflow: hidden;
-        font-weight: 500;   
+        font-weight: 500;
     }
 
     .cax-dropdown-item-group {
@@ -67,21 +66,6 @@
         list-style-type: none;
     }
 
-    .cax-dropdown-filter {
-        width: 100%;
-    }
-
-    .cax-dropdown-filter-container {
-        position: relative;
-        flex: 1 1 auto;
-    }
-
-    .cax-dropdown-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-
     .cax-fluid .cax-dropdown {
         display: flex;
     }
@@ -92,5 +76,5 @@
 
     .cax-float-label .cax-dropdown .cax-placeholder {
         opacity: 0;
-    }   
+    }
 }

package/resources/components/editor/editor.scss

@@ -0,0 +1,4 @@
+.cax-editor-container .cax-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+    width: auto;
+    height: auto;
+}

package/resources/components/inputmask/{inputmask.css → inputmask.scss}

@@ -1,12 +1,12 @@
 @layer cax {
-    .p-inputmask-clear-icon {
+    .cax-inputmask-clear-icon {
         position: absolute;
         top: 50%;
         margin-top: -0.5rem;
         cursor: pointer;
     }
 
-    .p-inputmask-clearable {
+    .cax-inputmask-clearable {
         position: relative;
     }
 }

package/resources/components/inputtext/inputtext.scss

@@ -1,6 +1,8 @@
 @layer cax {
     .cax-inputtext {
-        margin: 0;
+        font-weight: 500;
+        padding: 8px 10px 8px 10px;
+        border-radius: 8px;
     }
 
     .cax-fluid .cax-inputtext {
@@ -111,38 +113,34 @@
     .disabled-opacity {
         opacity: 0.5;
     }
-    .cax-inputtext.with-left-icon {
-        padding-left: 35px;
-    }
-
-    .cax-inputtext.with-right-icon {
-        padding-right: 35px;
-    }
-
-    .cax-float-label input:focus ~ label,
-    .cax-float-label input.cax-filled ~ label {
-        top: -0.75rem;
-        font-size: 12px;
-    }
 
     input:enabled:focus {
         outline: none;
     }
 
-    input.input-invalid:enabled:focus {
-        border-color: var(--red-base);
+    .non-clickable-icon {
+        cursor: default;
     }
-    input.input-invalid {
-        border: 1px solid var(--red-base) !important;
+    .cax-inputtext.full-width {
+        width: 100%;
     }
-    .clickable-icon {
-        cursor: pointer;
+
+    .cax-input-wrapper {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        width: fit-content;
     }
 
-    .non-clickable-icon {
-        cursor: default;
+    .cax-icon-left {
+        left: 10px;
     }
-    .cax-inputtext.full-width {
+
+    .cax-icon-right {
+        right: 10px;
+    }
+
+    .cax-fluid .cax-input-wrapper {
         width: 100%;
     }
 }

package/resources/components/messages/messages.scss

@@ -6,6 +6,7 @@
 
     .cax-message-wrap {
         display: flex;
+        gap: 8px;
     }
 
     .cax-message-close {
@@ -40,7 +41,6 @@
     .cax-message-button-wrapper {
         display: flex;
         overflow-x: auto;
-        padding: 0 14px 14px 20px;
 
         cax-button {
             margin-right: 8px;

package/resources/components/overlaypanel/overlaypanel.scss

@@ -1,7 +1,7 @@
 @layer cax {
     .cax-overlaypanel {
         position: absolute;
-        margin-top: 10px;
+        margin-top: 8px;
         top: 0;
         left: 0;
     }
@@ -60,4 +60,7 @@
     .cax-overlaypanel.cax-overlaypanel-flipped:before {
         border-bottom-color: transparent;
     }
+    .overlaypanelclose {
+        font-size: 20px;
+    }
 }

package/resources/components/paginator/paginator.scss

@@ -6,6 +6,10 @@
         flex-wrap: wrap;
     }
 
+    .cax-paginator.right-aligned {
+        justify-content: flex-end;
+    }
+
     .cax-paginator-left-content {
         margin-right: auto;
     }

package/resources/components/progressbar/progressbar.scss

@@ -4,18 +4,6 @@
         overflow: hidden;
     }
 
-    .cax-progressbar-determinate .cax-progressbar-value {
-        height: 100%;
-        width: 0%;
-        position: absolute;
-        display: none;
-        border: 0 none;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        overflow: hidden;
-    }
-
     .cax-progressbar-determinate .cax-progressbar-label {
         display: inline-flex;
     }
@@ -32,9 +20,6 @@
     .cax-progressbar-determinate-no-value .cax-progressbar-value-animate {
         transition: width 2s ease-in-out;
     }
-    .cax-progressbar-value {
-        border-radius: 8px 0px 0px 8px;
-    }
 
     .cax-progressbar-indeterminate .cax-progressbar-value::before {
         content: '';

package/resources/components/progressspinner/progressspinner.scss

@@ -39,19 +39,19 @@
         stroke: transparent;
     }
 
-    .cax-progress-spinner-size-s {
-        width: 25.46px;
-        height: 25.46px;
+    .cax-progress-spinner-size-sm {
+        width: 25px;
+        height: 25px;
     }
 
-    .cax-progress-spinner-size-m {
-        width: 38.18px;
-        height: 38.18px;
+    .cax-progress-spinner-size-md {
+        width: 36px;
+        height: 36px;
     }
 
-    .cax-progress-spinner-size-l {
-        width: 50.91px;
-        height: 50.91px;
+    .cax-progress-spinner-size-lg {
+        width: 50px;
+        height: 50px;
     }
 }
 

package/resources/components/sidebar/sidebar.scss

@@ -40,7 +40,7 @@
     .cax-sidebar-right {
         top: 0;
         right: 0;
-        width: 478px;
+        width: 480px;
         height: -webkit-fill-available;
         margin: 15px 15px 15px 15px;
         border-radius: 12px;

package/resources/components/splitbutton/splitbutton.scss

@@ -8,8 +8,11 @@
     .cax-splitbutton.cax-button-rounded > .cax-splitbutton-defaultbutton.cax-button,
     .cax-splitbutton.cax-button-outlined > .cax-splitbutton-defaultbutton.cax-button {
         flex: 1 1 auto;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        padding: var(--space-100) var(--space-150) var(--space-100) var(--space-150) !important;
+        border-top-left-radius: var(--radius-100) !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-bottom-left-radius: var(--radius-100) !important;
         border-right: 0 none;
     }
 
@@ -35,7 +38,7 @@
         width: 8px; /* Adjust width to control the gap */
         display: inline-block;
     }
-    
+
     /* Adds a vertical line */
     .cax-splitbutton-divider {
         width: 0px;

package/resources/components/steps/{steps.css → steps.scss}

@@ -1,23 +1,23 @@
 @layer cax {
-    .p-steps {
+    .cax-steps {
         position: relative;
     }
 
-    .p-steps ul {
+    .cax-steps ul {
         padding: 0;
         margin: 0;
         list-style-type: none;
         display: flex;
     }
 
-    .p-steps-item {
+    .cax-steps-item {
         position: relative;
         display: flex;
         justify-content: center;
         flex: 1 1 auto;
     }
 
-    .p-steps-item .p-menuitem-link {
+    .cax-steps-item .cax-menuitem-link {
         display: inline-flex;
         flex-direction: column;
         align-items: center;
@@ -25,25 +25,26 @@
         text-decoration: none;
     }
 
-    .p-steps.p-steps-readonly .p-steps-item {
+    .cax-steps.cax-steps-readonly .cax-steps-item {
         cursor: auto;
     }
 
-    .p-steps-item.p-steps-current .p-menuitem-link {
+    .cax-steps-item.cax-steps-current .cax-menuitem-link {
         cursor: default;
     }
 
-    .p-steps-title {
+    .cax-steps-title {
         white-space: nowrap;
     }
 
-    .p-steps-number {
+    .cax-steps-number {
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
-    .p-steps-title {
+    .cax-steps-title {
         display: block;
     }
+    
 }

package/resources/components/table/table.scss

@@ -75,12 +75,18 @@
 
     .cax-datatable-scrollable .cax-frozen-column {
         position: sticky;
-        background: inherit;
         z-index: 1;
     }
 
     .cax-datatable-scrollable th.cax-frozen-column {
+        z-index: 2;
+        background: var(--neutral-75);
+    }
+
+    .cax-datatable-scrollable td.cax-frozen-column {
         z-index: 1;
+        background: transparent;
+        backdrop-filter: blur(80px);
     }
 
     .cax-datatable-flex-scrollable {
@@ -269,30 +275,64 @@
     padding: 0;
     line-height: normal;
 }
+
+$checkbox-size-sm: 16px;
+$checkbox-size-md: 18px;
+$checkbox-size-lg: 20px;
+$checkbox-size-xl: 22px;
+
 .cax-datatable.cax-datatable-font-sm .cax-datatable-tbody > tr > td {
     font-size: 12px;
+
     .cax-inputtext {
         font-size: 12px;
     }
+
+    cax-tablecheckbox .cax-checkbox .cax-checkbox-box {
+        width: $checkbox-size-sm;
+        height: $checkbox-size-sm;
+    }
 }
+
 .cax-datatable.cax-datatable-font-md .cax-datatable-tbody > tr > td {
     font-size: 14px;
+
     .cax-inputtext {
         font-size: 14px;
     }
+
+    cax-tablecheckbox .cax-checkbox .cax-checkbox-box {
+        width: $checkbox-size-md;
+        height: $checkbox-size-md;
+    }
 }
+
 .cax-datatable.cax-datatable-font-lg .cax-datatable-tbody > tr > td {
     font-size: 16px;
+
     .cax-inputtext {
         font-size: 16px;
     }
+
+    cax-tablecheckbox.cax-checkbox .cax-checkbox-box {
+        width: $checkbox-size-lg;
+        height: $checkbox-size-lg;
+    }
 }
+
 .cax-datatable.cax-datatable-font-xl .cax-datatable-tbody > tr > td {
     font-size: 18px;
+
     .cax-inputtext {
         font-size: 18px;
     }
+
+    cax-tablecheckbox.cax-checkbox .cax-checkbox-box {
+        width: $checkbox-size-xl;
+        height: $checkbox-size-xl;
+    }
 }
+
 .cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody > tr > td {
     height: 42px;
 }

package/resources/components/tabview/tabview.scss

@@ -26,16 +26,21 @@
     }
 
     .cax-tabview-nav li.full-mode {
+        min-height: 60px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex: 1 !important;
         cax-tabview .cax-tabview-nav li .cax-tabview-nav-link {
-        border: none;
+            border: none;
         }
     }
 
     .cax-tabview-nav li.half-mode {
+        min-height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         flex: none !important;
     }
     .cax-tabview-nav-link {
@@ -95,6 +100,7 @@
     .cax-segment-tabview-header {
         display: flex;
         align-items: center;
+        height: 48px;
     }
 
     .cax-segment-tabview-nav {
@@ -131,7 +137,7 @@
     .cax-arrow-buttons {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 16px;
     }
 
     .cax-left-arrow,
@@ -143,18 +149,15 @@
     }
     .cax-left-arrow {
         left: 0;
-        padding-left: 16px;
-        margin-right: 16px;
+        padding-left: var(--space-200);
     }
 
     .cax-right-arrow {
         right: 0;
-        padding-right: 16px;
+        padding-right: var(--space-200);
     }
 
     .cax-dynamic-icon {
-        margin-top: -5px;
-        margin-right: 10px;
         font-size: 1.25rem;
         cursor: pointer;
     }
@@ -170,7 +173,8 @@
 
     .cax-segment-tabview-nav li.pinned {
         position: sticky;
-        left: 0;
+        left: var(--pinned-left, 0);
         z-index: 10;
+        background-color: var(--white-100);
     }
 }