refactor(docs-infra): clean up styles in `_card.scss` (#40427)

This commit cleans up the styles in `_card.scss` by:
- Fixing incosistenct indentation/newlines.
- Removing rules for unused selectors.
- Removing unnecessary styles.

PR Close #40427
This commit is contained in:
George Kalpakas 2021-02-02 14:35:45 +02:00 committed by Misko Hevery
parent 7379caa4b2
commit 6adf582510
1 changed files with 57 additions and 71 deletions

View File

@ -1,83 +1,70 @@
.card-container { .card-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin: 16px 0; margin: 16px 0;
.docs-card { .docs-card {
@include card(194px, 30%); @include card(194px, 30%);
max-width: 340px; max-width: 340px;
min-width: 262px; min-width: 262px;
margin: 24px 8px; margin: 24px 8px;
padding-bottom: 48px; padding-bottom: 48px;
position: relative; position: relative;
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
width: 100%; width: 100%;
margin: 8px auto; margin: 8px auto;
max-width: none; max-width: none;
} }
&:hover {
text-decoration: none;
section {
color: $blue;
}
p {
color: $darkgray;
padding: 0 16px;
}
.card-footer {
@include line-height(32);
padding: 8px 16px;
background-color: rgba($blue, 0.1);
color: $blue;
}
}
&:hover {
section { section {
color: $deepgray; color: $blue;
@include font-size(20);
@include line-height(24);
margin: 0;
padding: 32px 0 24px;
text-transform: none;
text-align: center;
}
p {
color: $darkgray;
@include font-size(13);
@include line-height(24);
padding: 0 16px;
margin: 0;
text-align: center;
} }
.card-footer { .card-footer {
bottom: 0; background-color: rgba($blue, 0.1);
border-top: 0.5px solid $lightgray; color: $blue;
box-sizing: border-box;
@include line-height(48);
left: 0;
position: absolute;
right: 0;
text-align: right;
color: $mediumgray;
a {
color: $mediumgray;
@include font-size(13);
}
}
.card-footer.center {
text-align: center;
} }
} }
section {
color: $deepgray;
@include font-size(20);
@include line-height(24);
margin: 0;
padding: 32px 0 24px;
text-transform: none;
text-align: center;
}
p {
color: $darkgray;
@include font-size(13);
@include line-height(24);
padding: 0 16px;
margin: 0;
text-align: center;
}
.card-footer {
bottom: 0;
border-top: 0.5px solid $lightgray;
box-sizing: border-box;
@include line-height(48);
left: 0;
position: absolute;
right: 0;
text-align: right;
color: $mediumgray;
a {
color: $mediumgray;
@include font-size(13);
}
}
}
} }
.card-section { .card-section {
@ -107,5 +94,4 @@
button { button {
text-align: center; text-align: center;
} }
} }