Properly align date time input fields around suffix separator (#8462)

This commit is contained in:
Philip Allgaier 2021-03-09 20:38:26 +01:00 committed by GitHub
parent e2f07f6723
commit 7f21a2b319
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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