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

87
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,38 +105,50 @@ 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 {
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: $blue-grey-200;
color: $darkred; background-color: transparent;
} border: none;
cursor: pointer;
&:hover {
color: $mediumgray;
}
}
.copy-button { &.lang-sh, &.lang-bash {
position: absolute; .copy-button {
top: -7px; color: $mediumgray;
right: -19px;
padding: 0;
overflow: visible; // This is required for the button to be displayed correctly in IE11.
color: $blue-grey-200; &:hover {
background-color: transparent; color: $lightgray;
border: none; }
cursor: pointer; }
&:hover {
color: $mediumgray;
}
}
.lang-sh, .lang-bash {
.copy-button {
color: $mediumgray;
&:hover {
color: $lightgray;
} }
} }
} }
@ -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. */