From 71d96ab639de4a2a3d5f8c3b273f40c770788e2a Mon Sep 17 00:00:00 2001 From: "M. George Hansen" Date: Fri, 4 Nov 2016 15:33:06 -0700 Subject: [PATCH] Switch to SCSS syntax to resolve abiguous syntax issues in SASS --- bower.json | 2 +- dist/total-reset.css | 113 ++++++++++++---- dist/total-reset.min.css | 2 +- gulpfile.js | 4 +- ...accessibility.sass => _accessibility.scss} | 10 +- src/{_blocks.sass => _blocks.scss} | 5 +- src/{_box-sizing.sass => _box-sizing.scss} | 10 +- ...ed-content.sass => _embedded-content.scss} | 22 +-- ...form-elements.sass => _form-elements.scss} | 126 ++++++++++-------- src/{_hidden.sass => _hidden.scss} | 5 +- src/_links.sass | 12 -- src/_links.scss | 14 ++ src/_lists.sass | 7 - src/_lists.scss | 9 ++ src/_responsive.sass | 13 -- src/_responsive.scss | 17 +++ src/_tables.sass | 9 -- src/_tables.scss | 12 ++ src/_typography.sass | 85 ------------ src/_typography.scss | 101 ++++++++++++++ src/total-reset.sass | 19 --- src/total-reset.scss | 20 +++ 22 files changed, 365 insertions(+), 252 deletions(-) rename src/{_accessibility.sass => _accessibility.scss} (92%) rename src/{_blocks.sass => _blocks.scss} (96%) rename src/{_box-sizing.sass => _box-sizing.scss} (81%) rename src/{_embedded-content.sass => _embedded-content.scss} (77%) rename src/{_form-elements.sass => _form-elements.scss} (71%) rename src/{_hidden.sass => _hidden.scss} (82%) delete mode 100644 src/_links.sass create mode 100644 src/_links.scss delete mode 100644 src/_lists.sass create mode 100644 src/_lists.scss delete mode 100644 src/_responsive.sass create mode 100644 src/_responsive.scss delete mode 100644 src/_tables.sass create mode 100644 src/_tables.scss delete mode 100644 src/_typography.sass create mode 100644 src/_typography.scss delete mode 100644 src/total-reset.sass create mode 100644 src/total-reset.scss diff --git a/bower.json b/bower.json index 6326537..0125b7f 100644 --- a/bower.json +++ b/bower.json @@ -18,7 +18,7 @@ }, "main": [ "dist/total-reset.css", - "src/total-reset.sass" + "src/total-reset.scss" ], "ignore": [ "**/.*", diff --git a/dist/total-reset.css b/dist/total-reset.css index 630f692..a880184 100644 --- a/dist/total-reset.css +++ b/dist/total-reset.css @@ -9,8 +9,16 @@ * on the fact that *all* elements are block by default. Except checkboxes * and radios of course, because reasons. */ +article, aside, div, footer, header, hgroup, main, menu, nav, noscript, section, +abbr, acronym, blockquote, h1, h2, h3, h4, h5, h6, p, q, +b, bdo, em, i, ins, hr, mark, pre, s, small, strike, strong, sub, sup, u, wbr, +a, address, cite, code, dd, dfn, dl, dt, figcaption, figure, kbd, ol, ul, samp, time, var, +rp, rt, ruby, +details, meter, progress, summary, +audio, canvas, embed, img, svg, video, button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea { - display: block; } + display: block; + /* 1 */ } /** * 1. Reset box-sizing on all elements to border-box. @@ -34,10 +42,14 @@ html { */ a { color: inherit; + /* 1 */ text-decoration: none; - background-color: transparent; } + /* 1 */ + background-color: transparent; + /* 2 */ } a:link, a:active, a:visited { - color: inherit; } + color: inherit; + /* 1 */ } ul, ol { margin: 0; @@ -52,39 +64,48 @@ ul, ol { */ html { -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 1 */ } /** * 1. Remove all styling from `h1-6` elements. */ h1, h2, h3, h4, h5, h6 { margin: 0; + /* 1 */ font-size: inherit; - font-weight: inherit; } + /* 1 */ + font-weight: inherit; + /* 1 */ } /** * 1. Remove extra margin around these elements. */ p, dl, dd, pre, figure, blockquote { - margin: 0; } + margin: 0; + /* 1 */ } /** * 1. Ensure that these elements inherit font-style. */ i, cite, em, var, address, dfn { - font-style: inherit; } + font-style: inherit; + /* 1 */ } /** * 1. Ensure that these elements inherit text-decoration. */ u, s, strike, del, ins { - text-decoration: inherit; } + text-decoration: inherit; + /* 1 */ } /** * 1. Ensure that these elements inherit font-weight. */ dfn, strong, th, b { - font-weight: inherit; } + font-weight: inherit; + /* 1 */ } small { font-size: inherit; } @@ -95,24 +116,31 @@ small { */ tt, code, kbd, samp, pre { font-family: inherit; - font-size: inherit; } + /* 1 */ + font-size: inherit; + /* 2 */ } /** * 1. Remove quotation marks. */ q::before, q::after { content: ""; - content: none; } + /* 1 */ + content: none; + /* 1 */ } blockquote, q { - quotes: none; } + quotes: none; + /* 1 */ } /** * 1. Reset styling for `mark` elements. */ mark { background-color: inherit; - color: inherit; } + /* 1 */ + color: inherit; + /* 1 */ } hr { box-sizing: content-box; @@ -148,7 +176,8 @@ img { * 1. Remove borders from iframes. This isn't 1995 any more. */ iframe { - border: none; } + border: none; + /* 1 */ } /** * 1. Prevent modern browsers from displaying `audio` without controls. @@ -156,7 +185,9 @@ iframe { */ audio:not([controls]) { display: none; - height: 0; } + /* 1 */ + height: 0; + /* 2 */ } /** * Correct overflow not hidden in IE 9/10/11 (from normalize.css). @@ -217,8 +248,11 @@ audio { */ fieldset { margin: 0; + /* 1 */ padding: 0; - border: none; } + /* 1 */ + border: none; + /* 1 */ } /** * 1. Fully reset lengends removing all default styling. @@ -226,8 +260,11 @@ fieldset { */ legend { border: 0; + /* 1 */ padding: 0; - width: 100%; } + /* 1 */ + width: 100%; + /* 2 */ } /** * Known limitation: by default, Chrome and Safari on OS X allow very limited @@ -254,7 +291,9 @@ button { */ select { border-radius: 0; - -webkit-appearance: none; } + /* 1 */ + -webkit-appearance: none; + /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11 (from normalize.css). @@ -266,7 +305,8 @@ textarea { * 1. Address `overflow` set to `hidden` in IE 8/9/10/11 (from normalize.css). */ button { - overflow: visible; } + overflow: visible; + /* 1 */ } /** * 1. Address inconsistent `text-transform` inheritance for `button` and @@ -277,7 +317,8 @@ button { */ button, select { - text-transform: none; } + text-transform: none; + /* 1 */ } /** * 1. Remove inner padding and border in Firefox 4+ (from normalize.css). @@ -285,7 +326,9 @@ select { button::-moz-focus-inner, input::-moz-focus-inner { border: 0; - padding: 0; } + /* 1 */ + padding: 0; + /* 1 */ } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -299,7 +342,9 @@ html input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: button; + /* 2 */ cursor: pointer; + /* 3 */ text-align: left; } /** @@ -326,7 +371,9 @@ input { input[type="checkbox"], input[type="radio"] { box-sizing: border-box; - padding: 0; } + /* 1 */ + padding: 0; + /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain @@ -348,9 +395,11 @@ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-o * */ input[type="search"] { - -webkit-appearance: textfield; } + -webkit-appearance: textfield; + /* 1 */ } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; + /* 2 */ } /** * 1. Update input placeholders to inherit color (IE, Chrome and Safari) and @@ -361,13 +410,16 @@ input[type="search"] { * workaround :(. */ ::-webkit-input-placeholder { - color: inherit; } + color: inherit; + /* 1 */ } ::-moz-placeholder { - opacity: inherit; } + opacity: inherit; + /* 1 */ } :-ms-input-placeholder { - color: inherit; } + color: inherit; + /* 1 */ } /** * 1. Address `[hidden]` styling not present in IE 8/9/10 and hide the @@ -376,7 +428,8 @@ input[type="search"] { */ [hidden], template { - display: none; } + display: none; + /* 1 */ } /** * 1. Remove default padding on body. @@ -384,4 +437,6 @@ template { */ body { margin: 0; - line-height: 1; } + /* 1 */ + line-height: 1; + /* 2 */ } diff --git a/dist/total-reset.min.css b/dist/total-reset.min.css index 3de91fa..8851921 100644 --- a/dist/total-reset.min.css +++ b/dist/total-reset.min.css @@ -1 +1 @@ -b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:inherit}h1,h2,h3,h4,h5,h6,small{font-size:inherit}[title],a{text-decoration:none}button,html,input:not([type=checkbox]):not([type=radio]),legend,meter,progress,select,textarea{width:100%}fieldset,iframe,img{border:none}a,a:active,a:link,a:visited,mark{color:inherit}button,datalist,fieldset,form,input:not([type=checkbox]):not([type=radio]),keygen,label,output,select,textarea{display:block}html{box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-x:hidden}*,::after,::before{box-sizing:inherit}a{background-color:transparent}ol,ul{margin:0;padding:0;list-style-type:none}ol ol,ol ul,td,th,ul ol,ul ul{padding:0}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}address,cite,dfn,em,i,var{font-style:inherit}del,ins,s,strike,u{text-decoration:inherit}code,kbd,pre,samp,tt{font-family:inherit;font-size:inherit}q::after,q::before{content:"";content:none}blockquote,q{quotes:none}mark{background-color:inherit}hr{box-sizing:content-box;height:0}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}:focus{outline:0}table{border-collapse:collapse;border-spacing:0}caption{text-align:inherit}embed,iframe,img,object,video{height:auto;max-width:100%}audio{max-width:100%}fieldset{margin:0;padding:0}legend{border:0;padding:0}button,input:not([type=checkbox]):not([type=radio]),optgroup,select,textarea{margin:0;padding:0;border:none;background:0 0;font:inherit;color:inherit}select{border-radius:0;-webkit-appearance:none}textarea{overflow:auto}button{overflow:visible}button,select{text-transform:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button,html input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:button;cursor:pointer;text-align:left}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit}::-moz-placeholder{opacity:inherit}:-ms-input-placeholder{color:inherit}[hidden],template{display:none}body{margin:0;line-height:1} \ No newline at end of file +b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:inherit}h1,h2,h3,h4,h5,h6,small{font-size:inherit}[title],a{text-decoration:none}button,html,input:not([type=checkbox]):not([type=radio]),legend,meter,progress,select,textarea{width:100%}fieldset,iframe,img{border:none}a,a:active,a:link,a:visited,mark{color:inherit}a,abbr,acronym,address,article,aside,audio,b,bdo,blockquote,button,canvas,cite,code,datalist,dd,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,i,img,input:not([type=checkbox]):not([type=radio]),ins,kbd,keygen,label,main,mark,menu,meter,nav,noscript,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,select,small,strike,strong,sub,summary,sup,svg,textarea,time,u,ul,var,video,wbr{display:block}html{box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-x:hidden}*,::after,::before{box-sizing:inherit}a{background-color:transparent}ol,ul{margin:0;padding:0;list-style-type:none}ol ol,ol ul,td,th,ul ol,ul ul{padding:0}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}address,cite,dfn,em,i,var{font-style:inherit}del,ins,s,strike,u{text-decoration:inherit}code,kbd,pre,samp,tt{font-family:inherit;font-size:inherit}q::after,q::before{content:"";content:none}blockquote,q{quotes:none}mark{background-color:inherit}hr{box-sizing:content-box;height:0}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}:focus{outline:0}table{border-collapse:collapse;border-spacing:0}caption{text-align:inherit}embed,iframe,img,object,video{height:auto;max-width:100%}audio{max-width:100%}fieldset{margin:0;padding:0}legend{border:0;padding:0}button,input:not([type=checkbox]):not([type=radio]),optgroup,select,textarea{margin:0;padding:0;border:none;background:0 0;font:inherit;color:inherit}select{border-radius:0;-webkit-appearance:none}textarea{overflow:auto}button{overflow:visible}button,select{text-transform:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button,html input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:button;cursor:pointer;text-align:left}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit}::-moz-placeholder{opacity:inherit}:-ms-input-placeholder{color:inherit}[hidden],template{display:none}body{margin:0;line-height:1} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index a19f54f..d1d71ad 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,7 +9,7 @@ var distDir = 'dist'; var srcDir = 'src'; gulp.task('build', function() { - return gulp.src(srcDir + '/**/[^_]*.sass') + return gulp.src(srcDir + '/**/[^_]*.scss') .pipe(gulpSass()).on('error', gulpSass.logError) .pipe(gulp.dest(distDir)) .pipe(browserSync.stream()) @@ -32,7 +32,7 @@ gulp.task('serve', ['build'], function() { }); gulp.watch('test/**/*.html').on('change', browserSync.reload); - gulp.watch(srcDir + '/**/*.sass', ['build']); + gulp.watch(srcDir + '/**/*.scss', ['build']); }); gulp.task('default', ['build']) diff --git a/src/_accessibility.sass b/src/_accessibility.scss similarity index 92% rename from src/_accessibility.sass rename to src/_accessibility.scss index b39c281..648e2bb 100644 --- a/src/_accessibility.sass +++ b/src/_accessibility.scss @@ -11,13 +11,15 @@ * made for standard and expected behavior, but it is easy enough to add * a focus outline back in the application styling if that's what you want. */ -:focus - outline: none /* 1 */ +:focus { + outline: none; +} /** * 1. Remove the underline that Firefox adds to elements with a title. * * Again, this might be controversal but see the comments on :focus above. */ -[title] - text-decoration: none /* 1 */ +[title] { + text-decoration: none; +} diff --git a/src/_blocks.sass b/src/_blocks.scss similarity index 96% rename from src/_blocks.sass rename to src/_blocks.scss index 9330469..02b3d3c 100644 --- a/src/_blocks.sass +++ b/src/_blocks.scss @@ -16,5 +16,6 @@ a, address, cite, code, dd, dfn, dl, dt, figcaption, figure, kbd, ol, ul, samp, rp, rt, ruby, /* language elements */ details, meter, progress, summary, /* interactive elements */ audio, canvas, embed, img, svg, video, /* embedded content */ -button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea /* form elements */ - display: block /* 1 */ +button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea /* form elements */ { + display: block; /* 1 */ +} diff --git a/src/_box-sizing.sass b/src/_box-sizing.scss similarity index 81% rename from src/_box-sizing.sass rename to src/_box-sizing.scss index 20dc26b..7ec91fb 100644 --- a/src/_box-sizing.sass +++ b/src/_box-sizing.scss @@ -7,8 +7,10 @@ * This method seems to cause the least number of headaches and override * issues. */ -html - box-sizing: border-box /* 1 */ +html { + box-sizing: border-box; +} -*, *::before, *::after - box-sizing: inherit /* 1 */ +*, *::before, *::after { + box-sizing: inherit; +} diff --git a/src/_embedded-content.sass b/src/_embedded-content.scss similarity index 77% rename from src/_embedded-content.sass rename to src/_embedded-content.scss index c7fbae5..081d2aa 100644 --- a/src/_embedded-content.sass +++ b/src/_embedded-content.scss @@ -5,25 +5,29 @@ * high specificity and makes it difficult to override. `img` shouldn't * have borders anyway, so no harm no foul. */ -img - border: none +img { + border: none; +} /** * 1. Remove borders from iframes. This isn't 1995 any more. */ -iframe - border: none /* 1 */ +iframe { + border: none; /* 1 */ +} /** * 1. Prevent modern browsers from displaying `audio` without controls. * 2. Remove excess height in iOS 5 devices (from normalize.css). */ -audio:not([controls]) - display: none /* 1 */ - height: 0 /* 2 */ +audio:not([controls]) { + display: none; /* 1 */ + height: 0; /* 2 */ +} /** * Correct overflow not hidden in IE 9/10/11 (from normalize.css). */ -svg:not(:root) - overflow: hidden +svg:not(:root) { + overflow: hidden; +} diff --git a/src/_form-elements.sass b/src/_form-elements.scss similarity index 71% rename from src/_form-elements.sass rename to src/_form-elements.scss index 09d1ecd..8669799 100644 --- a/src/_form-elements.sass +++ b/src/_form-elements.scss @@ -1,19 +1,21 @@ /** * 1. Fully reset fieldsets removing all default styling. */ -fieldset - margin: 0 /* 1 */ - padding: 0 /* 1 */ - border: none /* 1 */ +fieldset { + margin: 0; /* 1 */ + padding: 0; /* 1 */ + border: none; /* 1 */ +} /** * 1. Fully reset lengends removing all default styling. * 2. On Android Chrome browser lengends don't expand to 100%, so we fix that. */ -legend - border: 0 /* 1 */ - padding: 0 /* 1 */ - width: 100% /* 2 */ +legend { + border: 0; /* 1 */ + padding: 0; /* 1 */ + width: 100%; /* 2 */ +} /** * Known limitation: by default, Chrome and Safari on OS X allow very limited @@ -23,13 +25,14 @@ input:not([type="checkbox"]):not([type="radio"]), optgroup, select, textarea, -button - margin: 0 - padding: 0 - border: none - background: none - font: inherit - color: inherit +button { + margin: 0; + padding: 0; + border: none; + background: none; + font: inherit; + color: inherit; +} /** * 1. Remove border-radius in Safari. @@ -38,21 +41,24 @@ button * Note that this also removes the dropdown arrow in Safari, which isn't * ideal but there is little we can do about it. */ -select - border-radius: 0 /* 1 */ - -webkit-appearance: none /* 2 */ +select { + border-radius: 0; /* 1 */ + -webkit-appearance: none; /* 2 */ +} /** * Remove default vertical scrollbar in IE 8/9/10/11 (from normalize.css). */ -textarea - overflow: auto +textarea { + overflow: auto; +} /** * 1. Address `overflow` set to `hidden` in IE 8/9/10/11 (from normalize.css). */ -button - overflow: visible /* 1 */ +button { + overflow: visible; /* 1 */ +} /** * 1. Address inconsistent `text-transform` inheritance for `button` and @@ -62,17 +68,20 @@ button * (from normalize.css). */ button, -select - text-transform: none /* 1 */ +select { + text-transform: none; /* 1 */ +} /** * 1. Remove inner padding and border in Firefox 4+ (from normalize.css). */ button, -input - &::-moz-focus-inner - border: 0 /* 1 */ - padding: 0 /* 1 */ +input { + &::-moz-focus-inner { + border: 0; /* 1 */ + padding: 0; /* 1 */ + } +} /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -82,26 +91,29 @@ input * `input` and others. */ button, -html input[type="button"] /* 1 */, +html input[type="button"], /* 1 */ input[type="submit"], -input[type="reset"] - -webkit-appearance: button /* 2 */ - cursor: pointer /* 3 */ - text-align: left +input[type="reset"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + text-align: left; +} /** * Re-set default cursor for disabled elements. */ button[disabled], -html input[disabled] - cursor: default +html input[disabled] { + cursor: default; +} /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ -input - line-height: normal +input { + line-height: normal; +} /** * Checkboxes and radio inputs are not styleable in most browsers unfortunately, @@ -111,19 +123,22 @@ input * 2. Remove excess padding in IE 8/9/10 (from normalize.css). */ input[type="checkbox"], -input[type="radio"] - box-sizing: border-box /* 1 */ - padding: 0 /* 2 */ +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ -input[type="number"] +input[type="number"] { &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button - height: auto + &::-webkit-outer-spin-button { + height: auto; + } +} /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome which is @@ -136,12 +151,14 @@ input[type="number"] * safar * */ -input[type="search"] - -webkit-appearance: textfield /* 1 */ +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ &::-webkit-search-cancel-button, - &::-webkit-search-decoration - -webkit-appearance: none /* 2 */ + &::-webkit-search-decoration { + -webkit-appearance: none; /* 2 */ + } +} /** * 1. Update input placeholders to inherit color (IE, Chrome and Safari) and @@ -151,9 +168,12 @@ input[type="search"] * a known bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1004130) with no * workaround :(. */ -::-webkit-input-placeholder - color: inherit /* 1 */ -::-moz-placeholder - opacity: inherit /* 1 */ -:-ms-input-placeholder - color: inherit /* 1 */ +::-webkit-input-placeholder { + color: inherit; /* 1 */ +} +::-moz-placeholder { + opacity: inherit; /* 1 */ +} +:-ms-input-placeholder { + color: inherit; /* 1 */ +}; diff --git a/src/_hidden.sass b/src/_hidden.scss similarity index 82% rename from src/_hidden.sass rename to src/_hidden.scss index 302dcd3..a2fb0e7 100644 --- a/src/_hidden.sass +++ b/src/_hidden.scss @@ -4,5 +4,6 @@ * (from normalize.css). */ [hidden], -template - display: none /* 1 */ +template { + display: none; /* 1 */ +} diff --git a/src/_links.sass b/src/_links.sass deleted file mode 100644 index f79de86..0000000 --- a/src/_links.sass +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 1. Fully reset link styling. - * 2. Remove gray background color from active links in IE 10 - * (from normalize.css). - */ -a - color: inherit /* 1 */ - text-decoration: none /* 1 */ - background-color: transparent /* 2 */ - - &:link, &:active, &:visited - color: inherit /* 1 */ diff --git a/src/_links.scss b/src/_links.scss new file mode 100644 index 0000000..c8ea658 --- /dev/null +++ b/src/_links.scss @@ -0,0 +1,14 @@ +/** + * 1. Fully reset link styling. + * 2. Remove gray background color from active links in IE 10 + * (from normalize.css). + */ +a { + color: inherit; /* 1 */ + text-decoration: none; /* 1 */ + background-color: transparent; /* 2 */ + + &:link, &:active, &:visited { + color: inherit; /* 1 */ + } +} diff --git a/src/_lists.sass b/src/_lists.sass deleted file mode 100644 index 49199d8..0000000 --- a/src/_lists.sass +++ /dev/null @@ -1,7 +0,0 @@ -ul, ol - margin: 0 - padding: 0 - list-style-type: none - - ol, ul - padding: 0 diff --git a/src/_lists.scss b/src/_lists.scss new file mode 100644 index 0000000..61f2550 --- /dev/null +++ b/src/_lists.scss @@ -0,0 +1,9 @@ +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; + + ol, ul { + padding: 0; + } +} diff --git a/src/_responsive.sass b/src/_responsive.sass deleted file mode 100644 index 333b1dd..0000000 --- a/src/_responsive.sass +++ /dev/null @@ -1,13 +0,0 @@ -html - width: 100% - overflow-x: hidden - -input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress - width: 100% - -img, video, object, embed, iframe - height: auto - max-width: 100% - -audio - max-width: 100% diff --git a/src/_responsive.scss b/src/_responsive.scss new file mode 100644 index 0000000..44d9f07 --- /dev/null +++ b/src/_responsive.scss @@ -0,0 +1,17 @@ +html { + width: 100%; + overflow-x: hidden; +} + +input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress { + width: 100%; +} + +img, video, object, embed, iframe { + height: auto; + max-width: 100%; +} + +audio { + max-width: 100%; +} diff --git a/src/_tables.sass b/src/_tables.sass deleted file mode 100644 index 9e9134c..0000000 --- a/src/_tables.sass +++ /dev/null @@ -1,9 +0,0 @@ -table - border-collapse: collapse - border-spacing: 0 - -td, th - padding: 0 - -caption - text-align: inherit diff --git a/src/_tables.scss b/src/_tables.scss new file mode 100644 index 0000000..62853d5 --- /dev/null +++ b/src/_tables.scss @@ -0,0 +1,12 @@ +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, th { + padding: 0; +} + +caption { + text-align: inherit; +} diff --git a/src/_typography.sass b/src/_typography.sass deleted file mode 100644 index a4dc81b..0000000 --- a/src/_typography.sass +++ /dev/null @@ -1,85 +0,0 @@ -/** - * 1. Prevent iOS and IE text size adjust after device orientation change - * without disabling user zoom. - */ -html - -ms-text-size-adjust: 100% /* 1 */ - -webkit-text-size-adjust: 100% /* 1 */ - -/** - * 1. Remove all styling from `h1-6` elements. - */ -h1, h2, h3, h4, h5, h6 - margin: 0 /* 1 */ - font-size: inherit /* 1 */ - font-weight: inherit /* 1 */ - -/** - * 1. Remove extra margin around these elements. - */ -p, dl, dd, pre, figure, blockquote - margin: 0 /* 1 */ - -/** - * 1. Ensure that these elements inherit font-style. - */ -i, cite, em, var, address, dfn - font-style: inherit /* 1 */ - -/** - * 1. Ensure that these elements inherit text-decoration. - */ -u, s, strike, del, ins - text-decoration: inherit /* 1 */ - -/** - * 1. Ensure that these elements inherit font-weight. - */ -dfn, strong, th, b - font-weight: inherit /* 1 */ - -small - font-size: inherit - -/** - * 1. Ensure that font-family is inherited. - * 2. Inherit font size in IE. - */ -tt, code, kbd, samp, pre - font-family: inherit /* 1 */ - font-size: inherit /* 2 */ - -/** - * 1. Remove quotation marks. - */ -q - &::before, &::after - content: '' /* 1 */ - content: none /* 1 */ -blockquote, q - quotes: none /* 1 */ - -/** - * 1. Reset styling for `mark` elements. - */ -mark - background-color: inherit /* 1 */ - color: inherit /* 1 */ - -hr - box-sizing: content-box /* 1 */ - height: 0 /* 1 */ - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers - * (from normalize.css). - */ -sub, sup - font-size: 75% - line-height: 0 - position: relative - vertical-align: baseline -sup - top: -0.5em -sub - bottom: -0.25em diff --git a/src/_typography.scss b/src/_typography.scss new file mode 100644 index 0000000..2342518 --- /dev/null +++ b/src/_typography.scss @@ -0,0 +1,101 @@ +/** + * 1. Prevent iOS and IE text size adjust after device orientation change + * without disabling user zoom. + */ +html { + -ms-text-size-adjust: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 1 */ +} + +/** + * 1. Remove all styling from `h1-6` elements. + */ +h1, h2, h3, h4, h5, h6 { + margin: 0; /* 1 */ + font-size: inherit; /* 1 */ + font-weight: inherit; /* 1 */ +} + +/** + * 1. Remove extra margin around these elements. + */ +p, dl, dd, pre, figure, blockquote { + margin: 0; /* 1 */ +} + +/** + * 1. Ensure that these elements inherit font-style. + */ +i, cite, em, var, address, dfn { + font-style: inherit; /* 1 */ +} + +/** + * 1. Ensure that these elements inherit text-decoration. + */ +u, s, strike, del, ins { + text-decoration: inherit; /* 1 */ +} + +/** + * 1. Ensure that these elements inherit font-weight. + */ +dfn, strong, th, b { + font-weight: inherit; /* 1 */ +} + +small { + font-size: inherit; +} + +/** + * 1. Ensure that font-family is inherited. + * 2. Inherit font size in IE. + */ +tt, code, kbd, samp, pre { + font-family: inherit; /* 1 */ + font-size: inherit; /* 2 */ +} + +/** + * 1. Remove quotation marks. + */ +q { + &::before, &::after { + content: ""; /* 1 */ + content: none; /* 1 */ + } +} +blockquote, q { + quotes: none; /* 1 */ +} + +/** + * 1. Reset styling for `mark` elements. + */ +mark { + background-color: inherit; /* 1 */ + color: inherit; /* 1 */ +} + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers + * (from normalize.css). + */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} diff --git a/src/total-reset.sass b/src/total-reset.sass deleted file mode 100644 index df81438..0000000 --- a/src/total-reset.sass +++ /dev/null @@ -1,19 +0,0 @@ -@import blocks -@import box-sizing -@import links -@import lists -@import typography -@import embedded-content -@import accessibility -@import tables -@import responsive -@import form-elements -@import hidden - -/** - * 1. Remove default padding on body. - * 2. Normalize line-height. - */ -body - margin: 0 /* 1 */ - line-height: 1 /* 2 */ diff --git a/src/total-reset.scss b/src/total-reset.scss new file mode 100644 index 0000000..c1713e6 --- /dev/null +++ b/src/total-reset.scss @@ -0,0 +1,20 @@ +@import "blocks"; +@import "box-sizing"; +@import "links"; +@import "lists"; +@import "typography"; +@import "embedded-content"; +@import "accessibility"; +@import "tables"; +@import "responsive"; +@import "form-elements"; +@import "hidden"; + +/** + * 1. Remove default padding on body. + * 2. Normalize line-height. + */ +body { + margin: 0; /* 1 */ + line-height: 1; /* 2 */ +}