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

Fix tabs -- undo details that didn't properly on mobile.

Browse Source
This commit is contained in:
A McIlwraith
2025-08-03 18:03:22 -04:00
parent e0d62ccc4f
commit 05fbea8dfd
1 changed files with 14 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +1,25 @@
// DS2 core (c) 2024 Alexander McIlwraith // DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0 // Licensed under CC BY-SA 4.0
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-panel-background-color: #FFF !default;
$tab-panel-top-border: #7f7f7f !default;
$tab-panel-top-border-width: 1px !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-break: 450px !default; $tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@media (min-width: $tab-break) {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
}
> ul { > ul {
display: flex; display: flex;
margin: 0; margin: 0 0 1rem 0;
padding: 0; padding: 0;
li.separator { li.separator {
border-bottom: 1px solid $tab-border;
border-left: 1px solid $tab-border;
display: inline-block; display: inline-block;
margin: .45rem 0 0 0; margin: .45rem 0 0 0;
width: 100%; width: 100%;
@@ -36,11 +35,12 @@ $tab-break: 450px !default;
[role="tab"] { [role="tab"] {
background-color: $tab-selected; background-color: $tab-selected;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-top: 1px solid $tab-border; border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer; cursor:pointer;
margin: 0;
display: inline; display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2; z-index: 2;
@@ -50,7 +50,7 @@ $tab-break: 450px !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; /// color
} }
span { span {
@@ -61,39 +61,18 @@ $tab-break: 450px !default;
} }
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-selected; background-color: $tab-selected;
border: 1px solid $tab-border;
border-top: none; border-top: none;
border: 1px solid $tab-border;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;
@media (min-width: $tab-break) {
&[open] summary {
display: none;
}
}
@media (min-width: $tab-break) {
&:not(.open) { &:not(.open) {
display: none; display: none;
} }
}
@content; @content;
} }
@media (max-width: $tab-break) {
&:has(details) {
[role="tablist"] {
display: none;
}
[role="tabpanel"] {
border: none;
}
}
}
} }
} }