feat(version): versions

1 files changed, 133 insertions, 0 deletions

diff --git a/src/templates/assets/stylesheets/main/components/_tabs.scss b/src/templates/assets/stylesheets/main/components/_tabs.scss
new file mode 100644
index 00000000..0da3384b
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/components/_tabs.scss
@@ -0,0 +1,133 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Navigation tabs
+.md-tabs {
+  // Must be higher than the z-index of the back-to-top button, or the button
+  // will overlay the navigation tabs bar when scrolling up fast.
+  z-index: 3;
+  display: block;
+  width: 100%;
+  overflow: auto;
+  line-height: 1.3;
+  color: var(--md-primary-bg-color);
+  background-color: var(--md-primary-fg-color);
+
+  // [print]: Hide tabs
+  @media print {
+    display: none;
+  }
+
+  // [tablet -]: Hide tabs
+  @include break-to-device(tablet) {
+    display: none;
+  }
+
+  // Navigation tabs are hidden
+  &[hidden] {
+    pointer-events: none;
+  }
+
+  // Navigation tabs list
+  &__list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    margin-inline-start: px2rem(4px);
+    overflow: auto;
+    white-space: nowrap;
+    list-style: none;
+    contain: content;
+    // Hack: don't show scrollbar when navigation tabs overflow, which should
+    // only happen in rare occasions, as adding too many top level sections is
+    // discouraged, since hiding content on horitontal axis doesn't lead to a
+    // good user experience. It's just harder to discover.
+    scrollbar-width: none;
+
+    // Hack: see above
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  // Navigation tabs item
+  &__item {
+    height: px2rem(48px);
+    padding-inline: px2rem(12px);
+
+    // Navigation tabs link in active navigation
+    &--active .md-tabs__link {
+      color: inherit;
+      opacity: 1;
+    }
+  }
+
+  // Navigation tabs link - could be defined as block elements and aligned via
+  // line height, but this would imply more repaints when scrolling
+  &__link {
+    display: flex;
+    margin-top: px2rem(16px);
+    font-size: px2rem(14px);
+    outline-color: var(--md-accent-fg-color);
+    outline-offset: px2rem(4px);
+    // Hack: save a repaint when tabs are appearing on scrolling up
+    backface-visibility: hidden;
+    opacity: 0.7;
+    transition:
+      transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
+      opacity   250ms;
+
+    // Navigation tabs link on focus/hover
+    &:is(:focus, :hover) {
+      color: inherit;
+      opacity: 1;
+    }
+
+    // Navigation tabs link icon
+    svg {
+      height: 1.3em;
+      margin-inline-end: px2rem(8px);
+      fill: currentcolor;
+    }
+
+    // Delay transitions by a small amount
+    @for $i from 2 through 16 {
+      .md-tabs__item:nth-child(#{$i}) & {
+        transition-delay: 20ms * ($i - 1);
+      }
+    }
+
+    // Hide tabs upon scrolling - disable transition to minimizes repaints
+    // while scrolling down, while scrolling up seems to be okay
+    .md-tabs[hidden] & {
+      opacity: 0;
+      transition:
+        transform 0ms 100ms,
+        opacity 100ms;
+      transform: translateY(50%);
+    }
+  }
+}