diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss index 8d27b05446..11742ccaec 100644 --- a/aio/src/styles/2-modules/_api-list.scss +++ b/aio/src/styles/2-modules/_api-list.scss @@ -285,11 +285,6 @@ p { cursor: pointer; text-decoration: none; - // Override highlight.js - .kwd { - color: #1E88E5 !important; - } - &:hover { text-decoration: underline; } @@ -325,4 +320,4 @@ p { position: relative; font-size: 11px; } -} \ No newline at end of file +} diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index a2597a12e0..9aad34653e 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -73,30 +73,16 @@ aio-code pre { white-space: pre-wrap; align-items: center; - code span, code ol li { + code span { line-height: 24px; } } -code ol { - margin: 0; - font-family: $main-font; - color: $lightgray; - - li { - margin: 0; - font-family: $code-font; - font-size: 90%; - } -} .code-missing { color: $darkred; } -.prettyprint { - position: relative; -} .copy-button { display: inline-block; @@ -125,102 +111,6 @@ code ol { transform: none; } -/* 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: $darkgray; - } - .typ, - .tag { - color: $darkred; - } - .str, - .atv { - color: $blue; - } - .atn { - color: $blue; - } - .com { - color: $mediumgray; - } - .lit { - color: $blue; - } - .pun { - color: $blue-grey-700; - } - .pln { - color: $green-800; - } - .dec { - color: $blue; - } - -/* SHELL / TERMINAL CODE BLOCKS */ - -code-example.code-shell, code-example[language=sh], code-example[language=bash] { - & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec { - color: $codegreen; - } -} - -/* PRINT COLORS */ - - -@media print { - border: none; - box-shadow: none; - - ol { - background: $white; - } - - .kwd { - color: $darkgray; - } - .typ, - .tag { - color: $darkred; - } - .str, - .atv { - color: $blue; - } - .atn { - color: $blue; - } - .com { - color: $mediumgray; - } - .lit { - color: $blue; - } - .pun { - color: $blue-grey-700; - } - .pln { - color: $green-800; - } - .dec { - color: $blue; - } -} // REMOVE RIPPLE EFFECT FROM MATERIAL TABS code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content { @@ -235,3 +125,63 @@ code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-bo color: inherit; font-size: inherit; } + +/* PRETTY PRINTING STYLES for prettify.js. */ + +.prettyprint { + position: relative; +} + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin: 0; + font-family: $main-font; + color: #B3B6B7; + li { + margin: 0; + font-family: $code-font; + font-size: 90%; + line-height: 24px; + } +} + +/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/ + +/* SPAN elements with the classes below are added by prettyprint. */ +.pln { color: #000 } /* plain text */ + +@media screen { + .str { color: #800 } /* string content */ + .kwd { color: #00f } /* a keyword */ + .com { color: #060 } /* a comment */ + .typ { color: red } /* a type name */ + .lit { color: #08c } /* a literal value */ + /* punctuation, lisp open bracket, lisp close bracket */ + .pun, .opn, .clo { color: #660 } + .tag { color: #008 } /* a markup tag name */ + .atn { color: #606 } /* a markup attribute name */ + .atv { color: #800 } /* a markup attribute value */ + .dec, .var { color: #606 } /* a declaration; a variable name */ + .fun { color: red } /* a function name */ +} + +/* Use higher contrast and text-weight for printable form. */ +@media print, projection { + .str { color: #060 } + .kwd { color: #006; font-weight: bold } + .com { color: #600; font-style: italic } + .typ { color: #404; font-weight: bold } + .lit { color: #044 } + .pun, .opn, .clo { color: #440 } + .tag { color: #006; font-weight: bold } + .atn { color: #404 } + .atv { color: #060 } +} + +/* SHELL / TERMINAL CODE BLOCKS */ + +code-example.code-shell, code-example[language=sh], code-example[language=bash] { + & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec { + color: $codegreen; + } +}