Danny Morabito
dc9abee715
✨ Features added: - 🔍 Implement functional search in header navigation - ⚙️ Add basic user settings page - 📱 Make dashboard fully responsive 🔧 Enhancements: - 🎭 Standardize CSS with consistent theming across components - 🧹 Remove unused CSS for better performance - 📊 Improve dashboard layout and visual hierarchy - 📦 Redesign last block widget for better usability 💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { LitElement, css, html } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
|
|
@customElement('arx-card')
|
|
export class StyledFieldset extends LitElement {
|
|
static override styles = css`
|
|
:host {
|
|
display: block;
|
|
background: var(--color-base-200);
|
|
border-radius: var(--radius-box);
|
|
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
|
|
calc(var(--depth) * 8px)
|
|
oklch(from var(--color-base-content) l c h / 0.1),
|
|
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
|
|
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
|
|
padding: 32px;
|
|
margin-bottom: 32px;
|
|
border: var(--border) solid var(--color-base-300);
|
|
transition: all 0.3s ease;
|
|
&:hover {
|
|
box-shadow: calc(var(--depth) * 6px) calc(var(--depth) * 6px)
|
|
calc(var(--depth) * 12px)
|
|
oklch(from var(--color-base-content) l c h / 0.15),
|
|
calc(var(--depth) * -3px) calc(var(--depth) * -3px)
|
|
calc(var(--depth) * 8px)
|
|
oklch(from var(--color-base-100) l c h / 0.7);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
`;
|
|
|
|
override render() {
|
|
return html`<slot></slot>`;
|
|
}
|
|
}
|