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

Updated frontend styles for product card

refs https://github.com/TryGhost/Team/issues/1245
This commit is contained in:
djordje vlaisavljevic 2021-12-07 20:15:57 +01:00
parent 27ced6cc84
commit 325de3e5cf

View file

@ -5,11 +5,17 @@
border-radius: 5px;
flex-direction: column;
text-decoration: none;
min-width: 512px;
max-width: 512px;
padding: 20px;
}
.kg-product-card-container {
align-items: center;
display: flex;
flex-direction: column;
width: 100%;
}
.kg-product-card-image, .kg-product-card-image-placeholder {
margin-bottom: 1.6rem;
}
@ -34,16 +40,16 @@
.kg-product-card-title, .kg-product-card-title h4 {
text-decoration: none;
color: #15171A;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
font-weight: 700 !important;
font-size: 1.9rem !important;
margin-top: 0;
margin-bottom: 0;
line-height: 1.4em;
}
.kg-product-card-title ::after {
font-weight: 700 !important;
font-size: 2rem !important;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
letter-spacing: .02rem;
line-height: 1.4em;
}
@ -51,20 +57,19 @@
.kg-product-card-description, .kg-product-card-description p {
font-size: 1.4rem !important;
line-height: 1.6em;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important;
color: #656E7A;
margin-top: 8px !important;
}
.kg-product-card-description ::after {
font-size: 1.4rem !important;
line-height: 1.6em;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important;
}
.kg-product-card-button {
width: 100%;
margin-top: 24px;
margin-top: 16px;
}
.kg-product-card-rating {
background: none;
display: flex;
align-items: center;
}
.kg-product-card-rating-star {
@ -72,7 +77,7 @@
align-items: center;
justify-content: center;
height: 2.4rem;
width: 2.4rem;
width: 2.0rem;
}
.kg-product-card-rating-star svg {
@ -96,9 +101,17 @@
}
.kg-product-card-rating-star path {
fill: var(--whitegrey);
fill: #ebeef0;
}
.kg-product-card-rating-active.kg-product-card-rating-star path {
fill: var(--darkgrey);
fill: #394047;
}
.kg-product-card-button {
justify-content: center;
}
.kg-product-card-button span {
font-size: 14px;
}