@c8y/style
Version:
Styles for Cumulocity IoT applications
62 lines (55 loc) • 1.48 kB
text/less
@import "../core/buttons/_buttons.less";
/**
* Gauges - Radial gauge widget styles
*
* Note: Uses @size-base for padding and @size-4 for border-radius.
*
* Intentionally hardcoded values:
* - Percentages (99%): Near-full dimensions
* - Aspect-ratio (1): Square ratio
* - Transition duration (0.25s): Animation timing
* - Outline width (1px): Standard border
* - Outline-offset (-2px): Inset positioning
*/
@image-directory: if(@use-relative-paths, '../../img/', 'img/');
.c8y-radial-gauge {
width: 99%;
height: 99%;
position: relative;
display: block;
&--square {
height: auto;
aspect-ratio: 1;
}
&__preset {
.btn-clean();
padding: @size-base ;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.25s linear;
outline: 0;
&:hover, &.selected {
outline: 1px solid @component-brand-primary;
outline-offset: -2px;
border-radius: @size-4;
}
&.preset-custom::before {
content: '';
display: block;
aspect-ratio: 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
background-image: url('@{image-directory}gauge-presets/custom.webp');
.c8y-dark-theme & {
background-image: url('@{image-directory}gauge-presets/custom-dark.webp');
}
}
.c8y-radial-gauge--square {
pointer-events: none;
}
}
}