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
|
||||
&.code-shell,
|
||||
&[language="sh"],
|
||||
&[language="bash"] {
|
||||
background-color: constants.$darkgray;
|
||||
|
|
@ -96,7 +95,7 @@
|
|||
|
||||
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
||||
> 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -200,7 +199,6 @@
|
|||
/* SHELL / TERMINAL CODE BLOCKS */
|
||||
|
||||
code-example {
|
||||
&.code-shell,
|
||||
&[language="sh"],
|
||||
&[language="bash"] {
|
||||
.pnk,
|
||||
|
|
|
|||
Loading…
Reference in New Issue