WIP: Form components extensions and improvements #94707

Draft
Márton Lente wants to merge 12 commits from component-forms into v2

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
2 changed files with 7 additions and 9 deletions
Showing only changes of commit d418b05dbe - Show all commits

View File

@ -1614,10 +1614,10 @@
<div class="form-group"> <div class="form-group">
<span class="form-group-addon"><i class="i-file-video-o"></i></span> <span class="form-group-addon"><i class="i-file-video-o"></i></span>
<input class="form-control" placeholder="Default Text (disabled)" type="text" disabled /> <input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
</div> <div class="form-text">
<p class="error">
Sorry, this field looks too awesome Sorry, this field looks too awesome
</p> </div>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="last_name">Field with button on the right</label> <label for="last_name">Field with button on the right</label>
@ -1631,10 +1631,10 @@
<div class="form-group has-error"> <div class="form-group has-error">
<span class="form-group-addon"><i class="i-map-marker"></i></span> <span class="form-group-addon"><i class="i-map-marker"></i></span>
<input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam"> <input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam">
</div> <div class="form-text">
<p class="error">
Can't hear you over the beauty of this field Can't hear you over the beauty of this field
</p> </div>
</div>
</div> </div>
</div> </div>

View File

@ -122,14 +122,12 @@ label sup,
text-decoration: underline text-decoration: underline
.form-group .form-group
align-items: center
display: flex
justify-content: end
position: relative position: relative
.form-group-addon .form-group-addon
position: absolute position: absolute
right: var(--spacer-2) right: var(--spacer-2)
top: var(--spacer-2)
&:has([type="checkbox"]), &:has([type="checkbox"]),
&:has([type="radio"]) &:has([type="radio"])