cax-design-system 1.0.0

package/resources/cax.scss

@@ -0,0 +1,784 @@
+.cax-overflow-hidden {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+
+@layer cax {
+    .cax-component,
+    .cax-component * {
+        box-sizing: border-box;
+    }
+
+    .cax-hidden {
+        display: none;
+    }
+
+    .cax-hidden-space {
+        visibility: hidden;
+    }
+
+    .cax-hidden-accessible {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+    }
+
+    .cax-hidden-accessible input,
+    .cax-hidden-accessible select {
+        transform: scale(0);
+    }
+
+    .cax-reset {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: 0;
+        text-decoration: none;
+        font-size: 100%;
+        list-style: none;
+    }
+
+    .cax-disabled,
+    .cax-disabled * {
+        cursor: default !important;
+        pointer-events: none;
+    }
+
+    .cax-component-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .cax-unselectable-text {
+        user-select: none;
+    }
+
+    .cax-scrollbar-measure {
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        position: absolute;
+        top: -9999px;
+    }
+
+    @-webkit-keyframes cax-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+    @keyframes cax-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    input[type='button'],
+    input[type='submit'],
+    input[type='reset'],
+    input[type='file']::-webkit-file-upload-button,
+    button {
+        border-radius: 0;
+    }
+
+    .cax-link {
+        text-align: left;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .cax-link:disabled {
+        cursor: default;
+    }
+
+    .cax-sr-only {
+        border: 0;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+        word-wrap: normal !important;
+    }
+
+    /* Non ng overlay animations */
+    .cax-connected-overlay {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transition:
+            transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+            opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .cax-connected-overlay-visible {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+
+    .cax-connected-overlay-hidden {
+        opacity: 0;
+        transform: scaleY(1);
+        transition: opacity 0.1s linear;
+    }
+
+    .cax-toggleable-content.ng-animating {
+        overflow: hidden;
+    }
+
+    .cax-icon-wrapper {
+        display: inline-flex;
+    }
+
+    .cax-icon {
+        display: inline-block;
+    }
+
+    .cax-icon-spin {
+        -webkit-animation: cax-icon-spin 2s infinite linear;
+        animation: cax-icon-spin 2s infinite linear;
+    }
+}
+
+@-webkit-keyframes cax-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes cax-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@layer cax {
+    .cax-badge {
+        display: inline-block;
+        border-radius: 50px;
+        text-align: center;
+        padding: 0 0.5rem;
+    }
+
+    .cax-overlay-badge {
+        position: relative;
+    }
+
+    .cax-overlay-badge .cax-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .cax-badge-dot {
+        width: 0.5rem;
+        min-width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .cax-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+
+@layer cax {
+    .cax-button {
+        margin: 0;
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        align-items: center;
+        vertical-align: bottom;
+        text-align: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .cax-button-label {
+        flex: 1 1 auto;
+    }
+
+    .cax-button-icon-right {
+        order: 1;
+    }
+
+    .cax-button:disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    .cax-button-icon-only {
+        justify-content: center;
+    }
+
+    .cax-button-icon-only:after {
+        content: 'p';
+        visibility: hidden;
+        clip: rect(0 0 0 0);
+        width: 0;
+    }
+
+    .cax-button-vertical {
+        flex-direction: column;
+    }
+
+    .cax-button-icon-bottom {
+        order: 2;
+    }
+
+    .cax-button-group .cax-button {
+        margin: 0;
+    }
+
+    .cax-button.cax-button-loading {
+        opacity: 1 !important;
+    }
+    .cax-button-group .cax-button:focus,
+    .cax-button-group cax-button:focus .cax-button,
+    .cax-buttonset .cax-button:focus,
+    .cax-buttonset .cax-button:focus,
+    .cax-buttonset cax-button:focus .cax-button,
+    .cax-buttonset .cax-button:focus {
+        position: relative;
+        z-index: 1;
+    }
+
+    .cax-button-group .cax-button:not(:last-child),
+    .cax-button-group .cax-button:not(:last-child):hover,
+    .cax-button-group cax-button:not(:last-child) .cax-button,
+    .cax-button-group cax-button:not(:last-child) .cax-button:hover,
+    .cax-buttonset .cax-button:not(:last-child),
+    .cax-buttonset .cax-button:not(:last-child):hover,
+    .cax-buttonset cax-button:not(:last-child) .cax-button,
+    .cax-buttonset cax-button:not(:last-child) .cax-button:hover {
+        border-right: 0 none;
+    }
+
+    .cax-button-group .cax-button:not(:first-of-type):not(:last-of-type),
+    .cax-button-group cax-button:not(:first-of-type):not(:last-of-type) .cax-button,
+    .cax-buttonset .cax-button:not(:first-of-type):not(:last-of-type),
+    .cax-buttonset cax-button:not(:first-of-type):not(:last-of-type) .cax-button {
+        border-radius: 0;
+    }
+
+    .cax-button-group .cax-button:first-of-type:not(:only-of-type),
+    .cax-button-group cax-button:first-of-type:not(:only-of-type) .cax-button,
+    .cax-buttonset .cax-button:first-of-type:not(:only-of-type),
+    .cax-buttonset cax-button:first-of-type:not(:only-of-type) .cax-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .cax-button-group .cax-button:last-of-type:not(:only-of-type),
+    .cax-button-group cax-button:last-of-type:not(:only-of-type) .cax-button,
+    .cax-buttonset .cax-button:last-of-type:not(:only-of-type),
+    .cax-buttonset cax-button:last-of-type:not(:only-of-type) .cax-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    cax-button[iconpos='right'] spinnericon {
+        order: 1;
+    }
+    .center-icon {
+        width: 40px; /* Set a fixed width and height when there's no label */
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .spin {
+        display: inline-block;
+        animation: spin 1s linear infinite;
+      }
+      
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+}
+
+@layer cax {
+    .cax-checkbox {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+        vertical-align: bottom;
+        position: relative;
+    }
+
+    .cax-checkbox-disabled {
+        cursor: default !important;
+        pointer-events: none;
+    }
+
+    .cax-checkbox-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    cax-checkbox {
+        display: inline-flex;
+        vertical-align: bottom;
+        align-items: center;
+    }
+
+    .cax-checkbox-label {
+        line-height: 1;
+    }
+}
+
+.p-colorpicker-panel .p-colorpicker-color {
+    background: transparent url("./images/color.png") no-repeat left top; 
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+   background: transparent url("./images/hue.png") no-repeat left top; 
+}
+@layer cax {
+    .cax-inputtext {
+        margin: 0;
+    }
+
+    .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;
+        margin-bottom: 0.3rem;
+    }
+
+    .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;
+    }
+    .cax-inputtext.with-left-icon {
+        padding-left: 35px;
+    }
+
+    .cax-inputtext.with-right-icon {
+        padding-right: 35px;
+    }
+
+    .cax-inputtext.with-left-icon.with-right-icon {
+        padding-left: 35px;
+        padding-right: 35px;
+    }
+
+    .cax-float-label input:focus ~ label,
+    .cax-float-label input.cax-filled ~ label {
+        top: -0.75rem;
+        font-size: 12px;
+    }
+
+    input:enabled:focus {
+        outline: none;
+    }
+
+    input.input-invalid:enabled:focus {
+        border-color: var(--red-base);
+    }
+    input.input-invalid {
+        border: 1px solid var(--red-base) !important;
+    }
+    .clickable-icon {
+        cursor: pointer;
+    }
+
+    .non-clickable-icon {
+        cursor: default;
+    }
+}
+
+@layer cax {
+    .p-inputtextarea-resizable {
+        overflow: hidden;
+        resize: none;
+    }
+
+    .p-fluid .p-inputtextarea {
+        width: 100%;
+    }
+}
+
+@layer cax {
+    .p-password {
+        position: relative;
+        display: inline-flex;
+    }
+
+    .p-password-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .p-password .p-password-panel {
+        min-width: 100%;
+    }
+
+    .p-password-meter {
+        height: 10px;
+    }
+
+    .p-password-strength {
+        height: 100%;
+        width: 0%;
+        transition: width 1s ease-in-out;
+    }
+
+    .p-fluid .p-password {
+        display: flex;
+    }
+
+    .p-password-input::-ms-reveal,
+    .p-password-input::-ms-clear {
+        display: none;
+    }
+
+    .p-password-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+    }
+
+    .p-password .p-icon {
+        cursor: pointer;
+    }
+
+    .p-password-clearable.p-password-mask .p-password-clear-icon {
+        margin-top: unset;
+    }
+
+    .p-password-clearable {
+        position: relative;
+    }
+}
+
+@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;
+    }
+
+    .cax-radiobutton-label {
+        line-height: 1;
+    }
+}
+
+@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-tooltip {
+        position: absolute;
+        display: none;
+        padding: 0.25em 0.5rem;
+        max-width: 12.5rem;
+        pointer-events: none;
+    }
+
+    .cax-tooltip.cax-tooltip-right,
+    .cax-tooltip.cax-tooltip-left,
+    .cax-tooltip.cax-tooltip-left-top,
+    .cax-tooltip.cax-tooltip-left-bottom,
+    .cax-tooltip.cax-tooltip-right-top,
+    .cax-tooltip.cax-tooltip-right-bottom{
+        padding: 0 0.25rem;
+    }
+    
+    .cax-tooltip.cax-tooltip-top,
+    .cax-tooltip.cax-tooltip-bottom,
+    .cax-tooltip.cax-tooltip-top-left,
+    .cax-tooltip.cax-tooltip-top-right,
+    .cax-tooltip.cax-tooltip-bottom-left,
+    .cax-tooltip.cax-tooltip-bottom-right {
+        padding: 0.25em 0;
+    }
+
+    .cax-tooltip .cax-tooltip-text {
+        white-space: pre-line;
+        word-break: break-word;
+    }
+
+    .cax-tooltip-arrow {
+        scale: 2;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-radius: 2px; /* Add rounded corners */
+    }
+
+    .cax-tooltip-right .cax-tooltip-arrow {
+        top: 50%;
+        left: 0;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0.25em 0.25em 0;
+    }
+    .cax-tooltip-right-top .cax-tooltip-arrow {
+        top: 50%;
+        left: 0%;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0.25em 0.25em 0;
+        border-radius: 0.5em;
+    }
+    .cax-tooltip-right-bottom .cax-tooltip-arrow {
+        top: 50%;
+        left: 0%;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0.25em 0.25em 0;
+        border-radius: 0.5em;
+    }
+
+    .cax-tooltip-left .cax-tooltip-arrow {
+        top: 50%;
+        right: 0;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0 0.25em 0.25rem;
+    }
+    .cax-tooltip-left-top .cax-tooltip-arrow {
+        top: 50%;
+        right: 0;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0 0.25em 0.25rem;
+    }
+    .cax-tooltip-left-bottom .cax-tooltip-arrow {
+        top: 50%;
+        right: 0;
+        margin-top: -0.25rem;
+        border-width: 0.25em 0 0.25em 0.25rem;
+    }
+
+    .cax-tooltip.cax-tooltip-top {
+        padding: 0.25em 0;
+    }
+
+    .cax-tooltip-top .cax-tooltip-arrow {
+        bottom: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0.25em 0.25em 0;
+    }
+    .cax-tooltip-top-left .cax-tooltip-arrow {
+        bottom: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0.25em 0.25em 0;
+    }
+    .cax-tooltip-top-right .cax-tooltip-arrow {
+        bottom: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0.25em 0.25em 0;
+    }
+
+    .cax-tooltip-bottom .cax-tooltip-arrow {
+        top: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0 0.25em 0.25rem;
+    }
+    .cax-tooltip-bottom-left .cax-tooltip-arrow {
+        top: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0 0.25em 0.25rem;
+    }
+    .cax-tooltip-bottom-right .cax-tooltip-arrow {
+        top: 0;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0 0.25em 0.25rem;
+    }
+}