cax-design-system 2.7.12 → 2.8.0

package/resources/components/navigation/navigation.scss

@@ -1,196 +1,196 @@
-@layer cax {
-    .cax-nav {
-        width: 88px;
-        height: 100vh;
-        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-        padding: 16px 8px;
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 1200;
-        will-change: width;
-        .cax-nav-header {
-            .cax-image img {
-                max-width: 26px;
-                object-fit: cover;
-                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                will-change: max-width;
-            }
-        }
-    }
-    .cax-nav.cax-nav-expand {
-        width: 264px;
-        .cax-nav-bottom-container {
-            width: 248px;
-            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .cax-nav-header {
-            .cax-image img {
-                max-width: 100px;
-                object-fit: cover;
-                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            }
-        }
-    }
-    .cax-nav-header-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 64px;
-    }
-    .cax-nav-header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        span {
-            font-weight: 700;
-            font-size: 12px;
-        }
-    }
-
-    .cax-nav .cax-divider.cax-divider-vertical {
-        margin: 0 8px;
-        height: 36px;
-    }
-
-    .cax-nav-list-container,
-    .cax-nav-bottom-list {
-        margin: 24px 0;
-        ul {
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            li {
-                padding: 12px 24px;
-                border-radius: 12px;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                height: 56px;
-                line-height: 24px;
-
-                .cax-image {
-                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                    will-change: transform;
-                }
-                .cax-image img {
-                    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                    will-change: opacity;
-                    backface-visibility: hidden;
-                }
-            }
-        }
-    }
-
-    .cax-nav-list-container {
-        overflow-y: auto;
-    }
-
-    .cax-nav-list-container::-webkit-scrollbar {
-        display: none;
-    }
-
-    .cax-nav-bottom-container {
-        position: absolute;
-        bottom: 16px;
-    }
-
-    .cax-nav-account-details {
-        border-radius: 12px;
-        padding: 12px;
-        cursor: pointer;
-        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        display: flex;
-        align-items: flex-start;
-        will-change: width;
-        .cax-nav-account-icon {
-            display: grid;
-            margin-left: auto;
-        }
-        .cax-avatar {
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            will-change: transform;
-        }
-        .cax-avatar img {
-            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            will-change: opacity;
-            backface-visibility: hidden;
-        }
-    }
-
-    .cax-nav.cax-nav-expand .cax-nav-account-details {
-        width: 248px;
-    }
-
-    .cax-nav-user {
-        display: grid;
-        margin: 0 8px;
-        white-space: nowrap;
-        .cax-nav-user-name {
-            font-size: 16px;
-            font-weight: 500;
-            line-height: 24px;
-        }
-        .cax-nav-user-role {
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 21px;
-        }
-    }
-
-    .cax-overlaypanel {
-        width: 320px;
-
-        .cax-overlaypanel-content {
-            padding: 8px;
-        }
-    }
-
-    .cax-nav-copyright-container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .cax-nav-copyright {
-            font-size: 12px;
-            font-weight: 500;
-            span {
-                margin: 0 0 0 16px;
-            }
-        }
-    }
-
-    .cax-nav-profile-options {
-        padding: 12px 24px;
-        font-weight: 600;
-        line-height: 24px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 12px;
-        margin-bottom: 8px;
-        font-size: 16px;
-        span {
-            margin-left: 8px;
-        }
-    }
-
-    .cax-nav-overlay-expand {
-        left: 270px !important;
-        top: auto !important;
-        bottom: 6px;
-    }
-
-    .cax-nav-overlay {
-        left: 94px !important;
-        top: auto !important;
-        bottom: 6px;
-    }
-}
-
-.c-pointer {
-    cursor: pointer;
-}
+@layer cax {
+    .cax-nav {
+        width: 88px;
+        height: 100vh;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+        padding: 16px 8px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1200;
+        will-change: width;
+        .cax-nav-header {
+            .cax-image img {
+                max-width: 26px;
+                object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                will-change: max-width;
+            }
+        }
+    }
+    .cax-nav.cax-nav-expand {
+        width: 264px;
+        .cax-nav-bottom-container {
+            width: 248px;
+            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .cax-nav-header {
+            .cax-image img {
+                max-width: 100px;
+                object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+        }
+    }
+    .cax-nav-header-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 64px;
+    }
+    .cax-nav-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+            font-weight: 700;
+            font-size: 12px;
+        }
+    }
+
+    .cax-nav .cax-divider.cax-divider-vertical {
+        margin: 0 8px;
+        height: 36px;
+    }
+
+    .cax-nav-list-container,
+    .cax-nav-bottom-list {
+        margin: 24px 0;
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            li {
+                padding: 12px 24px;
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                height: 56px;
+                line-height: 24px;
+
+                .cax-image {
+                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: transform;
+                }
+                .cax-image img {
+                    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: opacity;
+                    backface-visibility: hidden;
+                }
+            }
+        }
+    }
+
+    .cax-nav-list-container {
+        overflow-y: auto;
+    }
+
+    .cax-nav-list-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    .cax-nav-bottom-container {
+        position: absolute;
+        bottom: 16px;
+    }
+
+    .cax-nav-account-details {
+        border-radius: 12px;
+        padding: 12px;
+        cursor: pointer;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        align-items: flex-start;
+        will-change: width;
+        .cax-nav-account-icon {
+            display: grid;
+            margin-left: auto;
+        }
+        .cax-avatar {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: transform;
+        }
+        .cax-avatar img {
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: opacity;
+            backface-visibility: hidden;
+        }
+    }
+
+    .cax-nav.cax-nav-expand .cax-nav-account-details {
+        width: 248px;
+    }
+
+    .cax-nav-user {
+        display: grid;
+        margin: 0 8px;
+        white-space: nowrap;
+        .cax-nav-user-name {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 24px;
+        }
+        .cax-nav-user-role {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 21px;
+        }
+    }
+
+    .cax-overlaypanel {
+        width: 320px;
+
+        .cax-overlaypanel-content {
+            padding: 8px;
+        }
+    }
+
+    .cax-nav-copyright-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .cax-nav-copyright {
+            font-size: 12px;
+            font-weight: 500;
+            span {
+                margin: 0 0 0 16px;
+            }
+        }
+    }
+
+    .cax-nav-profile-options {
+        padding: 12px 24px;
+        font-weight: 600;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 12px;
+        margin-bottom: 8px;
+        font-size: 16px;
+        span {
+            margin-left: 8px;
+        }
+    }
+
+    .cax-nav-overlay-expand {
+        left: 270px !important;
+        top: auto !important;
+        bottom: 6px;
+    }
+
+    .cax-nav-overlay {
+        left: 94px !important;
+        top: auto !important;
+        bottom: 6px;
+    }
+}
+
+.c-pointer {
+    cursor: pointer;
+}

package/resources/components/orderlist/orderlist.css

@@ -1,78 +1,78 @@
-@layer cax {
-    .p-orderlist {
-        display: flex;
-    }
-
-    .p-orderlist-controls {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-
-    .p-orderlist-list-container {
-        flex: 1 1 auto;
-    }
-
-    .p-orderlist-list {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow: auto;
-        min-height: 12rem;
-    }
-
-    .p-orderlist-item {
-        display: block;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .p-orderlist-item:not(.cdk-drag-disabled) {
-        cursor: move;
-    }
-
-    .p-orderlist-item.cdk-drag-placeholder {
-        opacity: 0;
-    }
-
-    .p-orderlist-item.cdk-drag-animating {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
-
-    .p-orderlist.p-state-disabled .p-orderlist-item,
-    .p-orderlist.p-state-disabled .p-button {
-        cursor: default;
-    }
-
-    .p-orderlist.p-state-disabled .p-orderlist-list {
-        overflow: hidden;
-    }
-
-    .p-orderlist-filter {
-        position: relative;
-    }
-
-    .p-orderlist-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-    }
-
-    .p-orderlist-filter-input {
-        width: 100%;
-    }
-
-    .p-orderlist-controls-right .p-orderlist-controls {
-        order: 2;
-    }
-
-    .p-orderlist-controls-right .p-orderlist-list-container {
-        order: 1;
-    }
-
-    .p-orderlist-list.cdk-drop-list-dragging .p-orderlist-item:not(.cdk-drag-placeholder) {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-    }
-}
+@layer cax {
+    .p-orderlist {
+        display: flex;
+    }
+
+    .p-orderlist-controls {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .p-orderlist-list-container {
+        flex: 1 1 auto;
+    }
+
+    .p-orderlist-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        min-height: 12rem;
+    }
+
+    .p-orderlist-item {
+        display: block;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-orderlist-item:not(.cdk-drag-disabled) {
+        cursor: move;
+    }
+
+    .p-orderlist-item.cdk-drag-placeholder {
+        opacity: 0;
+    }
+
+    .p-orderlist-item.cdk-drag-animating {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-item,
+    .p-orderlist.p-state-disabled .p-button {
+        cursor: default;
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-list {
+        overflow: hidden;
+    }
+
+    .p-orderlist-filter {
+        position: relative;
+    }
+
+    .p-orderlist-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+    }
+
+    .p-orderlist-filter-input {
+        width: 100%;
+    }
+
+    .p-orderlist-controls-right .p-orderlist-controls {
+        order: 2;
+    }
+
+    .p-orderlist-controls-right .p-orderlist-list-container {
+        order: 1;
+    }
+
+    .p-orderlist-list.cdk-drop-list-dragging .p-orderlist-item:not(.cdk-drag-placeholder) {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+}

package/resources/components/organizationchart/organizationchart.css

@@ -1,62 +1,62 @@
-@layer cax {
-    .p-organizationchart-table {
-        border-spacing: 0;
-        border-collapse: separate;
-        margin: 0 auto;
-    }
-
-    .p-organizationchart-table > tbody > tr > td {
-        text-align: center;
-        vertical-align: top;
-        padding: 0 0.75rem;
-    }
-
-    .p-organizationchart-node-content {
-        display: inline-block;
-        position: relative;
-    }
-
-    .p-organizationchart-node-content .p-node-toggler {
-        position: absolute;
-        bottom: -0.75rem;
-        margin-left: -0.75rem;
-        z-index: 2;
-        left: 50%;
-        user-select: none;
-        cursor: pointer;
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
-        position: relative;
-        top: 0.25rem;
-    }
-
-    .p-organizationchart-line-down {
-        margin: 0 auto;
-        height: 20px;
-        width: 1px;
-    }
-
-    .p-organizationchart-line-right {
-        border-radius: 0px;
-    }
-
-    .p-organizationchart-line-left {
-        border-radius: 0;
-    }
-
-    .p-organizationchart-selectable-node {
-        cursor: pointer;
-    }
-
-    .p-organizationchart .p-organizationchart-node-hidden {
-        display: none;
-    }
-
-    .p-organizationchart-preservespace .p-organizationchart-node-hidden {
-        visibility: hidden;
-        display: inherit;
-    }
-}
+@layer cax {
+    .p-organizationchart-table {
+        border-spacing: 0;
+        border-collapse: separate;
+        margin: 0 auto;
+    }
+
+    .p-organizationchart-table > tbody > tr > td {
+        text-align: center;
+        vertical-align: top;
+        padding: 0 0.75rem;
+    }
+
+    .p-organizationchart-node-content {
+        display: inline-block;
+        position: relative;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        position: absolute;
+        bottom: -0.75rem;
+        margin-left: -0.75rem;
+        z-index: 2;
+        left: 50%;
+        user-select: none;
+        cursor: pointer;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+        position: relative;
+        top: 0.25rem;
+    }
+
+    .p-organizationchart-line-down {
+        margin: 0 auto;
+        height: 20px;
+        width: 1px;
+    }
+
+    .p-organizationchart-line-right {
+        border-radius: 0px;
+    }
+
+    .p-organizationchart-line-left {
+        border-radius: 0;
+    }
+
+    .p-organizationchart-selectable-node {
+        cursor: pointer;
+    }
+
+    .p-organizationchart .p-organizationchart-node-hidden {
+        display: none;
+    }
+
+    .p-organizationchart-preservespace .p-organizationchart-node-hidden {
+        visibility: hidden;
+        display: inherit;
+    }
+}