feat: update markdown tab style

dotnet · Mar 15, 2023 · 2a4071e · 2a4071e
1 parent dc95e95
commit 2a4071e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 79 deletions.
diff --git a/templates/modern/src/markdown.scss b/templates/modern/src/markdown.scss
@@ -45,79 +45,12 @@ div.embeddedvideo iframe {
 }
 
 /* For tabbed content */
-
 .tabGroup {
-  margin-top: 1rem;
-}
-
-.tabGroup ul[role="tablist"] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tabGroup ul[role="tablist"] > li {
-  list-style: none;
-  display: inline-block;
-}
-
-.tabGroup a[role="tab"] {
-  color: #6e6e6e;
-  box-sizing: border-box;
-  display: inline-block;
-  padding: 5px 7.5px;
-  text-decoration: none;
-  border-bottom: 2px solid #fff;
-}
-
-.tabGroup a[role="tab"]:hover,
-.tabGroup a[role="tab"]:focus,
-.tabGroup a[role="tab"][aria-selected="true"] {
-  border-bottom: 2px solid #0050c5;
-}
-
-.tabGroup a[role="tab"][aria-selected="true"] {
-  color: #222;
-}
-
-.tabGroup a[role="tab"]:hover,
-.tabGroup a[role="tab"]:focus {
-  color: #0050c5;
-}
-
-.tabGroup a[role="tab"]:focus {
-  outline: 1px solid #0050c5;
-  outline-offset: -1px;
-}
-
-@media (min-width: 769px) {
-  .tabGroup a[role="tab"] {
-    padding: 5px 15px;
+  >section {
+    margin: 0;
+    padding: 1rem;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
-}
-
-.tabGroup section[role="tabpanel"] {
-  border: 1px solid #e0e0e0;
-  padding: 15px;
-  margin: 0;
-  overflow: hidden;
-}
-
-.tabGroup section[role="tabpanel"] > .codeHeader,
-.tabGroup section[role="tabpanel"] > pre {
-  margin-left: -16px;
-  margin-right: -16px;
-}
-
-.tabGroup section[role="tabpanel"] > :first-child {
-  margin-top: 0;
-}
-
-.tabGroup section[role="tabpanel"] > pre:last-child {
-  display: block;
-  margin-bottom: -16px;
-}
-
-.mainContainer[dir="rtl"] main ul[role="tablist"] {
-  margin: 0;
-}
+}
diff --git a/templates/modern/src/markdown.ts b/templates/modern/src/markdown.ts
@@ -67,6 +67,9 @@ function renderAnchor() {
  * Render tabbed content.
  */
 function renderTabs() {
+
+  updateTabStyle()
+
   const contentAttrs = {
     id: 'data-bi-id',
     name: 'data-bi-name',
@@ -108,11 +111,13 @@ function renderTabs() {
       set: function(value) {
         if (value) {
           this.a.setAttribute('aria-selected', 'true')
+          this.a.classList.add('active')
           this.a.tabIndex = 0
           this.section.removeAttribute('hidden')
           this.section.removeAttribute('aria-hidden')
         } else {
           this.a.setAttribute('aria-selected', 'false')
+          this.a.classList.remove('active')
           this.a.tabIndex = -1
           this.section.setAttribute('hidden', 'hidden')
           this.section.setAttribute('aria-hidden', 'true')
@@ -146,7 +151,6 @@ function renderTabs() {
     }
     selectTabs(queryStringTabs)
     updateTabsQueryStringParam(state)
-    notifyContentUpdated()
     return state
   }
 
@@ -248,7 +252,6 @@ function renderTabs() {
       }
       updateTabsQueryStringParam(state)
     }
-    notifyContentUpdated()
     const top = info.anchor.getBoundingClientRect().top
     if (top !== originalTop && event instanceof MouseEvent) {
       window.scrollTo(0, window.pageYOffset + top - originalTop)
@@ -298,8 +301,10 @@ function renderTabs() {
     return false
   }
 
-  function notifyContentUpdated() {
-    // Dispatch this event when needed
-    // window.dispatchEvent(new CustomEvent('content-update'));
+  function updateTabStyle() {
+    document.querySelectorAll('div.tabGroup>ul').forEach(e => e.classList.add('nav', 'nav-tabs'))
+    document.querySelectorAll('div.tabGroup>ul>li').forEach(e => e.classList.add('nav-item'))
+    document.querySelectorAll('div.tabGroup>ul>li>a').forEach(e => e.classList.add('nav-link'))
+    document.querySelectorAll('div.tabGroup>section').forEach(e => e.classList.add('card'))
   }
 }