fix(docs-infra): make inline code stand out more (#40944)

This commit improves the styling of inline code blocks to make them
stand out more.

Before: ![code formatting before][1]
After: ![code formatting after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108554295-8e521080-72fc-11eb-94e8-09246ae334c8.png
[2]: https://user-images.githubusercontent.com/8604205/108553733-c9077900-72fb-11eb-8001-1f0baf8b95bc.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
This commit is contained in:
George Kalpakas 2021-02-23 16:49:19 +02:00 committed by Zach Arend
parent 516de34778
commit d97b45d82a
1 changed files with 12 additions and 1 deletions

View File

@ -102,6 +102,10 @@ aio-code {
align-items: center; align-items: center;
code { code {
a {
color: inherit;
}
span { span {
@include line-height(24); @include line-height(24);
} }
@ -159,12 +163,19 @@ aio-code {
.sidenav-content { .sidenav-content {
code { code {
a { a {
color: inherit; color: $darkblue;
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
} }
:not(h1, h2, h3, h4, h5, h6, pre) > code {
background-color: rgba($lightgray, 0.5);
border-radius: 4px;
color: $deepgray;
padding: 4px;
}
.code-anchor { .code-anchor {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;