cax-design-system 2.8.0 → 2.8.1

package/resources/components/calendar/calendar.scss

@@ -1,235 +1,235 @@
-@layer cax {
-   .cax-calendar {
-       position: relative;
-       display: inline-flex;
-       width: 100%;
-       height: 40px;
-   }
-   .cax-calendar-main-label {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        margin-bottom: 8px;
-    }
-
-   .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;
-        left: 0.6rem;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 1rem;
-        pointer-events: none;
-      }
-  }
-
-  .left-side{
-    display: flex;
-    justify-content: space-between;
-    gap: 15px;
-  }
-
-
-
-}
+@layer cax {
+   .cax-calendar {
+       position: relative;
+       display: inline-flex;
+       width: 100%;
+       height: 40px;
+   }
+   .cax-calendar-main-label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 8px;
+    }
+
+   .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;
+        left: 0.6rem;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 1rem;
+        pointer-events: none;
+      }
+  }
+
+  .left-side{
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+  }
+
+
+
+}

package/resources/components/card/card.scss

@@ -1,50 +1,50 @@
-@layer cax {
-    .cax-card-header {
-        display: flex;
-        align-items: center;
-        position: relative;
-        justify-content: space-between;
-        padding: 24px 24px 0px 24px;
-    }
-
-    .cax-card-header-default-padding {
-        padding: 24px 24px 16px 24px;
-    }
-
-    .cax-card-no-header {
-        padding: 10px;
-    }
-
-    .cax-card-header img {
-        width: 100%;
-        height: 180px;
-        border-radius: 12px;
-        border: 1px solid var(--neutral-100);
-    }
-
-    .cax-card-header i {
-        width: 100%;
-        font-size: 48px;
-        line-height: 48px;
-    }
-
-    .cax-card-header cax-badge {
-        position: absolute;
-        top: 24px;
-        right: 36px;
-        z-index: 10;
-        .cax-card-header-default-padding {
-            padding: 24px 24px 0px 24px;
-        }
-    }
-
-    .cax-card-header-with-image cax-badge {
-        right: 36px;
-        top: 36px;
-    }
-
-    .cax-card-header-with-icon cax-badge {
-        right: 26px;
-        top: 36px;
-    }
-}
+@layer cax {
+    .cax-card-header {
+        display: flex;
+        align-items: center;
+        position: relative;
+        justify-content: space-between;
+        padding: 24px 24px 0px 24px;
+    }
+
+    .cax-card-header-default-padding {
+        padding: 24px 24px 16px 24px;
+    }
+
+    .cax-card-no-header {
+        padding: 10px;
+    }
+
+    .cax-card-header img {
+        width: 100%;
+        height: 180px;
+        border-radius: 12px;
+        border: 1px solid var(--neutral-100);
+    }
+
+    .cax-card-header i {
+        width: 100%;
+        font-size: 48px;
+        line-height: 48px;
+    }
+
+    .cax-card-header cax-badge {
+        position: absolute;
+        top: 24px;
+        right: 36px;
+        z-index: 10;
+        .cax-card-header-default-padding {
+            padding: 24px 24px 0px 24px;
+        }
+    }
+
+    .cax-card-header-with-image cax-badge {
+        right: 36px;
+        top: 36px;
+    }
+
+    .cax-card-header-with-icon cax-badge {
+        right: 26px;
+        top: 36px;
+    }
+}