cax-design-system 2.8.4 → 3.0.0

package/resources/components/badge/badge.scss

@@ -1,67 +1,68 @@
-@layer cax {
-    .cax-badge {
-        display: inline-block;
-        border-radius: 50px;
-        text-align: center;
-        padding: 0 0.5rem;
-    }
-
-    .cax-overlay-badge {
-        position: relative;
-    }
-
-    .cax-overlay-badge .cax-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%, -50%);
-        transform-origin: 100% 0;
-        margin: 0;
-    }
-
-    .cax-badge-dot {
-        width: 0.5rem;
-        min-width: 0.5rem;
-        height: 0.5rem;
-        border-radius: 50%;
-        padding: 0;
-    }
-
-    .cax-badge-no-gutter {
-        padding: 0;
-        border-radius: 50%;
-    }
-
-    .cax-badge-button-wrapper {
-        position: relative;
-        display: inline-flex;
-
-        .cax-badge {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            transform: none;
-            min-width: 20px;
-            height: 20px;
-            line-height: 20px;
-            font-size: 12px;
-            z-index: 1;
-        }
-    }
-
-    .cax-button-badge {
-        position: relative !important;
-
-        .cax-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%, -50%);
-            z-index: 1;
-            min-width: 1.5rem;
-            height: 1.5rem;
-            line-height: 1.5rem;
-            font-size: 0.75rem;
-        }
-    }
-}
+@layer cax {
+    .cax-badge {
+        display: flex;
+        border-radius: 50px;
+        text-align: center;
+        padding: 0 0.5rem;
+        width: fit-content;
+    }
+
+    .cax-overlay-badge {
+        position: relative;
+    }
+
+    .cax-overlay-badge .cax-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .cax-badge-dot {
+        width: 0.5rem;
+        min-width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .cax-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+
+    .cax-badge-button-wrapper {
+        position: relative;
+        display: inline-flex;
+
+        .cax-badge {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            transform: none;
+            min-width: 20px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 12px;
+            z-index: 1;
+        }
+    }
+
+    .cax-button-badge {
+        position: relative !important;
+
+        .cax-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            z-index: 1;
+            min-width: 1.5rem;
+            height: 1.5rem;
+            line-height: 1.5rem;
+            font-size: 0.75rem;
+        }
+    }
+}

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,36 @@
-@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;
+        gap: var(--space-100);
+    }
+
+    .cax-breadcrumb .cax-menuitem-text {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+    }
+
+    .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,160 @@
-@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;
+        pointer-events: none;
+        cax-progressspinner {
+            display: flex;
+        }
+    }
+    .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: var(--space-75);
+        max-width: fit-content;
+        position: relative;
+    }
+
+    .cax-button-icon-left,
+    .cax-button-icon-right,
+    .cax-button-label {
+        flex: 0 0 auto;
+    }
+
+    .cax-main-loader {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: transparent;
+    }
+
+    .cax-button-sm .cax-main-loader.cax-progress-spinner {
+        width: 16px;
+        height: 16px;
+    }
+    .cax-button-md .cax-main-loader.cax-progress-spinner {
+        width: 20px;
+        height: 20px;
+    }
+    .cax-button-lg .cax-main-loader.cax-progress-spinner {
+        width: 24px;
+        height: 24px;
+    }
+    .spin {
+        display: inline-block;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .cax-selectbutton-fullmode {
+        width: 100%;
+        display: flex;
+
+        .cax-button {
+            flex: 1;
+        }
+    }
+}