infrastructure/web-assets
1
4
Fork 3
Code Issues 3 Pull Requests 1 Projects Releases 42 Wiki Activity

WIP: Form components extensions and improvements #94707

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

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
Conversation 4 Commits 12 Files Changed 3 +74 -76
2 changed files with 74 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8534beebec - Show all commits

110
src/index.html
View File

@ -1603,73 +1603,54 @@
<div class="col-md-12"> <div class="col-md-12">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label>Label for full width input</label> <label>Field with text only</label>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<span class="form-group-addon"><i class="bf-network"></i></span> <input class="form-control" placeholder="Default Text" type="text" />
<input class="form-control" placeholder="Full freakin width, from here << to theeeere >>"
type="text" />
</div> </div>
<label>Bunch of inputs on top of each other</label>
<div class="form-group">
<span class="form-group-addon"><i class="i-file-video-o"></i></span>
<input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
</div>
<p class="error">
Sorry, this field looks too awesome
</p>
</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>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<input type="text" class="form-control collection-user" placeholder="I've got a button!"> <input type="text" class="form-control collection-user" placeholder="I've got a button!">
<span class="form-group-addon"> <span class="form-group-addon">
<button title="Hi!"><i class="i-cancel"></i></button> <button title="Hi!"><i class="i-cancel"></i></button>
</span> </span>
</div> </div>
</div> <label for="city">City</label>
</div> <div class="form-group has-error">
<span class="form-group-addon"><i class="i-map-marker"></i></span>
<hr /> <input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam">
<div class="row">
<div class="col-md-6">
<label>This is just form-group, not large</label>
<div class="form-group width-full">
<input class="form-control" placeholder="Default Text" type="text" />
</div> </div>
</div> <p class="error">
<div class="col-md-6"> Can't hear you over the beauty of this field
<label>Video Example</label>
<div class="form-group form-group-lg width-full">
<span class="form-group-addon"><i class="i-reel"></i></span>
<input class="form-control" placeholder="Default Text" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
You can also add a <code>disabled</code> class to the <code>form-group</code>.
</p> </p>
</div> </div>
<div class="col-md-6">
<label>Video Example (disabled)</label>
<div class="form-group form-group-lg width-full">
<span class="form-group-addon"><i class="i-reel"></i></span>
<input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
</div>
</div>
</div> </div>
<hr /> <hr />
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label>Image Upload</label> <label>File Upload</label>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<span class="form-group-addon"><i class="i-image"></i></span> <span class="form-group-addon"><i class="i-file"></i></span>
<input class="form-control" type="file" /> <input class="form-control" type="file" />
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-6">
<label>Select the fastest render engine ever</label> <label>Select the fastest render engine ever</label>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<select class="form-control"> <select class="form-control">
<option>Blender Internal</option> <option>Blender Internal</option>
<option>Blender Eternal</option> <option>Blender Eternal</option>
@ -1680,10 +1661,8 @@
<option disabled>Deal with it.</option> <option disabled>Deal with it.</option>
</select> </select>
</div> </div>
</div>
<div class="col-md-3">
<label>Banana</label> <label>Banana</label>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<span class="form-group-addon"><i class="i-bug"></i></span> <span class="form-group-addon"><i class="i-bug"></i></span>
<select class="form-control"> <select class="form-control">
<option disabled>For Scale</option> <option disabled>For Scale</option>
@ -1698,7 +1677,7 @@
<div class="col-md-6"> <div class="col-md-6">
<label>Long stuff go in textareas</label> <label>Long stuff go in textareas</label>
<div class="form-group form-group-lg width-full"> <div class="form-group">
<textarea class="form-control" placeholder="Default Text"></textarea> <textarea class="form-control" placeholder="Default Text"></textarea>
</div> </div>
@ -1708,37 +1687,22 @@
<i class="i-send"></i> Send Stuff! <i class="i-send"></i> Send Stuff!
</button> </button>
</div> </div>
</div>
<hr>
<div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="form-check-label" for="work_travel">This is a checkbox.</label> <label class="form-check-label" for="work_travel">This is a checkbox.</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" id="work_travel" name="work_travel" <input class="form-check-input" id="work_travel" name="work_travel" placeholder="Are you available to travel?" type="checkbox">
placeholder="Are you available to travel?" type="checkbox">
</div> </div>
<label for="work_online">This one has form-group and form-group-lg</label>
<div class="form-group form-group-lg">
<input checked="" class="form-control" id="work_online" name="work_online"
placeholder="Are you available to travel?" type="checkbox">
</div>
<label>Bunch of inputs on top of each other</label>
<div class="form-group form-group-lg width-full disabled has-error">
<span class="form-group-addon"><i class="i-file-video-o"></i></span>
<input class="form-control" placeholder="Default Text (disabled)" type="text" />
</div>
<p class="error">
Sorry, this field looks too awesome
</p>
<label for="city">City</label>
<div class="form-group form-group-lg width-full has-error">
<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">
</div>
<p class="error">
Can't hear you over the beauty of this field
</p>
</div> </div>
<div class="col-md-6">
<label for="work_online">This one has form-group</label>
<div class="form-group">
<input checked="" class="form-control" id="work_online" name="work_online" placeholder="Are you available to travel?" type="checkbox">
</div>
</div>
</div>
</fieldset> </fieldset>
</form> </form>
<!-- // Forms. --> <!-- // Forms. -->

40
src/styles/_forms.sass
View File

@ -1,3 +1,4 @@
// TODO: refactor and organize styles
.form .form
+list-unstyled +list-unstyled
+inputs-generic +inputs-generic
@ -26,6 +27,16 @@
&:focus &:focus
border-color: var(--color-accent) border-color: var(--color-accent)
&[type="checkbox"],
&[type="radio"]
height: var(--spacer)
min-height: 0
width: auto
&[type="checkbox"]
&:hover
cursor: pointer
&[type="file"] &[type="file"]
padding: 0 padding: 0
@ -62,25 +73,29 @@ input,
background-color: var(--input-color-bg) background-color: var(--input-color-bg)
color: var(--color-text) color: var(--color-text)
height: calc(var(--spacer) * 2.5) min-height: calc(var(--spacer) * 2.5)
+padding(3, x) +padding(3, x)
+padding(2, y) +padding(2, y)
+media-sm +media-sm
height: var(--spacer-5) min-height: var(--spacer-5)
&:disabled &:disabled
--input-color-bg-hover: var(--input-color-bg) --input-color-bg-hover: var(--input-color-bg)
background-color: var(--input-color-bg)
cursor: not-allowed cursor: not-allowed
&::placeholder
color: var(--color-text-tertiary)
&:focus, &:focus,
&:hover &:hover
background-color: var(--input-color-bg-hover) background-color: var(--input-color-bg-hover)
color: var(--color-text) color: var(--color-text)
&::placeholder &::placeholder
color: var(--color-text-tertiary) color: var(--color-text-secondary)
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
opacity: 1 opacity: 1
@ -116,6 +131,10 @@ label sup,
position: absolute position: absolute
right: var(--spacer-2) right: var(--spacer-2)
&:has([type="checkbox"]),
&:has([type="radio"])
justify-content: start
.toggle-bar .toggle-bar
border: var(--border-width) solid var(--border-color) border: var(--border-width) solid var(--border-color)
border-radius: calc(var(--spacer) * 2) border-radius: calc(var(--spacer) * 2)
@ -177,3 +196,18 @@ label sup,
left: .2rem left: .2rem
height: 1.2rem height: 1.2rem
width: 1.2rem width: 1.2rem
select
&.form-control
&:hover
cursor: pointer
[type="checkbox"],
[type="radio"]
height: var(--spacer)
min-height: 0
width: auto
[type="checkbox"]
&:hover
cursor: pointer