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

fix(docs-infra): improve card layout for different browser font sizes (#42533)

Browse Source 
Remove the fixed height set on the card elements present in angular.io,
allowing the cards to have a dynamic height derived from their content
and thus removing overflow issues related to the browser's font-size,
make other minor css related adjustments to allow the card to look good
on the different browser's font-size settings

PR Close #42533
This commit is contained in:
Dario Piotrowicz 2021-06-09 18:32:41 +01:00 committed by Alex Rickabaugh
parent f3a79878af
commit 3b81528ddd
3 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss
View File

@ -173,12 +173,11 @@ section#intro {
// ANGULAR LINE // ANGULAR LINE
.home-row .card { .home-row .card {
@include mixins.card(70%, auto); @include mixins.card(70%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
position: relative; position: relative;
width: 70%;
min-width: 350px; min-width: 350px;
height: auto; height: auto;
margin: auto; margin: auto;

18
aio/src/styles/2-modules/card/_card.scss
View File

@ -9,13 +9,14 @@
margin: 16px 0; margin: 16px 0;
.docs-card { .docs-card {
@include mixins.card(194px, 35%); @include mixins.card(35%);
max-width: 340px; max-width: 340px;
min-width: 300px; min-width: 300px;
margin: 24px 16px; margin: 24px 16px;
padding-bottom: 48px; display: flex;
position: relative; flex-direction: column;
justify-content: space-between;
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
width: 100%; width: 100%;
@ -27,7 +28,7 @@
@include mixins.font-size(20); @include mixins.font-size(20);
@include mixins.line-height(24); @include mixins.line-height(24);
margin: 0; margin: 0;
padding: 32px 0 24px; padding: 2.7rem 0 2.1rem;
text-transform: none; text-transform: none;
text-align: center; text-align: center;
} }
@ -37,16 +38,15 @@
@include mixins.line-height(24); @include mixins.line-height(24);
padding: 0 16px; padding: 0 16px;
margin: 0; margin: 0;
margin-bottom: 1.6rem;
text-align: center; text-align: center;
} }
.card-footer { .card-footer {
bottom: 0; margin-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
@include mixins.line-height(48); @include mixins.line-height(24);
left: 0; padding: 1.3rem 15px;
position: absolute;
right: 0;
text-align: right; text-align: right;
a { a {

3
aio/src/styles/_mixins.scss
View File

@ -47,8 +47,7 @@
} }
// INFO CARD SKELETON // INFO CARD SKELETON
@mixin card($height, $width) { @mixin card($width) {
height: $height;
width: $width; width: $width;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12); box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);