Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Switched product card frontend to CSS grid

Browse source 
https://github.com/TryGhost/Team/issues/1245
This commit is contained in:
djordje vlaisavljevic 2021-12-11 17:01:15 +01:00
parent 1c4b151cfc
commit d55e44e5e9
1 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
core/frontend/src/cards/css/product.css
View file

@ -1,14 +1,15 @@
.kg-product-card-container { .kg-product-card-container {
display: flex;
background: transparent; background: transparent;
box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%); box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
border-radius: 5px; border-radius: 5px;
flex-direction: column; flex-direction: column;
text-decoration: none;
max-width: 550px; max-width: 550px;
padding: 20px; padding: 20px;
width: 100%;
align-items: center; align-items: center;
display: grid;
width: 100%;
grid-template-columns: auto 100px;
gap: 16px;
} }
.kg-product-card { .kg-product-card {
@ -19,20 +20,11 @@
} }
.kg-product-card-image { .kg-product-card-image {
margin-bottom: 1.6rem; grid-column: 1 / 3;
}
.kg-product-card-header {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
} }
.kg-product-card-title-container { .kg-product-card-title-container {
flex: 2 1 250px; grid-column: 1 / 2;
} }
.kg-product-card-title { .kg-product-card-title {
@ -48,8 +40,7 @@
font-size: 1em; font-size: 1em;
line-height: 1.4em; line-height: 1.4em;
opacity: .7; opacity: .7;
margin-top: 8px; grid-column: 1 / 3;
width: 100%;
} }
.kg-product-card-description p+p { .kg-product-card-description p+p {
@ -58,20 +49,23 @@
.kg-product-card-button { .kg-product-card-button {
width: 100%; width: 100%;
margin-top: 16px; grid-column: 1 / 3;
} }
.kg-product-card-rating { .kg-product-card-rating {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 0 0 100px; flex: 0 0 100px;
grid-column: 2 / 3;
align-self: start;
justify-self: end;
} }
.kg-product-card-rating-star { .kg-product-card-rating-star {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 32px; height: 28px;
width: 20px; width: 20px;
} }