KNACSS Sass - first draft

sass/forms.scss

@@ -0,0 +1,123 @@
+/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/**
+ * Thanks to HTML5boilerplate
+ * Source: github.com/nathansmith/formalize and www.sitepen.com 
+ */
+
+
+/**
+ * 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;
+	}
+}