Fix tabs -- undo details that didn't properly on mobile.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user