refactor(Drawer): support dark theme (#2694)

* refactor: 调整抽屉样式 * doc: 更新重连组件示例代码
dotnetcore · Dec 29, 2023 · 01b3145 · 01b3145
1 parent 93b57a9
commit 01b3145
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Reconnectors.razor b/src/BootstrapBlazor.Server/Components/Samples/Reconnectors.razor
@@ -18,7 +18,7 @@
 // add ReconnectorOutlet component
 <b><i>&lt;component type="typeof(ReconnectorOutlet)" param-AutoReconnect="true" render-mode="ServerPrerendered" /&gt;</i></b></Pre>
 
-<p>组件参数 <code>AutoReconnect</code> 用于控制是否开启网络重连，默认 <code>true</code> 已开启，可以通过 <code>param-AutoReconnect="false"</code> 关闭</p>
+<p class="mt-2">组件参数 <code>AutoReconnect</code> 用于控制是否开启网络重连，默认 <code>true</code> 已开启，可以通过 <code>param-AutoReconnect="false"</code> 关闭</p>
 
 <p>@((MarkupString)Localizer["Step2"].Value)</p>
 
@@ -40,7 +40,7 @@
     &lt;/ReconnectRejectedTemplate&gt;
 &lt;/Reconnector&gt;</Pre>
 
-<p>@Localizer["IntroTitle"]</p>
+<p class="mt-2">@Localizer["IntroTitle"]</p>
 
 <ul class="ul-demo">
     <li><code>ReconnectingTemplate</code> @Localizer["ReconnectingTemplateText"]</li>
@@ -146,7 +146,7 @@
     &lt;/div&gt;
 &lt;/ReconnectingTemplate&gt;</Pre>
 
-<div class="mb-2"><b>2. <code>ReconnectFailedTemplate</code> 模板</b></div>
+<div class="my-2"><b>2. <code>ReconnectFailedTemplate</code> 模板</b></div>
 
 <div class="connection-box">
     <div class="connection-mask"></div>
@@ -208,7 +208,7 @@
     &lt;/div&gt;
 &lt;/ReconnectFailedTemplate&gt;</Pre>
 
-<div class="mb-2"><b>3. <code>ReconnectRejectedTemplate</code> 模板</b></div>
+<div class="my-2"><b>3. <code>ReconnectRejectedTemplate</code> 模板</b></div>
 
 <div class="connection-box">
     <div class="connection-mask"></div>

diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
@@ -96,7 +96,7 @@
 
             .drawer-bar-body {
                 position: absolute;
-                inset: 0 -2px;
+                inset: 0 -1px;
                 cursor: col-resize;
             }
 
@@ -124,7 +124,7 @@
                 width: 100%;
 
                 .drawer-bar-body {
-                    inset: -2px 0;
+                    inset: -1px 0;
                     cursor: row-resize;
                 }
             }

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -229,7 +229,7 @@ $bb-divider-text-padding: 0 20px;
 $bb-drawer-zindex: 1050;
 $bb-drawer-body-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
 $bb-drawer-body-padding: 1rem;
-$bb-drawer-bar-bg: #d0d7de;
+$bb-drawer-bar-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-drawer-bar-hover-color: #409eff;
 $bb-drawer-bar-drag-color: #0969da;
 $bb-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);