refactor: update examples

Author: mrholek

src/components/DocsExample.js

@@ -11,7 +11,7 @@ const DocsExample = (props) => {
 
   return (
     <div className="example">
-      <CNav variant="tabs">
+      <CNav variant="underline-border">
         <CNavItem>
           <CNavLink href="#" active>
             <CIcon icon={cilMediaPlay} className="me-2" />

src/scss/_examples.scss

@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
+    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1));
   }
 
   & + p {

src/views/notifications/toasts/Toasts.js

@@ -92,27 +92,25 @@ const Toasts = () => {
             <p className="text-body-secondary small">
               Toasts are slightly translucent to blend in with what&#39;s below them.
             </p>
-            <DocsExample href="components/toast#translucent">
-              <div className="bg-dark p-3">
-                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                  <CToastHeader closeButton>
-                    <svg
-                      className="rounded me-2"
-                      width="20"
-                      height="20"
-                      xmlns="http://www.w3.org/2000/svg"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                      role="img"
-                    >
-                      <rect width="100%" height="100%" fill="#007aff"></rect>
-                    </svg>
-                    <strong className="me-auto">CoreUI for React.js</strong>
-                    <small>7 min ago</small>
-                  </CToastHeader>
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                </CToast>
-              </div>
+            <DocsExample href="components/toast#translucent" tabContentClassName="bg-dark">
+              <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+                <CToastHeader closeButton>
+                  <svg
+                    className="rounded me-2"
+                    width="20"
+                    height="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="xMidYMid slice"
+                    focusable="false"
+                    role="img"
+                  >
+                    <rect width="100%" height="100%" fill="#007aff"></rect>
+                  </svg>
+                  <strong className="me-auto">CoreUI for React.js</strong>
+                  <small>7 min ago</small>
+                </CToastHeader>
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+              </CToast>
             </DocsExample>
           </CCardBody>
         </CCard>
@@ -128,7 +126,7 @@ const Toasts = () => {
               some spacing.
             </p>
             <DocsExample href="components/toast#stacking">
-              <CToaster>
+              <CToaster className="position-static">
                 <CToast title="CoreUI for React.js" autohide={false} visible={true}>
                   <CToastHeader closeButton>
                     <svg

src/views/widgets/WidgetsDropdown.js

@@ -224,7 +224,7 @@ const WidgetsDropdown = () => {
           color="warning"
           value={
             <>
-              2.49{' '}
+              2.49%{' '}
               <span className="fs-6 fw-normal">
                 (84.7% <CIcon icon={cilArrowTop} />)
               </span>