From 531366f4ff2f142d23c62e434e49060d6983dae7 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Thu, 8 Dec 2022 02:20:42 -0700 Subject: [PATCH 1/3] activate Asciidoctor Tabs in UI preview --- preview-src/ui-model.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 4749e424..3a3ddb84 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -2,7 +2,7 @@ antoraVersion: '3.1.2' asciidoc: extensions: # TIP uncomment the next line to switch to Asciidoctor Tabs - #- '@asciidoctor/tabs' + - '@asciidoctor/tabs' - '@springio/asciidoctor-extensions' site: url: http://localhost:5252 From 7a2278575e774bd37099212f9d95855206cb9f96 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Wed, 7 Dec 2022 23:53:04 -0700 Subject: [PATCH 2/3] upgrade Asciidoctor Tabs to 1.0.0-alpha.10 and adjust CSS accordingly --- package-lock.json | 8 ++++---- package.json | 2 +- src/css/vendor/asciidoctor-tabs.css | 29 ++++++++++++++++++----------- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76f2879d..0b50f52e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "license": "MPL-2.0", "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-alpha.8", + "@asciidoctor/tabs": "1.0.0-alpha.10", "@fontsource/roboto": "~4.5", "@fontsource/roboto-mono": "~4.5", "@springio/asciidoctor-extensions": "1.0.0-alpha.4", @@ -83,9 +83,9 @@ } }, "node_modules/@asciidoctor/tabs": { - "version": "1.0.0-alpha.8", - "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-alpha.8.tgz", - "integrity": "sha512-pRlucoViBtkxvQfN/IzK1Remo00fAsobx5fyA4I6VugH6qVK0N86FizIKTXlf8bnoFL/t1K+24NN2ymMDTI1/w==", + "version": "1.0.0-alpha.10", + "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-alpha.10.tgz", + "integrity": "sha512-BU8Axut4BVxXOq9s+/yNgZZls5HQ8Q04WbrWie8vSzSmV/+7KabEdAalPAugi8AcoGKG5tHJ8Qye2dTEkmvEZQ==", "dev": true, "engines": { "node": ">=16.0.0" diff --git a/package.json b/package.json index 8f46790c..e8447880 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ ], "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-alpha.8", + "@asciidoctor/tabs": "1.0.0-alpha.10", "@fontsource/roboto": "~4.5", "@fontsource/roboto-mono": "~4.5", "@springio/asciidoctor-extensions": "1.0.0-alpha.4", diff --git a/src/css/vendor/asciidoctor-tabs.css b/src/css/vendor/asciidoctor-tabs.css index 1fb8f908..c7f289a0 100644 --- a/src/css/vendor/asciidoctor-tabs.css +++ b/src/css/vendor/asciidoctor-tabs.css @@ -13,34 +13,41 @@ padding-bottom: 0.25rem; } -.doc .tabset .tabs { +.doc .tabs > ul { font-size: calc(12 / var(--pixel-to-rem)); margin: 0 0 0.25rem; } -.doc .tabset .tabs > ul li.tab { - background-color: var(--tabs-background-color); +.doc .tabs > ul li { border: 1px solid var(--tabs-border-color); - color: var(--tabs-font-color); - height: auto; line-height: inherit; - margin: 0; padding: 0.3rem 0.6rem; } -.doc .tabset.is-loading .tabs > ul li.tab:first-child, -.doc .tabset .tabs > ul li.tab.is-active { +.doc .tabs.ulist > ul li + li { + margin-left: 0; +} + +.doc .tabset.is-loading .tabs > ul li:not(:first-child), +.doc .tabset:not(.is-loading) .tabs > ul li:not(.is-active) { + background-color: var(--tabs-background-color); + color: var(--tabs-font-color); +} + +.doc .tabset.is-loading .tabs > ul li:first-child, +.doc .tabset:not(.is-loading) .tabs > ul li.is-active { background-color: var(--tabs-selected-background-color); border-color: var(--tabs-selected-background-color); color: var(--tabs-selected-font-color); } -.doc .tabset .tabs li[id]::after { +.doc .tabset.is-loading .tabs > ul li:first-child::after, +.doc .tabset:not(.is-loading) .tabs > ul li.is-active::after { content: none; } -.doc .tabset > .content, -.doc .tabset .tab-pane { +.doc .tab-pane { + background-color: initial; border: 0; padding: 0; } From 4a3acceb77dba994e9c9f56afb195777ceb8200e Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Thu, 8 Dec 2022 04:08:47 -0700 Subject: [PATCH 3/3] upgrade Asciidoctor Tabs to 1.0.0-alpha.11 and adjust CSS accordingly --- package-lock.json | 8 +++---- package.json | 2 +- src/css/vendor/asciidoctor-tabs.css | 36 ++++++++++++++--------------- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0b50f52e..273b7bfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "license": "MPL-2.0", "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-alpha.10", + "@asciidoctor/tabs": "1.0.0-alpha.11", "@fontsource/roboto": "~4.5", "@fontsource/roboto-mono": "~4.5", "@springio/asciidoctor-extensions": "1.0.0-alpha.4", @@ -83,9 +83,9 @@ } }, "node_modules/@asciidoctor/tabs": { - "version": "1.0.0-alpha.10", - "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-alpha.10.tgz", - "integrity": "sha512-BU8Axut4BVxXOq9s+/yNgZZls5HQ8Q04WbrWie8vSzSmV/+7KabEdAalPAugi8AcoGKG5tHJ8Qye2dTEkmvEZQ==", + "version": "1.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-alpha.11.tgz", + "integrity": "sha512-b+NKja1ZlqnD8p0YXCrDwJ3R8JFqrqkNvem7LBJ0DhSmXs71SohiR2WEH0z8nslWXfZgePC5CoZEUR2BqcMiXQ==", "dev": true, "engines": { "node": ">=16.0.0" diff --git a/package.json b/package.json index e8447880..304ff91e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ ], "devDependencies": { "@asciidoctor/core": "~2.2", - "@asciidoctor/tabs": "1.0.0-alpha.10", + "@asciidoctor/tabs": "1.0.0-alpha.11", "@fontsource/roboto": "~4.5", "@fontsource/roboto-mono": "~4.5", "@springio/asciidoctor-extensions": "1.0.0-alpha.4", diff --git a/src/css/vendor/asciidoctor-tabs.css b/src/css/vendor/asciidoctor-tabs.css index c7f289a0..8044104a 100644 --- a/src/css/vendor/asciidoctor-tabs.css +++ b/src/css/vendor/asciidoctor-tabs.css @@ -1,57 +1,55 @@ @import "@asciidoctor/tabs"; -.doc .tabset { +.doc .tabs { margin: 1rem 0 0; } -.doc .tabset > .title { - color: var(--asciidoctor-caption-font-color); - font-size: calc(14 / var(--pixel-to-rem)); - font-style: italic; - font-weight: var(--asciidoctor-caption-font-weight); - letter-spacing: 0.01em; +.doc .tabs > .title { padding-bottom: 0.25rem; } -.doc .tabs > ul { +.doc .tablist.ulist { + margin-bottom: 0.25rem; +} + +.doc .tablist > ul { font-size: calc(12 / var(--pixel-to-rem)); - margin: 0 0 0.25rem; } -.doc .tabs > ul li { +.doc .tablist > ul li { border: 1px solid var(--tabs-border-color); line-height: inherit; padding: 0.3rem 0.6rem; } -.doc .tabs.ulist > ul li + li { +.doc .tablist.ulist > ul li + li { margin-left: 0; } -.doc .tabset.is-loading .tabs > ul li:not(:first-child), -.doc .tabset:not(.is-loading) .tabs > ul li:not(.is-active) { +.doc .tabs.is-loading .tablist > ul li:not(:first-child), +.doc .tabs:not(.is-loading) .tablist > ul li:not(.is-selected) { background-color: var(--tabs-background-color); color: var(--tabs-font-color); } -.doc .tabset.is-loading .tabs > ul li:first-child, -.doc .tabset:not(.is-loading) .tabs > ul li.is-active { +.doc .tabs.is-loading .tablist > ul li:first-child, +.doc .tabs:not(.is-loading) .tablist > ul li.is-selected { background-color: var(--tabs-selected-background-color); border-color: var(--tabs-selected-background-color); color: var(--tabs-selected-font-color); } -.doc .tabset.is-loading .tabs > ul li:first-child::after, -.doc .tabset:not(.is-loading) .tabs > ul li.is-active::after { +.doc .tabs.is-loading .tablist > ul li:first-child::after, +.doc .tabs:not(.is-loading) .tablist > ul li.is-selected::after { content: none; } -.doc .tab-pane { +.doc .tabpanel { background-color: initial; border: 0; padding: 0; } -html.theme-set .doc .tabset .tabs > ul li { +html.theme-set .doc .tabs .tablist > ul li { transition: background-color 200ms ease-in-out, color 100ms linear; }