diff options
| -rw-r--r-- | build/postcss.js | 13 | ||||
| -rw-r--r-- | src/components/tabs.css | 23 |
2 files changed, 15 insertions, 21 deletions
diff --git a/build/postcss.js b/build/postcss.js index 0111630..9a2d81f 100644 --- a/build/postcss.js +++ b/build/postcss.js @@ -6,7 +6,9 @@ import { brotliCompress as brotli, gzip } from 'node:zlib' import postcss from 'postcss' // Plugins -import presetEnv from 'postcss-preset-env' + +import nesting from 'postcss-nesting' +import customSelectors from 'postcss-custom-selectors' import atImport from 'postcss-import' import importGlob from 'postcss-import-ext-glob' import mixins from 'postcss-mixins' @@ -27,13 +29,8 @@ const build = async () => { const postcssMain = postcss([ importGlob(), atImport(), - presetEnv({ - browsers: 'supports css-variables', - stage: 0, - features: { - 'custom-properties': false, - }, - }), + nesting(), + customSelectors(), mixins(), ]) diff --git a/src/components/tabs.css b/src/components/tabs.css index bf17767..e524518 100644 --- a/src/components/tabs.css +++ b/src/components/tabs.css @@ -2,22 +2,21 @@ [role="tablist"] { display: flex; gap: .5ch; - overfiow-x: auto; scrollbar-width: thin; } -[role="tab"] { +[role="tab"][role="tab"] { all: initial; padding: 0 calc(var(--rhythm) / 4); margin: 0; min-height: var(--rhythm); - border: 1px solid var(--faded-fg); + border: solid var(--accent); + border-width: 1px 1px 0 1px; + border-block-end-color: transparent; background: var(--bg-3); - transform: translateY(1px); - border-start-start-radius: .4em; border-start-end-radius: .4em; @@ -25,15 +24,12 @@ outline-bottom: none; } - &:active { - transform: translateY(.2em); - clip-path: inset(0 0 calc(.2em - 1px) 0); - border-block-end: 1px solid var(--bg); - } - - &[aria-selected="true"] { + &:active, &[aria-selected="true"] { + transform: none; + bottom: -1px; + position: relative; background: var(--bg-2); - border-block-end: 1px solid var(--bg); + border-block-end: 1px solid var(--bg-2); } } @@ -42,4 +38,5 @@ margin-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; + z-index: 1; } |