angular-cn/public/resources/css/module/_code.scss

/*
* Code Syntax Highlighting & Formatting
*
*/


/*
* Variables
*/

$prettyprint-background: $white;
$prettyprint-color: $blue-grey-700;


/*
* Copy Code Button
*/

.copy-container-template {
  position: relative;

  &:hover .copy-button .md-button {
    opacity: 1;
  }

  .copy-button {
    &.is-copied .md-button {
      background: $blue-grey-50;
      box-shadow: none;
      color: $cyan-500;
      min-width: 98px;
    }

    .md-button {
      background: $cyan-500;
      border-radius: 2px;
      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
      color: $white;
      font-size: 12px;
      height: $unit * 4;
      line-height: $unit * 4;
      min-height: $unit * 4;
      min-width: 98px;
      margin: 0;
      opacity: 0;
      right: $unit * 2;
      padding: 0 ($unit * 2);
      position: absolute;
      top: $unit * 2;
      z-index: 1;
      transition: all .2s;
    }
  }
}


/*
* Pretty Print Styles
*/

.prettyprint {
  background: $prettyprint-background;
  white-space: pre-wrap;
  color: $prettyprint-color;
  font-family: $mono-font;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  overflow: auto;
  position: relative;
  padding: 0px;
  padding: ($unit * 2) ($unit * 4);
  width: auto;

  &.linenums,
  &[class^="linenums:"],
  &[class*=" linenums:"]  {
    padding: 0px;
  }

  &.is-showcase {
    border: 4px solid $blue-600;
  }

  code {
    background: none;
    font-size: 13px;
    padding: 0px;
  }

  ol {
    background: rgba($blue-grey-50, .24);
    color: $blue-grey-200;
    padding: 0 0 0 ($unit * 5);
    margin: 0px;
    overflow: auto;
    font-size: 11px;

    li {
      background: $white;
      margin: 0;
      line-height: $unit * 3;
      list-style-type: decimal;
      padding: 0 0 0 ($unit * 2);

      &:first-child {
        padding-top: $unit * 3;
      }
      &:last-child {
        margin-bottom: 0;
        padding-bottom: $unit * 3;
      }

      code {
        background: none;
        color: $blue-grey-700;
        font-size: 13px;
      }
    }
  }


  /*
  * Screen Colors
  *
  */

  .pnk,
  .blk {
    border-radius: 4px;
    padding: 2px 4px;
  }
  .pnk {
    background: $blue-grey-50;
    color: $blue-grey-900;
  }
  .blk {
    background: $blue-grey-900;
  }
  .otl {
    outline: 1px solid rgba($blue-grey-700, .56);
  }
  .kwd {
    color: $pink-600;
  }
  .typ,
  .tag {
    color: $pink-600;
  }
  .str,
  .atv {
    color: $teal-700;
  }
  .atn {
    color: $teal-700;
  }
  .com {
    color: $teal-700;
  }
  .lit {
    color: $teal-700;
  }
  .pun {
    color: $blue-grey-700;
  }
  .pln {
    color: $blue-grey-700;
  }
  .dec {
    color: $teal-700;
  }


  /*
  * Print Colors
  *
  */

  @media print {
    border: none;
    box-shadow: none;

    ol {
      background: $white;
    }

    .kwd {
      color: $pink-600;
    }
    .typ,
    .tag {
      color: $pink-600;
    }
    .str,
    .atv {
      color: $teal-700;
    }
    .atn {
      color: $teal-700;
    }
    .com {
      color: $teal-700;
    }
    .lit {
      color: $teal-700;
    }
    .pun {
      color: $blue-grey-700;
    }
    .pln {
      color: $blue-grey-700;
    }
    .dec {
      color: $teal-700;
    }
  }
}


/*
* Embedded Code
*
* Style for embedded code examples
*/

.cp_embed_iframe {
  overflow: hidden;

  @include respond-to('mobile') {
    width: 240px !important;
  }
}