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

fix(docs-infra): improve the appearance of `.filter-button` elements (#40944) 

This commit improves the appearance of `.filter-button` elements used to
jump between different categories in "Contributors" and "Resources" pages.

Before (wide screen): ![contributors buttons (wide screen) before][1]
Before (narrow screen): ![contributors buttons (narrow screen) before][2]
After (wide screen): ![contributors buttons (wide screen) after][3]
After (narrow screen): ![contributors buttons (narrow screen) after][4]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108414895-72376c00-7235-11eb-9537-7a7b059d09fe.png
[2]: https://user-images.githubusercontent.com/8604205/108414923-782d4d00-7235-11eb-8ba4-87a3a9ae14cd.png
[3]: https://user-images.githubusercontent.com/8604205/108414929-78c5e380-7235-11eb-807a-109b4200e64e.png
[4]: https://user-images.githubusercontent.com/8604205/108414942-7cf20100-7235-11eb-8ef0-9b2da397b3ee.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 ae50e40216
commit 516de34778
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
aio/src/styles/2-modules/_buttons.scss
View File

@ -8,6 +8,7 @@ button {
// (hence we include `.mat-button` in the selector). // (hence we include `.mat-button` in the selector).
a.button.mat-button, a.button.mat-button,
.button { .button {
color: inherit;
display: inline-block; display: inline-block;
@include line-height(32); @include line-height(32);
padding: 0px 16px; padding: 0px 16px;
@ -91,18 +92,18 @@ a.button.mat-button,
.group-buttons { .group-buttons {
margin: 32px auto; margin: 16px auto 32px;
// This rule overrides some Angular Material styles defined for `.mat-button` // This rule overrides some Angular Material styles defined for `.mat-button`
// (hence we include `.mat-button` in the selector). // (hence we include `.mat-button` in the selector).
a.button.mat-button.filter-button { a.button.mat-button.filter-button {
width: 140px; background-color: rgba($blue, 0.2);
@include font-size(14);
padding: 0px 16px;
margin: 8px;
@include line-height(48);
border: 2px solid $blue;
border-radius: 4px; border-radius: 4px;
@include font-size(16);
@include line-height(48);
margin: 8px;
padding: 0px 16px;
width: 168px;
&.selected, &.selected,
&:hover { &:hover {
@ -111,9 +112,8 @@ a.button.mat-button,
} }
@media (max-width: 480px) { @media (max-width: 480px) {
font-size: 1.2rem; @include font-size(14);
padding: 0; width: auto;
margin: 0;
} }
} }
} }