@c8y/style
Version:
Styles for Cumulocity IoT applications
71 lines (64 loc) • 2.14 kB
text/less
/**
* Separator Utility Classes - Box shadow-based dividers
*
* Note: Uses @component-border-color for separator color.
*
* Intentionally hardcoded values:
* - 1px/-1px box-shadow offsets: Standard separator line width
* - 1px min-height: Ensures separator is visible even in empty tags
*/
.separator-top {
box-shadow: inset 0 1px 0 @component-border-color ;
}
.separator-top-bottom {
box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color ;
}
.separator-bottom {
min-height: 1px; // ensure it can be used in an empty tag
box-shadow: inset 0 -1px 0 @component-border-color ;
}
//media queries
@media (max-width: @screen-xs-max) {
.separator-top-xs {
box-shadow: inset 0 1px 0 @component-border-color ;
}
.separator-top-bottom-xs {
box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color ;
}
.separator-bottom-xs {
box-shadow: inset 0 -1px 0 @component-border-color ;
}
}
@media (min-width: @screen-sm-min) {
.separator-top-sm {
box-shadow: inset 0 1px 0 @component-border-color ;
}
.separator-top-bottom-sm {
box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color ;
}
.separator-bottom-sm {
box-shadow: inset 0 -1px 0 @component-border-color ;
}
}
@media (min-width: @screen-md-min) {
.separator-top-md {
box-shadow: inset 0 1px 0 @component-border-color ;
}
.separator-top-bottom-md {
box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color ;
}
.separator-bottom-md {
box-shadow: inset 0 -1px 0 @component-border-color ;
}
}
@media (min-width: @screen-lg-min) {
.separator-top-lg {
box-shadow: inset 0 1px 0 @component-border-color ;
}
.separator-top-bottom-lg {
box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color ;
}
.separator-bottom-lg {
box-shadow: inset 0 -1px 0 @component-border-color ;
}
}