gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Fix tabs

Browse Source
This commit is contained in:
A McIlwraith
2025-08-03 19:21:37 -04:00
parent f78b0a4c63
commit b6cc236ced
4 changed files with 81 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

75
public/patterns/core/tabs/index.html
View File

@@ -42,7 +42,7 @@
div(tab="[tab title]") div(tab="[tab title]")
div(tab="[tab title]") div(tab="[tab title]")
</pre> </pre>
<pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border-top:none;border:1px solid #7f7f7f;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre> <pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group [role=tablist],tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group [role=tablist] li.separator,tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group [role=tablist] li[role=tab],tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tablist] li[role=tab]:last-of-type,tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab]:not(.selected),tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab] span,tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@use "scss/core/tabs/_tabs"; <pre class="language-sass">@use "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
@@ -64,56 +64,59 @@ $tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
> ul {
[role="tablist"] {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
li.separator { li {
display: inline-block; &.separator {
margin: .45rem 0 0 0; border-bottom: 1px solid $tab-border;
width: 100%; display: inline-block;
margin: .45rem 0 0 0;
width: 100%;
}
&[role="tab"] {
background-color: $tab-selected;
border-left: 1px solid $tab-border;
border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2;
&:last-of-type {
border-right: 1px solid $tab-border;
}
&:not(.selected) {
background-color: $tab-notselected;
border-bottom: 1px solid $tab-border;
/// color
}
span {
display: block;
margin: 0 0 .5rem 0;
}
}
} }
} }
.tab-hidden { .tab-hidden {
display: none; display: none;
} }
[role="tab"] {
background-color: $tab-selected;
border-left: 1px solid $tab-border;
border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2;
&:last-of-type {
border-right: 1px solid $tab-border;
}
&:not(.selected) {
background-color: $tab-notselected;
/// color
}
span {
display: block;
margin: 0 0 .5rem 0;
}
}
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-selected; background-color: $tab-selected;
border-top: none;
border: 1px solid $tab-border; border: 1px solid $tab-border;
border-top: none;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;

73
src/pg/patterns/core/tabs/_tabs.scss
View File

@@ -13,56 +13,59 @@ $tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
> ul {
[role="tablist"] {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
li.separator { li {
display: inline-block; &.separator {
margin: .45rem 0 0 0; border-bottom: 1px solid $tab-border;
width: 100%; display: inline-block;
margin: .45rem 0 0 0;
width: 100%;
}
&[role="tab"] {
background-color: $tab-selected;
border-left: 1px solid $tab-border;
border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2;
&:last-of-type {
border-right: 1px solid $tab-border;
}
&:not(.selected) {
background-color: $tab-notselected;
border-bottom: 1px solid $tab-border;
/// color
}
span {
display: block;
margin: 0 0 .5rem 0;
}
}
} }
} }
.tab-hidden { .tab-hidden {
display: none; display: none;
} }
[role="tab"] {
background-color: $tab-selected;
border-left: 1px solid $tab-border;
border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2;
&:last-of-type {
border-right: 1px solid $tab-border;
}
&:not(.selected) {
background-color: $tab-notselected;
/// color
}
span {
display: block;
margin: 0 0 .5rem 0;
}
}
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-selected; background-color: $tab-selected;
border-top: none;
border: 1px solid $tab-border; border: 1px solid $tab-border;
border-top: none;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;

2
src/pg/patterns/core/tabs/tabs.css
View File

@@ -1 +1 @@
.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border-top:none;border:1px solid #7f7f7f;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none} .tab-group,tabset{margin:2rem 0 1rem 0}.tab-group [role=tablist],tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group [role=tablist] li.separator,tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group [role=tablist] li[role=tab],tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tablist] li[role=tab]:last-of-type,tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab]:not(.selected),tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab] span,tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}