From ae50e402167abccac9e69cd2c2ebbc8a0a1b5869 Mon Sep 17 00:00:00 2001 From: George Kalpakas <kalpakas.g@gmail.com> Date: Tue, 23 Feb 2021 16:49:18 +0200 Subject: [PATCH] refactor(docs-infra): move `.filter-button` styles inside `.group-buttons` (#40944) Since `.filter-button` elements only appear inside `.group-buttons` elements, this commit moves `.filter-button` CSS styles inside `.group-buttons` styles. PR Close #40944 --- aio/src/styles/2-modules/_buttons.scss | 43 +++++++++++++------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss index 80701be2a3..d04d093527 100644 --- a/aio/src/styles/2-modules/_buttons.scss +++ b/aio/src/styles/2-modules/_buttons.scss @@ -4,8 +4,10 @@ button { font-family: inherit; } -.button, -a.button.mat-button { +// This rule overrides some Angular Material styles defined for `.mat-button` +// (hence we include `.mat-button` in the selector). +a.button.mat-button, +.button { display: inline-block; @include line-height(32); padding: 0px 16px; @@ -87,31 +89,28 @@ a.button.mat-button { } } -a.filter-button { - width: 140px; - @include font-size(14); - padding: 0px 16px; - margin: 8px; - @include line-height(48); - border: 2px solid $blue; - border-radius: 4px; - - &:hover { - background-color: $blue; - color: $white; - } -} .group-buttons { margin: 32px auto; - a.selected { - background-color: $blue; - color: $white; - } + // 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; + border-radius: 4px; - @media (max-width: 480px) { - .filter-button.button { + &.selected, + &:hover { + background-color: $blue; + color: $white; + } + + @media (max-width: 480px) { font-size: 1.2rem; padding: 0; margin: 0;