You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.2 KiB
48 lines
1.2 KiB
5 months ago
|
[data-meter] {
|
||
|
|
--_meter-height: var(--meter-height-md);
|
||
|
|
--_meter-radius: var(--meter-radius-md);
|
||
|
|
--_meter-indicator-bg: var(--meter-indicator-bg-optimum);
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
inline-size: 100%;
|
||
|
|
block-size: var(--_meter-height);
|
||
|
|
border-radius: var(--_meter-radius);
|
||
|
|
background: var(--meter-track-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-meter][data-size='sm'] {
|
||
|
|
--_meter-height: var(--meter-height-sm);
|
||
|
|
--_meter-radius: var(--meter-radius-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-meter][data-size='lg'] {
|
||
|
|
--_meter-height: var(--meter-height-lg);
|
||
|
|
--_meter-radius: var(--meter-radius-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-meter][data-state='below'] {
|
||
|
|
--_meter-indicator-bg: var(--meter-indicator-bg-below);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-meter][data-state='above'] {
|
||
|
|
--_meter-indicator-bg: var(--meter-indicator-bg-above);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-meter-indicator] {
|
||
|
|
display: block;
|
||
|
|
inline-size: calc(var(--soma-meter-value-pct, 0) * 1%);
|
||
|
|
block-size: 100%;
|
||
|
|
border-radius: inherit;
|
||
|
|
background: var(--_meter-indicator-bg);
|
||
|
|
transition:
|
||
|
|
inline-size var(--meter-transition-duration) var(--meter-transition-ease),
|
||
|
|
background var(--meter-transition-duration) var(--meter-transition-ease);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
[data-meter-indicator] {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
}
|