vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Tokens for MeterGroup

pull/5756/head
Cagatay Civici 2024-05-09 22:44:43 +03:00
parent 38767fd466
commit cbf9ceb15d
3 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/lib/metergroup/style/MeterGroupStyle.js
View File

@ -3,17 +3,13 @@ import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-metergroup { .p-metergroup {
display: flex; display: flex;
gap: 1rem; gap: ${dt('metergroup.gap')};
} }
.p-metergroup-meters { .p-metergroup-meters {
display: flex; display: flex;
background: ${dt('metergroup.meters.background')}; background: ${dt('metergroup.meters.background')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('metergroup.border.radius')};
}
.p-metergroup-meter {
border: 0 none;
} }
.p-metergroup-label-list { .p-metergroup-label-list {
@ -27,13 +23,13 @@ const theme = ({ dt }) => `
.p-metergroup-label { .p-metergroup-label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: ${dt('metergroup.label.gap')};
} }
.p-metergroup-label-marker { .p-metergroup-label-marker {
display: inline-flex; display: inline-flex;
width: 0.5rem; width: ${dt('metergroup.label.marker.size')};
height: 0.5rem; height: ${dt('metergroup.label.marker.size')};
border-radius: 100%; border-radius: 100%;
} }
@ -47,20 +43,20 @@ const theme = ({ dt }) => `
} }
.p-metergroup-label-list-horizontal { .p-metergroup-label-list-horizontal {
gap: 1rem; gap: ${dt('metergroup.label.list.horizontal.gap')};
} }
.p-metergroup-horizontal .p-metergroup-meters { .p-metergroup-horizontal .p-metergroup-meters {
height: 0.5rem; height: ${dt('metergroup.meters.size')};
} }
.p-metergroup-horizontal .p-metergroup-meter:first-of-type { .p-metergroup-horizontal .p-metergroup-meter:first-of-type {
border-top-left-radius: ${dt('border.radius.md')}; border-top-left-radius: ${dt('metergroup.border.radius')};
border-bottom-left-radius: ${dt('border.radius.md')}; border-bottom-left-radius: ${dt('metergroup.border.radius')};
} }
.p-metergroup-horizontal .p-metergroup-meter:last-of-type { .p-metergroup-horizontal .p-metergroup-meter:last-of-type {
border-top-right-radius: ${dt('border.radius.md')}; border-top-right-radius: ${dt('metergroup.border.radius')};
border-bottom-right-radius: ${dt('border.radius.md')}; border-bottom-right-radius: ${dt('metergroup.border.radius')};
} }
.p-metergroup-vertical { .p-metergroup-vertical {
@ -69,12 +65,12 @@ const theme = ({ dt }) => `
.p-metergroup-label-list-vertical { .p-metergroup-label-list-vertical {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: ${dt('metergroup.label.list.vertical.gap')};
} }
.p-metergroup-vertical .p-metergroup-meters { .p-metergroup-vertical .p-metergroup-meters {
flex-direction: column; flex-direction: column;
width: 0.5rem; width: ${dt('metergroup.meters.size')};
height: 100%; height: 100%;
} }
@ -83,12 +79,12 @@ const theme = ({ dt }) => `
} }
.p-metergroup-vertical .p-metergroup-meter:first-of-type { .p-metergroup-vertical .p-metergroup-meter:first-of-type {
border-top-left-radius: ${dt('border.radius.md')}; border-top-left-radius: ${dt('metergroup.border.radius')};
border-top-right-radius: ${dt('border.radius.md')}; border-top-right-radius: ${dt('metergroup.border.radius')};
} }
.p-metergroup-vertical .p-metergroup-meter:last-of-type { .p-metergroup-vertical .p-metergroup-meter:last-of-type {
border-bottom-left-radius: ${dt('border.radius.md')}; border-bottom-left-radius: ${dt('metergroup.border.radius')};
border-bottom-right-radius: ${dt('border.radius.md')}; border-bottom-right-radius: ${dt('metergroup.border.radius')};
} }
`; `;

17
components/lib/themes/aura/metergroup/index.js
View File

@ -1,5 +1,20 @@
export default { export default {
root: {
borderRadius: '{content.border.radius}',
gap: '1rem'
},
meters: { meters: {
background: '{content.border.color}' background: '{content.border.color}',
size: '0.5rem'
},
label: {
gap: '0.5rem'
},
labelMarker: {
size: '0.5rem'
},
labelList: {
verticalGap: '0.5rem',
horizontalGap: '1rem'
} }
}; };

17
components/lib/themes/lara/metergroup/index.js
View File

@ -1,5 +1,20 @@
export default { export default {
root: {
borderRadius: '{content.border.radius}',
gap: '1rem'
},
meters: { meters: {
background: '{content.border.color}' background: '{content.border.color}',
size: '0.625rem'
},
label: {
gap: '0.5rem'
},
labelMarker: {
size: '0.5rem'
},
labelList: {
verticalGap: '0.5rem',
horizontalGap: '1rem'
} }
}; };