refactor: lint CSS in Lumo mixins, fix Stylelint warnings (#10564)

Author: web-padawan

package.json

@@ -13,7 +13,7 @@
     "dev:start": "yarn workspace dev start",
     "icons": "lerna run icons",
     "lint": "npm-run-all --parallel lint:*",
-    "lint:css": "stylelint --ignore-path .gitignore \"packages/**/src/**/*.js\" \"packages/**/*.css\" \"dev/**/*.html\"",
+    "lint:css": "stylelint --ignore-path .gitignore \"packages/**/src/**/*.js\" \"packages/vaadin-lumo-styles/mixins/*.js\" \"packages/**/*.css\" \"dev/**/*.html\"",
     "lint:js": "eslint",
     "lint:types": "tsc",
     "postinstall": "patch-package",

packages/vaadin-lumo-styles/mixins/input-field-shared.js

@@ -130,6 +130,7 @@ const inputField = css`
     25% {
       transform: translateX(4px);
     }
+
     75% {
       transform: translateX(-4px);
     }

packages/vaadin-lumo-styles/mixins/menu-overlay.js

@@ -48,10 +48,7 @@ const menuOverlayExt = css`
   /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
   @media (max-width: 450px), (max-height: 450px) {
     :host {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
+      inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 !important;
       align-items: stretch !important;
       justify-content: flex-end !important;
     }

packages/vaadin-lumo-styles/mixins/overlay.js

@@ -10,10 +10,7 @@ issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
 
 const overlay = css`
   :host {
-    top: var(--lumo-space-m);
-    right: var(--lumo-space-m);
-    bottom: var(--lumo-space-m);
-    left: 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;

packages/vaadin-lumo-styles/mixins/required-field.js

@@ -16,8 +16,7 @@ const requiredField = css`
     font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
     transition: color 0.2s;
     line-height: 1;
-    padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
-    padding-inline-end: 1em;
+    padding-inline: calc(var(--lumo-border-radius-m) / 4) 1em;
     padding-bottom: 0.5em;
     /* As a workaround for diacritics being cut off, add a top padding and a
     negative margin to compensate */