honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): scope code example styles to the `<aio-code>` element (#40704) 

This commit ensures that all styles for the code examples (which are
defined in `_code.scss`) only apply to elements inside an `<aio-code>`
element. This will prevent the styles accidentally taking effect on a
different part of the app.

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:49:00 +02:00 committed by Alex Rickabaugh
parent b2ee4e2091
commit 852010e31a
1 changed files with 41 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
aio/src/styles/2-modules/_code.scss
View File

@ -27,7 +27,7 @@ code-example {
}
&.no-box {
pre {
pre.prettyprint {
margin: 0;
}
@ -93,7 +93,8 @@ code-tabs.avoidFile mat-tab-body {
}
aio-code {
pre {
pre.prettyprint {
position: relative;
display: flex;
min-height: 32px;
margin: 16px 24px;
@ -104,38 +105,50 @@ aio-code {
span {
@include line-height(24);
}
ol.linenums {
margin: 0;
font-family: $main-font;
color: #B3B6B7;
li {
margin: 0;
font-family: $code-font;
font-size: 90%;
@include line-height(24);
}
}
.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.
.code-missing {
color: $darkred;
}
color: $blue-grey-200;
background-color: transparent;
border: none;
cursor: pointer;
&:hover {
color: $mediumgray;
}
}
.copy-button {
position: absolute;
top: -7px;
right: -19px;
padding: 0;
overflow: visible; // This is required for the button to be displayed correctly in IE11.
&.lang-sh, &.lang-bash {
.copy-button {
color: $mediumgray;
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;
&:hover {
color: $lightgray;
}
}
}
}
}
@ -152,24 +165,6 @@ aio-code {
/* 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%;
@include line-height(24);
}
}
/* 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. */