cax-design-system 2.8.4 → 3.0.0

package/resources/components/timeline/timeline.scss

@@ -1,128 +1,128 @@
-@layer cax {
-    .cax-timeline {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-    }
-
-    .cax-timeline-left .cax-timeline-event-opposite {
-        text-align: right;
-    }
-
-    .cax-timeline-left .cax-timeline-event-content {
-        text-align: left;
-    }
-
-    .cax-timeline-right .cax-timeline-event {
-        flex-direction: row-reverse;
-    }
-
-    .cax-timeline-right .cax-timeline-event-opposite {
-        text-align: left;
-    }
-
-    .cax-timeline-right .cax-timeline-event-content {
-        text-align: right;
-    }
-
-    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
-        flex-direction: row-reverse !important;
-    }
-
-    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite {
-        text-align: right;
-    }
-
-    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content {
-        text-align: left;
-    }
-
-    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-opposite {
-        text-align: left;
-    }
-
-    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-content {
-        text-align: right;
-    }
-
-    .cax-timeline-event {
-        display: flex;
-        position: relative;
-    }
-
-    .cax-timeline-event:last-child {
-        min-height: 0;
-    }
-    .cax-timeline-event-content {
-        padding: 0 1rem;
-        min-width: 100px;
-        border-radius: 8px;
-    }
-    
-    .cax-timeline-event-opposite:empty {
-        display: none;
-    }
-    .cax-timeline-event-separator {
-        flex: 0;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .cax-timeline-event-marker {
-        display: flex;
-        align-self: baseline;
-    }
-
-    .cax-timeline-event-connector {
-        flex-grow: 1;
-    }
-
-    .cax-timeline-horizontal {
-        flex-direction: row;
-    }
-
-    .cax-timeline-horizontal.cax-timeline-bottom{
-        align-items: end !important;
-    }
-
-   .cax-timeline-horizontal.cax-timeline-top{
-        align-items: start !important;
-    }
-
-    .cax-timeline-horizontal .cax-timeline-event {
-        flex-direction: column;
-        flex: 1;
-    }
-
-    .cax-timeline-horizontal .cax-timeline-event:last-child {
-        flex: 0;
-    }
-
-    .cax-timeline-horizontal .cax-timeline-event-separator {
-        flex-direction: row;
-    }
-
-    .cax-timeline-horizontal .cax-timeline-event-connector {
-        width: 100%;
-    }
-
-    .cax-timeline-bottom .cax-timeline-event {
-        flex-direction: column-reverse;
-
-    }
-
-    .cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
-        flex-direction: column-reverse;
-    }
-    .cax-timeline-event-marker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        
-      }
-      
-}
+@layer cax {
+    .cax-timeline {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+    }
+
+    .cax-timeline-left .cax-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .cax-timeline-left .cax-timeline-event-content {
+        text-align: left;
+    }
+
+    .cax-timeline-right .cax-timeline-event {
+        flex-direction: row-reverse;
+    }
+
+    .cax-timeline-right .cax-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .cax-timeline-right .cax-timeline-event-content {
+        text-align: right;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
+        flex-direction: row-reverse !important;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content {
+        text-align: left;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-content {
+        text-align: right;
+    }
+
+    .cax-timeline-event {
+        display: flex;
+        position: relative;
+        gap: 8px;
+    }
+
+    .cax-timeline-event:last-child {
+        min-height: 0;
+    }
+    .cax-timeline-event-content {
+        padding: 0 1rem;
+        min-width: 100px;
+        border-radius: 8px;
+    }
+
+    .cax-timeline-event-opposite:empty {
+        display: none;
+    }
+    .cax-timeline-event-separator {
+        flex: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        top: 4px;
+    }
+
+    .cax-timeline-event-marker {
+        display: flex;
+        align-self: baseline;
+    }
+
+    .cax-timeline-event-connector {
+        flex-grow: 1;
+    }
+
+    .cax-timeline-horizontal {
+        flex-direction: row;
+    }
+
+    .cax-timeline-horizontal.cax-timeline-bottom {
+        align-items: end !important;
+    }
+
+    .cax-timeline-horizontal.cax-timeline-top {
+        align-items: start !important;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event {
+        flex-direction: column;
+        flex: 1;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event:last-child {
+        flex: 0;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event-separator {
+        flex-direction: row;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event-connector {
+        width: 100%;
+    }
+
+    .cax-timeline-bottom .cax-timeline-event {
+        flex-direction: column-reverse;
+    }
+
+    .cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
+        flex-direction: column-reverse;
+    }
+    .cax-timeline-event-marker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+    }
+}

package/resources/components/toast/toast.scss

@@ -1,87 +1,78 @@
-@layer cax {
-    .cax-toast {
-        position: fixed;
-        width: 25%;
-    }
-
-    .cax-toast-message {
-        overflow: hidden;
-    }
-
-    .cax-toast-message-content {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .cax-toast-message-text {
-        flex: 1 1 auto;
-    }
-
-    .cax-toast-top-right {
-        top: 20px;
-        right: 20px;
-    }
-
-    .cax-toast-top-left {
-        top: 20px;
-        left: 20px;
-    }
-
-    .cax-toast-bottom-left {
-        bottom: 20px;
-        left: 20px;
-    }
-
-    .cax-toast-bottom-right {
-        bottom: 20px;
-        right: 20px;
-    }
-
-    .cax-toast-top-center {
-        top: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .cax-toast-bottom-center {
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .cax-toast-center {
-        left: 50%;
-        top: 50%;
-        min-width: 20vw;
-        transform: translate(-50%, -50%);
-    }
-
-    .cax-toast-icon-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        flex: none;
-        
-    }
-
-    .cax-toast-icon-close.cax-link {
-        cursor: pointer;
-    }
-
-    .cax-toast:has(.cax-toast-sm) {
-        width: 25%;
-    }
-
-    .cax-toast:has(.cax-toast-md) {
-        width: 50%;
-    }
-
-    .cax-toast:has(.cax-toast-lg) {
-        width: 75%;
-    }
-    .message-icon{
-        font-size: 24px !important;
-    }
-}
+@layer cax {
+    .cax-toast {
+        position: fixed;
+    }
+
+    .cax-toast-message {
+        overflow: hidden;
+    }
+
+    .cax-toast-message-content {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .cax-toast-message-text {
+        flex: 1 1 auto;
+    }
+
+    .cax-toast-top-right {
+        top: 20px;
+        right: 20px;
+    }
+
+    .cax-toast-top-left {
+        top: 20px;
+        left: 20px;
+    }
+
+    .cax-toast-bottom-left {
+        bottom: 20px;
+        left: 20px;
+    }
+
+    .cax-toast-bottom-right {
+        bottom: 20px;
+        right: 20px;
+    }
+
+    .cax-toast-top-center {
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .cax-toast-bottom-center {
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .cax-toast-center {
+        left: 50%;
+        top: 50%;
+        min-width: 20vw;
+        transform: translate(-50%, -50%);
+    }
+
+    .cax-toast-icon-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        flex: none;
+    }
+
+    .cax-toast-icon-close-icon {
+        font-size: 24px;
+    }
+
+    .cax-toast-icon-close.cax-link {
+        cursor: pointer;
+    }
+
+    .message-icon {
+        font-size: 24px !important;
+    }
+}

package/resources/components/toggleswitch/toggleswitch.scss

@@ -1,36 +1,45 @@
-@layer cax {
-    .cax-toggleswitch-container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .cax-toggleswitch-container-disabled {
-        opacity: 0.6;
-        pointer-events: none;
-    }
-
-    .cax-toggleswitchmaindiv {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
-        &:hover,
-        &:has(.cax-toggle-thumb:hover),
-        &:has(.cax-toggleswitch-track:hover) {
-            opacity: 0.9;
-        }
-    }
-
-    .cax-toggleswitchmaindiv-disabled {
-        opacity: 0.6;
-    }
-
-    .cax-toggleswitch {
-        display: none;
-    }
-
-    .cax-toggle-icon-active {
-        display: flex;
-    }
-}
+@layer cax {
+    .cax-toggleswitch-container {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-toggleswitch-container-disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .cax-toggleswitchmaindiv {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+        &:hover,
+        &:has(.cax-toggle-thumb:hover),
+        &:has(.cax-toggleswitch-track:hover) {
+            opacity: 0.9;
+        }
+    }
+
+    .cax-toggleswitchmaindiv-disabled {
+        opacity: 1;
+    }
+
+    .cax-toggleswitch {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .cax-toggle-icon-active {
+        display: flex;
+        width: 8px;
+        height: 8px;
+    }
+}

package/resources/components/toolbar/toolbar.css

@@ -1,19 +1,19 @@
-@layer cax {
-    .p-toolbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex-wrap: wrap;
-    }
-    .p-toolbar-group-start,
-    .p-toolbar-group-center,
-    .p-toolbar-group-end {
-        display: flex;
-        align-items: center;
-    }
-    .p-toolbar-group-left,
-    .p-toolbar-group-right {
-        display: flex;
-        align-items: center;
-    }
-}
+@layer cax {
+    .p-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .p-toolbar-group-start,
+    .p-toolbar-group-center,
+    .p-toolbar-group-end {
+        display: flex;
+        align-items: center;
+    }
+    .p-toolbar-group-left,
+    .p-toolbar-group-right {
+        display: flex;
+        align-items: center;
+    }
+}