FR: add dedicated expander-card css vars to be used in theme
feature request
**Is your feature request related to a problem? Please describe.**
now that using expander-card in my config has started to default to several config cases, I notice I use identical styling in most of the generic style sets
Id love to be able to set those in a theme, and not have to style each and every expander-card
I believe to have checked the full documentation, but couldnt find mention of expander-card css vars, so please consider adding those
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
see above
**Describe alternatives you've considered**
styling per card, like:
```
type: custom:expander-card
arrow-color: var(--primary-color)
animation: false
padding: 0
style: |
.title {
font-weight: 500;
}
.header {
height: var(--expander-header-height);
padding-left: 16px !important;
padding-right: 16px !important;
}
.expander-card {
border-top: var(--divider-color) 1px solid;
margin: -4px -16px;
}
```
**btw**: note that the font-weight doesn't accept the unit `px` in this config, which is a bit odd, and maybe even an issue. would be more standard to see `font-weight: 500px` in a style block.
**Additional context**
Add any other context or screenshots about the feature request here.
in the above, you can see I made my own `expander-header-height` var, and I could do the same for most of the others (although the padding css cards wont accept it). However, of course that would still require me to use the style block in the configs
if css vars were added for
title:
font-weight
header:
padding(-left and -right)
height
that would eliminate most of these stylings from the style block, and only leave the more individually required ones.
it would also be faster, as overriding styling is always slower than straight theme vars
as an illustration in cooperation with UIX foundries, I currently use below foundries to minimize front-end yaml, and the style block stand out (even though I managed to add the whole element of the first in a yaml anchor:
```
uix_foundries:
expander_nested:
forge:
mold: row
element: &expander_element
type: custom:expander-card
arrow-color: var(--primary-color)
animation: false
padding: 0
style: |
.title {
font-weight: 500;
}
.header {
height: var(--expander-header-height);
padding-left: 16px !important;
padding-right: 16px !important;
}
.expander-card {
border-top: var(--divider-color) 1px solid;
}
title: '{{title}}'
cards: '{{cards}}'
expander_in_stack:
forge:
mold: card
element: *expander_element
expander_in_entities:
forge:
mold: row
element:
type: custom:expander-card
arrow-color: var(--primary-color)
animation: false
padding: 0
style: |
.title {
font-weight: 500;
}
.header {
height: var(--expander-header-height);
padding-left: 16px !important;
padding-right: 16px !important;
}
.expander-card {
border-top: var(--divider-color) 1px solid;
margin: -4px -16px;
}
title: '{{title}}'
cards: '{{cards}}'
```
Hope you will consider, thanks for that
TIP: You can always edit your issue if it isn't formatted correctly.
See https://guides.github.com/features/mastering-markdown
7 条评论