@opendesign-plus-test/components 0.0.1-rc.98 → 0.0.1-rc.99

package/dist/treeshaking/components/search/internal/SearchImageInput.css

@@ -1,12 +1,12 @@
-.hover-icon-rotate .o-icon[data-v-f28dde35] {
+.hover-icon-rotate .o-icon[data-v-de9a7ad2] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-f28dde35] {
+.hover-icon-rotate:hover .o-icon[data-v-de9a7ad2] {
     transform: rotate(-180deg);
 }
 }
-.o-search-image-input[data-v-f28dde35] {
+.o-search-image-input[data-v-de9a7ad2] {
   display: flex;
   flex-direction: column;
   border: 1px solid transparent;
@@ -14,67 +14,93 @@
   background-color: var(--o-color-fill2);
   transition: border-color var(--o-duration-m1);
 }
-.o-search-image-input.is-expanded[data-v-f28dde35] {
+.o-search-image-input.is-expanded[data-v-de9a7ad2] {
   border-color: var(--o-color-primary1);
 }
-.o-search-image-input.is-expanded[data-v-f28dde35] .o-input.el-input .el-input__wrapper,
-.o-search-image-input.is-expanded[data-v-f28dde35] .o_box-main {
+.o-search-image-input.is-expanded[data-v-de9a7ad2] .o-input.el-input .el-input__wrapper,
+.o-search-image-input.is-expanded[data-v-de9a7ad2] .o_box-main {
   border: none !important;
   border-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
   box-shadow: none !important;
 }
-.o-search-image-input-row[data-v-f28dde35] {
+.o-search-image-input-row[data-v-de9a7ad2] {
   display: flex;
   align-items: center;
 }
-.o-search-image-input-input[data-v-f28dde35] {
+.o-search-image-input-input[data-v-de9a7ad2] {
   width: 100%;
+  --_box-bg-color: transparent;
 }
-.o-search-image-input-icon[data-v-f28dde35] {
+@media (max-width: 840px) {
+.o-search-image-input-input[data-v-de9a7ad2] input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 1440px) {
+.o-search-image-input-input.o_box-medium[data-v-de9a7ad2] {
+    --_box-height: 32px;
+}
+}
+.o-search-image-input-icon[data-v-de9a7ad2] {
   cursor: pointer;
   color: var(--o-color-info1);
   font-size: 16px;
 }
-.o-search-image-input-icon.close[data-v-f28dde35] {
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
   font-size: 16px;
+  margin-left: var(--o-gap-2);
 }
-.o-search-image-input-icon.close[data-v-f28dde35] {
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
   overflow: hidden;
 }
-.o-search-image-input-icon.close svg[data-v-f28dde35] {
+.o-search-image-input-icon.close svg[data-v-de9a7ad2] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.o-search-image-input-icon.close:hover svg[data-v-f28dde35] {
+.o-search-image-input-icon.close:hover svg[data-v-de9a7ad2] {
     transform: rotate(180deg);
 }
 }
-.o-search-image-input-icon.upload[data-v-f28dde35] {
+.o-search-image-input-icon.upload[data-v-de9a7ad2] {
   fill: var(--o-color-info1);
 }
-.o-search-image-input-upload-btn[data-v-f28dde35] {
+@media (max-width: 840px) {
+.o-search-image-input-icon[data-v-de9a7ad2] {
+    font-size: 24px;
+}
+.o-search-image-input-icon.close[data-v-de9a7ad2] {
+    font-size: 24px;
+}
+}
+.o-search-image-input-upload-btn[data-v-de9a7ad2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  margin-right: 8px;
   cursor: pointer;
   flex-shrink: 0;
 }
 @media (hover: hover) {
-.o-search-image-input-upload-btn[data-v-f28dde35]:hover {
+.o-search-image-input-upload-btn[data-v-de9a7ad2]:hover {
     background-color: var(--o-color-control2-light);
 }
-.o-search-image-input-upload-btn:hover .o-search-image-input-icon.upload[data-v-f28dde35] {
+.o-search-image-input-upload-btn:hover .o-search-image-input-icon.upload[data-v-de9a7ad2] {
     color: var(--o-color-primary2);
 }
 }
-.o-search-image-input-file[data-v-f28dde35] {
+@media (max-width: 840px) {
+.o-search-image-input-upload-btn[data-v-de9a7ad2] {
+    width: 24px;
+    height: 24px;
+}
+}
+.o-search-image-input-file[data-v-de9a7ad2] {
   display: none;
 }
-.o-search-image-input-thumb[data-v-f28dde35] {
+.o-search-image-input-thumb[data-v-de9a7ad2] {
   display: inline-flex;
   align-items: center;
   margin-left: 8px;
@@ -83,18 +109,18 @@
   flex-shrink: 0;
 }
 @media (hover: hover) {
-.o-search-image-input-thumb:hover .o-search-image-input-thumb-remove[data-v-f28dde35],
-  .o-search-image-input-thumb:hover .o-search-image-input-thumb-zoom[data-v-f28dde35] {
+.o-search-image-input-thumb:hover .o-search-image-input-thumb-remove[data-v-de9a7ad2],
+  .o-search-image-input-thumb:hover .o-search-image-input-thumb-zoom[data-v-de9a7ad2] {
     opacity: 1;
 }
 }
-.o-search-image-input-thumb-figure[data-v-f28dde35] {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
   height: 40px;
   width: 40px;
   border-radius: 4px;
   overflow: hidden;
 }
-.o-search-image-input-thumb-figure[data-v-f28dde35] img {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] img {
   height: 40px;
   width: 40px;
   object-fit: cover;
@@ -102,18 +128,18 @@
   border-radius: 4px;
 }
 @media (min-width: 841px) and (max-width: 1680px) {
-.o-search-image-input-thumb-figure[data-v-f28dde35] {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
     height: 32px;
     width: 32px;
 }
 }
 @media (max-width: 840px) {
-.o-search-image-input-thumb-figure[data-v-f28dde35] {
+.o-search-image-input-thumb-figure[data-v-de9a7ad2] {
     height: 24px;
     width: 24px;
 }
 }
-.o-search-image-input-thumb-zoom[data-v-f28dde35] {
+.o-search-image-input-thumb-zoom[data-v-de9a7ad2] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -126,11 +152,11 @@
   opacity: 0;
   transition: opacity var(--o-duration-m1);
 }
-.o-search-image-input-thumb-zoom .o-search-image-input-thumb-zoom-icon[data-v-f28dde35] {
+.o-search-image-input-thumb-zoom .o-search-image-input-thumb-zoom-icon[data-v-de9a7ad2] {
   color: #fff;
   font-size: 16px;
 }
-.o-search-image-input-thumb-remove[data-v-f28dde35] {
+.o-search-image-input-thumb-remove[data-v-de9a7ad2] {
   position: absolute;
   top: -8px;
   right: -8px;
@@ -144,27 +170,27 @@
   z-index: 1;
   transition: opacity var(--o-duration-m1);
 }
-.o-search-image-input-thumb-remove[data-v-f28dde35] svg {
+.o-search-image-input-thumb-remove[data-v-de9a7ad2] svg {
   width: 16px;
   height: 16px;
   fill: rgb(var(--o-mixedgray-9));
 }
-.o-search-image-input-preview[data-v-f28dde35] {
+.o-search-image-input-preview[data-v-de9a7ad2] {
   padding: 0 12px 8px;
 }
-.o-search-image-input-preview .o-search-image-input-preview-wrapper[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-wrapper[data-v-de9a7ad2] {
   position: relative;
   display: inline-flex;
   overflow: visible;
   margin-top: 8px;
 }
 @media (hover: hover) {
-.o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-remove[data-v-f28dde35],
-  .o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-zoom[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-remove[data-v-de9a7ad2],
+  .o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-zoom[data-v-de9a7ad2] {
     opacity: 1;
 }
 }
-.o-search-image-input-preview .o-search-image-input-preview-zoom[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-zoom[data-v-de9a7ad2] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -176,24 +202,24 @@
   opacity: 0;
   transition: opacity var(--o-duration-m1);
 }
-.o-search-image-input-preview .o-search-image-input-preview-zoom .o-search-image-input-preview-zoom-icon[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-zoom .o-search-image-input-preview-zoom-icon[data-v-de9a7ad2] {
   color: #fff;
   font-size: 24px;
 }
-.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-de9a7ad2] {
   height: 72px;
   width: 72px;
   border-radius: 4px;
   overflow: hidden;
 }
-.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-f28dde35] img {
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-de9a7ad2] img {
   height: 72px;
   width: 72px;
   object-fit: cover;
   object-position: center;
   border-radius: 4px;
 }
-.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-f28dde35] {
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-de9a7ad2] {
   position: absolute;
   top: -8px;
   right: -8px;
@@ -207,7 +233,7 @@
   z-index: 1;
   transition: opacity var(--o-duration-m1);
 }
-.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-f28dde35] svg {
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-de9a7ad2] svg {
   width: 16px;
   height: 16px;
 }

package/dist/treeshaking/components/search/internal/SearchImageInput.vue.mjs

@@ -2,7 +2,7 @@ import _sfc_main from "./SearchImageInput.vue2.mjs";
 import './SearchImageInput.css';
 import './SearchImageInput2.css';
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const SearchImageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f28dde35"]]);
+const SearchImageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-de9a7ad2"]]);
 export {
   SearchImageInput as default
 };