refactor: update examples

Author: mrholek

src/components/DocsExample.js

@@ -5,7 +5,7 @@ import CIcon from '@coreui/icons-react'
 import { cilCode, cilMediaPlay } from '@coreui/icons'
 
 const DocsExample = (props) => {
-  const { children, href } = props
+  const { children, href, tabContentClassName } = props
 
   const _href = `https://coreui.io/react/docs/${href}`
 
@@ -25,7 +25,7 @@ const DocsExample = (props) => {
           </CNavLink>
         </CNavItem>
       </CNav>
-      <CTabContent className="rounded-bottom">
+      <CTabContent className={`rounded-bottom ${tabContentClassName ? tabContentClassName : ''}`}>
         <CTabPane className="p-3 preview" visible>
           {children}
         </CTabPane>
@@ -37,6 +37,7 @@ const DocsExample = (props) => {
 DocsExample.propTypes = {
   children: PropTypes.node,
   href: PropTypes.string,
+  tabContentClassName: PropTypes.string,
 }
 
 export default React.memo(DocsExample)

src/scss/_example.scss

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

src/views/forms/range/Range.js

@@ -15,7 +15,7 @@ const Range = () => {
               Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
               <code>&lt;CFormRange&gt;</code>.
             </p>
-            <DocsExample href="forms/range">
+            <DocsExample href="forms/range" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
               <CFormRange id="customRange1" />
             </DocsExample>
@@ -32,7 +32,7 @@ const Range = () => {
               Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
               appearance and remove pointer events.
             </p>
-            <DocsExample href="forms/range#disabled">
+            <DocsExample href="forms/range#disabled" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
               <CFormRange id="disabledRange" disabled />
             </DocsExample>
@@ -50,7 +50,7 @@ const Range = () => {
               <code>0</code> and <code>100</code>, respectively. You may specify new values for
               those using the <code>min</code> and <code>max</code> attributes.
             </p>
-            <DocsExample href="forms/range#min-and-max">
+            <DocsExample href="forms/range#min-and-max" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
               <CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
             </DocsExample>
@@ -68,7 +68,7 @@ const Range = () => {
               specify a <code>step</code> value. In the example below, we double the number of steps
               by using <code>step=&#34;0.5&#34;</code>.
             </p>
-            <DocsExample href="forms/range#steps">
+            <DocsExample href="forms/range#steps" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
               <CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
             </DocsExample>