@scx-js/scx-ui 0.0.1 → 0.0.2

package/scx-upload/index.css

@@ -1,204 +1,204 @@
-/* 主区域 */
-.scx-upload {
-    background: var(--scx-overlay-bg);
-    border: 3px dashed var(--scx-text-placeholder-color);
-    border-radius: 6px;
-    position: relative;
-    overflow: hidden;
-    width: 150px;
-    height: 150px;
-    transition: border 200ms;
-}
-
-/* border 变化 */
-.scx-upload:hover {
-    border-color: var(--scx-theme);
-}
-
-/* 预览区域 */
-.scx-upload > .preview {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* 预览图片 */
-.scx-upload .preview-image {
-    min-height: 50%;
-    min-width: 50%;
-    height: 100%;
-    width: 100%;
-}
-
-/* 预览文字 */
-.scx-upload .preview-text {
-    font-size: 15px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    overflow: auto;
-}
-
-.scx-upload .preview-text > div {
-    /**
-        这里并没有在 .scx-upload .preview-text 中使用
-            justify-content: center;
-            align-items: center;
-        来进行居中 而是在子元素(也就是当前注释)中使用
-            margin: auto;
-        请参阅
-            https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
-    */
-    margin: auto;
-    word-break: break-all;
-}
-
-/* 预览中操作 */
-.scx-upload .operation {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 30px;
-    display: flex;
-}
-
-/*操作项子元素*/
-.scx-upload .operation > div,
-.scx-upload .operation > a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0;
-    opacity: 50%;
-    transition: 200ms ease-in-out opacity;
-    cursor: pointer;
-    color: white;
-    font-weight: 600;
-    text-decoration: unset;
-}
-
-.scx-upload .operation > div:hover,
-.scx-upload .operation > a:hover {
-    opacity: 100%;
-}
-
-.scx-upload .item-download {
-    background: #44be16;
-}
-
-.scx-upload .item-replace {
-    background: #29aaf5;
-}
-
-.scx-upload .item-delete {
-    background: #f44336;
-}
-
-/* 没有预览时 */
-.scx-upload > .no-preview {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    flex-direction: column;
-    row-gap: 10px;
-}
-
-/* 图标 */
-.scx-upload > .no-preview > .scx-icon {
-    fill: var(--scx-text-placeholder-color);
-    height: 40px;
-    width: 40px;
-    pointer-events: none;
-    flex-shrink: 0;
-}
-
-/* 提示拖拽文字 */
-.scx-upload > .no-preview > span {
-    font-weight: 600;
-    font-size: 20px;
-    color: var(--scx-text-placeholder-color);
-    pointer-events: none;
-    flex-shrink: 0;
-}
-
-/* 拖动时蓝色背景 */
-.scx-upload > .no-preview.dragover::after {
-    content: " ";
-    width: 100%;
-    height: 100%;
-    background: var(--scx-theme-bg);
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-}
-
-.scx-upload > .progress-preview {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-}
-
-/* 进度条 */
-.scx-upload > .progress {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: rgba(50, 50, 50, 40%);
-    backdrop-filter: blur(2px);
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.scx-upload .temp-file-name {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    overflow: auto;
-}
-
-.scx-upload .temp-file-name > div {
-    /**
-        参照 44 行
-     */
-    margin: auto;
-    word-break: break-all;
-}
-
-.scx-upload .progress-state {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    font-weight: 600;
-    flex-shrink: 0;
-    padding: 5px;
-    box-sizing: border-box;
-    row-gap: 5px;
-}
-
-.scx-upload .progress-state > .progress-state-text {
-    flex-shrink: 0;
-    font-weight: 600;
-    font-size: 14px;
-}
-
-.scx-upload .progress-state > .scx-progress {
-    width: 100%;
-}
-	
+/* 主区域 */
+.scx-upload {
+    background: var(--scx-overlay-bg);
+    border: 3px dashed var(--scx-text-placeholder-color);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    width: 150px;
+    height: 150px;
+    transition: border 200ms;
+}
+
+/* border 变化 */
+.scx-upload:hover {
+    border-color: var(--scx-theme);
+}
+
+/* 预览区域 */
+.scx-upload > .preview {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 预览图片 */
+.scx-upload .preview-image {
+    min-height: 50%;
+    min-width: 50%;
+    height: 100%;
+    width: 100%;
+}
+
+/* 预览文字 */
+.scx-upload .preview-text {
+    font-size: 15px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: auto;
+}
+
+.scx-upload .preview-text > div {
+    /**
+        这里并没有在 .scx-upload .preview-text 中使用
+            justify-content: center;
+            align-items: center;
+        来进行居中 而是在子元素(也就是当前注释)中使用
+            margin: auto;
+        请参阅
+            https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
+    */
+    margin: auto;
+    word-break: break-all;
+}
+
+/* 预览中操作 */
+.scx-upload .operation {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 30px;
+    display: flex;
+}
+
+/*操作项子元素*/
+.scx-upload .operation > div,
+.scx-upload .operation > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    opacity: 50%;
+    transition: 200ms ease-in-out opacity;
+    cursor: pointer;
+    color: white;
+    font-weight: 600;
+    text-decoration: unset;
+}
+
+.scx-upload .operation > div:hover,
+.scx-upload .operation > a:hover {
+    opacity: 100%;
+}
+
+.scx-upload .item-download {
+    background: #44be16;
+}
+
+.scx-upload .item-replace {
+    background: #29aaf5;
+}
+
+.scx-upload .item-delete {
+    background: #f44336;
+}
+
+/* 没有预览时 */
+.scx-upload > .no-preview {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+/* 图标 */
+.scx-upload > .no-preview > .scx-icon {
+    fill: var(--scx-text-placeholder-color);
+    height: 40px;
+    width: 40px;
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+/* 提示拖拽文字 */
+.scx-upload > .no-preview > span {
+    font-weight: 600;
+    font-size: 20px;
+    color: var(--scx-text-placeholder-color);
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+/* 拖动时蓝色背景 */
+.scx-upload > .no-preview.dragover::after {
+    content: " ";
+    width: 100%;
+    height: 100%;
+    background: var(--scx-theme-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.scx-upload > .progress-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+/* 进度条 */
+.scx-upload > .progress {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(50, 50, 50, 40%);
+    backdrop-filter: blur(2px);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.scx-upload .temp-file-name {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    overflow: auto;
+}
+
+.scx-upload .temp-file-name > div {
+    /**
+        参照 44 行
+     */
+    margin: auto;
+    word-break: break-all;
+}
+
+.scx-upload .progress-state {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-weight: 600;
+    flex-shrink: 0;
+    padding: 5px;
+    box-sizing: border-box;
+    row-gap: 5px;
+}
+
+.scx-upload .progress-state > .progress-state-text {
+    flex-shrink: 0;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.scx-upload .progress-state > .scx-progress {
+    width: 100%;
+}
+