diff options
Diffstat (limited to 'src/templates/assets/stylesheets/main/components/_tabs.scss')
| -rw-r--r-- | src/templates/assets/stylesheets/main/components/_tabs.scss | 133 |
1 files changed, 0 insertions, 133 deletions
diff --git a/src/templates/assets/stylesheets/main/components/_tabs.scss b/src/templates/assets/stylesheets/main/components/_tabs.scss deleted file mode 100644 index 0da3384b..00000000 --- a/src/templates/assets/stylesheets/main/components/_tabs.scss +++ /dev/null @@ -1,133 +0,0 @@ -//// -/// 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%); - } - } -} |
