honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(docs-infra): move .filter-button styles inside .group-buttons (#40944)

Browse Source 
Since `.filter-button` elements only appear inside `.group-buttons`
elements, this commit moves `.filter-button` CSS styles inside
`.group-buttons` styles.

PR Close #40944
This commit is contained in:
George Kalpakas 2021-02-23 16:49:18 +02:00 committed by Zach Arend
parent d6f6197728
commit ae50e40216
1 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,10 @@ button {
font-family: inherit; font-family: inherit;
} }
.button, // This rule overrides some Angular Material styles defined for `.mat-button`
a.button.mat-button { // (hence we include `.mat-button` in the selector).
a.button.mat-button,
.button {
display: inline-block; display: inline-block;
@include line-height(32); @include line-height(32);
padding: 0px 16px; padding: 0px 16px;
@ -87,7 +89,13 @@ a.button.mat-button {
} }
} }
a.filter-button {
.group-buttons {
margin: 32px auto;
// 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; width: 140px;
@include font-size(14); @include font-size(14);
padding: 0px 16px; padding: 0px 16px;
@ -96,22 +104,13 @@ a.filter-button {
border: 2px solid $blue; border: 2px solid $blue;
border-radius: 4px; border-radius: 4px;
&.selected,
&:hover { &:hover {
background-color: $blue; background-color: $blue;
color: $white; color: $white;
} }
}
.group-buttons {
margin: 32px auto;
a.selected {
background-color: $blue;
color: $white;
}
@media (max-width: 480px) { @media (max-width: 480px) {
.filter-button.button {
font-size: 1.2rem; font-size: 1.2rem;
padding: 0; padding: 0;
margin: 0; margin: 0;