diff --git a/packages/aura/aura.css b/packages/aura/aura.css index c5ff382c4c..b53beaf42d 100644 --- a/packages/aura/aura.css +++ b/packages/aura/aura.css @@ -13,6 +13,7 @@ @import './src/components/card.css'; @import './src/components/checkbox-radio.css'; @import './src/components/date-picker.css'; +@import './src/components/dashboard.css'; @import './src/components/dialog.css'; @import './src/components/grid.css'; @import './src/components/input-container.css'; diff --git a/packages/aura/src/components/dashboard.css b/packages/aura/src/components/dashboard.css new file mode 100644 index 0000000000..724a3d8ae8 --- /dev/null +++ b/packages/aura/src/components/dashboard.css @@ -0,0 +1,112 @@ +:where(:root, :host) { + --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium); + --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m); + --vaadin-dashboard-header-gap: var(--vaadin-gap-xs); + --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary); + --vaadin-dashboard-widget-background: var(--aura-surface) padding-box; + --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m); +} + +vaadin-dashboard-widget { + border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px)); + + &::before { + inset: calc(var(--vaadin-dashboard-widget-border-width, 1px) * -1); + border-radius: var(--vaadin-dashboard-widget-border-radius); + } + + &::part(content) { + transition: 200ms; + transition-property: filter, opacity; + } + + &:is([resize-mode], [move-mode])::part(content) { + opacity: 0.75; + filter: blur(10px); + clip-path: inset(0); + transition-duration: 50ms; + } +} + +vaadin-dashboard-section { + vaadin-dashboard-widget { + transition: 200ms; + transition-property: filter, opacity; + } + + &[move-mode] vaadin-dashboard-widget { + opacity: 0.75; + filter: blur(10px); + clip-path: inset(0); + transition-duration: 50ms; + } +} + +:is(vaadin-dashboard-widget, vaadin-dashboard-section) { + &::part(move-forward-button), + &::part(move-backward-button), + &::part(resize-shrink-height-button), + &::part(resize-grow-height-button), + &::part(resize-shrink-width-button), + &::part(resize-grow-width-button) { + background: var(--aura-surface) padding-box; + color: var(--vaadin-text-color-secondary); + border: 1px solid var(--vaadin-border-color); + transition: 120ms color; + outline-offset: -1px; + } + + &::part(resize-shrink-height-button), + &::part(resize-grow-height-button) { + margin-top: 0; + border-bottom: 0; + } + + &::part(move-forward-button), + &::part(resize-shrink-width-button), + &::part(resize-grow-width-button) { + margin-inline-start: 0; + border-inline-end: 0; + } + + &::part(move-backward-button) { + margin-inline-end: 0; + border-inline-start: 0; + } + + &::part(move-apply-button), + &::part(resize-apply-button) { + background: var(--aura-accent-color); + color: var(--aura-accent-contrast); + box-shadow: 0 0 0 3px var(--aura-surface); + outline-offset: 2px; + } + + &::part(move-button), + &::part(remove-button), + &::part(resize-button) { + color: var(--vaadin-text-color-disabled); + transition: 120ms color; + outline-offset: -2px; + } + + &[editable] { + --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs); + } +} + +@media (any-hover: hover) { + :is(vaadin-dashboard-widget, vaadin-dashboard-section) { + &::part(move-button):hover, + &::part(remove-button):hover, + &::part(resize-button):hover, + &::part(move-forward-button):hover, + &::part(move-backward-button):hover, + &::part(resize-shrink-height-button):hover, + &::part(resize-grow-height-button):hover, + &::part(resize-shrink-width-button):hover, + &::part(resize-grow-width-button):hover { + color: var(--vaadin-text-color); + } + } +} diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css index fc38c087b7..ce34b63237 100644 --- a/packages/aura/src/surface.css +++ b/packages/aura/src/surface.css @@ -13,6 +13,7 @@ vaadin-button, vaadin-card, vaadin-checkbox::part(checkbox), vaadin-details[theme~='filled'], +vaadin-dashboard-widget, vaadin-master-detail-layout::part(detail), vaadin-menu-bar-button, vaadin-message-input,