From 9cfa36b5c09d18e9a81d391c4412bd46e9c1c4f6 Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Wed, 22 Apr 2020 21:57:01 +0200 Subject: [PATCH 1/6] Adding tabs --- style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/style.css b/style.css index be77ea1..3f77f97 100644 --- a/style.css +++ b/style.css @@ -68,6 +68,11 @@ --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame); + + --border-tab: inset -1px 0 var(--window-frame), + inset 1px 1px var(--button-highlight), + inset -2px 0 var(--button-shadow), + inset 2px 2px var(--button-face) } @font-face { @@ -732,3 +737,45 @@ summary:focus { width: 16px; background-image: svg-load("./icon/button-right.svg"); } + +menu.tabs { + position: relative; + margin: 0 0 -2px 0; + text-indent: 0; + list-style-type: none; + display: flex; + padding-left: 3px; +} + +menu.tabs li { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + box-shadow: var(--border-tab); + z-index: 1; +} +menu.tabs > li.active { + padding-bottom: 2px; + margin-top: -2px; + background-color: var(--surface); + position: relative; + z-index: 8; + margin-left: -3px; +} + +menu.tabs > li > a { + display: block; + color: #222; + margin: 6px; + text-decoration: none; +} +menu.tabs > li.active > a:focus { + outline: none; +} +menu.tabs > li > a:focus { + outline: 1px dotted #222; +} + +menu.tabs.justified > li { + flex-grow: 1; + text-align: center; +} From ce7c9b492e08cef08f7b3d196c804a17babaec0a Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Fri, 24 Apr 2020 14:18:50 +0200 Subject: [PATCH 2/6] Using [role] and [aria] attributes --- style.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index 3f77f97..e69072e 100644 --- a/style.css +++ b/style.css @@ -738,7 +738,12 @@ summary:focus { background-image: svg-load("./icon/button-right.svg"); } -menu.tabs { +.window[role=tabpanel] { + position: relative; + z-index: 2; +} + +menu[role=tablist] { position: relative; margin: 0 0 -2px 0; text-indent: 0; @@ -747,13 +752,14 @@ menu.tabs { padding-left: 3px; } -menu.tabs li { +menu[role=tablist] > li { border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: var(--border-tab); z-index: 1; } -menu.tabs > li.active { + +menu[role=tablist] > li[aria-selected] { padding-bottom: 2px; margin-top: -2px; background-color: var(--surface); @@ -762,20 +768,20 @@ menu.tabs > li.active { margin-left: -3px; } -menu.tabs > li > a { +menu[role=tablist] > li > a { display: block; color: #222; margin: 6px; text-decoration: none; } -menu.tabs > li.active > a:focus { +menu[role=tablist] > li[aria-selected] > a:focus { outline: none; } -menu.tabs > li > a:focus { +menu[role=tablist] > li > a:focus { outline: 1px dotted #222; } -menu.tabs.justified > li { +menu[role=tablist].justified > li { flex-grow: 1; text-align: center; } From 040fed78540e9fae9f91b67ee70b95701f77940c Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Fri, 23 Oct 2020 23:46:44 +0200 Subject: [PATCH 3/6] Fixed tabs borders colors --- style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index e69072e..ed5cbe5 100644 --- a/style.css +++ b/style.css @@ -69,10 +69,11 @@ inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame); + /* Tabs */ --border-tab: inset -1px 0 var(--window-frame), - inset 1px 1px var(--button-highlight), + inset 1px 1px var(--button-face), inset -2px 0 var(--button-shadow), - inset 2px 2px var(--button-face) + inset 2px 2px var(--button-highlight) } @font-face { From 875f349b9993d24d3ce6d94141d4eb65a2b55aeb Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Fri, 23 Oct 2020 23:47:21 +0200 Subject: [PATCH 4/6] Rename .justified tablist to .multirows tablist --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index ed5cbe5..675f8ff 100644 --- a/style.css +++ b/style.css @@ -782,7 +782,7 @@ menu[role=tablist] > li > a:focus { outline: 1px dotted #222; } -menu[role=tablist].justified > li { +menu[role=tablist].multirows > li { flex-grow: 1; text-align: center; } From cba0cfa4258928370e2b7948c3d81c166d3f7be6 Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Sat, 24 Oct 2020 00:30:56 +0200 Subject: [PATCH 5/6] Tabs won't activate if [aria-selected=false] --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 675f8ff..13ba4f9 100644 --- a/style.css +++ b/style.css @@ -760,7 +760,7 @@ menu[role=tablist] > li { z-index: 1; } -menu[role=tablist] > li[aria-selected] { +menu[role=tablist] > li[aria-selected=true] { padding-bottom: 2px; margin-top: -2px; background-color: var(--surface); @@ -775,7 +775,7 @@ menu[role=tablist] > li > a { margin: 6px; text-decoration: none; } -menu[role=tablist] > li[aria-selected] > a:focus { +menu[role=tablist] > li[aria-selected=true] > a:focus { outline: none; } menu[role=tablist] > li > a:focus { From c360e656c64e98c4b1b496316482f62224a12be2 Mon Sep 17 00:00:00 2001 From: CaptainFalcon92 Date: Sat, 24 Oct 2020 00:32:16 +0200 Subject: [PATCH 6/6] Prepared some placeholder documentation for tabs --- docs/index.html.ejs | 81 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 127359c..415d0b0 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -534,7 +534,7 @@ assistive technologies know the intent of this button. You may also use "Minimize", "Maximize", "Restore" and "Help" like so:

- + <%- example(`
A Title Bar
@@ -564,7 +564,7 @@
- + `) %>

You can make a title bar "inactive" by adding inactive class, @@ -720,6 +720,83 @@ +

+

Tabs

+
+
+ ... + +
+ — Microsoft Windows User Experience p. # +
+
+ +

+ To render a tab list, use a menu element with the + [role=tablist] attribute. The children of this menu (li + elements), should get a [role=tab] attribute. +

+ +

+ Tabs should be managed by adding custom javascript code. + All you need is to add the [aria-selected=true] attribute to the active tab. +

+ + <%- example(` +
+

Hello, world!

+ + +
  • Desktop
    • +
  • My computer
    • +
  • Control panel
    • +
  • Devices manager
    • +
  • Hardware profiles
    • +
  • Performance
    • +     +
    +
    +

    the tab content

    +
    +
    +
    + `) %> + +

    + To create multirows tabs, add a multirows + class to the menu tag. +

    + + <%- example(` +
    +

    Hello, world!

    + + +
  • Desktop
    • +
  • My computer
    • +
  • Control panel
    • +
  • Devices manager
    • +
  • Hardware profiles
    • +
  • Performance
    • +     + +
  • Users
    • +
  • Network
    • +
  • Programs
    • +
  • Services
    • +
  • Resources
    • +
  • Advanced
    • +     +
    +
    +

    the tab content

    +
    +
    +
    + `) %> +
    +
    +

    Issues, Contributing, etc.