holakit
Version:
Yet another design-driven UI component set.
52 lines (44 loc) • 1.16 kB
Plain Text
:host {
--hola-card-padding: 2.5rem;
--hola-card-gap: 2rem
}
@media (max-width: 700px) {
:host {
--hola-card-padding: 1.6rem;
--hola-card-gap: 2.5vw /* (100vw - 95vw) / 2 */
}
}
:host {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--hola-card-padding);
background: #fff;
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
color: var(--hola-text-dark-color);
background-size: cover;
background-position: center;
}
:slotted(*) {
text-decoration: none;
color: inherit;
}
:slotted(p) {
line-height: 22px;
}
:slotted(.title) {
margin-bottom: 2rem;
margin-bottom: var(--hola-element-gap);
}
:host([with-image]) :slotted(hola-image:first-child, img:first-child) {
margin: calc(0rem - var(--hola-card-padding))
calc(0rem - var(--hola-card-padding)) 2rem
calc(0rem - var(--hola-card-padding));
width: calc(100% + 2 * var(--hola-card-padding));
}
:host([full-image]) :slotted(img, hola-image) {
margin: calc(0rem - var(--hola-card-padding));
width: calc(100% + 2 * var(--hola-card-padding));
}