cax-design-system 2.7.12 → 2.8.0

package/resources/components/chips/chips.scss

@@ -1,205 +1,205 @@
-@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;
+        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);
+        }
+    }
+}

package/resources/components/colorpicker/colorpicker-images.scss

@@ -1,7 +1,7 @@
-.cax-colorpicker-panel .cax-colorpicker-color {
-    background: transparent url("./images/color.png") no-repeat left top; 
-}
-
-.cax-colorpicker-panel .cax-colorpicker-hue {
-   background: transparent url("./images/hue.png") no-repeat left top; 
+.cax-colorpicker-panel .cax-colorpicker-color {
+    background: transparent url("./images/color.png") no-repeat left top; 
+}
+
+.cax-colorpicker-panel .cax-colorpicker-hue {
+   background: transparent url("./images/hue.png") no-repeat left top; 
 }

package/resources/components/colorpicker/colorpicker.scss

@@ -1,82 +1,82 @@
-@layer cax {
-    .cax-colorpicker {
-        display: inline-block;
-    }
-
-    .cax-colorpicker-dragging {
-        cursor: pointer;
-    }
-
-    .cax-colorpicker-overlay {
-        position: relative;
-    }
-
-    .cax-colorpicker-panel {
-        position: relative;
-        min-width: 198px;
-        min-height: 174px;
-        border-radius: var(--radius-100);
-    }
-
-    .cax-colorpicker-overlay-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .cax-colorpicker-preview {
-        cursor: pointer;
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-content {
-        position: relative;
-        margin: var(--space-100);
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-color-selector {
-        width: 150px;
-        height: 150px;
-        position: absolute;
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-color {
-        width: 150px;
-        height: 150px;
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-color-handle {
-        position: absolute;
-        top: 0px;
-        left: 150px;
-        border-radius: 100%;
-        width: 10px;
-        height: 10px;
-        border-width: 1px;
-        border-style: solid;
-        margin: -5px 0 0 -5px;
-        cursor: pointer;
-        opacity: 0.85;
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-hue {
-        width: 16px;
-        height: 150px;
-        left: 165px;
-        position: absolute;
-        opacity: 0.85;
-    }
-
-    .cax-colorpicker-panel .cax-colorpicker-hue-handle {
-        position: absolute;
-        top: 150px;
-        left: 0px;
-        width: 20px;
-        margin-left: -2px;
-        margin-top: -5px;
-        height: 10px;
-        border-width: 2px;
-        border-style: solid;
-        opacity: 0.85;
-        cursor: pointer;
-    }
-}
+@layer cax {
+    .cax-colorpicker {
+        display: inline-block;
+    }
+
+    .cax-colorpicker-dragging {
+        cursor: pointer;
+    }
+
+    .cax-colorpicker-overlay {
+        position: relative;
+    }
+
+    .cax-colorpicker-panel {
+        position: relative;
+        min-width: 198px;
+        min-height: 174px;
+        border-radius: var(--radius-100);
+    }
+
+    .cax-colorpicker-overlay-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .cax-colorpicker-preview {
+        cursor: pointer;
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-content {
+        position: relative;
+        margin: var(--space-100);
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-color-selector {
+        width: 150px;
+        height: 150px;
+        position: absolute;
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-color {
+        width: 150px;
+        height: 150px;
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-color-handle {
+        position: absolute;
+        top: 0px;
+        left: 150px;
+        border-radius: 100%;
+        width: 10px;
+        height: 10px;
+        border-width: 1px;
+        border-style: solid;
+        margin: -5px 0 0 -5px;
+        cursor: pointer;
+        opacity: 0.85;
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-hue {
+        width: 16px;
+        height: 150px;
+        left: 165px;
+        position: absolute;
+        opacity: 0.85;
+    }
+
+    .cax-colorpicker-panel .cax-colorpicker-hue-handle {
+        position: absolute;
+        top: 150px;
+        left: 0px;
+        width: 20px;
+        margin-left: -2px;
+        margin-top: -5px;
+        height: 10px;
+        border-width: 2px;
+        border-style: solid;
+        opacity: 0.85;
+        cursor: pointer;
+    }
+}