diff --git a/src/pg/patterns/core/tabs/_tabs.scss b/src/pg/patterns/core/tabs/_tabs.scss index 46398d9..7066311 100644 --- a/src/pg/patterns/core/tabs/_tabs.scss +++ b/src/pg/patterns/core/tabs/_tabs.scss @@ -1,26 +1,25 @@ // DS2 core (c) 2024 Alexander McIlwraith // Licensed under CC BY-SA 4.0 - $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-text: #000 !default; $tab-notselected: #f0f0f0 !default; -$tab-break: 450px !default; +$tab-notselected-text: #000 !default; @mixin tabs { tabset, .tab-group { - @media (min-width: $tab-break) { - margin: 2rem 0 1rem 0; - } + margin: 2rem 0 1rem 0; > ul { display: flex; - margin: 0; + margin: 0 0 1rem 0; padding: 0; li.separator { - border-bottom: 1px solid $tab-border; - border-left: 1px solid $tab-border; display: inline-block; margin: .45rem 0 0 0; width: 100%; @@ -36,11 +35,12 @@ $tab-break: 450px !default; [role="tab"] { background-color: $tab-selected; 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-top: 1px solid $tab-border; cursor:pointer; - margin: 0; display: inline; + margin: 0; padding: 1rem 1.5rem .14rem 1.5rem; z-index: 2; @@ -50,7 +50,7 @@ $tab-break: 450px !default; &:not(.selected) { background-color: $tab-notselected; - border-bottom: 1px solid $tab-border; + /// color } span { @@ -61,39 +61,18 @@ $tab-break: 450px !default; } [role="tabpanel"] { background-color: $tab-selected; - border: 1px solid $tab-border; border-top: none; + border: 1px solid $tab-border; padding: 1rem; z-index: 1; - @media (min-width: $tab-break) { - &[open] summary { - display: none; - } - } - - @media (min-width: $tab-break) { - &:not(.open) { - display: none; - } + &:not(.open) { + display: none; } @content; } - @media (max-width: $tab-break) { - &:has(details) { - [role="tablist"] { - display: none; - } - - [role="tabpanel"] { - border: none; - } - } - - - } } } \ No newline at end of file