cax-design-system 2.7.12 → 2.8.0

package/resources/components/inputtext/inputtext.scss

@@ -1,145 +1,145 @@
-@layer cax {
-    .cax-inputtext {
-        font-weight: 500;
-        padding: 8px 10px 8px 10px;
-        border-radius: 8px;
-    }
-
-    .cax-fluid .cax-inputtext {
-        width: 100%;
-    }
-
-    /* InputGroup */
-    .cax-inputgroup {
-        display: flex;
-        align-items: stretch;
-    }
-
-    .cax-inputgroup-addon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .cax-inputgroup .cax-float-label {
-        display: flex;
-        align-items: stretch;
-        width: 100%;
-    }
-
-    .cax-inputgroup .cax-inputtext,
-    .cax-fluid .cax-inputgroup .cax-inputtext,
-    .cax-inputgroup .cax-inputwrapper,
-    .cax-inputgroup .cax-inputwrapper > .cax-component {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-
-    /* Floating Label */
-    .cax-float-label {
-        display: block;
-        position: relative;
-    }
-
-    .cax-float-label label {
-        position: absolute;
-        pointer-events: none;
-        top: 50%;
-        margin-top: -0.5rem;
-        transition-property: all;
-        transition-timing-function: ease;
-        line-height: 1;
-    }
-
-    .cax-float-label textarea ~ label {
-        top: 1rem;
-    }
-
-    .cax-float-label input:focus ~ label,
-    .cax-float-label input.cax-filled ~ label,
-    .cax-float-label textarea:focus ~ label,
-    .cax-float-label textarea.cax-filled ~ label,
-    .cax-float-label .cax-inputwrapper-focus ~ label,
-    .cax-float-label .cax-inputwrapper-filled ~ label {
-        top: -0.75rem;
-        font-size: 12px;
-    }
-
-    .cax-float-label .input:-webkit-autofill ~ label {
-        top: -20px;
-        font-size: 12px;
-    }
-
-    .cax-float-label .cax-placeholder,
-    .cax-float-label input::placeholder,
-    .cax-float-label .cax-inputtext::placeholder {
-        opacity: 0;
-        transition-property: all;
-        transition-timing-function: ease;
-    }
-    .cax-float-label .cax-focus .cax-placeholder,
-    .cax-float-label input:focus::placeholder,
-    .cax-float-label .cax-inputtext:focus::placeholder {
-        opacity: 1;
-        transition-property: all;
-        transition-timing-function: ease;
-    }
-
-    .cax-input-icon-left,
-    .cax-input-icon-right {
-        position: relative;
-        display: inline-block;
-    }
-
-    .cax-input-icon-left > i,
-    .cax-input-icon-left > .cax-icon-wrapper,
-    .cax-input-icon-right > i,
-    .cax-input-icon-right > .cax-icon-wrapper {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-
-    .cax-fluid .cax-input-icon-left,
-    .cax-fluid .cax-input-icon-right {
-        display: block;
-        width: 100%;
-    }
-
-    .input-disabled {
-        opacity: 0.5;
-    }
-    .disabled-opacity {
-        opacity: 0.5;
-    }
-
-    input:enabled:focus {
-        outline: none;
-    }
-
-    .non-clickable-icon {
-        cursor: default;
-    }
-    .cax-inputtext.full-width {
-        width: 100%;
-    }
-
-    .cax-input-wrapper {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        width: fit-content;
-    }
-
-    .cax-icon-left {
-        left: 10px;
-    }
-
-    .cax-icon-right {
-        right: 10px;
-    }
-
-    .cax-fluid .cax-input-wrapper {
-        width: 100%;
-    }
-}
+@layer cax {
+    .cax-inputtext {
+        font-weight: 500;
+        padding: 8px 10px 8px 10px;
+        border-radius: 8px;
+    }
+
+    .cax-fluid .cax-inputtext {
+        width: 100%;
+    }
+
+    /* InputGroup */
+    .cax-inputgroup {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .cax-inputgroup-addon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .cax-inputgroup .cax-float-label {
+        display: flex;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .cax-inputgroup .cax-inputtext,
+    .cax-fluid .cax-inputgroup .cax-inputtext,
+    .cax-inputgroup .cax-inputwrapper,
+    .cax-inputgroup .cax-inputwrapper > .cax-component {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    /* Floating Label */
+    .cax-float-label {
+        display: block;
+        position: relative;
+    }
+
+    .cax-float-label label {
+        position: absolute;
+        pointer-events: none;
+        top: 50%;
+        margin-top: -0.5rem;
+        transition-property: all;
+        transition-timing-function: ease;
+        line-height: 1;
+    }
+
+    .cax-float-label textarea ~ label {
+        top: 1rem;
+    }
+
+    .cax-float-label input:focus ~ label,
+    .cax-float-label input.cax-filled ~ label,
+    .cax-float-label textarea:focus ~ label,
+    .cax-float-label textarea.cax-filled ~ label,
+    .cax-float-label .cax-inputwrapper-focus ~ label,
+    .cax-float-label .cax-inputwrapper-filled ~ label {
+        top: -0.75rem;
+        font-size: 12px;
+    }
+
+    .cax-float-label .input:-webkit-autofill ~ label {
+        top: -20px;
+        font-size: 12px;
+    }
+
+    .cax-float-label .cax-placeholder,
+    .cax-float-label input::placeholder,
+    .cax-float-label .cax-inputtext::placeholder {
+        opacity: 0;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
+    .cax-float-label .cax-focus .cax-placeholder,
+    .cax-float-label input:focus::placeholder,
+    .cax-float-label .cax-inputtext:focus::placeholder {
+        opacity: 1;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
+
+    .cax-input-icon-left,
+    .cax-input-icon-right {
+        position: relative;
+        display: inline-block;
+    }
+
+    .cax-input-icon-left > i,
+    .cax-input-icon-left > .cax-icon-wrapper,
+    .cax-input-icon-right > i,
+    .cax-input-icon-right > .cax-icon-wrapper {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .cax-fluid .cax-input-icon-left,
+    .cax-fluid .cax-input-icon-right {
+        display: block;
+        width: 100%;
+    }
+
+    .input-disabled {
+        opacity: 0.5;
+    }
+    .disabled-opacity {
+        opacity: 0.5;
+    }
+
+    input:enabled:focus {
+        outline: none;
+    }
+
+    .non-clickable-icon {
+        cursor: default;
+    }
+    .cax-inputtext.full-width {
+        width: 100%;
+    }
+
+    .cax-input-wrapper {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        width: fit-content;
+    }
+
+    .cax-icon-left {
+        left: 10px;
+    }
+
+    .cax-icon-right {
+        right: 10px;
+    }
+
+    .cax-fluid .cax-input-wrapper {
+        width: 100%;
+    }
+}

package/resources/components/inputtextarea/inputtextarea.scss

@@ -1,10 +1,10 @@
-@layer cax {
-    .cax-inputtextarea-resizable {
-        overflow: hidden;
-        resize: none;
-    }
-
-    .cax-fluid .cax-inputtextarea {
-        width: 100%;
-    }
-}
+@layer cax {
+    .cax-inputtextarea-resizable {
+        overflow: hidden;
+        resize: none;
+    }
+
+    .cax-fluid .cax-inputtextarea {
+        width: 100%;
+    }
+}

package/resources/components/knob/knob.css

@@ -1,20 +1,20 @@
-@keyframes dash-frame {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-@layer cax {
-    .p-knob-range {
-        fill: none;
-        transition: stroke 0.1s ease-in;
-    }
-    .p-knob-value {
-        animation-name: dash-frame;
-        animation-fill-mode: forwards;
-        fill: none;
-    }
-    .p-knob-text {
-        font-size: 1.3rem;
-        text-align: center;
-    }
-}
+@keyframes dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+@layer cax {
+    .p-knob-range {
+        fill: none;
+        transition: stroke 0.1s ease-in;
+    }
+    .p-knob-value {
+        animation-name: dash-frame;
+        animation-fill-mode: forwards;
+        fill: none;
+    }
+    .p-knob-text {
+        font-size: 1.3rem;
+        text-align: center;
+    }
+}

package/resources/components/listbox/listbox.css

@@ -1,40 +1,40 @@
-@layer cax {
-    .p-listbox-list-wrapper {
-        overflow: auto;
-    }
-
-    .p-listbox-list {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .p-listbox-item {
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        user-select: none;
-    }
-
-    .p-listbox-header {
-        display: flex;
-        align-items: center;
-    }
-
-    .p-listbox-filter-container {
-        position: relative;
-        flex: 1 1 auto;
-    }
-
-    .p-listbox-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-
-    .p-listbox-filter {
-        width: 100%;
-    }
-}
+@layer cax {
+    .p-listbox-list-wrapper {
+        overflow: auto;
+    }
+
+    .p-listbox-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .p-listbox-item {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        user-select: none;
+    }
+
+    .p-listbox-header {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-listbox-filter-container {
+        position: relative;
+        flex: 1 1 auto;
+    }
+
+    .p-listbox-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-listbox-filter {
+        width: 100%;
+    }
+}

package/resources/components/megamenu/megamenu.css

@@ -1,108 +1,108 @@
-@layer cax {
-    .p-megamenu-root-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    .p-megamenu-root-list > .p-menuitem {
-        position: relative;
-    }
-
-    .p-megamenu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .p-megamenu .p-menuitem-text {
-        line-height: 1;
-    }
-
-    .p-megamenu-panel {
-        display: none;
-        position: absolute;
-        width: auto;
-        z-index: 1;
-    }
-
-    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-        display: block;
-    }
-
-    .p-megamenu-submenu {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    /* Horizontal */
-    .p-megamenu-horizontal {
-        align-items: center;
-    }
-
-    .p-megamenu-horizontal .p-megamenu-root-list {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .p-megamenu-horizontal .p-megamenu-end {
-        margin-left: auto;
-        align-self: center;
-    }
-
-    /* Vertical */
-    .p-megamenu-vertical .p-megamenu-root-list {
-        flex-direction: column;
-    }
-
-    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-        left: 100%;
-        top: 0;
-    }
-
-    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon:not(svg) {
-        margin-left: auto;
-    }
-
-    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-icon-wrapper {
-        margin-left: auto;
-    }
-
-    .p-megamenu-grid {
-        display: flex;
-    }
-
-    .p-megamenu-col-2,
-    .p-megamenu-col-3,
-    .p-megamenu-col-4,
-    .p-megamenu-col-6,
-    .p-megamenu-col-12 {
-        flex: 0 0 auto;
-        padding: 0.5rem;
-    }
-
-    .p-megamenu-col-2 {
-        width: 16.6667%;
-    }
-
-    .p-megamenu-col-3 {
-        width: 25%;
-    }
-
-    .p-megamenu-col-4 {
-        width: 33.3333%;
-    }
-
-    .p-megamenu-col-6 {
-        width: 50%;
-    }
-
-    .p-megamenu-col-12 {
-        width: 100%;
-    }
-}
+@layer cax {
+    .p-megamenu-root-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-megamenu-root-list > .p-menuitem {
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-megamenu-panel {
+        display: none;
+        position: absolute;
+        width: auto;
+        z-index: 1;
+    }
+
+    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        display: block;
+    }
+
+    .p-megamenu-submenu {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    /* Horizontal */
+    .p-megamenu-horizontal {
+        align-items: center;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-root-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-end {
+        margin-left: auto;
+        align-self: center;
+    }
+
+    /* Vertical */
+    .p-megamenu-vertical .p-megamenu-root-list {
+        flex-direction: column;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        left: 100%;
+        top: 0;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon:not(svg) {
+        margin-left: auto;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-icon-wrapper {
+        margin-left: auto;
+    }
+
+    .p-megamenu-grid {
+        display: flex;
+    }
+
+    .p-megamenu-col-2,
+    .p-megamenu-col-3,
+    .p-megamenu-col-4,
+    .p-megamenu-col-6,
+    .p-megamenu-col-12 {
+        flex: 0 0 auto;
+        padding: 0.5rem;
+    }
+
+    .p-megamenu-col-2 {
+        width: 16.6667%;
+    }
+
+    .p-megamenu-col-3 {
+        width: 25%;
+    }
+
+    .p-megamenu-col-4 {
+        width: 33.3333%;
+    }
+
+    .p-megamenu-col-6 {
+        width: 50%;
+    }
+
+    .p-megamenu-col-12 {
+        width: 100%;
+    }
+}