UNPKG

antd-mobile

Version:
112 lines (98 loc) 2.26 kB
.adm-image-uploader { --cell-size: 160px; --gap: 24px; ---gap: var(--gap); ---gap-horizontal: var(--gap-horizontal, var(--gap)); ---gap-vertical: var(--gap-vertical, var(--gap)); } .adm-image-uploader-grid, .adm-image-uploader-space { --gap: var(---gap); --gap-horizontal: var(---gap-horizontal); --gap-vertical: var(---gap-vertical); } .adm-image-uploader-cell { position: relative; width: var(--cell-size); height: var(--cell-size); border-radius: 8px; overflow: hidden; } .adm-image-uploader-cell-fail { border: red solid 2px; box-sizing: border-box; } .adm-image-uploader-cell-delete { position: absolute; top: 0; right: 0; width: 28px; height: 28px; background-color: rgba(0, 0, 0, 0.7); border-radius: 0 0 0 24px; font-size: 16px; color: var(--adm-color-white); cursor: pointer; } .adm-image-uploader-cell-delete-icon { position: absolute; left: 8px; top: 6px; } .adm-image-uploader-cell-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: var(--adm-color-white); background-color: rgba(50, 50, 51, 0.88); } .adm-image-uploader-cell-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; padding-top: 16px; } .adm-image-uploader-cell-mask-message { display: inline-block; padding: 12px 8px; font-size: var(--adm-font-size-4); } .adm-image-uploader-cell-image { width: var(--cell-size); height: var(--cell-size); } .adm-image-uploader-upload-button-wrap { position: relative; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button { background-color: var(--adm-color-box); text-align: center; line-height: var(--cell-size); display: block; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon { color: var(--adm-color-weak); font-size: 64px; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-input { cursor: pointer; position: absolute; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; } .adm-image-uploader .adm-image-uploader-gap-measure { position: absolute; left: 0; top: 0; height: var(--gap-horizontal); width: 0; }