hey Ildar, this is super nice.
can you help me out find the right path and margin settings for the aria-selected='true' tab, so we can do what we can in the main HA menubar:
paper-tab[aria-selected=true] {
background-color: rgba(var(--primary),0.3);
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
especially concerned for the size, though background would also be a nicety
active icon size:
I did find this to work:
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 60px;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
showing:
but as you can see, the icon dropsā¦
btw, I am using max 5 icons, and experimented with your mod. Seems we dont need the padding mod? and thereās nt much difference in my config when using the various px settings:
$: |
.mdc-tab {
min-width: 70px;
}
alone works fine, and appears to be the max for 5 icons, but I can set it to any number below that too? does not make the icons go closer, like in your mod, even with the padding set to 0px. With or without !important. hmm.
background colors for the tabs:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 70px;
background: var(--primary-color);
}
.mdc-tab--active {
background: var(--text-color-off);
}
or if you want them all:
.: |
:host {
background: green;
}
and now we see what the horizontal padding does:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 40px;
background: var(--primary-color);
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
card:
type: custom:tabbed-card
attributes:
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
so there is still space between the tabs?
lastly:
how to get to the
.mdc-tab-indicator .mdc-tab-indicator__content--underline {
border-color: black;
}
?
remember to use custom:badge-card not state-badgeā¦
