@c8y/style
Version:
Styles for Cumulocity IoT applications
113 lines (90 loc) • 2.13 kB
text/less
/**
* Container Query Utilities
*
* Note: Uses @font-size-xs and @text-muted tokens.
*
* Intentionally hardcoded values:
* - 350px, 440px, 500px: Container query breakpoints
* - 100%: Full width for responsive columns
*/
//********************
// 350px
//********************
.c8y-cq-350 {
container-type: inline-size;
container-name: c8y-cq-350;
}
@container c8y-cq-350 (max-width: 350px) {
.c8y-list--timeline__item .d-flex {
flex-direction: column ;
}
.c8y-list--timeline__item [class^='col-'],
.c8y-list--timeline__item [class*=' col-'] {
float: none;
width: 100% ;
&:before {
display: block;
content: attr(data-label) ;
font-size: @font-size-xs;
text-transform: uppercase;
color: @text-muted;
}
}
.hidden-cq {
display: none ;
}
}
//********************
// 440px
//********************
.c8y-cq-440 {
container-type: inline-size;
container-name: c8y-cq-440;
}
@container c8y-cq-440 (max-width: 440px) {
.c8y-list--timeline__item .d-flex {
flex-direction: column ;
}
.c8y-list--timeline__item [class^='col-'],
.c8y-list--timeline__item [class*=' col-'] {
float: none;
width: 100% ;
&:before {
display: block;
content: attr(data-label) ;
font-size: @font-size-xs;
text-transform: uppercase;
color: @text-muted;
}
}
.hidden-cq {
display: none ;
}
}
//********************
// 500px
//********************
.c8y-cq-500 {
container-type: inline-size;
container-name: c8y-cq-500;
}
@container c8y-cq-500 (max-width: 500px) {
.c8y-list--timeline__item .d-flex {
flex-direction: column ;
}
.c8y-list--timeline__item [class^='col-'],
.c8y-list--timeline__item [class*=' col-'] {
float: none;
width: 100% ;
&:before {
display: block;
content: attr(data-label) ;
font-size: @font-size-xs;
text-transform: uppercase;
color: @text-muted;
}
}
.hidden-cq {
display: none ;
}
}