mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-05 21:37:23 +02:00
Building and testing form module
This commit is contained in:
@@ -202,3 +202,10 @@
|
|||||||
- Added a list of `TODO`s in the `form` module, tried some base styling just to make sure everything works.
|
- 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.
|
- Moved style links at the very top of the `<head>` of the page.
|
||||||
- Updated live demo with latest stylesheet (again).
|
- 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">
|
<input type="submit" value="Large submit button" class="large">
|
||||||
<label disabled class="button small primary">Small primary disabled label button</label><br>
|
<label disabled class="button small primary">Small primary disabled label button</label><br>
|
||||||
<h3>Forms</h3>
|
<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>
|
<form>
|
||||||
<input type="text" value="text">
|
<strong>Inline form (default style):</strong><br>
|
||||||
<input type="color">
|
<label for="username">Username</label> <input type="text" value="" id="username" placeholder="Username">
|
||||||
<input type="email" value="mail@mail.com">
|
<label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">
|
||||||
<input type="hidden" value="hidden">
|
<label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"><br><br>
|
||||||
<input type="number" value="4">
|
<strong>Aligned form (using <code>width</code> and grid):</strong><br>
|
||||||
<input type="password" value="password">
|
<div class="container">
|
||||||
<input type="range" value="4">
|
<div class="row">
|
||||||
<input type="search">
|
<div class="col-sm-2" style="text-align:right;">
|
||||||
<input type="url" value="data.google.com">
|
<label for="website" style="vertical-align: text-top;">Website</label>
|
||||||
<input value="normal">
|
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -606,12 +606,23 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
|||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
display: none; }
|
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;
|
background-color: #f5f5f5;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
vertical-align: middle; }
|
vertical-align: baseline;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 2px 4px; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the inheritance of text transform in Firefox.
|
* 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.
|
// Definitions for forms and input elements.
|
||||||
// Different elements are styled based on the same set of rules.
|
// 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;
|
background-color: #f5f5f5;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
border-radius: 2px;
|
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: 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: 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: Make form styles proper
|
||||||
|
// TODO: Test if `form`'s `box-shadow` is fitting and adjust accordingly.
|
||||||
// TODO: Add fixes from core
|
// TODO: Add fixes from core
|
||||||
// TODO: Add styles for stuff like `legend`, `fieldset` etc.
|
// TODO: Add styles for stuff like `legend`, `fieldset` etc.
|
||||||
// TODO: Add styling for forms
|
// 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.
|
Reference in New Issue
Block a user