Browse code
Update
Benjamin Roth authored on04/02/2026 16:01:58 Showing1 changed files
| ... | ... |
@@ -3,12 +3,22 @@ import { LitElement, html, css } from 'lit';
|
| 3 | 3 |
export class LuumicoreCard extends LitElement {
|
| 4 | 4 |
static styles = css` |
| 5 | 5 |
:host {
|
| 6 |
+ --luumicore-card-bg: var(--luumicore-secondary, #fff); |
|
| 7 |
+ --luumicore-card-border-color: var(--luumicore-secondary, #fff); |
|
| 8 |
+ --luumicore-card-border-radius: var(--luumicore-border-radius, 1rem); |
|
| 9 |
+ --luumicore-card-shadow: var(--luumicore-shadow, .25rem .25rem 1rem rgba(0,0,0,0.2)); |
|
| 10 |
+ --luumicore-card-spacing: var(--luumicore-element-spacing, 2rem); |
|
| 11 |
+ |
|
| 6 | 12 |
display: block; |
| 7 |
- border: 1px solid var(--luumicore-border-color, #ddd); |
|
| 8 |
- border-radius: var(--luumicore-border-radius, 8px); |
|
| 13 |
+ border: 1px solid var(--luumicore-card-border-color); |
|
| 14 |
+ border-radius: var(--luumicore-card-border-radius); |
|
| 9 | 15 |
overflow: hidden; |
| 10 |
- background-color: var(--luumicore-card-bg, #fff); |
|
| 11 |
- box-shadow: var(--luumicore-shadow, 0 2px 4px rgba(0,0,0,0.1)); |
|
| 16 |
+ background-color: var(--luumicore-card-bg); |
|
| 17 |
+ box-shadow: var(--luumicore-card-shadow); |
|
| 18 |
+ } |
|
| 19 |
+ |
|
| 20 |
+ :host(:not(:last-child)) {
|
|
| 21 |
+ margin-bottom: var(--luumicore-card-spacing); |
|
| 12 | 22 |
} |
| 13 | 23 |
|
| 14 | 24 |
.card-image {
|
Browse code
Add some temporary lit test components for development purposes
Benjamin Roth authored on29/12/2025 19:27:44 Showing1 changed files
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,60 @@ |
| 1 |
+import { LitElement, html, css } from 'lit';
|
|
| 2 |
+ |
|
| 3 |
+export class LuumicoreCard extends LitElement {
|
|
| 4 |
+ static styles = css` |
|
| 5 |
+ :host {
|
|
| 6 |
+ display: block; |
|
| 7 |
+ border: 1px solid var(--luumicore-border-color, #ddd); |
|
| 8 |
+ border-radius: var(--luumicore-border-radius, 8px); |
|
| 9 |
+ overflow: hidden; |
|
| 10 |
+ background-color: var(--luumicore-card-bg, #fff); |
|
| 11 |
+ box-shadow: var(--luumicore-shadow, 0 2px 4px rgba(0,0,0,0.1)); |
|
| 12 |
+ } |
|
| 13 |
+ |
|
| 14 |
+ .card-image {
|
|
| 15 |
+ width: 100%; |
|
| 16 |
+ height: auto; |
|
| 17 |
+ display: block; |
|
| 18 |
+ } |
|
| 19 |
+ |
|
| 20 |
+ .card-header {
|
|
| 21 |
+ padding: var(--luumicore-spacing, 16px); |
|
| 22 |
+ border-bottom: 1px solid var(--luumicore-border-color, #ddd); |
|
| 23 |
+ font-weight: bold; |
|
| 24 |
+ background-color: var(--luumicore-header-bg, #f8f9fa); |
|
| 25 |
+ } |
|
| 26 |
+ |
|
| 27 |
+ .card-body {
|
|
| 28 |
+ padding: var(--luumicore-spacing, 16px); |
|
| 29 |
+ } |
|
| 30 |
+ |
|
| 31 |
+ .card-footer {
|
|
| 32 |
+ padding: var(--luumicore-spacing, 16px); |
|
| 33 |
+ border-top: 1px solid var(--luumicore-border-color, #ddd); |
|
| 34 |
+ background-color: var(--luumicore-footer-bg, #f8f9fa); |
|
| 35 |
+ } |
|
| 36 |
+ `; |
|
| 37 |
+ |
|
| 38 |
+ static properties = {
|
|
| 39 |
+ imageUrl: { type: String, attribute: 'image-url' },
|
|
| 40 |
+ imageAlt: { type: String, attribute: 'image-alt' },
|
|
| 41 |
+ }; |
|
| 42 |
+ |
|
| 43 |
+ render() {
|
|
| 44 |
+ return html` |
|
| 45 |
+ ${this.imageUrl
|
|
| 46 |
+ ? html`<img class="card-image" src="${this.imageUrl}" alt="${this.imageAlt || ''}" />`
|
|
| 47 |
+ : ''} |
|
| 48 |
+ |
|
| 49 |
+ <slot name="header" class="card-header-slot"></slot> |
|
| 50 |
+ |
|
| 51 |
+ <div class="card-body"> |
|
| 52 |
+ <slot></slot> |
|
| 53 |
+ </div> |
|
| 54 |
+ |
|
| 55 |
+ <slot name="footer" class="card-footer-slot"></slot> |
|
| 56 |
+ `; |
|
| 57 |
+ } |
|
| 58 |
+} |
|
| 59 |
+ |
|
| 60 |
+customElements.define('luumicore-card', LuumicoreCard);
|