Add in-content large tab navigation variant

This commit is contained in:
2026-06-02 08:33:25 +02:00
parent 246e5e9a8b
commit 701b081232
2 changed files with 27 additions and 0 deletions
@@ -155,6 +155,10 @@
background: var(--surface-tab-compact-background);
}
.sg-tab-button-group[data-component-context="content"] {
background: var(--surface-tab-compact-background);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
padding-inline: var(--layout-tab-navigation-large-padding-inline);
}
@@ -169,6 +173,16 @@
color: var(--text-tab-selected);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
background: var(--surface-control-default);
color: var(--text-control-default);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
background: var(--surface-tab-compact-unselected);
color: var(--text-control-default);
}
.sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {
background: var(--surface-tab-compact-unselected);
color: var(--text-control-default);