From 7f21a2b3195ce2b9031080f5c66f07ce568cdfd3 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 9 Mar 2021 20:38:26 +0100
Subject: [PATCH] Properly align date time input fields around suffix separator
 (#8462)

---
 src/components/paper-time-input.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js
index 944360227d..c057b3dc36 100644
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -107,6 +107,10 @@ export class PaperTimeInput extends PolymerElement {
         #millisec {
           width: 38px;
         }
+
+        .no-suffix {
+          margin-left: -2px;
+        }
       </style>
 
       <label hidden$="[[hideLabel]]">[[label]]</label>
@@ -134,6 +138,7 @@ export class PaperTimeInput extends PolymerElement {
 
         <!-- Min Input -->
         <paper-input
+          class$="[[_computeClassNames(enableSecond)]]"
           id="min"
           type="number"
           value="{{min}}"
@@ -155,6 +160,7 @@ export class PaperTimeInput extends PolymerElement {
 
         <!-- Sec Input -->
         <paper-input
+          class$="[[_computeClassNames(enableMillisecond)]]"
           id="sec"
           type="number"
           value="{{sec}}"
@@ -479,6 +485,10 @@ export class PaperTimeInput extends PolymerElement {
   _equal(n1, n2) {
     return n1 === n2;
   }
+
+  _computeClassNames(hasSuffix) {
+    return hasSuffix ? " " : "no-suffix";
+  }
 }
 
 customElements.define("paper-time-input", PaperTimeInput);