Building and testing form module
This commit is contained in:
Angelos Chalaris
parent
b3ad255007
commit
6365aa0a0f
5 changed files with 80 additions and 19 deletions
|
|
@ -202,3 +202,10 @@
|
|||
- Added a list of `TODO`s in the `form` module, tried some base styling just to make sure everything works.
|
||||
- Moved style links at the very top of the `<head>` of the page.
|
||||
- Updated live demo with latest stylesheet (again).
|
||||
|
||||
## 20161026
|
||||
|
||||
- Added `textarea` and `select` to the `form` `input` styling.
|
||||
- Added rule for `:not([type="hidden"])`.
|
||||
- Added `form` element styling (hardcoded still).
|
||||
- Added demo forms for inline and aligned.
|
||||
|
|
@ -272,18 +272,48 @@
|
|||
<input type="submit" value="Large submit button" class="large">
|
||||
<label disabled class="button small primary">Small primary disabled label button</label><br>
|
||||
<h3>Forms</h3>
|
||||
<p>Forms are pre-styled as well and they offer consistency across all inputs. There are options for normal forms (unaligned) or inline forms (horizontal), as well as aligned forms, that utilise the grid system to present their content. Below are some examples:</p>
|
||||
<p>Forms are inline by default and the input elements have been customized to offer consistency across all inputs. You can make elements take up as much as space as you want (e.g. using <code>width="100%"</code>) and utilize the grid system to make forms aligned. Below are some examples:</p>
|
||||
<form>
|
||||
<input type="text" value="text">
|
||||
<input type="color">
|
||||
<input type="email" value="mail@mail.com">
|
||||
<input type="hidden" value="hidden">
|
||||
<input type="number" value="4">
|
||||
<input type="password" value="password">
|
||||
<input type="range" value="4">
|
||||
<input type="search">
|
||||
<input type="url" value="data.google.com">
|
||||
<input value="normal">
|
||||
<strong>Inline form (default style):</strong><br>
|
||||
<label for="username">Username</label> <input type="text" value="" id="username" placeholder="Username">
|
||||
<label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">
|
||||
<label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"><br><br>
|
||||
<strong>Aligned form (using <code>width</code> and grid):</strong><br>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-2" style="text-align:right;">
|
||||
<label for="website" style="vertical-align: text-top;">Website</label>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<input type="text" value="" id="website" placeholder="Website" style="width:85%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2" style="text-align:right;">
|
||||
<label for="weburl" style="vertical-align: text-top;">URL</label>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2" style="text-align:right;">
|
||||
<label for="desc" style="vertical-align: text-top;">Description</label>
|
||||
</div>
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<textarea type="url" value="" id="desc" placeholder="Description" style="width:85%;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div><br>
|
||||
<input type="color">
|
||||
<input type="hidden" value="hidden">
|
||||
<input type="number" value="4">
|
||||
<input type="range" value="4">
|
||||
<input type="search">
|
||||
<select>
|
||||
<option>Test</option>
|
||||
<option>Demo</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -606,12 +606,23 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
|||
input[type="file"] {
|
||||
display: none; }
|
||||
|
||||
input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]) {
|
||||
form {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 0;
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
box-shadow: 0.1px 1px 3px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
|
||||
textarea, select {
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
color: #212121;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle; }
|
||||
vertical-align: baseline;
|
||||
margin: 2px;
|
||||
padding: 2px 4px; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Firefox.
|
||||
|
|
|
|||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +1,33 @@
|
|||
// Definitions for forms and input elements.
|
||||
// Different elements are styled based on the same set of rules.
|
||||
|
||||
input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]) {
|
||||
form {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 0;
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
box-shadow: 0.1px 1px 3px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
|
||||
textarea, select {
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f5f5;
|
||||
color: #212121;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
margin: 2px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
// TODO: Checkboxes and radios will be in a different module
|
||||
// TODO: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ - For range sliders
|
||||
// TODO: Maybe add rule for `hidden` just in case
|
||||
// TODO: Add `textarea`s to the styling set, as well as `select`
|
||||
// TODO: Make form styles proper
|
||||
// TODO: Test if `form`'s `box-shadow` is fitting and adjust accordingly.
|
||||
// TODO: Add fixes from core
|
||||
// TODO: Add styles for stuff like `legend`, `fieldset` etc.
|
||||
// TODO: Add styling for forms
|
||||
// TODO: Find a way to make inline and vertical and aligned forms etc. (can also not be a style, but rather built in html)
|
||||
// TODO: Find a way to make inline and vertical and aligned forms etc. (can also not be a style, but rather built in html)
|
||||
// TODO: Softcode everything.
|
||||
// TODO: Maybe style `select` and `number` somehow.
|
||||
Loading…
Add table
Reference in a new issue