From 78e167b44513629eda9b9f277b76e62cca8fe0f0 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Mon, 18 Dec 2023 12:44:46 +0800
Subject: [PATCH] doc(Transfer): update sass file use variable (#2612)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: update file use variable

* doc: 更新示例文档
---
 .../Components/Samples/Transfers.razor        | 12 +++++----
 .../Components/Transfer/Transfer.razor.scss   | 26 +++++++++----------
 .../wwwroot/scss/theme/bootstrap.blazor.scss  | 14 ++++++++++
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor
index 96f6723fc5e..173e51d8315 100644
--- 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
index a79fca53f86..e07a636a2fc 100644
--- 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
index c3fe843628b..cfdabc79f3b 100644
--- 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";