cax-design-system 2.8.4 → 3.0.0

package/resources/components/image/image.scss

@@ -1,92 +1,97 @@
-@layer cax {
-    .cax-image-mask {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .cax-image-preview-container {
-        position: relative;
-        display: inline-block;
-        line-height: 0;
-    }
-
-    .cax-image-preview-indicator {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        outline: none;
-        border: none;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    .cax-image-preview-icon.pi {
-        font-size: 1.5rem;
-    }
-
-    .cax-image-preview-icon.cax-icon {
-        scale: 1.5;
-    }
-
-    .cax-image-preview-container:hover > .cax-image-preview-indicator {
-        opacity: 1;
-        cursor: pointer;
-    }
-
-    .cax-image-preview-container > img {
-        cursor: pointer;
-    }
-
-    .cax-image-toolbar {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        z-index: 1;
-    }
-
-    .cax-image-action.cax-link {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .cax-image-action.cax-link[disabled] {
-        opacity: 0.5;
-    }
-
-    .cax-image-preview {
-        transition: transform 0.15s;
-        max-width: 100vw;
-        max-height: 100vh;
-    }
-
-    // custom styles starts here
-
-    .cax-image-sm {
-        height: 32px;
-        width: auto;
-    }
-
-    .cax-image-md {
-        height: 40px;
-        width: auto;
-    }
-
-    .cax-image-lg {
-        height: 48px;
-        width: auto;
-    }
-
-    .cax-image-xl {
-        height: 56px;
-        width: auto;
-    }
-}
+@layer cax {
+    .cax-image {
+        img {
+            border-radius: 8px;
+        }
+    }
+    .cax-image-mask {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .cax-image-preview-container {
+        position: relative;
+        display: inline-block;
+        line-height: 0;
+    }
+
+    .cax-image-preview-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        outline: none;
+        border: none;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    .cax-image-preview-icon.pi {
+        font-size: 1.5rem;
+    }
+
+    .cax-image-preview-icon.cax-icon {
+        scale: 1.5;
+    }
+
+    .cax-image-preview-container:hover > .cax-image-preview-indicator {
+        opacity: 1;
+        cursor: pointer;
+    }
+
+    .cax-image-preview-container > img {
+        cursor: pointer;
+    }
+
+    .cax-image-toolbar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        z-index: 1;
+    }
+
+    .cax-image-action.cax-link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .cax-image-action.cax-link[disabled] {
+        opacity: 0.5;
+    }
+
+    .cax-image-preview {
+        transition: transform 0.15s;
+        max-width: 100vw;
+        max-height: 100vh;
+    }
+
+    // custom styles starts here
+
+    .cax-image-sm {
+        height: 32px;
+        width: auto;
+    }
+
+    .cax-image-md {
+        height: 40px;
+        width: auto;
+    }
+
+    .cax-image-lg {
+        height: 48px;
+        width: auto;
+    }
+
+    .cax-image-xl {
+        height: 56px;
+        width: auto;
+    }
+}

package/resources/components/inplace/inplace.css

@@ -1,19 +1,19 @@
-@layer cax {
-    .p-inplace .p-inplace-display {
-        display: inline;
-        cursor: pointer;
-    }
-
-    .p-inplace .p-inplace-content {
-        display: inline;
-    }
-
-    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
-        display: flex;
-    }
-
-    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-}
+@layer cax {
+    .p-inplace .p-inplace-display {
+        display: inline;
+        cursor: pointer;
+    }
+
+    .p-inplace .p-inplace-content {
+        display: inline;
+    }
+
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+        display: flex;
+    }
+
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+}

package/resources/components/{chips/chips.scss → inputchips/inputchips.scss}

@@ -1,205 +1,181 @@
-@layer cax {
-    .cax-chips {
-        display: inline-flex;
-        flex-direction: column;
-    }
-
-    .cax-chips-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .cax-chips-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-        max-width: 100%;
-        border-radius: 8px;
-        padding: 0 10px;
-        background: var(--neutral-100);
-        border: 1px solid var(--neutral-200);
-        scroll-snap-align: end;
-        scroll-snap-stop: always;
-
-        &:hover {
-            border-color: var(--neutral-300);
-        }
-    }
-
-    .cax-chips-token-label {
-        min-width: 0%;
-        overflow: auto;
-    }
-
-    .cax-chips-token-label::-webkit-scrollbar {
-        display: none;
-    }
-
-    .cax-chips-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-
-    .cax-chips-token-icon {
-        cursor: pointer;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 20px;
-        min-height: 20px;
-
-        i {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
-
-        &:hover {
-            color: var(--neutral-900);
-        }
-    }
-
-    .cax-chips-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-
-    .cax-fluid .cax-chips {
-        display: flex;
-    }
-
-    .cax-chips-clear-icon {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 20px;
-        min-height: 20px;
-        color: var(--neutral-750);
-        margin-left: 8px;
-        cursor: pointer;
-
-        &:hover {
-            color: var(--neutral-900);
-        }
-
-        i {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .cax-chips-clearable .cax-inputtext {
-        position: relative;
-    }
-
-    .cax-cax-edit-icon {
-        margin-right: 5px;
-        height: 15px;
-        width: auto;
-    }
-
-    .cax-chips-wrapper {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        min-width: 0;
-        position: relative;
-    }
-
-    .cax-chips-content {
-        display: flex;
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-    }
-
-    .cax-input-icon-left {
-        margin-right: 10px;
-    }
-
-    .cax-chips-multiple-container {
-        display: flex;
-        align-items: center;
-        width: 100%;
-    }
-
-    .cax-chips-input-token {
-        display: inline-flex;
-        align-items: center;
-        min-width: 120px;
-        flex: 0 0 auto;
-        height: 100%;
-
-        input {
-            width: 100%;
-            background: transparent;
-            border: none;
-            outline: none;
-            padding: 4px;
-            font-family: inherit;
-            font-size: inherit;
-        }
-    }
-
-    .cax-chips-icon-left {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 20px;
-        min-height: 20px;
-        color: var(--neutral-750);
-        margin-right: 8px;
-
-        i {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .cax-chips-icon-right {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 20px;
-        min-height: 20px;
-        color: var(--neutral-750);
-        margin-left: 8px;
-
-        i {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
-
-        &:hover {
-            color: var(--neutral-900);
-        }
-    }
-}
+@layer cax {
+    .cax-chips {
+        display: inline-flex;
+        flex-direction: column;
+    }
+
+    .cax-chips-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .cax-chips-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+        max-width: 100%;
+        border-radius: 8px;
+        padding: 0 10px;
+        background: var(--neutral-100);
+        border: 1px solid var(--neutral-200);
+        scroll-snap-align: end;
+        scroll-snap-stop: always;
+
+        &:hover {
+            border-color: var(--neutral-300);
+        }
+    }
+
+    .cax-chips-token-label {
+        min-width: 0%;
+        overflow: auto;
+    }
+
+    .cax-chips-token-label::-webkit-scrollbar {
+        display: none;
+    }
+
+    .cax-chips-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .cax-chips-token-icon {
+        cursor: pointer;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover {
+            color: var(--neutral-900);
+        }
+    }
+
+    .cax-chips-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .cax-fluid .cax-chips {
+        display: flex;
+    }
+
+    .cax-chips-clear-icon {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+        color: var(--neutral-750);
+        margin-left: 8px;
+        cursor: pointer;
+
+        &:hover {
+            color: var(--neutral-900);
+        }
+
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .cax-chips-clearable .cax-inputtext {
+        position: relative;
+    }
+
+    .cax-cax-edit-icon {
+        margin-right: 5px;
+        height: 15px;
+        width: auto;
+    }
+
+    .cax-chips-wrapper {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        position: relative;
+    }
+
+    .cax-chips-content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .cax-input-icon-left {
+        margin-right: 10px;
+    }
+
+    .cax-chips-multiple-container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .cax-chips-input-token {
+        display: inline-flex;
+        align-items: center;
+        min-width: 120px;
+        flex: 0 0 auto;
+        height: 100%;
+
+        input {
+            width: 100%;
+            background: transparent;
+            border: none;
+            outline: none;
+            padding: 4px;
+            font-family: inherit;
+            font-size: inherit;
+        }
+    }
+
+    .cax-chips-icon-left {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+    }
+
+    .cax-chips-icon-right {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+    }
+}

package/resources/components/inputicon/inputicon.css

@@ -1,6 +1,6 @@
-@layer cax {
-    .p-fluid .p-icon-field-left,
-    .p-fluid .p-icon-field-right {
-        width: 100%;
-    }
-}
+@layer cax {
+    .p-fluid .p-icon-field-left,
+    .p-fluid .p-icon-field-right {
+        width: 100%;
+    }
+}

package/resources/components/inputmask/inputmask.scss

@@ -1,12 +1,48 @@
-@layer cax {
-    .cax-inputmask-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-    }
-
-    .cax-inputmask-clearable {
-        position: relative;
-    }
-}
+@layer cax {
+    .cax-inputmask-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        cursor: pointer;
+    }
+
+    .cax-inputmask-clearable {
+        position: relative;
+    }
+
+    .cax-input-size-sm {
+        input {
+            height: 32px !important;
+        }
+        .cax-inputtext.with-left-icon {
+            padding-left: 30px !important;
+        }
+        .cax-inputtext.with-right-icon {
+            padding-right: 30px !important;
+        }
+    }
+
+    .cax-input-size-md {
+        input {
+            height: 40px !important;
+        }
+        .cax-inputtext.with-left-icon {
+            padding-left: 34px !important;
+        }
+        .cax-inputtext.with-right-icon {
+            padding-right: 34px !important;
+        }
+    }
+
+    .cax-input-size-lg {
+        input {
+            height: 48px !important;
+        }
+        .cax-inputtext.with-left-icon {
+            padding-left: 38px !important;
+        }
+        .cax-inputtext.with-right-icon {
+            padding-right: 38px !important;
+        }
+    }
+}