@c8y/style/styles/utilities/_text-utils.less

Styles for Cumulocity IoT applications

//Font weight
.text-light {
  font-weight: 200 !important;
}
.text-normal {
  font-weight: 400 !important;
}
.text-medium {
  font-weight: 600 !important;
}
.text-bold,
.strong {
  font-weight: 700 !important;
}

.text-tabular{
  font-feature-settings: "tnum"1,"kern"1!important;
}

.text-rtl{
  direction: rtl !important;
}

.first-line-bold::first-line {
  font-weight: 600 !important;
}

//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-light-xs {
    font-weight: 200 !important;
  }
  .text-normal-xs {
    font-weight: 400 !important;
  }
  .text-medium-xs {
    font-weight: 600 !important;
  }
  .text-bold-xs,
  .strong-xs {
    font-weight: bold !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-light-sm {
    font-weight: 200 !important;
  }
  .text-normal-sm {
    font-weight: 400 !important;
  }
  .text-medium-sm {
    font-weight: 600 !important;
  }
  .text-bold-sm,
  .strong-sm {
    font-weight: bold !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-light-md {
    font-weight: 200 !important;
  }
  .text-normal-md {
    font-weight: 400 !important;
  }
  .text-medium-md {
    font-weight: 600 !important;
  }
  .text-bold-md,
  .strong-md {
    font-weight: bold !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-light-lg {
    font-weight: 200 !important;
  }
  .text-normal-lg {
    font-weight: 400 !important;
  }
  .text-medium-lg {
    font-weight: 600 !important;
  }
  .text-bold-lg,
  .strong-lg {
    font-weight: bold !important;
  }
}
/* #endregion */

// Font size
.text-10 {
  font-size: 10px !important;
}
.text-12 {
  font-size: 12px !important;
}
.text-14 {
  font-size: 14px !important;
}
.text-16 {
  font-size: 16px !important;
}
//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-10-xs {
    font-size: 10px !important;
  }
  .text-12-xs {
    font-size: 12px !important;
  }
  .text-14-xs {
    font-size: 14px !important;
  }
  .text-16-xs {
    font-size: 16px !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-10-sm {
    font-size: 10px !important;
  }
  .text-12-sm {
    font-size: 12px !important;
  }
  .text-14-sm {
    font-size: 14px !important;
  }
  .text-16-sm {
    font-size: 16px !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-10-md {
    font-size: 10px !important;
  }
  .text-12-md {
    font-size: 12px !important;
  }
  .text-14-md {
    font-size: 14px !important;
  }
  .text-16-md {
    font-size: 16px !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-10-lg {
    font-size: 10px !important;
  }
  .text-12-lg {
    font-size: 12px !important;
  }
  .text-14-lg {
    font-size: 14px !important;
  }
  .text-16-lg {
    font-size: 16px !important;
  }
}
/* #endregion */

// Line height
.l-h-base {
  line-height: @line-height-base !important;
}
.l-h-inherit {
  line-height: inherit !important;
}
.l-h-0 {
  line-height: 0 !important;
}
.l-h-1 {
  line-height: 1 !important;
}
.l-h-tight {
  line-height: 1.2 !important;
}
.l-h-input {
  line-height: 32px !important;
}
//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .l-h-base-xs {
    line-height: @line-height-base !important;
  }
  .l-h-inherit-xs {
    line-height: inherit !important;
  }
  .l-h-0-xs {
    line-height: 0 !important;
  }
  .l-h-1-xs {
    line-height: 1 !important;
  }
  .l-h-tight-xs {
    line-height: 1.2 !important;
  }
  .l-h-input-xs {
    line-height: 32px !important;
  }
}

@media (min-width: @screen-sm-min) {
  .l-h-base-sm {
    line-height: @line-height-base !important;
  }
  .l-h-inherit-sm {
    line-height: inherit !important;
  }
  .l-h-0-sm {
    line-height: 0 !important;
  }
  .l-h-1-sm {
    line-height: 1 !important;
  }
  .l-h-tight-sm {
    line-height: 1.2 !important;
  }
  .l-h-input-sm {
    line-height: 32px !important;
  }
}

@media (min-width: @screen-md-min) {
  .l-h-base-md {
    line-height: @line-height-base !important;
  }
  .l-h-inherit-md {
    line-height: inherit !important;
  }
  .l-h-0-md {
    line-height: 0 !important;
  }
  .l-h-1-md {
    line-height: 1 !important;
  }
  .l-h-tight-md {
    line-height: 1.2 !important;
  }
  .l-h-input-md {
    line-height: 32px !important;
  }
}

@media (min-width: @screen-lg-min) {
  .l-h-base-lg {
    line-height: @line-height-base !important;
  }
  .l-h-inherit-lg {
    line-height: inherit !important;
  }
  .l-h-0-lg {
    line-height: 0 !important;
  }
  .l-h-1-lg {
    line-height: 1 !important;
  }
  .l-h-tight-lg {
    line-height: 1.2 !important;
  }
  .l-h-input-lg {
    line-height: 32px !important;
  }
}
/* #endregion */

// Letter case
.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}

.text-label-small {
  color: @component-color-text-muted!important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}
//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-lowercase-xs {
    text-transform: lowercase !important;
  }
  .text-uppercase-xs {
    text-transform: uppercase !important;
  }
  .text-capitalize-xs {
    text-transform: capitalize !important;
  }

  .text-label-small-xs {
    color: @component-color-text-muted!important;
    text-transform: uppercase !important;
    font-size: 10px !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-lowercase-sm {
    text-transform: lowercase !important;
  }
  .text-uppercase-sm {
    text-transform: uppercase !important;
  }
  .text-capitalize-sm {
    text-transform: capitalize !important;
  }

  .text-label-small-sm {
    color: @component-color-text-muted!important;
    text-transform: uppercase !important;
    font-size: 10px !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-lowercase-md {
    text-transform: lowercase !important;
  }
  .text-uppercase-md {
    text-transform: uppercase !important;
  }
  .text-capitalize-md {
    text-transform: capitalize !important;
  }

  .text-label-small-md {
    color: @component-color-text-muted!important;
    text-transform: uppercase !important;
    font-size: 10px !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-lowercase-lg {
    text-transform: lowercase !important;
  }
  .text-uppercase-lg {
    text-transform: uppercase !important;
  }
  .text-capitalize-lg {
    text-transform: capitalize !important;
  }

  .text-label-small-lg {
    color: @component-color-text-muted!important;
    text-transform: uppercase !important;
    font-size: 10px !important;
  }
}
/* #endregion */

// Text alignment
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-left-xs {
    text-align: left !important;
  }
  .text-right-xs {
    text-align: right !important;
  }
  .text-center-xs {
    text-align: center !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-left-sm {
    text-align: left !important;
  }
  .text-right-sm {
    text-align: right !important;
  }
  .text-center-sm {
    text-align: center !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-left-md {
    text-align: left !important;
  }
  .text-right-md {
    text-align: right !important;
  }
  .text-center-md {
    text-align: center !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-left-lg {
    text-align: left !important;
  }
  .text-right-lg {
    text-align: right !important;
  }
  .text-center-lg {
    text-align: center !important;
  }
}
/* #endregion */

// White space
.text-nowrap {
  white-space: nowrap !important;
}
.text-break-word {
  word-break: break-word !important;

  overflow-wrap: break-word !important;
}

.text-break-all {
  word-break: break-all !important;
}

.text-pre {
  white-space: pre !important;
}
.text-pre-wrap {
  white-space: pre-wrap !important;
}

.text-pre-line {
  white-space: pre-line !important;
}
.text-pre-normal {
  white-space: normal !important;
}

.text-pretty{
  text-wrap: pretty;
}

.text-balance{
  text-wrap: balance;
}
//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-nowrap-xs {
    white-space: nowrap !important;
  }
  .text-break-word-xs {
    word-break: break-word !important;

    overflow-wrap: break-word !important;
  }
  .text-break-all-xs {
    word-break: break-all !important;
  }
  .text-pre-xs {
    white-space: pre !important;
  }
  .text-pre-wrap-xs {
    white-space: pre-wrap !important;
  }
  .text-pre-line-xs {
    white-space: pre-line !important;
  }
  .text-pre-normal-xs {
    white-space: normal !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-nowrap-sm {
    white-space: nowrap !important;
  }
  .text-break-word-sm {
    word-break: break-word !important;

    overflow-wrap: break-word !important;
  }
  .text-break-all-sm {
    word-break: break-all !important;
  }
  .text-pre-sm {
    white-space: pre !important;
  }
  .text-pre-wrap-sm {
    white-space: pre-wrap !important;
  }
  .text-pre-line-sm {
    white-space: pre-line !important;
  }
  .text-pre-normal-sm {
    white-space: normal !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-nowrap-md {
    white-space: nowrap !important;
  }
  .text-break-word-md {
    word-break: break-word !important;

    overflow-wrap: break-word !important;
  }
  .text-break-all-md {
    word-break: break-all !important;
  }
  .text-pre-md {
    white-space: pre !important;
  }
  .text-pre-wrap-md {
    white-space: pre-wrap !important;
  }
  .text-pre-line-md {
    white-space: pre-line !important;
  }
  .text-pre-normal-md {
    white-space: normal !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-nowrap-lg {
    white-space: nowrap !important;
  }
  .text-break-word-lg {
    word-break: break-word !important;

    overflow-wrap: break-word !important;
  }
  .text-break-all-lg {
    word-break: break-all !important;
  }
  .text-pre-lg {
    white-space: pre !important;
  }
  .text-pre-wrap-lg {
    white-space: pre-wrap !important;
  }
  .text-pre-line-lg {
    white-space: pre-line !important;
  }
  .text-pre-normal-lg {
    white-space: normal !important;
  }
}
/* #endregion */

//truncation
.text-truncate {
  display: block;
  overflow: hidden !important;
  max-width: 100% !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.text-truncate-wrap {
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

// line clamp

.line-clamp{
  &--2{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

//media queries
/* #region */
@media (max-width: @screen-xs-max) {
  .text-truncate-xs {
    display: block;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-truncate-wrap-xs {
    display: block;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: @screen-sm-min) {
  .text-truncate-sm {
    display: block;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-truncate-wrap-sm {
    display: block;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: @screen-md-min) {
  .text-truncate-md {
    display: block;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-truncate-wrap-md {
    display: block;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: @screen-lg-min) {
  .text-truncate-lg {
    display: block;
    overflow: hidden !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-truncate-wrap-lg {
    display: block;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* #endregion */

.text-monospace {
  font-family: @font-family-monospace !important;
}

// Font size inherit
.font-size-inherit{
  font-size: inherit !important;
}