UNPKG

holakit

Version:

Yet another design-driven UI component set.

github.com/teamhola/holakit

teamhola/holakit

14 lines (11 loc) • 2.58 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*! Built with http://stenciljs.com */ const { h } = window.HolakitCore; class HolaCard { render() { return h("slot", null); } static get is() { return "hola-card"; } static get encapsulation() { return "shadow"; } static get style() { return ":host {\n /**\n * \@prop --hola-card-padding: Specify the padding of cards. Currently it only\n * affects normal size cards.\n */\n --hola-card-padding: 2.5rem;\n\n /**\n * \@prop --hola-card-gap: Specify the gap between cards. It's shared across\n * both vertical and horizonal.\n */\n --hola-card-gap: 2rem\n}\n\n\@media (max-width: 700px) {\n\n:host {\n --hola-card-padding: 1.6rem;\n --hola-card-gap: 2.5vw /* (100vw - 95vw) / 2 */\n}\n }\n\n:host {\n display: block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: var(--hola-card-padding);\n background: #fff;\n -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);\n color: rgba(0, 0, 0, 0.8);\n color: var(--hola-text-dark-color);\n background-size: cover;\n background-position: center;\n}\n\n::slotted(*) {\n text-decoration: none;\n color: inherit;\n}\n\n::slotted(p) {\n line-height: 22px;\n}\n\n::slotted(.title) {\n margin-bottom: 2rem;\n margin-bottom: var(--hola-element-gap);\n}\n\n:host([with-image]) ::slotted(img:first-child) {\n margin: calc(0rem - var(--hola-card-padding))\n calc(0rem - var(--hola-card-padding)) 2rem\n calc(0rem - var(--hola-card-padding));\n width: calc(100% + 2 * var(--hola-card-padding));\n}\n\n:host([full-image]) ::slotted(img) {\n margin: calc(0rem - var(--hola-card-padding));\n width: calc(100% + 2 * var(--hola-card-padding));\n}\n\n\n:host([tiny]) {\n display: inline-block;\n padding: 0.7rem;\n width: 13rem\n}\n\n\@media (max-width: 700px) {\n\n:host([tiny]) {\n width: 8rem\n}\n }\n\n:host([tiny])::slotted(.title) {\n margin-bottom: 0.5rem;\n white-space: normal;\n}\n\n:host([tiny][with-image])::slotted(img:first-child) {\n margin: -0.7rem -0.7rem 1.2rem -0.7rem;\n width: calc(100% + 1.4rem);\n}\n\n\n:host([list]) {\n padding: 0;\n overflow: hidden;\n}\n:host([list]) ::slotted(.item) {\n display: block;\n padding: calc(var(--hola-card-padding) / 2) var(--hola-card-padding);\n margin-bottom: 3px;\n -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09), 0 -1px 3px rgba(0, 0, 0, 0.07);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09), 0 -1px 3px rgba(0, 0, 0, 0.07);\n}\n:host([list]) ::slotted(.item:last-child) {\n margin-bottom: 0;\n}"; } } export { HolaCard };