doc(Transfer): update sass file use variable (#2612)

* refactor: update file use variable * doc: 更新示例文档
dotnetcore · Dec 18, 2023 · 78e167b · 78e167b
1 parent 9721f3a
commit 78e167b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor
@@ -36,16 +36,18 @@
 <DemoBlock Title="@Localizer["TransferBindTitle"]"
            Introduction="@Localizer["TransferBindIntro"]"
            Name="Bind">
-    <p class="mb-3">@((MarkupString)Localizer["TransferBindDescription"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TransferBindDescription"].Value)</section>
     <Transfer Items="@Items3" @bind-Value="@SelectedValue" />
-    <div class="my-3">Value：@string.Join(";", SelectedValue.Select(i => i.Text))</div>
-    <Button Text="@Localizer["BindToWayButtonText1"]" OnClick="@OnAddItem" />
+    <section ignore>
+        <div class="my-3">Value：@string.Join(";", SelectedValue.Select(i => i.Text))</div>
+        <Button Text="@Localizer["BindToWayButtonText1"]" OnClick="@OnAddItem" />
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TransferValidateTitle"]"
            Introduction="@Localizer["TransferValidateIntro"]"
            Name="Validate">
-    <p class="mb-3">@((MarkupString)Localizer["ClientValidationP1"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["ClientValidationP1"].Value)</section>
     <ValidateForm Model="@Model">
         <div class="row g-3">
             <div class="col-12">
@@ -56,7 +58,7 @@
             </div>
         </div>
     </ValidateForm>
-    <div class="mt-3">Hobby: @string.Join(",", Model.Hobby)</div>
+    <section ignore class="mt-3">Hobby: @string.Join(",", Model.Hobby)</section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TransferMinMaxTitle"]"

diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss
@@ -1,16 +1,16 @@
-.transfer {
-    --bb-transfer-panel-header-height: 40px;
-    --bb-transfer-panel-header-bg: #f5f7fa;
-    --bb-transfer-panel-header-color: #000;
-    --bb-transfer-panel-header-padding: 0 1rem;
-    --bb-transfer-panel-body-padding: .5rem;
-    --bb-transfer-panel-list-max-height: 200px;
-    --bb-transfer-panel-list-min-height: auto;
-    --bb-transfer-panel-item-padding: 0.25rem 0.75rem;
-    --bb-transfer-panel-item-margin: 0 .5rem .25rem 0;
-    --bb-transfer-panel-item-width: 160px;
-    --bb-transfer-buttons-padding: 0 30px;
-    --bb-transfer-filter-focus-border-color: #409eff;
+.transfer {
+    --bb-transfer-panel-header-height: #{$bb-transfer-panel-header-height};
+    --bb-transfer-panel-header-bg: #{$bb-transfer-panel-header-bg};
+    --bb-transfer-panel-header-color: #{$bb-transfer-panel-header-color};
+    --bb-transfer-panel-header-padding: #{$bb-transfer-panel-header-padding};
+    --bb-transfer-panel-body-padding: #{$bb-transfer-panel-body-padding};
+    --bb-transfer-panel-list-max-height: #{$bb-transfer-panel-list-max-height};
+    --bb-transfer-panel-list-min-height: #{$bb-transfer-panel-list-min-height};
+    --bb-transfer-panel-item-padding: #{$bb-transfer-panel-item-padding};
+    --bb-transfer-panel-item-margin: #{$bb-transfer-panel-item-margin};
+    --bb-transfer-panel-item-width: #{$bb-transfer-panel-item-width};
+    --bb-transfer-buttons-padding: #{$bb-transfer-buttons-padding};
+    --bb-transfer-filter-focus-border-color: #{$bb-transfer-filter-focus-border-color};
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -596,4 +596,18 @@ $bb-toggle-bg-color: #e0e0e0;
 $bb-toggle-color: #fff;
 $bb-toggle-off-color: #000;
 
+// Transfer
+$bb-transfer-panel-header-height: 40px;
+$bb-transfer-panel-header-bg: #f5f7fa;
+$bb-transfer-panel-header-color: #000;
+$bb-transfer-panel-header-padding: 0 1rem;
+$bb-transfer-panel-body-padding: .5rem;
+$bb-transfer-panel-list-max-height: 200px;
+$bb-transfer-panel-list-min-height: auto;
+$bb-transfer-panel-item-padding: 0.25rem 0.75rem;
+$bb-transfer-panel-item-margin: 0 .5rem .25rem 0;
+$bb-transfer-panel-item-width: 160px;
+$bb-transfer-buttons-padding: 0 30px;
+$bb-transfer-filter-focus-border-color: #409eff;
+
 @import "../components.scss";