refactor(docs-infra): merge duplicate `code.scss` files (#42620)
PR #41129 reorganized the SCSS files of the angular.io app moving most of them in sub-directories. Due to incorrectly resolved merge conflicts for PRs targeting the SCSS files around that time, we ended up with duplicate style files for `<code>` elements: - `styles/2-modules/_code.scss` - `styles/2-modules/code/_code.scss` + `styles/2-modules/code/_code-theme.scss` This commit gets rid of the extra file (`styles/2-modules/_code.scss`) and ports any changes from it to the correct files inside the `code/` sub-directory. PR Close #42620
This commit is contained in:
George Kalpakas
Jessica Janiuk
parent
56fb4eb08d
commit
09ec62a357
|
|
@ -1,254 +0,0 @@
|
||||||
@use 'sass:color';
|
|
||||||
@use '../constants';
|
|
||||||
@use '../mixins';
|
|
||||||
|
|
||||||
code-example,
|
|
||||||
code-tabs {
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
code {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-card {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
code-example {
|
|
||||||
&:not(.no-box) {
|
|
||||||
background-color: rgba($backgroundgray, 0.2);
|
|
||||||
border: 0.5px solid $lightgray;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: $darkgray;
|
|
||||||
margin: 16px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-box {
|
|
||||||
pre.prettyprint {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TERMINAL / SHELL TEXT STYLES
|
|
||||||
&[language=sh], &[language=bash] {
|
|
||||||
background-color: $darkgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: $accentblue;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
color: $offwhite;
|
|
||||||
@include mixins.font-size(16);
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
code-tabs {
|
|
||||||
margin: 16px 0;
|
|
||||||
|
|
||||||
.code-tab-group {
|
|
||||||
.mat-tab-label {
|
|
||||||
&:hover {
|
|
||||||
background: rgba(black, 0.04);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-tab-body {
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
.mat-tab-body-content {
|
|
||||||
height: auto;
|
|
||||||
transform: none;
|
|
||||||
|
|
||||||
.fadeIn {
|
|
||||||
animation: opacity 2s ease-in;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
code-example.avoid header,
|
|
||||||
code-example.avoidFile header {
|
|
||||||
border: 2px solid $anti-pattern;
|
|
||||||
background: $anti-pattern;
|
|
||||||
}
|
|
||||||
|
|
||||||
code-example.avoid,
|
|
||||||
code-example.avoidFile,
|
|
||||||
code-tabs.avoid mat-tab-body,
|
|
||||||
code-tabs.avoidFile mat-tab-body {
|
|
||||||
border: 0.5px solid $anti-pattern;
|
|
||||||
}
|
|
||||||
|
|
||||||
aio-code {
|
|
||||||
pre.prettyprint {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
min-height: 32px;
|
|
||||||
margin: 16px 24px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
code {
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
@include mixins.line-height(24);
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.linenums {
|
|
||||||
margin: 0;
|
|
||||||
color: color.adjust($mediumgray, $lightness: 25%);
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
font-family: $code-font;
|
|
||||||
font-size: 90%;
|
|
||||||
@include mixins.line-height(24);
|
|
||||||
|
|
||||||
&::marker {
|
|
||||||
color: color.adjust($mediumgray, $lightness: 25%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-missing {
|
|
||||||
color: $darkred;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-button {
|
|
||||||
position: absolute;
|
|
||||||
top: -7px;
|
|
||||||
right: -19px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: visible; // This is required for the button to be displayed correctly in IE11.
|
|
||||||
|
|
||||||
color: $blue-grey-200;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $mediumgray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.lang-sh, &.lang-bash {
|
|
||||||
.copy-button {
|
|
||||||
color: $mediumgray;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $lightgray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-content {
|
|
||||||
code {
|
|
||||||
a {
|
|
||||||
color: $darkblue;
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
|
||||||
> code {
|
|
||||||
background-color: rgba($lightgray, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: $deepgray;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(a) > code {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-guide-cheatsheet & {
|
|
||||||
td:first-of-type,
|
|
||||||
th {
|
|
||||||
code {
|
|
||||||
background-color: inherit;
|
|
||||||
padding: 0;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-anchor {
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRETTY PRINTING STYLES for prettify.js. */
|
|
||||||
|
|
||||||
/* 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 {
|
|
||||||
&[language=sh], &[language=bash] {
|
|
||||||
.pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
|
|
||||||
color: $codegreen;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -13,7 +13,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// TERMINAL / SHELL TEXT STYLES
|
// TERMINAL / SHELL TEXT STYLES
|
||||||
&.code-shell,
|
|
||||||
&[language="sh"],
|
&[language="sh"],
|
||||||
&[language="bash"] {
|
&[language="bash"] {
|
||||||
background-color: constants.$darkgray;
|
background-color: constants.$darkgray;
|
||||||
|
|
@ -96,7 +95,7 @@
|
||||||
|
|
||||||
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
||||||
> code {
|
> code {
|
||||||
background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.5));
|
background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.3));
|
||||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -200,7 +199,6 @@
|
||||||
/* SHELL / TERMINAL CODE BLOCKS */
|
/* SHELL / TERMINAL CODE BLOCKS */
|
||||||
|
|
||||||
code-example {
|
code-example {
|
||||||
&.code-shell,
|
|
||||||
&[language="sh"],
|
&[language="sh"],
|
||||||
&[language="bash"] {
|
&[language="bash"] {
|
||||||
.pnk,
|
.pnk,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue