control-panel/cp-frontend/src/app/pages/topology/containers/topology-page/topology-page.component.scss

@import 'src/app/styles/colors';
@import 'src/app/styles/variables';
@import 'src/app/styles/font';

.typography-content {

  &__wrapper {
    display: flex;
    padding: 0 8px;

    @media (max-width: $small) {
      flex-wrap: wrap;
    }
  }

  &__item-wrapper {
    box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
    width: 100%;
    margin: 16px;
  }

  &__headings, &__colors, &__settings, &__size {
    margin-top: 8px;
    border: 1px dashed $blue;
    padding: 32px 16px;

    h1 {
      @media (max-width: $small) {
        line-height: 46px;
      }
    }
  }

  &__colors {
    &_blue {
      color: $blue;
    }

    &_green {
      color: $green;
    }

    &_pink {
      color: $pink;
    }

    &_yellow {
      color: $yellow;
    }

    &_light-blue {
      color: $light-blue;
    }

    &_violet {
      color: $violet;
    }
  }
}

.fw-light {
  font-weight: $fw-lighter;
}

.fw-medium {
  font-weight: $fw-normal;
}

.fw-bold {
  font-weight: $fw-bold;
}

.font-uppercase {
  text-transform: uppercase;
}

.font-lowercase {
  text-transform: lowercase;
}

.fst-italic {
  font-style: italic;
}

.fs-sm {
  font-size: $fs-xs;
}

.fs-regular {
  font-size: $fs-small;
}

.fs-md {
  font-size: $fs-medium;
}

.fs-xl {
  font-size: $fs-xl;
}

.fs-xxl {
  font-size: $fs-xxxl;
}