@alifd/next/lib/typography/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px; }

.next-typography {
  color: #333333;
  color: var(--typography-text-color, #333333); }
  .next-typography-title {
    font-weight: 600;
    font-weight: var(--typography-title-font-weight, 600);
    margin-bottom: .5em; }
  .next-typography + .next-typography-title {
    margin-top: 1.2em; }
  .next-typography-paragraph {
    color: #333333;
    color: var(--typography-text-color, #333333);
    margin-bottom: 1em;
    font-size: 14px;
    font-size: var(--typography-paragraph-font-size, 14px);
    line-height: 1.5;
    line-height: var(--typography-paragraph-line-height, 1.5); }
  .next-typography mark {
    padding: 0;
    background: #FFE6BD;
    background: var(--typography-text-mark-background, #FFE6BD);
    color: #333333;
    color: var(--typography-text-mark-color, #333333); }
  .next-typography strong {
    font-weight: 600;
    font-weight: var(--typography-text-strong-font-weight, 600); }
  .next-typography code {
    background-color: #F2F3F7;
    background-color: var(--typography-text-code-background, #F2F3F7);
    color: #333333;
    color: var(--typography-text-code-color, #333333);
    border: 1px solid #E6E7EB;
    border: 1px solid var(--typography-text-code-border-color, #E6E7EB);
    margin: 0 .2em;
    padding: .2em .4em .1em;
    font-size: 85%;
    border-radius: 3px;
    border-radius: var(--typography-text-code-corner, 3px); }
  .next-typography ul,
  .next-typography ol {
    margin: 0 0 1em 0;
    padding: 0; }
  .next-typography li {
    list-style-type: circle;
    margin: 0 0 0 20px;
    padding: 0 0 0 4px; }
  .next-typography a {
    text-decoration: none; }
    .next-typography a:link {
      color: #5584FF;
      color: var(--color-link-1, #5584FF); }
    .next-typography a:visited {
      color: #5584FF;
      color: var(--color-link-2, #5584FF); }
    .next-typography a:hover {
      color: #3E71F7;
      color: var(--color-link-3, #3E71F7); }
    .next-typography a:active {
      text-decoration: underline;
      color: #3E71F7;
      color: var(--color-link-3, #3E71F7); }

h1.next-typography-title {
  font-size: 24px;
  font-size: var(--typography-title-h1-font-size, 24px); }

h2.next-typography-title {
  font-size: 20px;
  font-size: var(--typography-title-h2-font-size, 20px); }

h3.next-typography-title {
  font-size: 16px;
  font-size: var(--typography-title-h3-font-size, 16px); }

h4.next-typography-title {
  font-size: 16px;
  font-size: var(--typography-title-h4-font-size, 16px); }

h5.next-typography-title {
  font-size: 14px;
  font-size: var(--typography-title-h5-font-size, 14px); }

h6.next-typography-title {
  font-size: 12px;
  font-size: var(--typography-title-h6-font-size, 12px); }