Added frontend CSS file for product card

refs https://github.com/TryGhost/Team/issues/1233
This commit is contained in:
djordje vlaisavljevic 2021-12-07 17:25:22 +01:00
parent 16a73f7017
commit bf78df0e07

View File

@ -0,0 +1,104 @@
.kg-product-card {
display: flex;
background: transparent;
box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
border-radius: 5px;
flex-direction: column;
text-decoration: none;
min-width: 512px;
max-width: 512px;
padding: 20px;
}
.kg-product-card-image, .kg-product-card-image-placeholder {
margin-bottom: 1.6rem;
}
.kg-product-card-trash-icon svg {
width: 16px;
height: 16px;
}
.kg-product-card-trash-icon path {
fill: #15171a;
}
.kg-product-card-header {
display: flex;
align-items: flex-start;
}
.kg-product-card-title-container {
width: 100%;
}
.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;
}
.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;
}
.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;
}
.kg-product-card-rating-star {
display: flex;
align-items: center;
justify-content: center;
height: 2.4rem;
width: 2.4rem;
}
.kg-product-card-rating-star svg {
width: 16px;
height: 16px;
fill: #fff;
}
.kg-product-card-rating-edit .kg-product-card-rating-star:hover {
opacity: 0.7;
}
.kg-product-card-rating-edit {
background: none;
display: flex;
align-items: center;
}
.kg-product-card-rating-preview {
display: flex;
}
.kg-product-card-rating-star path {
fill: var(--whitegrey);
}
.kg-product-card-rating-active.kg-product-card-rating-star path {
fill: var(--darkgrey);
}