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

refactor(docs-infra): merge style rules in `_code.scss` (#40704) 

This commit cleans up the styles in `_code.scss` by merging together
blocks that target the same elements.

It also normalizes the rules targeting Angular Material tabs to use
consistent selectors and use class names instead of tag names.

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

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

@ -1,15 +1,23 @@
code-example,
code-tabs {
clear: both;
display: block;
clear: both;
display: block;
ol {
list-style: decimal;
}
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;
@ -22,6 +30,7 @@ code-example {
pre {
margin: 0;
}
code {
background-color: transparent;
}
@ -30,34 +39,44 @@ code-example {
code {
overflow: auto;
}
}
code-example, code-tabs {
.mat-card {
padding: 0;
border-radius: 5px;
// TERMINAL / SHELL TEXT STYLES
&.code-shell, &[language=sh], &[language=bash] {
background-color: $darkgray;
}
code {
overflow: auto;
header {
background-color: $accentblue;
border-radius: 5px 5px 0 0;
color: $offwhite;
@include font-size(16);
padding: 8px 16px;
}
}
code-tabs {
margin: 16px 0;
}
// TERMINAL / SHELL TEXT STYLES
.code-tab-group {
.mat-tab-label {
&:hover {
background: rgba(black, 0.04);
}
}
code-example.code-shell, code-example[language=sh], code-example[language=bash] {
background-color: $darkgray;
}
.mat-tab-body {
overflow-y: hidden;
code-example header {
background-color: $accentblue;
border-radius: 5px 5px 0 0;
color: $offwhite;
@include font-size(16);
padding: 8px 16px;
.mat-tab-body-content {
height: auto;
transform: none;
.fadeIn {
animation: opacity 2s ease-in;
}
}
}
}
}
code-example.avoid header,
@ -73,24 +92,20 @@ code-tabs.avoidFile mat-tab-body {
border: 0.5px solid $anti-pattern;
}
code-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {
overflow-y: hidden;
}
code-tabs mat-tab-body-content .fadeIn {
animation: opacity 2s ease-in;
}
aio-code pre {
aio-code {
pre {
display: flex;
min-height: 32px;
margin: 16px 24px;
white-space: pre-wrap;
align-items: center;
code span {
@include line-height(24);
code {
span {
@include line-height(24);
}
}
}
}
@ -115,30 +130,26 @@ aio-code pre {
}
}
.lang-sh .copy-button, .lang-bash .copy-button {
color: $mediumgray;
&:hover {
color: $lightgray;
.lang-sh, .lang-bash {
.copy-button {
color: $mediumgray;
&:hover {
color: $lightgray;
}
}
}
.code-tab-group .mat-tab-label {
&:hover {
background: rgba(black, 0.04);
.sidenav-content {
code {
a {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
}
}
.code-tab-group .mat-tab-body-content {
height: auto;
transform: none;
}
.sidenav-content code a {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
/* PRETTY PRINTING STYLES for prettify.js. */
.prettyprint {
@ -194,8 +205,10 @@ ol.linenums {
/* SHELL / TERMINAL CODE BLOCKS */
code-example.code-shell, code-example[language=sh], code-example[language=bash] {
.pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
color: $codegreen;
code-example {
&.code-shell, &[language=sh], &[language=bash] {
.pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
color: $codegreen;
}
}
}