cax-design-system 2.8.4 → 3.0.0

package/resources/components/inputnumber/inputnumber.scss

@@ -1,109 +1,109 @@
-@layer cax {
-    cax-inputnumber,
-    .cax-inputnumber {
-        display: inline-flex;
-    }
-
-    .cax-inputnumber-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,
-    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label {
-        display: none;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up {
-        border-radius: 0px 8px 0px 0px;
-        padding: 0;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-inputnumber-input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down {
-        border-radius: 0px 0px 8px 0px;
-        padding: 0;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-inputnumber-button-group {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button {
-        flex: 1 1 auto;
-    }
-
-    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up {
-        order: 3;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-inputnumber-buttons-horizontal .cax-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-    }
-
-    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down {
-        order: 1;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-inputnumber-buttons-vertical {
-        flex-direction: column;
-    }
-
-    .cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up {
-        order: 1;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        width: 100%;
-    }
-
-    .cax-inputnumber-buttons-vertical .cax-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-        text-align: center;
-    }
-
-    .cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down {
-        order: 3;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        width: 100%;
-    }
-
-    .cax-inputnumber-input {
-        flex: 1 1 auto;
-    }
-
-    .cax-fluid cax-inputnumber,
-    .cax-fluid .cax-inputnumber {
-        width: 100%;
-    }
-
-    .cax-fluid .cax-inputnumber .cax-inputnumber-input {
-        width: 1%;
-    }
-
-    .cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input {
-        width: 100%;
-    }
-
-    .cax-inputnumber-clear-icon {
-        position: absolute;
-        cursor: pointer;
-    }
-
-    .cax-inputnumber-clearable {
-        position: relative;
-    }
-}
+@layer cax {
+    cax-inputnumber,
+    .cax-inputnumber {
+        display: inline-flex;
+    }
+
+    .cax-inputnumber-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,
+    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label {
+        display: none;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up {
+        border-radius: 0px 8px 0px 0px;
+        padding: 0;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-inputnumber-input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down {
+        border-radius: 0px 0px 8px 0px;
+        padding: 0;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-inputnumber-button-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button {
+        flex: 1 1 auto;
+    }
+
+    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up {
+        order: 3;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .cax-inputnumber-buttons-horizontal .cax-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+    }
+
+    .cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down {
+        order: 1;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .cax-inputnumber-buttons-vertical {
+        flex-direction: column;
+    }
+
+    .cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up {
+        order: 1;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        width: 100%;
+    }
+
+    .cax-inputnumber-buttons-vertical .cax-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+        text-align: center;
+    }
+
+    .cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down {
+        order: 3;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        width: 100%;
+    }
+
+    .cax-inputnumber-input {
+        flex: 1 1 auto;
+    }
+
+    .cax-fluid cax-inputnumber,
+    .cax-fluid .cax-inputnumber {
+        width: 100%;
+    }
+
+    .cax-fluid .cax-inputnumber .cax-inputnumber-input {
+        width: 1%;
+    }
+
+    .cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input {
+        width: 100%;
+    }
+
+    .cax-inputnumber-clear-icon {
+        position: absolute;
+        cursor: pointer;
+    }
+
+    .cax-inputnumber-clearable {
+        position: relative;
+    }
+}

package/resources/components/inputotp/inputotp.css

@@ -1,2 +1,2 @@
-@layer cax {
-}
+@layer cax {
+}

package/resources/components/inputswitch/inputswitch.css

@@ -1,23 +1,23 @@
-@layer cax {
-    .p-inputswitch {
-        position: relative;
-        display: inline-block;
-        user-select: none;
-    }
-
-    .p-inputswitch-slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid transparent;
-    }
-
-    .p-inputswitch-slider:before {
-        position: absolute;
-        content: '';
-        top: 50%;
-    }
-}
+@layer cax {
+    .p-inputswitch {
+        position: relative;
+        display: inline-block;
+        user-select: none;
+    }
+
+    .p-inputswitch-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 1px solid transparent;
+    }
+
+    .p-inputswitch-slider:before {
+        position: absolute;
+        content: '';
+        top: 50%;
+    }
+}

package/resources/components/inputtext/inputtext.scss

@@ -1,145 +1,138 @@
-@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: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: 100%;
+    }
+
+    .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,15 @@
-@layer cax {
-    .cax-inputtextarea-resizable {
-        overflow: hidden;
-        resize: none;
-    }
-
-    .cax-fluid .cax-inputtextarea {
-        width: 100%;
-    }
-}
+@layer cax {
+    .cax-textarea-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    .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.scss

@@ -0,0 +1,49 @@
+@layer cax {
+    .cax-listbox-list-wrapper {
+        overflow: auto;
+    }
+    .cax-listbox {
+        width: 216px;
+    }
+
+    .cax-listbox-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .cax-listbox-item {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        user-select: none;
+    }
+
+    .cax-listbox-header {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-listbox-filter-container {
+        position: relative;
+        flex: 1 1 auto;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .cax-listbox-filter-icon {
+        position: absolute;
+        left: 0.45rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--neutral-900);
+        font-size: 16px;
+        pointer-events: none;
+    }
+
+    .cax-listbox-filter {
+        height: 32px;
+    }
+}

package/resources/components/logocard/logocard.scss

@@ -0,0 +1,6 @@
+.cax-logocard-container {
+    border-radius: 16px;
+    padding: 12px;
+    height: 48px;
+    width: fit-content;
+}