Removed legacy Tabbed implementation

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.9bd947bf.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.450eaa28.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -21,50 +21,17 @@
 ////
 
 // ----------------------------------------------------------------------------
-// Rules: legacy implementation (deprecated, removed in v8)
+// Rules
 // ----------------------------------------------------------------------------
 
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Tabbed content
-  .tabbed-content {
-    display: none;
-    order: 99;
-    width: 100%;
-    box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest);
-
-    // [print]: Show all tabs (even hidden ones) when printing
-    @media print {
-      display: block;
-      order: initial;
-    }
-
-    // Code block is the first child of a tab - remove margin and mirror
-    // previous (now deprecated) SuperFences code block grouping behavior
-    > pre:first-child,
-    > .highlight:first-child pre,
-    > .highlighttable:first-child {
-      margin: 0;
-
-      // Omit rounded borders
-      > code {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-
-    // Adjust spacing for nested tab
-    > .tabbed-set {
-      margin: 0;
-    }
-  }
-
   // Tabbed container
   .tabbed-set {
     position: relative;
     display: flex;
-    flex-wrap: wrap;
+    flex-flow: column wrap;
     margin: 1em 0;
     border-radius: px2rem(2px);
 
@@ -78,86 +45,32 @@
       height: 0;
       opacity: 0;
 
-      // Tab label for checked radio button
+      // Tab label states
-      &:checked + label {
+      @for $i from 20 through 1 {
-        color: var(--md-accent-fg-color);
+        &:nth-child(#{$i}) {
-        border-color: var(--md-accent-fg-color);
 
-        // Show tabbed block content
+          // Tab is active
-        + .tabbed-content {
+          &:checked {
-          display: block;
-        }
-      }
-
-      // Tab label on focus
-      &:focus + label {
-        outline-style: auto;
-        outline-color: var(--md-accent-fg-color);
-      }
-
-      // Hide outline for pointer devices
-      &:not(.focus-visible) + label {
-        outline: none;
-        -webkit-tap-highlight-color: transparent;
-      }
-    }
 
             // Tab label
-    > label {
+            ~ .tabbed-labels > :nth-child(#{$i}) {
-      z-index: 1;
+              @extend %tabbed-label;
-      width: auto;
-      padding: px2em(12px, 12.8px) 1.25em px2em(10px, 12.8px);
-      color: var(--md-default-fg-color--light);
-      font-weight: 700;
-      font-size: px2rem(12.8px);
-      border-bottom: px2rem(2px) solid transparent;
-      cursor: pointer;
-      transition: color 250ms;
-
-      // Hack: omit flickering of content tabs label on initial page load when
-      // using linked content tabs.
-      .no-js & {
-        transition: none;
             }
 
-      // Tab label on hover
+            // Tab content
-      &:hover {
+            ~ .tabbed-content > :nth-child(#{$i}) {
-        color: var(--md-accent-fg-color);
+              @extend %tabbed-content;
+            }
+          }
+
+          // Tab label on keyboard focus
+          &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
+            @extend %tabbed-label-focus-visible;
+          }
         }
       }
     }
-}
-
-// ----------------------------------------------------------------------------
-// Placeholders: improve colocation for better compression
-// ----------------------------------------------------------------------------
-
-// Tab label placeholder
-%tabbed-label {
-
-  // [screen]: Show active state
-  @media screen {
-    color: var(--md-accent-fg-color);
-    border-color: var(--md-accent-fg-color);
   }
-}
-
-// Tab label on keyboard focus placeholder
-%tabbed-label-focus-visible {
-  background-color: var(--md-accent-fg-color--transparent);
-}
-
-// Tab content placeholder
-%tabbed-content {
-  display: block;
-}
-
-// ----------------------------------------------------------------------------
-// Rules
-// ----------------------------------------------------------------------------
-
-// Scoped in typesetted content to match specificity of regular content
-.md-typeset { // stylelint-disable-line
 
   // Tabbed labels
   .tabbed-labels {
@@ -220,7 +133,7 @@
   @include break-to-device(mobile) {
 
     // Top-level tabbed labels
-    > .tabbed-alternate .tabbed-labels {
+    > .tabbed-set .tabbed-labels {
       max-width: 100vw;
       margin: 0 px2rem(-16px);
       padding-left: px2rem(16px);
@@ -249,21 +162,33 @@
     }
   }
 
-  // Tabbed container
-  .tabbed-alternate {
-    flex-direction: column;
-
   // Tabbed content
   .tabbed-content {
-      display: initial;
-      order: initial;
     width: 100%;
-      box-shadow: initial;
 
     // [print]: Move one layer up for ordering
     @media print {
       display: contents;
     }
+
+    // Code block is the first child of a tab - remove margin and mirror
+    // previous (now deprecated) SuperFences code block grouping behavior
+    > pre:first-child,
+    > .highlight:first-child pre,
+    > .highlighttable:first-child {
+      margin: 0;
+
+      // Omit rounded borders
+      > code {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+
+    // Adjust spacing for nested tab
+    > .tabbed-set {
+      margin: 0;
+    }
   }
 
   // Tabbed block
@@ -301,30 +226,28 @@
       margin: 0;
     }
   }
+}
 
-    // Tab label states
+// ----------------------------------------------------------------------------
-    @for $i from 20 through 1 {
+// Placeholders: improve colocation for better compression
-      input:nth-child(#{$i}) {
+// ----------------------------------------------------------------------------
 
-        // Tab is active
+// Tab label placeholder
-        &:checked {
+%tabbed-label {
 
-          // Tab label
+  // [screen]: Show active state
-          ~ .tabbed-labels > :nth-child(#{$i}) {
+  @media screen {
-            @extend %tabbed-label;
+    color: var(--md-accent-fg-color);
-          }
+    border-color: var(--md-accent-fg-color);
-
-          // Tab content
-          ~ .tabbed-content > :nth-child(#{$i}) {
-            @extend %tabbed-content;
-          }
-        }
-
-        // Tab label on keyboard focus
-        &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
-          @extend %tabbed-label-focus-visible;
-        }
-      }
-    }
   }
 }
+
+// Tab label on keyboard focus placeholder
+%tabbed-label-focus-visible {
+  background-color: var(--md-accent-fg-color--transparent);
+}
+
+// Tab content placeholder
+%tabbed-content {
+  display: block;
+}