From 516de34778b71b94957efaae93ca784bb9bcc913 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 23 Feb 2021 16:49:19 +0200
Subject: [PATCH] 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
---
 aio/src/styles/2-modules/_buttons.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

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