cax-design-system 2.7.12 → 2.8.0

package/resources/components/blockui/blockui.css

@@ -1,26 +1,26 @@
-@layer cax {
-    .p-blockui {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: transparent;
-        transition-property: background-color;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .p-blockui.p-component-overlay {
-        position: absolute;
-    }
-
-    .p-blockui-document.p-component-overlay {
-        position: fixed;
-    }
-
-    .p-blockui-leave.p-component-overlay {
-        background-color: transparent;
-    }
-}
+@layer cax {
+    .p-blockui {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        transition-property: background-color;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-blockui.p-component-overlay {
+        position: absolute;
+    }
+
+    .p-blockui-document.p-component-overlay {
+        position: fixed;
+    }
+
+    .p-blockui-leave.p-component-overlay {
+        background-color: transparent;
+    }
+}

package/resources/components/breadcrumb/breadcrumb.scss

@@ -1,33 +1,33 @@
-@layer cax {
-    .cax-breadcrumb {
-        overflow-x: auto;
-    }
-
-    .cax-breadcrumb .cax-breadcrumb-list {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-    }
-
-    .cax-breadcrumb .cax-menuitem-text {
-        line-height: 1;
-    }
-
-    .cax-breadcrumb .cax-menuitem-link {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-    }
-
-    .cax-breadcrumb .cax-menuitem-separator {
-        display: flex;
-        align-items: center;
-    }
-
-    .cax-breadcrumb::-webkit-scrollbar {
-        display: none;
-    }
-}
+@layer cax {
+    .cax-breadcrumb {
+        overflow-x: auto;
+    }
+
+    .cax-breadcrumb .cax-breadcrumb-list {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .cax-breadcrumb .cax-menuitem-text {
+        line-height: 1;
+    }
+
+    .cax-breadcrumb .cax-menuitem-link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-breadcrumb .cax-menuitem-separator {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-breadcrumb::-webkit-scrollbar {
+        display: none;
+    }
+}

package/resources/components/button/button.scss

@@ -1,163 +1,163 @@
-@layer cax {
-    .cax-button {
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        cursor: pointer;
-        user-select: none;
-        align-items: center;
-        vertical-align: bottom;
-        text-align: center;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .cax-button-label {
-        flex: 1 1 auto;
-    }
-
-    .cax-button-icon-right {
-        order: 1;
-    }
-
-    .cax-button:disabled {
-        cursor: default;
-        pointer-events: none;
-    }
-
-    .cax-button-icon-only {
-        justify-content: center;
-    }
-
-    .cax-button-icon-only:after {
-        content: 'p';
-        visibility: hidden;
-        clip: rect(0 0 0 0);
-        width: 0;
-    }
-
-    .cax-button-vertical {
-        flex-direction: column;
-    }
-
-    .cax-button-icon-bottom {
-        order: 2;
-    }
-
-    .cax-button-group .cax-button {
-        margin: 0;
-    }
-
-    .cax-button.cax-button-loading {
-        opacity: 1 !important;
-    }
-    .cax-button-group .cax-button:focus,
-    .cax-button-group cax-button:focus .cax-button,
-    .cax-buttonset .cax-button:focus,
-    .cax-buttonset .cax-button:focus,
-    .cax-buttonset cax-button:focus .cax-button,
-    .cax-buttonset .cax-button:focus {
-        position: relative;
-        z-index: 1;
-    }
-
-    .cax-button-group .cax-button:not(:last-child),
-    .cax-button-group .cax-button:not(:last-child):hover,
-    .cax-button-group cax-button:not(:last-child) .cax-button,
-    .cax-button-group cax-button:not(:last-child) .cax-button:hover,
-    .cax-buttonset .cax-button:not(:last-child),
-    .cax-buttonset .cax-button:not(:last-child):hover,
-    .cax-buttonset cax-button:not(:last-child) .cax-button,
-    .cax-buttonset cax-button:not(:last-child) .cax-button:hover {
-        border-right: 0 none;
-    }
-
-    .cax-button-group .cax-button:not(:first-of-type):not(:last-of-type),
-    .cax-button-group cax-button:not(:first-of-type):not(:last-of-type) .cax-button,
-    .cax-buttonset .cax-button:not(:first-of-type):not(:last-of-type),
-    .cax-buttonset cax-button:not(:first-of-type):not(:last-of-type) .cax-button {
-        border-radius: 0;
-    }
-
-    .cax-button-group .cax-button:first-of-type:not(:only-of-type),
-    .cax-button-group cax-button:first-of-type:not(:only-of-type) .cax-button,
-    .cax-buttonset .cax-button:first-of-type:not(:only-of-type),
-    .cax-buttonset cax-button:first-of-type:not(:only-of-type) .cax-button {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-button-group .cax-button:last-of-type:not(:only-of-type),
-    .cax-button-group cax-button:last-of-type:not(:only-of-type) .cax-button,
-    .cax-buttonset .cax-button:last-of-type:not(:only-of-type),
-    .cax-buttonset cax-button:last-of-type:not(:only-of-type) .cax-button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    cax-button[iconpos='right'] spinnericon {
-        order: 1;
-    }
-    .cax-button-content-wrapper {
-        display: inline-flex;
-        align-items: center;
-        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;
-    }
-
-    .center-icon {
-        width: 40px; /* Set a fixed width and height when there's no label */
-        height: 40px;
-        display: flex;
-        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);
-        }
-    }
-}
+@layer cax {
+    .cax-button {
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+        align-items: center;
+        vertical-align: bottom;
+        text-align: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .cax-button-label {
+        flex: 1 1 auto;
+    }
+
+    .cax-button-icon-right {
+        order: 1;
+    }
+
+    .cax-button:disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    .cax-button-icon-only {
+        justify-content: center;
+    }
+
+    .cax-button-icon-only:after {
+        content: 'p';
+        visibility: hidden;
+        clip: rect(0 0 0 0);
+        width: 0;
+    }
+
+    .cax-button-vertical {
+        flex-direction: column;
+    }
+
+    .cax-button-icon-bottom {
+        order: 2;
+    }
+
+    .cax-button-group .cax-button {
+        margin: 0;
+    }
+
+    .cax-button.cax-button-loading {
+        opacity: 1 !important;
+    }
+    .cax-button-group .cax-button:focus,
+    .cax-button-group cax-button:focus .cax-button,
+    .cax-buttonset .cax-button:focus,
+    .cax-buttonset .cax-button:focus,
+    .cax-buttonset cax-button:focus .cax-button,
+    .cax-buttonset .cax-button:focus {
+        position: relative;
+        z-index: 1;
+    }
+
+    .cax-button-group .cax-button:not(:last-child),
+    .cax-button-group .cax-button:not(:last-child):hover,
+    .cax-button-group cax-button:not(:last-child) .cax-button,
+    .cax-button-group cax-button:not(:last-child) .cax-button:hover,
+    .cax-buttonset .cax-button:not(:last-child),
+    .cax-buttonset .cax-button:not(:last-child):hover,
+    .cax-buttonset cax-button:not(:last-child) .cax-button,
+    .cax-buttonset cax-button:not(:last-child) .cax-button:hover {
+        border-right: 0 none;
+    }
+
+    .cax-button-group .cax-button:not(:first-of-type):not(:last-of-type),
+    .cax-button-group cax-button:not(:first-of-type):not(:last-of-type) .cax-button,
+    .cax-buttonset .cax-button:not(:first-of-type):not(:last-of-type),
+    .cax-buttonset cax-button:not(:first-of-type):not(:last-of-type) .cax-button {
+        border-radius: 0;
+    }
+
+    .cax-button-group .cax-button:first-of-type:not(:only-of-type),
+    .cax-button-group cax-button:first-of-type:not(:only-of-type) .cax-button,
+    .cax-buttonset .cax-button:first-of-type:not(:only-of-type),
+    .cax-buttonset cax-button:first-of-type:not(:only-of-type) .cax-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .cax-button-group .cax-button:last-of-type:not(:only-of-type),
+    .cax-button-group cax-button:last-of-type:not(:only-of-type) .cax-button,
+    .cax-buttonset .cax-button:last-of-type:not(:only-of-type),
+    .cax-buttonset cax-button:last-of-type:not(:only-of-type) .cax-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    cax-button[iconpos='right'] spinnericon {
+        order: 1;
+    }
+    .cax-button-content-wrapper {
+        display: inline-flex;
+        align-items: center;
+        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;
+    }
+
+    .center-icon {
+        width: 40px; /* Set a fixed width and height when there's no label */
+        height: 40px;
+        display: flex;
+        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);
+        }
+    }
+}