cax-design-system 1.2.13 → 2.0.0

package/resources/components/avatar/avatar.scss

@@ -6,7 +6,8 @@
         width: 36px;
         height: 36px;
         font-size: 14px;
-        font-weight: 500;
+        line-height: 20px;
+        font-weight: 700;
     }
 
     .cax-avatar.cax-avatar-image {

package/resources/components/calendar/calendar.scss

@@ -7,7 +7,6 @@
 
     .cax-calendar .cax-inputtext {
         flex: 1 1 auto;
-        width: 1%;
         text-overflow: ellipsis;
     }
 
@@ -21,6 +20,10 @@
         border-bottom-left-radius: 0;
     }
 
+    .cax-datepicker-calendar-container {
+        padding: 4px;
+    }
+
     /* Fluid */
     .cax-fluid .cax-calendar {
         display: flex;
@@ -36,7 +39,7 @@
     }
 
     .cax-datepicker {
-        width: auto;
+        width: 372px;
         position: absolute;
         top: 0;
         left: 0;
@@ -102,6 +105,7 @@
     /* Month Picker */
     .cax-monthpicker-month {
         width: 33.3%;
+        height: 56px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -113,7 +117,7 @@
     /*  Button Bar */
     .cax-datepicker-buttonbar {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
     }
 
@@ -151,7 +155,8 @@
 
     /* Year Picker */
     .cax-yearpicker-year {
-        width: 50%;
+        width: 33.3%;
+        height: 56px;
         display: inline-flex;
         align-items: center;
         justify-content: center;

package/resources/components/chip/chip.scss

@@ -2,62 +2,5 @@
     .cax-chip {
         display: inline-flex;
         align-items: center;
-        padding: 6px 8px;
-        height: 30px !important;
     }
-
-    .cax-chip-text {
-        line-height: 1.5;
-        font-weight: 600;    
-    }
-
-    .cax-chip-icon {
-        line-height: 1.5;
-        font-weight: 600 !important;
-    }
-
-    .cax-chip-remove-icon {
-        line-height: 1.5;
-        font-weight: 600 !important;
-       
-    }
-
-    .cax-chip-remove-icon {
-        cursor: pointer;
-    }
-
-    .cax-chip img {
-        border-radius: 50%;
-    }
-
-      
-    .cax-chip-success {
-        background-color: var(--green-200);
-        color: var(--green-base) ;
-        
-        transition: background-color 0.3s ease;
-      }
-    .cax-chip-success:hover {
-        background-color: var(--green-300);
-        cursor: pointer;
-      }
-    .cax-chip-warning {
-        background-color: var(--orange-200);
-        color: var(--orange-base);
-        transition: background-color 0.3s ease;
-      }
-    .cax-chip-warning:hover {
-        background-color: var(--orange-300);
-        cursor: pointer;
-      }
-      
-    .cax-chip-danger {
-        background-color: #FFEBEB;
-        color: var(--red-base);
-        transition: background-color 0.3s ease;
-      }
-    .cax-chip-danger:hover {
-        background-color: var(--red-200);
-        cursor: pointer;
-      }     
 }

package/resources/components/colorpicker/colorpicker-images.css

@@ -1,7 +1,7 @@
-.p-colorpicker-panel .p-colorpicker-color {
+.cax-colorpicker-panel .cax-colorpicker-color {
     background: transparent url("./images/color.png") no-repeat left top; 
 }
 
-.p-colorpicker-panel .p-colorpicker-hue {
+.cax-colorpicker-panel .cax-colorpicker-hue {
    background: transparent url("./images/hue.png") no-repeat left top; 
 }

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

@@ -1,50 +1,50 @@
 @layer cax {
-    .p-colorpicker {
+    .cax-colorpicker {
         display: inline-block;
     }
 
-    .p-colorpicker-dragging {
+    .cax-colorpicker-dragging {
         cursor: pointer;
     }
 
-    .p-colorpicker-overlay {
+    .cax-colorpicker-overlay {
         position: relative;
     }
 
-    .p-colorpicker-panel {
+    .cax-colorpicker-panel {
         position: relative;
-        width: 193px;
-        height: 166px;
+        min-width: 198px;
+        min-height: 174px;
+        border-radius: var(--radius-100);
     }
 
-    .p-colorpicker-overlay-panel {
+    .cax-colorpicker-overlay-panel {
         position: absolute;
         top: 0;
         left: 0;
     }
 
-    .p-colorpicker-preview {
+    .cax-colorpicker-preview {
         cursor: pointer;
     }
 
-    .p-colorpicker-panel .p-colorpicker-content {
+    .cax-colorpicker-panel .cax-colorpicker-content {
         position: relative;
+        margin: var(--space-100);
     }
 
-    .p-colorpicker-panel .p-colorpicker-color-selector {
+    .cax-colorpicker-panel .cax-colorpicker-color-selector {
         width: 150px;
         height: 150px;
-        top: 8px;
-        left: 8px;
         position: absolute;
     }
 
-    .p-colorpicker-panel .p-colorpicker-color {
+    .cax-colorpicker-panel .cax-colorpicker-color {
         width: 150px;
         height: 150px;
     }
 
-    .p-colorpicker-panel .p-colorpicker-color-handle {
+    .cax-colorpicker-panel .cax-colorpicker-color-handle {
         position: absolute;
         top: 0px;
         left: 150px;
@@ -58,20 +58,19 @@
         opacity: 0.85;
     }
 
-    .p-colorpicker-panel .p-colorpicker-hue {
-        width: 17px;
+    .cax-colorpicker-panel .cax-colorpicker-hue {
+        width: 16px;
         height: 150px;
-        top: 8px;
-        left: 167px;
+        left: 165px;
         position: absolute;
         opacity: 0.85;
     }
 
-    .p-colorpicker-panel .p-colorpicker-hue-handle {
+    .cax-colorpicker-panel .cax-colorpicker-hue-handle {
         position: absolute;
         top: 150px;
         left: 0px;
-        width: 21px;
+        width: 20px;
         margin-left: -2px;
         margin-top: -5px;
         height: 10px;

package/resources/components/navigation/navigation.scss

@@ -12,8 +12,8 @@
     }
     .cax-nav.cax-nav-expand {
         width: 264px;
-        .cax-nav-header-container {
-            margin-right: 10px;
+        .cax-nav-bottom-container {
+            width: 248px;
         }
     }
     .cax-nav-header-container {
@@ -31,30 +31,6 @@
             font-size: 12px;
         }
     }
-    .cax-nav-toggle {
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        position: fixed;
-        cursor: pointer;
-        transition:
-            transform 0.3s ease-in-out,
-            left 0.3s ease-in-out;
-    }
-
-    .cax-nav .cax-nav-toggle {
-        left: 68px;
-        top: 28px;
-    }
-
-    .cax-nav.cax-nav-expand .cax-nav-toggle {
-        left: 244px;
-        transform: rotate(180deg);
-    }
 
     .cax-nav .cax-divider.cax-divider-vertical {
         margin: 0 8px;

package/resources/components/radiobutton/radiobutton.scss

@@ -31,8 +31,4 @@
         vertical-align: bottom;
         align-items: center;
     }
-
-    .cax-radiobutton-label {
-        line-height: 1;
-    }
 }

package/resources/components/table/table.scss

@@ -261,3 +261,95 @@
         left: 0;
     }
 }
+
+.cax-datatable .cax-editable-column .cax-inputtext {
+    width: 100%;
+    box-shadow: none;
+    border: 0;
+    padding: 0;
+    line-height: normal;
+}
+.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody > tr > td {
+    font-size: 12px;
+    .cax-inputtext {
+        font-size: 12px;
+    }
+}
+.cax-datatable.cax-datatable-font-md .cax-datatable-tbody > tr > td {
+    font-size: 14px;
+    .cax-inputtext {
+        font-size: 14px;
+    }
+}
+.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody > tr > td {
+    font-size: 16px;
+    .cax-inputtext {
+        font-size: 16px;
+    }
+}
+.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody > tr > td {
+    font-size: 18px;
+    .cax-inputtext {
+        font-size: 18px;
+    }
+}
+.cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody > tr > td {
+    height: 42px;
+}
+.cax-datatable.cax-datatable-font-sm.cax-datatable-row-md .cax-datatable-tbody > tr > td {
+    height: 56px;
+}
+.cax-datatable.cax-datatable-font-sm.cax-datatable-row-lg .cax-datatable-tbody > tr > td {
+    height: 72px;
+}
+.cax-datatable.cax-datatable-font-sm.cax-datatable-row-xl .cax-datatable-tbody > tr > td {
+    height: 88px;
+}
+.cax-datatable.cax-datatable-font-md.cax-datatable-row-sm .cax-datatable-tbody > tr > td {
+    height: 44px;
+}
+.cax-datatable.cax-datatable-font-md.cax-datatable-row-md .cax-datatable-tbody > tr > td {
+    height: 60px;
+}
+.cax-datatable.cax-datatable-font-md.cax-datatable-row-lg .cax-datatable-tbody > tr > td {
+    height: 78px;
+}
+.cax-datatable.cax-datatable-font-md.cax-datatable-row-xl .cax-datatable-tbody > tr > td {
+    height: 96px;
+}
+.cax-datatable.cax-datatable-font-lg.cax-datatable-row-sm .cax-datatable-tbody > tr > td {
+    height: 54px;
+}
+.cax-datatable.cax-datatable-font-lg.cax-datatable-row-md .cax-datatable-tbody > tr > td {
+    height: 66px;
+}
+.cax-datatable.cax-datatable-font-lg.cax-datatable-row-lg .cax-datatable-tbody > tr > td {
+    height: 86px;
+}
+.cax-datatable.cax-datatable-font-lg.cax-datatable-row-xl .cax-datatable-tbody > tr > td {
+    height: 108px;
+}
+.cax-datatable.cax-datatable-font-xl.cax-datatable-row-sm .cax-datatable-tbody > tr > td {
+    height: 56px;
+}
+.cax-datatable.cax-datatable-font-xl.cax-datatable-row-md .cax-datatable-tbody > tr > td {
+    height: 70px;
+}
+.cax-datatable.cax-datatable-font-xl.cax-datatable-row-lg .cax-datatable-tbody > tr > td {
+    height: 94px;
+}
+.cax-datatable.cax-datatable-font-xl.cax-datatable-row-xl .cax-datatable-tbody > tr > td {
+    height: 116px;
+}
+
+.cax-cell-highlight-default {
+    border: 1px solid var(--primary-500) !important;
+}
+
+.cax-cell-highlight-error {
+    border: 1px solid var(--error-600) !important;
+}
+
+.cax-cell-background-error {
+    background: var(--error-50);
+}

package/resources/components/tag/tag.scss

@@ -5,10 +5,16 @@
         justify-content: center;
     }
 
-    .cax-tag-icon,
+    .cax-tag-icon {
+        width: 10.5px;
+        height: 10.5px;
+    }
+
     .cax-tag-value,
-    .cax-tag-icon.pi {
-        line-height: 1.5;
+    .cax-tag-icon.cax {
+        line-height: 18px;
+        font-weight: 500;
+        font-size: 10.5px;
     }
 
     .cax-tag.cax-tag-rounded {