KNACSS/sass/_forms.scss

147 lines
2.4 KiB
SCSS
Raw Normal View History

2013-04-04 21:29:49 +02:00
/* ----------------------------- */
/* ==forms */
/* ----------------------------- */
/**
* Thanks to HTML5boilerplate
* Source: github.com/nathansmith/formalize and www.sitepen.com
*/
2013-07-09 14:01:24 +02:00
form,
fieldset {
border: none;
}
/**
* 1. Bugfix alignment
*/
input,
button, select,
label, .btn {
vertical-align: middle; /* 1 */
font-family: inherit;
}
/**
* 1. Prevents horizontal resizing
*/
textarea {
resize: vertical; /* 1 */
font-family: inherit;
}
2013-04-04 21:29:49 +02:00
/**
* Buttons
*/
.btn {
@include inline-block();
}
.btn.alternate {}
.btn.highlight {}
.login {}
.logout {}
.primary {}
.warning {}
.error {}
.success {}
/**
* Form elements
*/
label {
@include inline-block(middle);
cursor: pointer;
}
legend {
border: 0;
white-space: normal;
}
button,
input,
select {
font-family: "Century Gothic", helvetica, arial, sans-serif;
font-size: 100%;
margin: 0;
vertical-align: middle;
}
/**
* 1. Removes default vertical scrollbar on empty textarea in IE6/7/8/9
* 2. Prevents horizontal resizing
*/
textarea {
overflow: auto; /* 1 */
min-height: 5em;
font-size: 1.75em;
vertical-align: top;
resize: vertical; /* 2 */
}
/**
* 1. Clickable input types in iOS
* 2. Corrects inner spacing displayed oddly in IE7
*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button; /* 1 */
*overflow: visible; /* 2 */
}
/**
* 1. Corrects excess space around these inputs in IE8/9
* 2. Corrects excess space around these inputs in IE7
*/
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* 1 */
*width: 13px; /* 2 */
*height: 13px; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield;
}
/**
* Add a slash at the end of this comment
* if select styling bugs on WebKit *
select { -webkit-appearance: none; } /**/
/**
* Removes 'x' on right of search input when text is entered
*/
input[type="search"] {
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
::-webkit-input-placeholder { color: #777; }
input, textarea {
&:-moz-placeholder { color: #777; }
}
/**
* Removes inner padding and border in FF3+
*/
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
&::-moz-focus-inner {
border: 0;
padding: 0;
}
}