mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 21:37:23 +02:00
Code Issues Releases Wiki Activity

Building and testing form module

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-26 17:29:59 +03:00
parent b3ad255007
commit 6365aa0a0f
5 changed files with 80 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/v2/DEVLOG.md
View File

@@ -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.

52
docs/v2/index.html
View File

@@ -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=&quot;100%&quot;</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">&nbsp;
<input type="email" value="mail@mail.com"> <label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">&nbsp;
<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>

15
flavors/v2/mini-default.css
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

23
scss/v2/mini-core/_form.scss
View File

@@ -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.