UNPKG

holakit

Version:

Yet another design-driven UI component set.

52 lines (44 loc) 1.16 kB
: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)); }