primevue-mirror/components/lib/metergroup/style/MeterGroupStyle.js

82 lines
2.0 KiB
JavaScript
Raw Normal View History

2024-01-11 13:42:20 +00:00
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-metergroup {
position: relative;
overflow: hidden;
}
.p-metergroup-vertical.p-metergroup {
display: flex;
}
.p-metergroup-vertical .p-metergroup-meter-container {
flex-direction: column;
}
.p-metergroup-meter-container {
display: flex;
}
.p-metergroup-label-list {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
2024-01-12 09:51:29 +00:00
.p-metergroup-vertical .p-metergroup-label-list {
align-items: start;
}
.p-metergroup-horizontal .p-metergroup-label-list-vertical {
2024-01-11 13:42:20 +00:00
flex-direction: column;
}
2024-01-12 09:51:29 +00:00
.p-metergroup-vertical .p-metergroup-label-list-horizontal {
flex-direction: column;
2024-01-11 13:42:20 +00:00
}
.p-metergroup-label-list-item {
display: inline-flex;
align-items: center;
}
.p-metergroup-label-type {
display: inline-block;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-metergroup p-component',
{
'p-metergroup-horizontal': instance.orientation === 'horizontal',
'p-metergroup-vertical': instance.orientation === 'vertical'
}
],
metercontainer: 'p-metergroup-meter-container',
meter: 'p-metergroup-meter',
labellist: ({ instance }) => [
'p-metergroup-label-list',
{
'p-metergroup-label-list-start': instance.labelPosition === 'start',
'p-metergroup-label-list-end': instance.labelPosition === 'end',
'p-metergroup-label-list-vertical': instance.labelOrientation === 'vertical',
'p-metergroup-label-list-horizontal': instance.labelOrientation === 'horizontal'
}
],
labellistitem: 'p-metergroup-label-list-item',
2024-01-12 09:51:29 +00:00
labelicon: 'p-metergroup-label-icon',
2024-01-11 13:42:20 +00:00
labellisttype: 'p-metergroup-label-type',
label: 'p-metergroup-label'
};
export default BaseStyle.extend({
name: 'metergroup',
css,
classes
});