doc: 调整样式

Author: ArgoZhang

src/BootstrapBlazor/Components/Upload/CardUpload.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TValue
 @inherits FileListUploadBase<TValue>
 
@@ -29,11 +29,11 @@
                         <FileIcon Extension="@item.GetExtension()"></FileIcon>
                     }
                 </div>
-                <div class="upload-item-size">
-                    <span>@item.GetFileName()</span>
+                <div class="upload-item-file">
+                    <span class="upload-item-file-name">@item.GetFileName()</span>
                     @if (ShowFileSize)
                     {
-                        <span class="file-size-view">(@item.Size.ToFileSizeString())</span>
+                        <span class="upload-item-file-size">(@item.Size.ToFileSizeString())</span>
                     }
                 </div>
                 <div class="upload-item-actions">
@@ -60,10 +60,10 @@
                                 <i class="@CancelIcon"></i>
                             </button>
                         }
-						@if (ActionButtonTemplate != null)
-						{
-							@ActionButtonTemplate(item)
-						}
+                        @if (ActionButtonTemplate != null)
+                        {
+                            @ActionButtonTemplate(item)
+                        }
                     </div>
                     @if (ShowDeleteButton)
                     {

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -1,4 +1,4 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .upload {
     --bb-upload-body-margin-top: #{$bb-upload-body-margin-top};
@@ -208,21 +208,22 @@
     display: none;
 }
 
-.upload .upload-body.is-card .upload-item-size {
+.upload .upload-body.is-card .upload-item-file {
     margin: 1rem auto;
-    text-align: center;
     font-size: 0.625rem;
     display: flex;
+    flex-wrap: nowrap;
     justify-content: center;
-}
+    align-items: center;
 
-.upload .upload-body.is-card .upload-item-size span {
-    max-width: calc(100% - 4.5rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    white-space: nowrap;
-    padding-right: 0.25rem;
+    .upload-item-file-name {
+        max-width: calc(100% - 4.5rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        white-space: nowrap;
+        padding-right: 0.25rem;
+    }
 }
 
 .upload .upload-item .upload-item-label {