luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-consul/ui/packages/consul-ui/app/components/csv-list/index.scss

18 lines
361 B
SCSS
Raw Normal View History

ui: %horizontal-kv-list CSS component (and related) (#10285) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge
2021-06-21 10:40:14 +00:00
:root {
--csv-list-separator: ',';
}
%csv-list {
// mainly used for block elements, you may need to overwrite this with an
// inline-flex to keep any inline-ness
display: flex;
}
%csv-list > * {
@extend %csv;
}
%csv:not(:last-child)::after {
display: inline;
content: var(--csv-list-separator);
ui: Native CSS Icon Composition (#12461) This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
2022-03-15 12:54:14 +00:00
vertical-align: initial;
ui: %horizontal-kv-list CSS component (and related) (#10285) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge
2021-06-21 10:40:14 +00:00
margin-right: 0.3em;
}