cax-design-system 2.8.4 → 3.0.0

package/resources/components/calendar/calendar.scss

@@ -1,231 +1,368 @@
-@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;
-        height: 40px;
-        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-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 216px;
+    }
+
+    .cax-calendar {
+        position: relative;
+        display: inline-flex;
+    }
+    .cax-calendar-main-label {
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    .cax-calendar .cax-inputtext {
+        height: 40px;
+        padding: 0 38px;
+        cursor: pointer;
+    }
+
+    .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-downarrow {
+        position: absolute;
+        font-size: 20px;
+        top: 25% !important;
+        right: 10px;
+        cursor: pointer;
+        pointer-events: none;
+    }
+
+    /* Fluid */
+    .cax-fluid .cax-calendar {
+        display: flex;
+    }
+
+    /* Datepicker */
+    .cax-calendar .cax-datepicker {
+        width: 360px;
+        min-width: 360px;
+    }
+
+    .cax-datepicker {
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        .cax-datepicker-group {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
+
+    .cax-datepicker-inline {
+        position: relative;
+    }
+
+    /* Header */
+    .cax-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 16px;
+        .cax-datepicker-prev,
+        .cax-datepicker-next {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .cax-datepicker-prev-icon,
+        .cax-datepicker-next-icon {
+            font-size: 24px;
+        }
+        .cax-datepicker-title {
+            display: flex;
+            gap: 4px;
+            .cax-datepicker-month,
+            .cax-datepicker-year {
+                padding: 8px 12px;
+                font-size: 16px;
+                font-weight: 600;
+                text-decoration: underline;
+            }
+            .cax-datepicker-decade {
+                padding: 8px 12px;
+                font-size: 16px;
+                font-weight: 600;
+                text-decoration: underline;
+            }
+        }
+        .cax-datepicker-month-selector,
+        .cax-datepicker-year-selector {
+            display: flex;
+            align-items: center;
+            .cax-button {
+                .cax-button-icon-center {
+                    font-size: 16px !important;
+                    font-weight: 500 !important;
+                }
+                &:focus {
+                    outline: none !important;
+                }
+            }
+            .cax-datepicker-month-dropdown,
+            .cax-datepicker-year-dropdown {
+                display: flex;
+                align-items: center;
+                font-weight: 600;
+                margin-left: 12px;
+                cursor: pointer;
+                &.cax-datepicker-dropdown-no-icon {
+                    margin-right: 12px;
+                }
+                i {
+                    font-size: 16px;
+                    height: 32px;
+                    width: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+
+    /* 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;
+        border-spacing: 0;
+    }
+
+    .cax-datepicker td {
+        padding: 0;
+    }
+
+    .cax-datepicker td > span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        overflow: visible;
+        position: relative;
+        margin: 0 auto;
+        width: 48px;
+        height: 48px;
+
+        &.cax-datepicker-range-between {
+            background: var(--primary-75) !important;
+            border-radius: 0 !important;
+            color: var(--neutral-900) !important;
+            width: 100% !important;
+        }
+
+        &.cax-datepicker-range-start.cax-highlight {
+            background: transparent !important;
+            width: 100% !important;
+            z-index: 1;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 50%;
+                height: 100%;
+                background: var(--primary-75);
+                z-index: -1;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 48px;
+                height: 48px;
+                background: var(--primary-500);
+                border-radius: 50%;
+                z-index: -1;
+            }
+        }
+
+        &.cax-datepicker-range-end.cax-highlight {
+            background: transparent !important;
+            width: 100% !important;
+            z-index: 1;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 50%;
+                height: 100%;
+                background: var(--primary-75);
+                z-index: -1;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 48px;
+                height: 48px;
+                background: var(--primary-500);
+                border-radius: 50%;
+                z-index: -1;
+            }
+        }
+    }
+
+    /*  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%);
+    }
+
+    .cax-calendar-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+    }
+
+    .cax-calendar-clearable {
+        position: relative;
+    }
+    .cax-datepicker-icon {
+        pointer-events: none;
+        position: absolute;
+        left: 10px;
+        font-size: 20px;
+        top: 25% !important;
+    }
+
+    .cax-datepicker-inline-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 16px 16px 0 16px;
+
+        .cax-datepicker-manual-input {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            flex: 1 1 auto;
+            margin-right: 12px;
+
+            .cax-input-icon-left {
+                width: 100%;
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                i {
+                    position: absolute;
+                    left: 8px;
+                    top: 25% !important;
+                    font-size: 16px;
+                    color: var(--neutral-900);
+                }
+
+                .cax-inputtext {
+                    width: 100%;
+                    height: 32px;
+                    padding: 4px 8px 4px 30px;
+                    font-size: 12px;
+
+                    &.cax-invalid {
+                        border-color: var(--error-600);
+
+                        &:hover {
+                            border-color: var(--error-750);
+                            box-shadow: 0 0 0 1px var(--error-750);
+                        }
+                    }
+                }
+            }
+
+            .cax-error {
+                font-size: 11px;
+                color: var(--error-600);
+            }
+        }
+
+        .cax-datepicker-inline-buttons {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+    }
+
+    .left-side {
+        display: flex;
+        justify-content: space-between;
+        gap: 15px;
+    }
+}

package/resources/components/card/card.scss

@@ -1,50 +1,9 @@
-@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 {
+        img {
+            width: 100%;
+            border-top-left-radius: 16px;
+            border-top-right-radius: 16px;
+        }
+    }
+}