rsuite/Text/styles/index.less

A suite of react components

@import '../../styles/common';

// Heading
// -------------------------

.rs-text {
  font-family: @font-family-base;
  line-height: @line-height-base;
  color: var(--rs-text-primary);
  margin: 0;

  blockquote& {
    font-style: italic;
    padding-left: 1.5rem;
    border-left: 2px solid var(--rs-gray-200);
  }

  kbd& {
    background-color: var(--rs-bg-well);
    border: solid #c8c8c8;
    border-image: initial;
    border-radius: 0.25em;
    border-width: 1px 1px 2px;
    box-sizing: border-box;
    font-size: 0.875em;
    padding: 0.2em 0.3em;
  }

  &.rs-text-muted {
    color: var(--rs-text-secondary);
  }

  // Text Align: left | center | right | justify
  &-left {
    text-align: left;
  }

  &-center {
    text-align: center;
  }

  &-right {
    text-align: right;
  }

  &-justify {
    text-align: justify;
  }

  // Text Transform: none | uppercase | lowercase | capitalize
  &-uppercase {
    text-transform: uppercase;
  }

  &-lowercase {
    text-transform: lowercase;
  }

  &-capitalize {
    text-transform: capitalize;
  }

  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
  &-thin {
    font-weight: var(--rs-text-weight-thin);
  }

  &-light {
    font-weight: var(--rs-text-weight-light);
  }

  &-medium {
    font-weight: var(--rs-text-weight-medium);
  }

  &-semibold {
    font-weight: var(--rs-text-weight-semibold);
  }

  &-bold {
    font-weight: var(--rs-text-weight-bold);
  }

  &-extrabold {
    font-weight: var(--rs-text-weight-extrabold);
  }

  &-pre-line {
    white-space: pre-line;
  }

  &-ellipsis {
    overflow: hidden;

    @supports (-webkit-line-clamp: 1) {
      & {
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }

    @supports not (-webkit-line-clamp: 1) {
      & {
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
      }
    }
  }
}

// Colorful tags
each(@spectrum, .(@color) {
  .rs-text-@{color} {
    color: var(~'--rs-@{color}-500');
  }
});