@c8y/style
Version:
Styles for Cumulocity IoT applications
95 lines (76 loc) • 1.87 kB
text/less
@import "../../../mixins/_color-mixins.less";
@import "../../../mixins/_forms.less";
/**
* Asset Table - Table component for asset properties
*
* Note: Uses @size-* tokens for spacing where applicable.
*
* Intentionally hardcoded values:
* - Off-token spacing (3px, 6px, 9px, 9.5px, 12px): Form control padding and positioning not in token system
* - Typography sizes (10px): Font size
* - Line-heights (1.1em, 23px, 34px): Text line heights
* - Percentages (50%): Positioning
* - Transition duration (0.2s): Animation timing
* - Darken percentages (0.03, 0.05): Color adjustments
*/
.property-label {
padding: 0;
border-color: transparent;
background-color: transparent;
box-shadow: none;
transition: all 0.2s ease;
.form-control-focus();
}
.property-label:focus {
padding: 6px 12px;
}
div .property {
line-height: 34px;
}
div .property:hover {
.darken(@component-background-default, 0.05);
}
div .property:nth-child(odd) {
.darken(@component-background-default, 0.03);
}
div .property.bg-info:nth-child(odd) {
background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
}
.column-name {
line-height: 23px;
}
.spin-up {
position: relative;
top: 3px;
}
.spin-up,
.spin-down {
display: block;
height: @size-5;
color: @gray-80;
}
.spin:hover .spin.active {
color: @text-color;
}
// Removed unused icon class - verified 0 usages: .icon-sort-down
.asset-table .btn-xs {
font-size: @font-size-xs;
line-height: 1.1em;
}
.asset-table .headers .header-cell {
position: relative;
vertical-align: middle;
}
.asset-table .headers .widget-sort {
position: absolute;
top: 50%;
right: 0;
margin-top: -9.5px;
}
.asset-table .headers .column-name {
margin-right: @size-8;
line-height: 1.1em;
&:hover {
color: var(--brand-primary, var(--c8y-brand-primary));
}
}