Fix interval input styles

This commit is contained in:
jude 2023-07-30 13:22:57 +01:00
parent 8d2232f0da
commit e65429aa9c
2 changed files with 34 additions and 21 deletions

View File

@ -138,11 +138,20 @@ div.reminderContent {
} }
/* Interval inputs */ /* Interval inputs */
.div.interval-group .clear:focus { div.interval-group {
height: unset !important;
}
div.interval-group .clear:focus {
outline: none; outline: none;
box-shadow: none !important; box-shadow: none !important;
} }
div.interval-group .no-break {
text-wrap: avoid;
white-space: nowrap;
}
div.interval-group .clear { div.interval-group .clear {
border: none; border: none;
background: none; background: none;

View File

@ -170,26 +170,30 @@
<div class="control intervalSelector"> <div class="control intervalSelector">
<div class="input interval-group"> <div class="input interval-group">
<div class="interval-group-left"> <div class="interval-group-left">
<label> <span class="no-break">
<span class="is-sr-only">Interval months</span> <label>
<input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span> <span class="is-sr-only">Interval months</span>
</label> <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
<label> </label>
<span class="is-sr-only">Interval days</span> <label>
<input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span> <span class="is-sr-only">Interval days</span>
</label> <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
<label> </label>
<span class="is-sr-only">Interval hours</span> </span>
<input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">: <span class="no-break">
</label> <label>
<label> <span class="is-sr-only">Interval hours</span>
<span class="is-sr-only">Interval minutes</span> <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">: </label>
</label> <label>
<label> <span class="is-sr-only">Interval minutes</span>
<span class="is-sr-only">Interval seconds</span> <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS"> </label>
</label> <label>
<span class="is-sr-only">Interval seconds</span>
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
</label>
</span>
</div> </div>
<button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button> <button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
</div> </div>