cax-design-system 2.8.0 → 2.8.1

package/resources/components/picklist/picklist.css

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

package/resources/components/progressbar/progressbar.scss

@@ -1,107 +1,107 @@
-@layer cax {
-    .cax-progressbar {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .cax-progressbar-determinate .cax-progressbar-label {
-        display: inline-flex;
-    }
-
-    .cax-progressbar-determinate .cax-progressbar-value-animate {
-        transition: width 1s ease-in-out;
-    }
-
-    .cax-progressbar-value-animate-style {
-        transition: width 1s ease;
-        height: 100%;
-    }
-
-    .cax-progressbar-determinate-no-value .cax-progressbar-value-animate {
-        transition: width 2s ease-in-out;
-    }
-
-    .cax-progressbar-indeterminate .cax-progressbar-value::before {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        will-change: left, right;
-        -webkit-animation: cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-        animation: cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    }
-
-    .cax-progressbar-indeterminate .cax-progressbar-value::after {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        will-change: left, right;
-        -webkit-animation: cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        animation: cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        -webkit-animation-delay: 1.15s;
-        animation-delay: 1.15s;
-    }
-}
-
-@-webkit-keyframes cax-progressbar-indeterminate-anim {
-    0% {
-        left: -35%;
-        right: 100%;
-    }
-    60% {
-        left: 100%;
-        right: -90%;
-    }
-    100% {
-        left: 100%;
-        right: -90%;
-    }
-}
-@keyframes cax-progressbar-indeterminate-anim {
-    0% {
-        left: -35%;
-        right: 100%;
-    }
-    60% {
-        left: 100%;
-        right: -90%;
-    }
-    100% {
-        left: 100%;
-        right: -90%;
-    }
-}
-
-@-webkit-keyframes cax-progressbar-indeterminate-anim-short {
-    0% {
-        left: -200%;
-        right: 100%;
-    }
-    60% {
-        left: 107%;
-        right: -8%;
-    }
-    100% {
-        left: 107%;
-        right: -8%;
-    }
-}
-@keyframes cax-progressbar-indeterminate-anim-short {
-    0% {
-        left: -200%;
-        right: 100%;
-    }
-    60% {
-        left: 107%;
-        right: -8%;
-    }
-    100% {
-        left: 107%;
-        right: -8%;
-    }
-}
+@layer cax {
+    .cax-progressbar {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .cax-progressbar-determinate .cax-progressbar-label {
+        display: inline-flex;
+    }
+
+    .cax-progressbar-determinate .cax-progressbar-value-animate {
+        transition: width 1s ease-in-out;
+    }
+
+    .cax-progressbar-value-animate-style {
+        transition: width 1s ease;
+        height: 100%;
+    }
+
+    .cax-progressbar-determinate-no-value .cax-progressbar-value-animate {
+        transition: width 2s ease-in-out;
+    }
+
+    .cax-progressbar-indeterminate .cax-progressbar-value::before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        animation: cax-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    .cax-progressbar-indeterminate .cax-progressbar-value::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation: cax-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        -webkit-animation-delay: 1.15s;
+        animation-delay: 1.15s;
+    }
+}
+
+@-webkit-keyframes cax-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@keyframes cax-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@-webkit-keyframes cax-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+@keyframes cax-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}

package/resources/components/progressspinner/progressspinner.scss

@@ -1,94 +1,94 @@
-@layer cax {
-    .cax-progress-spinner {
-        position: relative;
-        margin: 0 auto;
-        width: 100px;
-        height: 100px;
-        display: inline-block;
-    }
-
-    .cax-progress-spinner::before {
-        content: '';
-        display: block;
-        padding-top: 100%;
-    }
-
-    .cax-progress-spinner-svg {
-        animation: cax-progress-spinner-rotate 2s linear infinite;
-        height: 100%;
-        transform-origin: center center;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-
-    .cax-progress-spinner-circle {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: 0;
-        animation:
-            cax-progress-spinner-dash 1.5s ease-in-out infinite,
-            cax-progress-spinner-color 6s ease-in-out infinite;
-        stroke-linecap: round;
-    }
-
-    .cax-progress-spinner-circle {
-        stroke: transparent;
-    }
-
-    .cax-progress-spinner-size-sm {
-        width: 25px;
-        height: 25px;
-    }
-
-    .cax-progress-spinner-size-md {
-        width: 36px;
-        height: 36px;
-    }
-
-    .cax-progress-spinner-size-lg {
-        width: 50px;
-        height: 50px;
-    }
-}
-
-@keyframes cax-progress-spinner-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes cax-progress-spinner-dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-// @keyframes cax-progress-spinner-color {
-//     100%,
-//     0% {
-//         stroke: #d62d20;
-//     }
-//     40% {
-//         stroke: #0057e7;
-//     }
-//     66% {
-//         stroke: #008744;
-//     }
-//     80%,
-//     90% {
-//         stroke: #ffa700;
-//     }
-// }
+@layer cax {
+    .cax-progress-spinner {
+        position: relative;
+        margin: 0 auto;
+        width: 100px;
+        height: 100px;
+        display: inline-block;
+    }
+
+    .cax-progress-spinner::before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+
+    .cax-progress-spinner-svg {
+        animation: cax-progress-spinner-rotate 2s linear infinite;
+        height: 100%;
+        transform-origin: center center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+
+    .cax-progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation:
+            cax-progress-spinner-dash 1.5s ease-in-out infinite,
+            cax-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    .cax-progress-spinner-circle {
+        stroke: transparent;
+    }
+
+    .cax-progress-spinner-size-sm {
+        width: 25px;
+        height: 25px;
+    }
+
+    .cax-progress-spinner-size-md {
+        width: 36px;
+        height: 36px;
+    }
+
+    .cax-progress-spinner-size-lg {
+        width: 50px;
+        height: 50px;
+    }
+}
+
+@keyframes cax-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes cax-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+// @keyframes cax-progress-spinner-color {
+//     100%,
+//     0% {
+//         stroke: #d62d20;
+//     }
+//     40% {
+//         stroke: #0057e7;
+//     }
+//     66% {
+//         stroke: #008744;
+//     }
+//     80%,
+//     90% {
+//         stroke: #ffa700;
+//     }
+// }

package/resources/components/radiobutton/radiobutton.scss

@@ -1,34 +1,34 @@
-@layer cax {
-    .cax-radiobutton {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-        vertical-align: bottom;
-        position: relative;
-    }
-
-    .cax-radiobutton-box {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .cax-radiobutton-icon {
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-        transform: translateZ(0) scale(0.1);
-        border-radius: 50%;
-        visibility: hidden;
-    }
-
-    .cax-radiobutton-box.cax-highlight .cax-radiobutton-icon {
-        transform: translateZ(0) scale(1, 1);
-        visibility: visible;
-    }
-
-    cax-radiobutton {
-        display: inline-flex;
-        vertical-align: bottom;
-        align-items: center;
-    }
-}
+@layer cax {
+    .cax-radiobutton {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        vertical-align: bottom;
+        position: relative;
+    }
+
+    .cax-radiobutton-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .cax-radiobutton-icon {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(0.1);
+        border-radius: 50%;
+        visibility: hidden;
+    }
+
+    .cax-radiobutton-box.cax-highlight .cax-radiobutton-icon {
+        transform: translateZ(0) scale(1, 1);
+        visibility: visible;
+    }
+
+    cax-radiobutton {
+        display: inline-flex;
+        vertical-align: bottom;
+        align-items: center;
+    }
+}

package/resources/components/rating/rating.css

@@ -1,15 +1,15 @@
-@layer cax {
-    .p-rating {
-        display: inline-flex;
-        position: relative;
-        align-items: center;
-    }
-
-    .p-rating-icon {
-        cursor: pointer;
-    }
-
-    .p-rating.p-rating-readonly .p-rating-icon {
-        cursor: default;
-    }
-}
+@layer cax {
+    .p-rating {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+    }
+
+    .p-rating-icon {
+        cursor: pointer;
+    }
+
+    .p-rating.p-rating-readonly .p-rating-icon {
+        cursor: default;
+    }
+}

package/resources/components/ripple/ripple.scss

@@ -1,29 +1,29 @@
-@layer cax {
-    .cax-ripple {
-        overflow: hidden;
-        position: relative;
-    }
-
-    .cax-ink {
-        display: block;
-        position: absolute;
-        background: rgba(255, 255, 255, 0.5);
-        border-radius: 100%;
-        transform: scale(0);
-    }
-
-    .cax-ink-active {
-        animation: ripple 0.4s linear;
-    }
-
-    .cax-ripple-disabled .cax-ink {
-        display: none !important;
-    }
-}
-
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
-}
+@layer cax {
+    .cax-ripple {
+        overflow: hidden;
+        position: relative;
+    }
+
+    .cax-ink {
+        display: block;
+        position: absolute;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 100%;
+        transform: scale(0);
+    }
+
+    .cax-ink-active {
+        animation: ripple 0.4s linear;
+    }
+
+    .cax-ripple-disabled .cax-ink {
+        display: none !important;
+    }
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}