All forms styles are now outsourced in forms.css

This commit is contained in:
raphaelgoetter 2013-09-03 11:14:58 +02:00
parent 79e1f871dc
commit 625fc83418
3 changed files with 96 additions and 45 deletions

View file

@ -10,18 +10,24 @@
/* buttons */
.btn { display: inline-block; }
.btn.alternate {}
.btn.highlight {}
.login {}
.logout {}
.primary {}
.warning {}
.error {}
.success {}
.btn {
display: inline-block;
}
/* forms items */
form,
fieldset {
border: none;
}
input,
button,
select,
label,
.btn {
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
label {
display: inline-block;
vertical-align: middle;
@ -31,15 +37,13 @@ legend {
border: 0;
white-space: normal;
}
button,
input,
select {
margin: 0;
}
textarea {
overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
min-height: 5em;
vertical-align: top;
font-family: inherit;
font-size: inherit;
resize: vertical;
}
button,
input[type="button"],
@ -47,14 +51,14 @@ input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button; /* clickable input types in iOS */
*overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Corrects excess space around these inputs in IE8/9 */
*width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */
}
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"] {
-webkit-appearance: textfield;
}
/* if select styling bugs on WebKit */
/* select { -webkit-appearance: none; } */
@ -66,9 +70,13 @@ input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
::-webkit-input-placeholder { color: #777; }
::-webkit-input-placeholder {
color: #777;
}
input:-moz-placeholder,
textarea:-moz-placeholder { color: #777; }
textarea:-moz-placeholder {
color: #777;
}
/* Removes inner padding and border in FF3+ */
button::-moz-focus-inner,

View file

@ -1,5 +1,5 @@
/*
* www.KNACSS.com V2.7 (2013-08) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V2.7b (2013-08) @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/
@ -381,28 +381,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
.desktop-hidden { display: none; } /* hidden on desktop */
/* ----------------------------- */
/* ==forms */
/* ----------------------------- */
form,
fieldset {
border: none;
}
input,
button,
select,
label,
.btn {
vertical-align: middle; /* @bugfix alignment */
font-family: inherit;
font-size: inherit;
}
textarea {
resize: vertical;
font-family: inherit;
font-size: inherit;
}
/* ----------------------------- */
/* ==iefix */
/* ----------------------------- */

View file

@ -505,6 +505,18 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
/* ----------------------------- */
/* ==forms */
/* ----------------------------- */
/* thanks to HTML5boilerplate,
* github.com/nathansmith/formalize
* and www.sitepen.com
*/
/* buttons */
.btn {
display: inline-block;
}
/* forms items */
form,
fieldset {
border: none;
@ -514,14 +526,67 @@ button,
select,
label,
.btn {
vertical-align: middle; /* @bugfix alignment */
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
legend {
border: 0;
white-space: normal;
}
textarea {
resize: vertical;
overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
min-height: 5em;
vertical-align: top;
font-family: inherit;
font-size: inherit;
resize: vertical;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button; /* clickable input types in iOS */
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Corrects excess space around these inputs in IE8/9 */
}
input[type="search"] {
-webkit-appearance: textfield;
}
/* if select styling bugs on WebKit */
/* select { -webkit-appearance: none; } */
/* 'x' appears on right of search input when text is entered. This removes it */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
::-webkit-input-placeholder {
color: #777;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #777;
}
/* Removes inner padding and border in FF3+ */
button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner {
border: 0;
padding: 0;
}
/* ----------------------------- */