@vaadin/vaadin-lumo-styles 25.0.0-alpha15 → 25.0.0-alpha17

package/src/mixins/dashboard-item.css

@@ -6,12 +6,9 @@
 
 @media lumo_mixins_dashboard-item {
   :host {
-    box-sizing: border-box;
     --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
     --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
-    --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
     --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
-    --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
     --_widget-editable-shadow: var(--lumo-box-shadow-s);
     --_widget-selected-shadow:
       0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
@@ -32,166 +29,40 @@
     filter: var(--_widget-filter);
   }
 
-  :host([dragging]) * {
-    visibility: hidden;
-  }
-
-  :host(:not([editable])) [part~='move-button'],
-  :host(:not([editable])) [part~='remove-button'],
-  :host(:not([editable])) #focus-button,
-  :host(:not([editable])) #focus-button-wrapper,
-  :host(:not([editable])) .mode-controls {
-    display: none;
-  }
-
-  #focustrap {
-    display: contents;
-  }
-
-  #focus-button-wrapper,
-  #focus-button {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-  }
-
-  #focus-button {
-    pointer-events: none;
-    padding: 0;
-    border: none;
-  }
-
-  .mode-controls {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-  }
-
-  .mode-controls[hidden] {
-    display: none;
-  }
-
-  /* Move-mode buttons */
-  [part~='move-backward-button'],
-  [part~='move-forward-button'],
   [part~='move-apply-button'] {
-    position: absolute;
-    top: 50%;
-  }
-
-  [part~='move-backward-button'] {
-    inset-inline-start: 0;
-    transform: translateY(-50%);
-  }
-
-  [part~='move-forward-button'] {
-    inset-inline-end: 0;
-    transform: translateY(-50%);
-  }
-
-  [part~='move-apply-button'] {
-    left: 50%;
-    transform: translate(-50%, -50%);
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 
-  :host([first-child]) [part~='move-backward-button'],
-  :host([last-child]) [part~='move-forward-button'] {
-    display: none;
-  }
-
-  /* Resize-mode buttons */
-  [part~='resize-shrink-width-button'],
-  [part~='resize-shrink-height-button'],
-  [part~='resize-grow-width-button'],
-  [part~='resize-grow-height-button'],
-  [part~='resize-apply-button'] {
-    position: absolute;
-  }
-
-  [part~='resize-shrink-width-button'] {
-    inset-inline-end: 0;
-    top: 50%;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
-    transform: translateY(-50%);
-  }
-
-  [part~='resize-grow-width-button'] {
-    inset-inline-start: 100%;
-    top: 50%;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  :host([dir='rtl']) [part~='resize-grow-width-button'] {
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  [part~='resize-shrink-height-button'] {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
-
-  [part~='resize-grow-height-button'] {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
-
-  [part~='resize-apply-button'] {
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-  }
-
   :host([focused]) {
-    z-index: 1;
+    outline: none;
   }
 
   header {
     overflow: hidden;
-    display: flex;
     align-items: start;
-    box-sizing: border-box;
-    justify-content: space-between;
+    gap: 0;
   }
 
   [part='title'] {
-    flex: 1;
     color: var(--lumo-header-text-color);
-    white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
-    text-overflow: ellipsis;
-    overflow: hidden;
     line-height: var(--lumo-line-height-s);
     margin: 0 0 1px;
-    align-self: safe center;
   }
 
   vaadin-dashboard-button {
     font-family: 'lumo-icons';
     font-size: var(--lumo-icon-size-m);
     margin: 0;
-    z-index: 1;
   }
 
   vaadin-dashboard-button .icon::before {
     display: block;
     content: var(--icon);
+    background: transparent;
+    mask-image: none;
+    width: auto;
+    height: auto;
   }
 
   /* Common styles for non-mode edit buttons */
@@ -218,13 +89,11 @@
 
   /* Drag handle */
   [part~='move-button'] {
-    cursor: move;
     --icon: var(--lumo-icons-drag-handle);
   }
 
   /* Remove button */
   [part~='remove-button'] {
-    cursor: pointer;
     --icon: var(--lumo-icons-cross);
     margin-inline-start: var(--lumo-space-xs);
   }
@@ -236,17 +105,17 @@
 
   /* Move mode */
 
+  :host([move-mode]) :is([part~='move-forward-button'], [part~='move-backward-button']) .icon {
+    rotate: none;
+  }
+
   :host(:not([dir='rtl'])) [part~='move-backward-button'],
   :host([dir='rtl']) [part~='move-forward-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
   :host(:not([dir='rtl'])) [part~='move-forward-button'],
   :host([dir='rtl']) [part~='move-backward-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
     --icon: var(--lumo-icons-angle-right);
   }
 }

package/src/mixins/overlay.css

@@ -38,7 +38,7 @@
     /* CSS API for host */
     --vaadin-overlay-viewport-bottom: 0;
 
-    inset: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m);
+    inset: var(--vaadin-overlay-viewport-inset, var(--lumo-space-m));
     /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
     /* stylelint-disable-next-line */
     outline: 0px solid transparent;