KNACSS/sass/library/_forms.scss

117 lines
1.9 KiB
SCSS
Raw Normal View History

2013-09-12 11:59:14 +02:00
/* ----------------------------- */
2016-05-20 08:58:56 +02:00
/* ==Forms */
2013-09-12 11:59:14 +02:00
/* ----------------------------- */
/* thanks to HTML5boilerplate,
2014-05-19 10:46:39 +02:00
* github.com/nathansmith/formalize and www.sitepen.com
2013-09-12 11:59:14 +02:00
*/
/* buttons */
.#{$kna-namespace}btn {
2015-07-01 13:47:48 +02:00
display: inline-block;
2013-09-12 11:59:14 +02:00
}
/* forms items */
form,
fieldset {
2015-07-01 13:47:48 +02:00
border: none;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2013-09-12 11:59:14 +02:00
input,
button,
select,
label,
.#{$kna-namespace}btn {
2015-07-01 13:47:48 +02:00
font-family: inherit;
font-size: inherit;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
button,
input,
optgroup,
select,
textarea {
2015-07-01 13:47:48 +02:00
color: $base-color;
}
label {
2015-07-01 13:47:48 +02:00
vertical-align: middle;
cursor: pointer;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2013-09-12 11:59:14 +02:00
legend {
2015-07-01 13:47:48 +02:00
border: 0;
white-space: normal;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2013-09-12 11:59:14 +02:00
textarea {
2015-07-01 13:47:48 +02:00
min-height: 5em;
vertical-align: top;
font-family: inherit;
font-size: inherit;
resize: vertical;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2015-06-26 14:04:31 +02:00
select {
2015-07-01 13:47:48 +02:00
-webkit-appearance: menulist-button;
2015-06-26 14:04:31 +02:00
}
2013-09-12 11:59:14 +02:00
/* 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,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2013-09-12 11:59:14 +02:00
::-webkit-input-placeholder {
2015-07-01 13:47:48 +02:00
color: #777;
2013-09-12 11:59:14 +02:00
}
2014-05-07 10:45:47 +02:00
2013-09-12 11:59:14 +02:00
input:-moz-placeholder,
textarea:-moz-placeholder {
2015-07-01 13:47:48 +02:00
color: #777;
2013-09-12 11:59:14 +02:00
}
.#{$kna-namespace}btn,
input[type="button"],
button {
&:focus {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
/* unstyled forms */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
&.#{$kna-namespace}unstyled {
padding: 0;
border: none;
line-height: 1;
text-align: left;
background: none;
border-radius: 0;
2015-07-01 13:47:48 +02:00
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none;
outline: none;
}
2015-07-01 13:47:48 +02:00
}
2014-05-07 10:45:47 +02:00
}