mdui/src/styles/typo.less

a CSS Framework based on material design

/**
 * =============================================================================
 * ************   Typography 文章排版   ************
 * =============================================================================
 */

.mdui-typo {
  line-height: 1.8;
  word-wrap: break-word;

  address, caption, cite, code, dfn, th {
    font-weight: 400;
    font-style: normal;
  }

  caption, th {
    text-align: left;
  }

  q::before, q::after {
    content: '';
  }

  pre, code, kbd, samp, pre tt {
    font-family: Consolas, Courier, 'Courier New', monospace;
  }

  figcaption {
    color: @color-black-secondary;
    font-size: 80%;
  }

  [draggable],
  [draggable="true"] {
    cursor: move;
  }

  [draggable="false"] {
    cursor: inherit;
  }

  p, pre, ul, ol, dl, form, hr, figure, table, .mdui-table, .mdui-table-fluid {
    margin: 0 0 1.2em 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* a */
  a {
    .mdui-text-color(@color-accent-default-name, a200);

    position: relative;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    vertical-align: top;
    outline: none;

    &::before {
      position: absolute;
      top: auto;
      bottom: 1px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: @color-default-a200;
      transform: scaleX(0);
      backface-visibility: hidden;
      transition: all 0.2s;
      content: ' ';
    }

    &:hover::before,
    &:focus::before {
      transform: scaleX(1);
    }
  }

  /* small */
  small {
    font-size: 80%;
  }

  /* blockquote */
  blockquote {
    margin: 1em 3em 1em 2em;
    padding-left: 1em;
    font-weight: 400;
    border-left: 4px solid @color-black-divider;
    @media only screen and (max-width: @screen-xs-max) {
      margin: 1em 0;
    }

    &:last-child {
      margin-bottom: 0;
    }

    footer {
      color: @color-black-secondary;
      font-size: 86%;
    }
  }

  /* mark */
  mark {
    margin: 0 5px;
    padding: 2px;
    background: #fffdd1;
    border-bottom: 1px solid #ffedce;
  }

  /* h1 - h6 */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    color: inherit;
    font-weight: 400;
    font-family: inherit;
    line-height: 1.35;

    &:last-child {
      margin-bottom: 0;
    }

    small {
      color: @color-black-secondary;
      font-weight: 400;
      font-size: 65%;
      line-height: 1;
    }
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.6em;
  }
  h4 {
    font-size: 1.4em;
  }
  h5 {
    font-size: 1.2em;
  }
  h6 {
    font-size: 1.1em;
  }

  /* code */
  code {
    padding: 2px 6px;
    color: #c7254e;
    background-color: #f7f7f9;
    border-radius: 2px;
  }

  /* pre code */
  pre code {
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1.7;
    background-color: transparent;
    border-radius: 0;
  }

  /* abbr */
  abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
    cursor: help;
  }

  /* ins */
  ins {
    text-decoration: none;
    border-bottom: 1px solid ;
  }

  /* u */
  u {
    text-decoration: none;
    border-bottom: 1px solid;
  }

  /* del */
  del {
    text-decoration: line-through;
  }

  /* hr */
  hr {
    height: 10px;
    margin-bottom: 0.8em;
    border: none;
    border-bottom: 1px solid @color-black-divider;
  }

  /* pre */
  pre {
    padding: 12px 16px;
    overflow-x: auto;
    border: 1px solid @color-black-divider;
    border-radius: 2px;
    -webkit-overflow-scrolling: touch;
  }

  /* kbd */
  kbd {
    padding: 2px 6px;
    color: #fff;
    font-size: 90%;
    background-color: #333;
    border-radius: 2px;
  }

  /* ul / ol */
  ul {
    padding-left: 2em;
    list-style: disc;
  }
  ol {
    padding-left: 2em;
    list-style: decimal;
  }
  li ul,
  li ol {
    margin: 0.8em 0;
  }
  li ul {
    list-style: circle;
  }

  /* img, video */
  img, video {
    max-width: 100%;
  }

  figure {
    text-align: center;

    figcaption {
      margin-top: 8px;
      color: #999;
      font-size: 14px;
    }

    figcaption:empty::before {
      z-index: -1;
      color: #bfbfbf;
      cursor: text;
      content: attr(placeholder);
    }
  }
}


/**
 * =============================================================================
 * ************   Typo 强调色   ************
 * =============================================================================
 */
& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
      .mdui-typo {
        a {
          .mdui-text-color(@colorName, a200);

          &::before {
            .mdui-background-color(@colorName, a200);
          }
        }
      }
    }

  }
  .loop-accent-theme(length(@globalAccentColors));
}


/**
 * =============================================================================
 * ************   Typo dark   ************
 * =============================================================================
 */
.layout-theme({
  .mdui-typo {

    blockquote {
      border-left-color: @color-white-divider;

      footer {
        color: @color-white-secondary;
      }
    }

    figcaption {
      color: @color-white-secondary;
    }

    mark {
      background: #aaa;
      border-bottom-color: #bbb;
    }

    h1, h2, h3, h4, h5, h6 {
      small {
        color: @color-white-secondary;
      }
    }

    code {
      color: @color-red-100;
      background-color: #424242;
    }

    pre {
      background: #424242;
      border-color: @color-white-divider;
    }

    kbd {
      background: #424242;
    }

    hr {
      border-color: @color-white-divider;
    }
  }
});