cax-design-system 2.7.12 → 2.8.0

package/resources/components/dialog/dialog.scss

@@ -1,171 +1,171 @@
-@layer cax {
-    .cax-dialog-mask {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        pointer-events: none;
-    }
-
-    .cax-dialog-mask.cax-component-overlay {
-        pointer-events: auto;
-    }
-
-    .cax-dialog {
-        display: flex;
-        flex-direction: column;
-        pointer-events: auto;
-        max-height: 90%;
-        transform: scale(1);
-        position: relative;
-    }
-    .cax-dialog-content {
-        overflow-y: auto;
-        flex-grow: 1;
-    }
-
-    .cax-dialog-header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        flex-shrink: 0;
-    }
-
-    .cax-dialog-draggable .cax-dialog-header {
-        cursor: move;
-    }
-
-    .cax-dialog-footer {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-        flex-shrink: 0;
-    }
-    .cax-button-container {
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .cax-dialog .cax-dialog-header-icons {
-        display: flex;
-        align-items: center;
-    }
-
-    .cax-dialog .cax-dialog-header-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /* Fluid */
-    .cax-fluid .cax-dialog-footer .cax-button {
-        width: auto;
-    }
-
-    /* Top, Bottom, Left, Right, Top* and Bottom* */
-    .cax-dialog-top .cax-dialog,
-    .cax-dialog-bottom .cax-dialog,
-    .cax-dialog-left .cax-dialog,
-    .cax-dialog-right .cax-dialog,
-    .cax-dialog-top-left .cax-dialog,
-    .cax-dialog-top-right .cax-dialog,
-    .cax-dialog-bottom-left .cax-dialog,
-    .cax-dialog-bottom-right .cax-dialog {
-        margin: 0.75rem;
-        transform: translate3d(0px, 0px, 0px);
-    }
-
-    /* Maximize */
-    .cax-dialog-maximized {
-        -webkit-transition: none;
-        transition: none;
-        transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
-        top: 0px !important;
-        left: 0px !important;
-        max-height: 100%;
-        height: 100%;
-    }
-    .cax-dialog-maximized .cax-dialog-content {
-        flex-grow: 1;
-    }
-
-    /* Position */
-    .cax-dialog-left {
-        justify-content: flex-start;
-    }
-    .cax-dialog-right {
-        justify-content: flex-end;
-    }
-    .cax-dialog-top {
-        align-items: flex-start;
-    }
-    .cax-dialog-top-left {
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
-    .cax-dialog-top-right {
-        justify-content: flex-end;
-        align-items: flex-start;
-    }
-    .cax-dialog-bottom {
-        align-items: flex-end;
-    }
-    .cax-dialog-bottom-left {
-        justify-content: flex-start;
-        align-items: flex-end;
-    }
-    .cax-dialog-bottom-right {
-        justify-content: flex-end;
-        align-items: flex-end;
-    }
-
-    /* Resizable */
-    .cax-dialog .cax-resizable-handle {
-        position: absolute;
-        font-size: 0.1px;
-        display: block;
-        cursor: se-resize;
-        width: 12px;
-        height: 12px;
-        right: 1px;
-        bottom: 1px;
-    }
-    .cax-header-allign {
-        display: flex;
-        align-items: center;
-    }
-    .cax-dialog-header-icon {
-        font-size: 1.25rem;
-    }
-
-    .cax-confirm-dialog .cax-dialog-content {
-        display: flex;
-        align-items: center;
-    }
-
-    .cax-dialog-content .cax-dialog-checkbox {
-        display: block;
-        margin-top: 1rem; /* Adjusts spacing as needed */
-    }
-
-    .cax-dialog-checkbox input[type='checkbox'] {
-        margin-right: 0.5rem; /* Space between checkbox and label */
-    }
-
-    .cax-header-align {
-        display: flex;
-        align-items: center;
-    }
-
-    .cax-dialog-title {
-        margin-left: 10px;
-    }
-}
+@layer cax {
+    .cax-dialog-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+    }
+
+    .cax-dialog-mask.cax-component-overlay {
+        pointer-events: auto;
+    }
+
+    .cax-dialog {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        max-height: 90%;
+        transform: scale(1);
+        position: relative;
+    }
+    .cax-dialog-content {
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+
+    .cax-dialog-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        flex-shrink: 0;
+    }
+
+    .cax-dialog-draggable .cax-dialog-header {
+        cursor: move;
+    }
+
+    .cax-dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        flex-shrink: 0;
+    }
+    .cax-button-container {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .cax-dialog .cax-dialog-header-icons {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-dialog .cax-dialog-header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Fluid */
+    .cax-fluid .cax-dialog-footer .cax-button {
+        width: auto;
+    }
+
+    /* Top, Bottom, Left, Right, Top* and Bottom* */
+    .cax-dialog-top .cax-dialog,
+    .cax-dialog-bottom .cax-dialog,
+    .cax-dialog-left .cax-dialog,
+    .cax-dialog-right .cax-dialog,
+    .cax-dialog-top-left .cax-dialog,
+    .cax-dialog-top-right .cax-dialog,
+    .cax-dialog-bottom-left .cax-dialog,
+    .cax-dialog-bottom-right .cax-dialog {
+        margin: 0.75rem;
+        transform: translate3d(0px, 0px, 0px);
+    }
+
+    /* Maximize */
+    .cax-dialog-maximized {
+        -webkit-transition: none;
+        transition: none;
+        transform: none;
+        width: 100vw !important;
+        height: 100vh !important;
+        top: 0px !important;
+        left: 0px !important;
+        max-height: 100%;
+        height: 100%;
+    }
+    .cax-dialog-maximized .cax-dialog-content {
+        flex-grow: 1;
+    }
+
+    /* Position */
+    .cax-dialog-left {
+        justify-content: flex-start;
+    }
+    .cax-dialog-right {
+        justify-content: flex-end;
+    }
+    .cax-dialog-top {
+        align-items: flex-start;
+    }
+    .cax-dialog-top-left {
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .cax-dialog-top-right {
+        justify-content: flex-end;
+        align-items: flex-start;
+    }
+    .cax-dialog-bottom {
+        align-items: flex-end;
+    }
+    .cax-dialog-bottom-left {
+        justify-content: flex-start;
+        align-items: flex-end;
+    }
+    .cax-dialog-bottom-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+
+    /* Resizable */
+    .cax-dialog .cax-resizable-handle {
+        position: absolute;
+        font-size: 0.1px;
+        display: block;
+        cursor: se-resize;
+        width: 12px;
+        height: 12px;
+        right: 1px;
+        bottom: 1px;
+    }
+    .cax-header-allign {
+        display: flex;
+        align-items: center;
+    }
+    .cax-dialog-header-icon {
+        font-size: 1.25rem;
+    }
+
+    .cax-confirm-dialog .cax-dialog-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-dialog-content .cax-dialog-checkbox {
+        display: block;
+        margin-top: 1rem; /* Adjusts spacing as needed */
+    }
+
+    .cax-dialog-checkbox input[type='checkbox'] {
+        margin-right: 0.5rem; /* Space between checkbox and label */
+    }
+
+    .cax-header-align {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-dialog-title {
+        margin-left: 10px;
+    }
+}

package/resources/components/divider/divider.scss

@@ -1,86 +1,86 @@
-@layer cax {
-    .cax-divider-horizontal {
-        display: flex;
-        width: 100%;
-        position: relative;
-        align-items: center;
-    }
-
-    .cax-divider-horizontal:before {
-        position: absolute;
-        display: block;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        content: '';
-    }
-
-    .cax-divider-horizontal.cax-divider-left {
-        justify-content: flex-start;
-    }
-
-    .cax-divider-horizontal.cax-divider-right {
-        justify-content: flex-end;
-    }
-
-    .cax-divider-horizontal.cax-divider-center {
-        justify-content: center;
-    }
-
-    .cax-divider-content {
-        z-index: 1;
-    }
-
-    .cax-divider-vertical {
-        min-height: 100%;
-        margin: 0 1rem;
-        display: flex;
-        position: relative;
-        justify-content: center;
-    }
-
-    .cax-divider-vertical:before {
-        position: absolute;
-        display: block;
-        top: 0;
-        left: 50%;
-        height: 100%;
-        content: '';
-    }
-
-    .cax-divider-vertical.cax-divider-top {
-        align-items: flex-start;
-    }
-
-    .cax-divider-vertical.cax-divider-center {
-        align-items: center;
-    }
-
-    .cax-divider-vertical.cax-divider-bottom {
-        align-items: flex-end;
-    }
-
-    .cax-divider-solid.cax-divider-horizontal:before {
-        border-top-style: solid;
-    }
-
-    .cax-divider-solid.cax-divider-vertical:before {
-        border-left-style: solid;
-    }
-
-    .cax-divider-dashed.cax-divider-horizontal:before {
-        border-top-style: dashed;
-    }
-
-    .cax-divider-dashed.cax-divider-vertical:before {
-        border-left-style: dashed;
-    }
-
-    .cax-divider-dotted.cax-divider-horizontal:before {
-        border-top-style: dotted;
-    }
-
-    .cax-divider-dotted.cax-divider-vertical:before {
-        border-left-style: dotted;
-    }
-}
+@layer cax {
+    .cax-divider-horizontal {
+        display: flex;
+        width: 100%;
+        position: relative;
+        align-items: center;
+    }
+
+    .cax-divider-horizontal:before {
+        position: absolute;
+        display: block;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        content: '';
+    }
+
+    .cax-divider-horizontal.cax-divider-left {
+        justify-content: flex-start;
+    }
+
+    .cax-divider-horizontal.cax-divider-right {
+        justify-content: flex-end;
+    }
+
+    .cax-divider-horizontal.cax-divider-center {
+        justify-content: center;
+    }
+
+    .cax-divider-content {
+        z-index: 1;
+    }
+
+    .cax-divider-vertical {
+        min-height: 100%;
+        margin: 0 1rem;
+        display: flex;
+        position: relative;
+        justify-content: center;
+    }
+
+    .cax-divider-vertical:before {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        content: '';
+    }
+
+    .cax-divider-vertical.cax-divider-top {
+        align-items: flex-start;
+    }
+
+    .cax-divider-vertical.cax-divider-center {
+        align-items: center;
+    }
+
+    .cax-divider-vertical.cax-divider-bottom {
+        align-items: flex-end;
+    }
+
+    .cax-divider-solid.cax-divider-horizontal:before {
+        border-top-style: solid;
+    }
+
+    .cax-divider-solid.cax-divider-vertical:before {
+        border-left-style: solid;
+    }
+
+    .cax-divider-dashed.cax-divider-horizontal:before {
+        border-top-style: dashed;
+    }
+
+    .cax-divider-dashed.cax-divider-vertical:before {
+        border-left-style: dashed;
+    }
+
+    .cax-divider-dotted.cax-divider-horizontal:before {
+        border-top-style: dotted;
+    }
+
+    .cax-divider-dotted.cax-divider-vertical:before {
+        border-left-style: dotted;
+    }
+}