Update sanitize.scss

Expand all normalize definitions Make [unselectable] normalization Normalize number and search styling Allow override of all non-generic opinions Allow border assignment without style Match native cursor experience Sort selectors by section, required order, specificity, then alphabetically
csstools · Mar 19, 2015 · 88d43cb · 88d43cb
1 parent 5632367
commit 88d43cb
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 59 deletions.
diff --git a/dist/sanitize.css b/dist/sanitize.css
diff --git a/dist/sanitize.css.map b/dist/sanitize.css.map
diff --git a/sanitize.scss b/sanitize.scss
@@ -1,141 +1,220 @@
 /*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
 
 $default-box-sizing: border-box !default;
+$default-cursor: default !default;
+$default-disabled-color: rgba(0,0,0,.6) !default;
 $default-font-family: sans-serif !default;
-$default-text-rendering: optimizeLegibility !default;
+$default-input-background: transparent !default;
+$default-line-height: 1.5em !default;
 $default-monospace-font-family: monospace !default;
+$default-nav-list-style: none !default;
 $default-selection-background-color: #B3D4FC !default;
 $default-small-font-size: 75% !default;
+$default-text-rendering: optimizeLegibility !default;
+$default-textarea-resize: vertical !default;
+$default-vertical-align: top !default;
 
 
 
 /*
  * Normalization
  */
 
-details,  // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+
-main,     // Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+
-summary { // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+
-	display: block;
+:root {
+	text-size-adjust: 100%; // iOS 8+
+}
+
+audio:not([controls]) {
+	display: none; // Chrome 40+, iOS 8+, Safari 8+
+}
+
+details {
+	display: block; // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+
+}
+
+input {
+	&[type="number"] {
+		width: auto; // Firefox 36+
+	}
+
+	&[type="search"] {
+		-webkit-appearance: textfield; // Safari 8+
+
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-decoration {
+			-webkit-appearance: none; // Safari 8+
+		}
+	}
+}
+
+main {
+	display: block; // Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+
+}
+
+summary {
+	display: block; // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+
 }
 
-:root { // iOS 8+
-	text-size-adjust: 100%;
+pre {
+	overflow: auto; // Internet Explorer 11+
 }
 
-progress { // Internet Explorer 11+, Windows Phone 8.1+
-	display: inline-block;
+progress {
+	display: inline-block; // Internet Explorer 11+, Windows Phone 8.1+
 }
 
-small { // All browsers
-	font-size: $default-small-font-size;
+small {
+	font-size: $default-small-font-size; // All browsers
 }
 
-textarea { // Internet Explorer 11+
-	overflow: auto;
+template {
+	display: none; // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+
 }
 
-[hidden],              // Internet Explorer 10-
-audio:not([controls]), // Chrome 40+, iOS 8+, Safari 8+
-template {             // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+
-	display: none;
+textarea {
+	overflow: auto; // Internet Explorer 11+
 }
 
+[hidden] {
+	display: none; // Internet Explorer 10-
+}
+
+[unselectable] {
+	user-select: none; // Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+
+}
+
+
+
 /*
  * Universal inheritance
  */
 
 *,
 ::after,
 ::before {
-	border-style: inherit;
 	box-sizing: inherit;
 	color: inherit;
-	cursor: inherit;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
 	text-decoration: inherit;
 	vertical-align: inherit;
 }
 
-:root {
-	cursor: initial;
-	border-style: initial;
-}
+
 
 /*
  * Opinionated defaults
  */
 
+// allow border assignment by width alone
+
+*,
+*::before,
+*::after {
+	border-style: solid;
+	border-width: 0;
+}
+
+// remove margin and padding everywhere
+
 * {
 	margin: 0;
 	padding: 0;
 }
 
+// specify default styles in the document
+
 :root {
 	box-sizing: $default-box-sizing;
+	cursor: $default-cursor;
 	font-family: $default-font-family;
+	line-height: $default-line-height;
 	text-rendering: $default-text-rendering;
+	vertical-align: $default-vertical-align;
+}
+
+// style cursor to match native experience
+
+* {
+	cursor: inherit;
 }
 
 a,
 button,
 input,
-label,
-select {
-	cursor: pointer;
+select,
+textarea {
+	cursor: initial;
+}
+
+// specify or remove the background color on inputs
+
+button,
+input,
+select,
+textarea {
+	background: $default-input-background;
 }
 
+// specify monospace font
+
 code,
 kbd,
 pre,
 samp {
 	font-family: $default-monospace-font-family, monospace;
 }
 
-input:not([type]),
-input[type="email"]:not([disabled]),
-input[type="number"]:not([disabled]),
-input[type="password"]:not([disabled]),
-input[type="search"]:not([disabled]),
-input[type="text"]:not([disabled]),
-p:not([disabled]),
-pre:not([disabled]),
-textarea:not([disabled]) {
-	cursor: auto;
+// match input height with line height
+
+input {
+	min-height: $default-line-height;
 }
 
+// specify nav list style
+
+nav ol,
 nav ul {
-	list-style: none;
+	list-style: $default-nav-list-style;
 }
 
-pre {
-	overflow: auto;
+// style select like a standard input
+
+select {
+	-moz-appearance: none;    // Firefox 36+
+	-webkit-appearance: none; // Chrome 41+
+
+	&::-ms-expand {
+		display: none;        // Internet Explorer 11+
+	}
+
+	&::-ms-value {
+		color: currentColor;  // Internet Explorer 11+
+	}
 }
 
+// remove table spacing
+
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
 
+// specify textarea resizability
+
 textarea {
-	overflow: auto;
-	resize: vertical;
+	resize: $default-textarea-resize;
 }
 
+// specify text selection background color and omit drop shadow
+
 ::selection {
 	background-color: $default-selection-background-color; // required when declaring ::selection
 	text-shadow: none;
 }
 
-[disabled] {
-	cursor: default;
-}
-
-[unselectable] {
-	user-select: none;
-}
+// hide content from screens but not screenreaders
 
 @media screen {
 	[hidden~="screen"] {