RCL - anchor link CSS issue fixed.

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor

@@ -10,36 +10,36 @@
     @if (Size == HeadingSize.H2)
     {
         <h2 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h2>
     }
     else if (Size == HeadingSize.H3)
     {
         <h3 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h3>
     }
     else if (Size == HeadingSize.H4)
     {
         <h4 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h4>
     }
     else if (Size == HeadingSize.H5)
     {
         <h5 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h5>
     }
     else if (Size == HeadingSize.H6)
     {
         <h6 id="@Link!.ToLower()" class="@headerClassNames">
-            <span class="anchor-name">@Name</span>
-            <a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
+            <span class="bb-anchor-name">@Name</span>
+            <a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
         </h6>
     }
 

BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css

@@ -254,28 +254,28 @@ h1:focus-visible {
 
 /*** END: home ***/
 
-.anchor-link {
+.bb-anchor-link {
     font-weight: 400;
     color: rgba(13,110,253,0.5);
     transition: color 0.15s ease-in-out;
     opacity: 0;
-    padding-left: 0.375em;
+    /*padding-left: 0.375em;*/
     text-decoration: none;
     -webkit-font-smoothing: antialiased;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .anchor-link {
+    .bb-anchor-link {
         transition: none
     }
 }
 
-.anchor-link:focus, .anchor-link:hover {
+.bb-anchor-link:focus, .bb-anchor-link:hover {
     color: #0d6efd;
     text-decoration: none
 }
 
-:hover > .anchor-link, .anchor-link:focus {
+:hover > .bb-anchor-link, .bb-anchor-link:focus {
     opacity: 1;
 }