diff --git a/dist/sanitize.css b/dist/sanitize.css index 37c3a54..8866e05 100644 --- a/dist/sanitize.css +++ b/dist/sanitize.css @@ -1,22 +1,28 @@ /*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ pre,textarea{overflow:auto} +:root{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font-family:sans-serif;line-height:1.5em;text-rendering:optimizeLegibility;vertical-align:top} +[hidden],audio:not([controls]),template{display:none} details,main,summary{display:block} -:root{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;cursor:initial;border-style:initial;box-sizing:border-box;font-family:sans-serif;text-rendering:optimizeLegibility} +input[type=number]{width:auto} +input[type=search]{-webkit-appearance:textfield} +input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} progress{display:inline-block} small{font-size:75%} -[hidden],audio:not([controls]),template{display:none} -*,::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} -*{margin:0;padding:0} -a,button,input,label,select{cursor:pointer} +textarea{resize:vertical} +[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} +*,::after,::before{box-sizing:inherit;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-decoration:inherit;vertical-align:inherit;border-style:solid;border-width:0} +*{margin:0;padding:0;cursor:inherit} +a,button,input,select,textarea{cursor:initial} +button,input,select,textarea{background:0 0} code,kbd,pre,samp{font-family:monospace,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} -nav ul{list-style:none} +input{min-height:1.5em} +nav ol,nav ul{list-style:none} +select{-moz-appearance:none;-webkit-appearance:none} +select::-ms-expand{display:none} +select::-ms-value{color:currentColor} table{border-collapse:collapse;border-spacing:0} -textarea{resize:vertical} ::-moz-selection{background-color:#B3D4FC;text-shadow:none} ::selection{background-color:#B3D4FC;text-shadow:none} -[disabled]{cursor:default} -[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} @media screen{[hidden~=screen]{display:inherit} [hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important} } diff --git a/dist/sanitize.css.map b/dist/sanitize.css.map index 20a64f1..0c736b9 100644 --- a/dist/sanitize.css.map +++ b/dist/sanitize.css.map @@ -1 +1 @@ -{"version":3,"sources":["sanitize.scss"],"names":[],"mappings":";AAgHA,IASA,SACC;AA3GQ,QAAA,KAAA,QAGR;AAGD,MACC,8BAAA,0BAAA,sBAwCA,eACA,qBA7DkE,sBACE,uBACM;AAqB3E,SACU;AAGV,MACC;AAOS,SAAA,sBAAA,SAGT;AAOD,EAAG,QAAS,SAGX,qBACA,mBACO,cACC,eACR,oBACA,kBACA,oBACA,wBACA;AAYD,EACC,SACA;AASiB,EAAA,OAAA,MAAA,MAAA,OAKjB;AAGK,KAAA,IAAA,IAAA,KAIL;AAGD,kBAAmB,kCAAqC,mCAAsC,qCAAwC,mCAAsC,iCAAoC,kBAAmB,oBAAqB,yBAS/O;AAGL,OACH;AAOD,MACC,yBACA;AAGD,SAEC;AAGD,iBAxHmG,yBA0HlG;AAFD,YAxHmG,yBA0HlG;AAGD,WACC;AAGD,eACC,yBAAA,sBAAA,qBAAA;AAGD,cACE,iBACA;AAGgB,uDACE,6BAClB","file":"sanitize.css","sourcesContent":["/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */\n\n@if not variable-exists(default-box-sizing) { $default-box-sizing: border-box; }\n@if not variable-exists(default-font-family) { $default-font-family: sans-serif; }\n@if not variable-exists(default-text-rendering) { $default-text-rendering: optimizeLegibility; }\n@if not variable-exists(default-monospace-font-family) { $default-monospace-font-family: monospace; }\n@if not variable-exists(default-selection-background-color) { $default-selection-background-color: #B3D4FC; }\n@if not variable-exists(default-small-font-size) { $default-small-font-size: 75%; }\n\n\n\n/*\n * Normalization\n */\n\ndetails, // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+\nmain, // Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+\nsummary { // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+\n\tdisplay: block;\n}\n\n:root { // iOS 8+\n\ttext-size-adjust: 100%;\n}\n\nprogress { // Internet Explorer 11+, Windows Phone 8.1+\n\tdisplay: inline-block;\n}\n\nsmall { // All browsers\n\tfont-size: $default-small-font-size;\n}\n\ntextarea { // Internet Explorer 11+\n\toverflow: auto;\n}\n\n[hidden], // Internet Explorer 10-\naudio:not([controls]), // Chrome 40+, iOS 8+, Safari 8+\ntemplate { // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+\n\tdisplay: none;\n}\n\n/*\n * Universal inheritance\n */\n\n*,\n::after,\n::before {\n\tborder-style: inherit;\n\tbox-sizing: inherit;\n\tcolor: inherit;\n\tcursor: inherit;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tline-height: inherit;\n\ttext-decoration: inherit;\n\tvertical-align: inherit;\n}\n\n:root {\n\tcursor: initial;\n\tborder-style: initial;\n}\n\n/*\n * Opinionated defaults\n */\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n:root {\n\tbox-sizing: $default-box-sizing;\n\tfont-family: $default-font-family;\n\ttext-rendering: $default-text-rendering;\n}\n\na,\nbutton,\ninput,\nlabel,\nselect {\n\tcursor: pointer;\n}\n\ncode,\nkbd,\npre,\nsamp {\n\tfont-family: $default-monospace-font-family, monospace;\n}\n\ninput:not([type]),\ninput[type=\"email\"]:not([disabled]),\ninput[type=\"number\"]:not([disabled]),\ninput[type=\"password\"]:not([disabled]),\ninput[type=\"search\"]:not([disabled]),\ninput[type=\"text\"]:not([disabled]),\np:not([disabled]),\npre:not([disabled]),\ntextarea:not([disabled]) {\n\tcursor: auto;\n}\n\nnav ul {\n\tlist-style: none;\n}\n\npre {\n\toverflow: auto;\n}\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\ntextarea {\n\toverflow: auto;\n\tresize: vertical;\n}\n\n::selection {\n\tbackground-color: $default-selection-background-color; // required when declaring ::selection\n\ttext-shadow: none;\n}\n\n[disabled] {\n\tcursor: default;\n}\n\n[unselectable] {\n\tuser-select: none;\n}\n\n@media screen {\n\t[hidden~=\"screen\"] {\n\t\tdisplay: inherit;\n\t}\n\n\t[hidden~=\"screen\"]:not(:active):not(:focus):not(:target) {\n\t\tclip: rect(0 0 0 0) !important;\n\t\tposition: absolute !important;\n\t}\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"sources":["sanitize.scss"],"names":[],"mappings":";AAyDA,IAgBA,SACC;AApDD,MACC,8BAAA,0BAAA,sBArBoB,sBA+HpB,eACA,uBA3HqB,kBAKG,kCAEA;AA+DzB,SAnDK,sBA2CL,SA1CC;AAGD,QAmBA,KAIA,QAtBC;AAID,mBACS;AAGT,mBACE;AAEG,iDAAA,8CAEF;AAiBH,SACU;AAGV,MACC;AAOD,SA5D0B;AAoE1B,eACc,yBAAA,sBAAA,qBAAA;AASF,EAAA,QAAA,SAGX,mBACA,cACa,oBACF,kBACX,oBACA,wBACgB,uBAchB,mBACA;AAKD,EACC,SACS,UAiBT;AAGyB,EAAA,OAAA,MAAA,OAAA,SAKjB;AAKM,OAAA,MAAA,OAAA,SAId;AAKU,KAAA,IAAA,IAAA,KAIV;AAKD,MAnKsB;AAyKlB,OAAA,OAvKqB;AA8KzB,OACC,qBACA;AAEC,mBACS;AAGL,kBACJ;AAMF,MACC,yBACA;AAWD,iBAzMqC,yBA2MpC;AAFD,YAzMqC,yBA2MpC;AAKD,cACE,iBACA;AAGA,uDACkB,6BAClB","file":"sanitize.css","sourcesContent":["/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */\n\n$default-box-sizing: border-box !default;\n$default-cursor: default !default;\n$default-disabled-color: rgba(0,0,0,.6) !default;\n$default-font-family: sans-serif !default;\n$default-input-background: transparent !default;\n$default-line-height: 1.5em !default;\n$default-monospace-font-family: monospace !default;\n$default-nav-list-style: none !default;\n$default-selection-background-color: #B3D4FC !default;\n$default-small-font-size: 75% !default;\n$default-text-rendering: optimizeLegibility !default;\n$default-textarea-resize: vertical !default;\n$default-vertical-align: top !default;\n\n\n\n/*\n * Normalization\n */\n\n:root {\n\ttext-size-adjust: 100%; // iOS 8+\n}\n\naudio:not([controls]) {\n\tdisplay: none; // Chrome 40+, iOS 8+, Safari 8+\n}\n\ndetails {\n\tdisplay: block; // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+\n}\n\ninput {\n\t&[type=\"number\"] {\n\t\twidth: auto; // Firefox 36+\n\t}\n\n\t&[type=\"search\"] {\n\t\t-webkit-appearance: textfield; // Safari 8+\n\n\t\t&::-webkit-search-cancel-button,\n\t\t&::-webkit-search-decoration {\n\t\t\t-webkit-appearance: none; // Safari 8+\n\t\t}\n\t}\n}\n\nmain {\n\tdisplay: block; // Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+\n}\n\nsummary {\n\tdisplay: block; // Firefox 35+, Internet Explorer 11+, Windows Phone 8.1+\n}\n\npre {\n\toverflow: auto; // Internet Explorer 11+\n}\n\nprogress {\n\tdisplay: inline-block; // Internet Explorer 11+, Windows Phone 8.1+\n}\n\nsmall {\n\tfont-size: $default-small-font-size; // All browsers\n}\n\ntemplate {\n\tdisplay: none; // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+\n}\n\ntextarea {\n\toverflow: auto; // Internet Explorer 11+\n}\n\n[hidden] {\n\tdisplay: none; // Internet Explorer 10-\n}\n\n[unselectable] {\n\tuser-select: none; // Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+\n}\n\n\n\n/*\n * Universal inheritance\n */\n\n*,\n::after,\n::before {\n\tbox-sizing: inherit;\n\tcolor: inherit;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tline-height: inherit;\n\ttext-decoration: inherit;\n\tvertical-align: inherit;\n}\n\n\n\n/*\n * Opinionated defaults\n */\n\n// allow border assignment by width alone\n\n*,\n*::before,\n*::after {\n\tborder-style: solid;\n\tborder-width: 0;\n}\n\n// remove margin and padding everywhere\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\n// specify default styles in the document\n\n:root {\n\tbox-sizing: $default-box-sizing;\n\tcursor: $default-cursor;\n\tfont-family: $default-font-family;\n\tline-height: $default-line-height;\n\ttext-rendering: $default-text-rendering;\n\tvertical-align: $default-vertical-align;\n}\n\n// style cursor to match native experience\n\n* {\n\tcursor: inherit;\n}\n\na,\nbutton,\ninput,\nselect,\ntextarea {\n\tcursor: initial;\n}\n\n// specify or remove the background color on inputs\n\nbutton,\ninput,\nselect,\ntextarea {\n\tbackground: $default-input-background;\n}\n\n// specify monospace font\n\ncode,\nkbd,\npre,\nsamp {\n\tfont-family: $default-monospace-font-family, monospace;\n}\n\n// match input height with line height\n\ninput {\n\tmin-height: $default-line-height;\n}\n\n// specify nav list style\n\nnav ol,\nnav ul {\n\tlist-style: $default-nav-list-style;\n}\n\n// style select like a standard input\n\nselect {\n\t-moz-appearance: none; // Firefox 36+\n\t-webkit-appearance: none; // Chrome 41+\n\n\t&::-ms-expand {\n\t\tdisplay: none; // Internet Explorer 11+\n\t}\n\n\t&::-ms-value {\n\t\tcolor: currentColor; // Internet Explorer 11+\n\t}\n}\n\n// remove table spacing\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n// specify textarea resizability\n\ntextarea {\n\tresize: $default-textarea-resize;\n}\n\n// specify text selection background color and omit drop shadow\n\n::selection {\n\tbackground-color: $default-selection-background-color; // required when declaring ::selection\n\ttext-shadow: none;\n}\n\n// hide content from screens but not screenreaders\n\n@media screen {\n\t[hidden~=\"screen\"] {\n\t\tdisplay: inherit;\n\t}\n\n\t[hidden~=\"screen\"]:not(:active):not(:focus):not(:target) {\n\t\tclip: rect(0 0 0 0) !important;\n\t\tposition: absolute !important;\n\t}\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/sanitize.scss b/sanitize.scss index f776ea0..49cfd41 100644 --- a/sanitize.scss +++ b/sanitize.scss @@ -1,11 +1,18 @@ /*! 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; @@ -13,34 +20,71 @@ $default-small-font-size: 75% !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 */ @@ -48,10 +92,8 @@ template { // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7- *, ::after, ::before { - border-style: inherit; box-sizing: inherit; color: inherit; - cursor: inherit; font-family: inherit; font-size: inherit; line-height: inherit; @@ -59,34 +101,64 @@ template { // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7- 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, @@ -94,48 +166,55 @@ 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"] {