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

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

Browse Source 
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

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

@ -27,7 +27,7 @@ code-example {
} }
&.no-box { &.no-box {
pre { pre.prettyprint {
margin: 0; margin: 0;
} }
@ -93,7 +93,8 @@ code-tabs.avoidFile mat-tab-body {
} }
aio-code { aio-code {
pre { pre.prettyprint {
position: relative;
display: flex; display: flex;
min-height: 32px; min-height: 32px;
margin: 16px 24px; margin: 16px 24px;
@ -104,17 +105,26 @@ aio-code {
span { span {
@include line-height(24); @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 {
.code-missing {
color: $darkred; color: $darkred;
} }
}
.copy-button {
.copy-button {
position: absolute; position: absolute;
top: -7px; top: -7px;
right: -19px; right: -19px;
@ -125,12 +135,13 @@ aio-code {
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $mediumgray; color: $mediumgray;
} }
} }
.lang-sh, .lang-bash { &.lang-sh, &.lang-bash {
.copy-button { .copy-button {
color: $mediumgray; color: $mediumgray;
@ -138,6 +149,8 @@ aio-code {
color: $lightgray; color: $lightgray;
} }
} }
}
}
} }
.sidenav-content { .sidenav-content {
@ -152,24 +165,6 @@ aio-code {
/* PRETTY PRINTING STYLES for prettify.js. */ /* 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*/ /* 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. */ /* SPAN elements with the classes below are added by prettyprint. */