@c8y/style/styles/utilities/_borders.less

Styles for Cumulocity IoT applications

/**
 * Border Utility Classes
 *
 * Note: Uses @size-* tokens for border-radius and @component-border-color for colors.
 *
 * Intentionally hardcoded values:
 * - 1px border widths: Standard border width, not spacing
 */

.border-all {
  border: 1px solid @component-border-color !important;
  border-radius: @size-4 !important;
}
.border-top {
  border-top: 1px solid @component-border-color !important;
}
.border-bottom {
  border-bottom: 1px solid @component-border-color !important;
}
.border-left {
  border-left: 1px solid @component-border-color !important;
}
.border-right {
  border-right: 1px solid @component-border-color !important;
}
.border-all {
  border: 1px solid @component-border-color !important;
  border-radius: @size-4 !important;
}

//media queries
@media (max-width: @screen-xs-max) {
  .border-all-xs {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
  .border-top-xs {
    border-top: 1px solid @component-border-color !important;
  }
  .border-bottom-xs {
    border-bottom: 1px solid @component-border-color !important;
  }
  .border-left-xs {
    border-left: 1px solid @component-border-color !important;
  }
  .border-right-xs {
    border-right: 1px solid @component-border-color !important;
  }
  .border-all-xs {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
}

@media (min-width: @screen-sm-min) {
  .border-all-sm {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
  .border-top-sm {
    border-top: 1px solid @component-border-color !important;
  }
  .border-bottom-sm {
    border-bottom: 1px solid @component-border-color !important;
  }
  .border-left-sm {
    border-left: 1px solid @component-border-color !important;
  }
  .border-right-sm {
    border-right: 1px solid @component-border-color !important;
  }
  .border-all-sm {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
}

@media (min-width: @screen-md-min) {
  .border-all-md {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
  .border-top-md {
    border-top: 1px solid @component-border-color !important;
  }
  .border-bottom-md {
    border-bottom: 1px solid @component-border-color !important;
  }
  .border-left-md {
    border-left: 1px solid @component-border-color !important;
  }
  .border-right-md {
    border-right: 1px solid @component-border-color !important;
  }
  .border-all-md {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
}

@media (min-width: @screen-lg-min) {
  .border-all-lg {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
  .border-top-lg {
    border-top: 1px solid @component-border-color !important;
  }
  .border-bottom-lg {
    border-bottom: 1px solid @component-border-color !important;
  }
  .border-left-lg {
    border-left: 1px solid @component-border-color !important;
  }
  .border-right-lg {
    border-right: 1px solid @component-border-color !important;
  }
  .border-all-lg {
    border: 1px solid @component-border-color !important;
    border-radius: @size-4 !important;
  }
}

.borderless {
  border-color: transparent !important;
  box-shadow: none !important;
}


// Removed unused border-radius utilities - verified 0 usages:
// .b-r-8, .b-r-24, .b-r-32, .b-r-40

.b-r-16 {
  border-radius: @size-16 !important;
}