diff --git a/assets/css/_page/_single/_shortcodes/_tabs.scss b/assets/css/_page/_single/_shortcodes/_tabs.scss index 5e737090..d68851cd 100644 --- a/assets/css/_page/_single/_shortcodes/_tabs.scss +++ b/assets/css/_page/_single/_shortcodes/_tabs.scss @@ -51,10 +51,6 @@ tab-container { } } - &::part(tablist-wrapper) { - display: contents; - } - &::part(tablist-tab-wrapper) { flex: 1 0 auto; } @@ -133,16 +129,20 @@ tab-container { anchor-name: #{$rootPrefix}tab-underline-active; } - // Sliding box-shadow indicator via anchor positioning - &::part(tablist-tab-wrapper)::before { - content: ''; - position: absolute; - position-anchor: #{$rootPrefix}tab-underline-active; - inset: anchor(inside); - pointer-events: none; + &::part(tablist-wrapper) { + position: relative; + + // Sliding box-shadow indicator via anchor positioning + &::before { + content: ''; + position: absolute; + position-anchor: #{$rootPrefix}tab-underline-active; + inset: anchor(inside); + pointer-events: none; + } } - &:has(> .tab-button[aria-selected='false']:hover)::part(tablist-tab-wrapper)::before { + &:has(> .tab-button[aria-selected='false']:hover)::part(tablist-wrapper)::before { opacity: 0.7; } @@ -155,11 +155,11 @@ tab-container { } &::part(tablist-wrapper) { - overflow-x: scroll; + overflow-x: auto; overflow-y: hidden; } - &::part(tablist-tab-wrapper)::before { + &::part(tablist-wrapper)::before { transition: all 0.3s ease-in-out, top, bottom 0s; } } @@ -170,7 +170,7 @@ tab-container { @include tab-button-size(1rem, 0); } - &::part(tablist-tab-wrapper)::before { + &::part(tablist-wrapper)::before { transition: all 0.3s ease-in-out, left, right 0s; } } @@ -179,11 +179,11 @@ tab-container { &[placement='top'] { &::part(tablist-tab-wrapper) { border-bottom: 2px solid fixit-var(global-border-color); + } - &::before { - box-shadow: inset 0 -2px 0 fixit-var(primary); - translate: 0 2px; - } + &::part(tablist-wrapper)::before { + box-shadow: inset 0 -2px 0 fixit-var(primary); + translate: 0 2px; } } @@ -191,11 +191,11 @@ tab-container { &[placement='bottom'] { &::part(tablist-tab-wrapper) { border-top: 2px solid fixit-var(global-border-color); + } - &::before { - box-shadow: inset 0 2px 0 fixit-var(primary); - translate: 0 -2px; - } + &::part(tablist-wrapper)::before { + box-shadow: inset 0 2px 0 fixit-var(primary); + translate: 0 -2px; } } @@ -203,11 +203,11 @@ tab-container { &[placement='left'] { &::part(tablist-tab-wrapper) { border-right: 2px solid fixit-var(global-border-color); + } - &::before { - box-shadow: inset -2px 0 0 fixit-var(primary); - translate: 2px 0; - } + &::part(tablist-wrapper)::before { + box-shadow: inset -2px 0 0 fixit-var(primary); + translate: 2px 0; } > .tab-button { @@ -219,11 +219,11 @@ tab-container { &[placement='right'] { &::part(tablist-tab-wrapper) { border-left: 2px solid fixit-var(global-border-color); + } - &::before { - box-shadow: inset 2px 0 0 fixit-var(primary); - translate: -2px 0; - } + &::part(tablist-wrapper)::before { + box-shadow: inset 2px 0 0 fixit-var(primary); + translate: -2px 0; } > .tab-button { @@ -361,7 +361,7 @@ tab-container { &[placement='top'], &[placement='bottom'] { &::part(tablist-wrapper) { - overflow-x: scroll; + overflow-x: auto; overflow-y: hidden; } @@ -471,7 +471,7 @@ tab-container { // ======================================== &[type='segment'] { &::part(tablist-wrapper) { - overflow-x: scroll; + overflow-x: auto; overflow-y: hidden; } diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html index b2497e3f..7733942d 100644 --- a/layouts/_partials/init/index.html +++ b/layouts/_partials/init/index.html @@ -1,4 +1,4 @@ -{{- hugo.Store.Set "version" "v0.4.4" -}} +{{- hugo.Store.Set "version" "v0.4.5-20260319071939-1db7fbde" -}} {{- .Store.Set "this" dict -}} {{- partial "init/detection-env.html" . -}}