mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-20 20:31:51 +02:00
Code Issues Releases Wiki Activity

Major update to form module

Browse Source
This commit is contained in:
Angelos Chalaris 2016-10-30 12:17:02 +02:00
parent 6f3e909935
commit 7214588269
7 changed files with 223 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/v2/DEVLOG.md
View File

@ -209,4 +209,16 @@
- Added rule for `:not([type="hidden"])`.
- Added `form` element styling (hardcoded still).
- Added demo forms for inline and aligned.
- Modified `input` `background-color` from `#f5f5f5` to `#fafafa`. Changed `background-color` to `background`.
- Modified `input` `background-color` from `#f5f5f5` to `#fafafa`. Changed `background-color` to `background`.
## 20161030
- Opened issue about certain `input` elements.
- Dropped styling for `range` and `color` `input`s.
- Changed form styling a little bit (hardcoded).
- Added styling for `placeholder`s.
- Defined styles for `fieldset`, `legend` and custom class for `input` and `label` grouping (`input-group`).
- Added variables for `form` styling.
- Softcoded most of the stuff for `form` styling.
- Tested `form` styling thoroughly and optimized code.
- Moved fixes from `core` to `form` module for most of the `form` elements (except `search`).

44
docs/v2/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161025 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/2ad1bc879ab9735a4e680311163dcfd0873d861a/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/2ad1bc879ab9735a4e680311163dcfd0873d861a/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@ -272,20 +272,22 @@
<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 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>
<p>Forms are inline by default and textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code> and <code>&lt;select&gt;</code> elements have been pre-styled. To make inputs take up more space than their default, simply add something like <code>width=&quot;100%&quot;</code>. You can also utilize the grid system to align forms to your liking. Below are some examples:</p>
<form>
<strong>Inline form (default style):</strong><br>
<label for="username">Username</label> <input type="text" value="" id="username" placeholder="Username">&nbsp;
<label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">&nbsp;
<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">
<fieldset>
<legend>Inline form (default style):</legend>
<div class="input-group"><label for="username">Username</label> <input type="text" value="" id="username" placeholder="username">&nbsp;</div>
<div class="input-group"><label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">&nbsp;</div>
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
</fieldset><br>
<fieldset class="container">
<legend>Aligned form (using <code>width</code> and grid):</legend>
<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%;">
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
</div>
</div>
<div class="row">
@ -300,20 +302,20 @@
<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 class="col-sm">
<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>
</fieldset><br>
<fieldset>
<legend>More inputs</legend>
<input disabled value="Disabled">
<input type="number" value="4">
<select>
<option>Test</option>
<option>Demo</option>
</select>
</fieldset>
</form>
</div>
</div>

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

@ -607,69 +607,72 @@ input[type="file"] {
display: none; }
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: #fafafa;
color: #212121;
border: 1px solid #e0e0e0;
background: #eceff1;
border: 1px solid #90a4ae;
border-radius: 2px;
vertical-align: baseline;
margin: 2px;
padding: 2px 4px; }
margin: 8px;
padding: 8px; }
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none; }
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
border: 1px solid #b0bec5;
border-radius: 1px;
margin: 0;
padding: 4px 6px 8px; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
font-weight: 700;
font-size: 0.85em;
padding: 4px; }
.input-group {
display: inline-block; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
input:not([type]), [type="text"], [type="email"], [type="number"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
background: #fafafa;
color: #212121;
border: 1px solid #b0bec5;
border-radius: 1px;
margin: 2px;
padding: 6px 8px; }
input:not([type]):focus, [type="text"]:focus, [type="email"]:focus, [type="number"]:focus,
[type="password"]:focus, [type="url"]:focus, [type="tel"]:focus, textarea:focus, select:focus {
border-color: #0288d1;
box-shadow: none; }
input:not([type])[disabled], [type="text"][disabled], [type="email"][disabled], [type="number"][disabled],
[type="password"][disabled], [type="url"][disabled], [type="tel"][disabled], textarea[disabled], select[disabled] {
cursor: not-allowed;
opacity: 0.75; }
input:not([type]):invalid, input:not([type]):focus:invalid, input:not([type]):focus:invalid:focus, [type="text"]:invalid, [type="text"]:focus:invalid, [type="text"]:focus:invalid:focus, [type="email"]:invalid, [type="email"]:focus:invalid, [type="email"]:focus:invalid:focus, [type="number"]:invalid, [type="number"]:focus:invalid, [type="number"]:focus:invalid:focus,
[type="password"]:invalid,
[type="password"]:focus:invalid,
[type="password"]:focus:invalid:focus, [type="url"]:invalid, [type="url"]:focus:invalid, [type="url"]:focus:invalid:focus, [type="tel"]:invalid, [type="tel"]:focus:invalid, [type="tel"]:focus:invalid:focus, textarea:invalid, textarea:focus:invalid, textarea:focus:invalid:focus, select:invalid, select:focus:invalid, select:focus:invalid:focus {
border-color: #d32f2f;
box-shadow: none; }
input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly],
[type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], textarea[readonly], select[readonly] {
background-color: #eceff1;
border-color: #90a4ae; }
::-webkit-placeholder {
color: #37474f; }
::-moz-placeholder {
color: #37474f; }
::-ms-placeholder {
color: #37474f; }
/**
* 1. Correct the odd appearance in Chrome and Safari.

2
flavors/v2/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

29
flavors/v2/mini-default.scss
View File

@ -141,6 +141,35 @@ $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mob
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
// Variables for forms and textual inputs
$form-back-color: #eceff1; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #90a4ae; // Border style for forms
$form-border-radius: 2px; // Border radius for forms
$form-margin: 8px; // Margin for forms
$form-padding: 8px; // Padding for forms
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #b0bec5; // Border style for fieldset
$fieldset-border-radius: 1px; // Border radius for fieldset
$fieldset-margin: 0; // Margin for fieldset
$fieldset-padding: 4px 6px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.85em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 4px; // Padding for legend
$input-group-name: 'input-group'; // Class for input groups
$input-back-color: $back-color; // Background for input
$input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #b0bec5; // Border style for input
$input-border-radius: 1px; // Border radius for input
$input-margin: 2px; // Margin for input
$input-padding: 6px 8px; // padding for input
$input-focus-border-color: #0288d1; // Border color for focused input
$input-invalid-border-color: #d32f2f; // Border color for invalid input
$input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #eceff1; // Background color for readonly input
$input-readonly-border-color: #90a4ae; // Border color for readonly input
$input-placeholder-fore-color: #37474f; // Text color for input placeholder
// Variables for button elements
$button-back-color: #cfd8dc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements

53
scss/v2/_core.scss
View File

@ -353,57 +353,6 @@ a{
// TODO: Move to forms.
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
@ -423,6 +372,8 @@ textarea {
-webkit-appearance: none;
}
// TODO: Figure out where to move those.
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.

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

@ -2,33 +2,110 @@
// Different elements are styled based on the same set of rules.
form {
border: 1px solid #e0e0e0;
border-radius: 0;
margin: 8px;
padding: 4px;
box-shadow: 0.1px 1px 3px rgba(0,0,0,0.15);
@if $form-back-color != $back-color {
background: $form-back-color;
}
@if $form-fore-color != $fore-color {
color: $form-fore-color;
}
@if $form-border-style != 0 {
border: $form-border-style;
}
@if $form-border-radius != 0 {
border-radius: $form-border-radius;
}
@if $form-margin != 0 {
margin: $form-margin;
}
@if $form-padding != 0 {
padding: $form-padding;
}
}
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 {
fieldset {
@if $fieldset-back-color != $form-back-color {
background: $fieldset-back-color;
}
border: $fieldset-border-style;
border-radius: $fieldset-border-radius;
// Margin and padding should never be unassigned, because browser defaults will be applied.
margin: $fieldset-margin;
padding: $fieldset-padding;
}
legend {
// IE and Edge fixes.
box-sizing: border-box;
background: #fafafa;
color: #212121;
border: 1px solid #e0e0e0;
border-radius: 2px;
vertical-align: baseline;
margin: 2px;
padding: 2px 4px;
display: table;
max-width: 100%;
white-space: normal;
// Actual styling.
font-weight: $legend-font-weight;
font-size: $legend-font-size;
@if $legend-fore-color != $fore-color {
color: $legend-fore-color;
}
@if $legend-padding != 0 {
padding: $legend-padding;
}
}
// 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: 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: Softcode everything.
// TODO: Maybe style `select` and `number` somehow.
// TODO: Add styles for focusing, disabled and readonlies.
.#{$input-group-name} {
display: inline-block;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; // Correct the cursor style of increment and decrement buttons in Chrome.
}
textarea {
overflow: auto; // Remove the default vertical scrollbar in IE.
}
input:not([type]), [type="text"], [type="email"], [type="number"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: $input-back-color;
color: $input-fore-color;
border: $input-border-style;
@if $input-border-radius != 0 {
border-radius: $input-border-radius;
}
@if $input-margin != 0 {
margin: $input-margin;
}
@if $input-padding != 0 {
padding: $input-padding;
}
&:focus {
border-color: $input-focus-border-color;
box-shadow: none;
}
&[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
&:invalid, &:focus:invalid, &:focus:invalid:focus{
border-color: $input-invalid-border-color;
box-shadow: none;
}
&[readonly]{
background-color: $input-readonly-back-color;
border-color: $input-readonly-border-color;
}
}
::-webkit-placeholder {
color: $input-placeholder-fore-color;
}
::-moz-placeholder {
color: $input-placeholder-fore-color;
}
::-ms-placeholder {
color: $input-placeholder-fore-color;
}
// TODO: Checkboxes and radios will be in a different module.
// TODO: Style `search` separately.
// TODO: Move search fixes from core.