Switch to SCSS syntax to resolve abiguous syntax issues in SASS
This commit is contained in:
parent
82b1c35392
commit
71d96ab639
SSH key fingerprint:
SHA256:JlIGiQLPyQ2RHTH3a2oVlb20Xkh9Glr8DUF4YTXHJxM
22 changed files with 365 additions and 252 deletions
|
|
@ -18,7 +18,7 @@
|
|||
},
|
||||
"main": [
|
||||
"dist/total-reset.css",
|
||||
"src/total-reset.sass"
|
||||
"src/total-reset.scss"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
|
|
|
|||
113
dist/total-reset.css
vendored
113
dist/total-reset.css
vendored
|
|
@ -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 */ }
|
||||
|
|
|
|||
2
dist/total-reset.min.css
vendored
2
dist/total-reset.min.css
vendored
|
|
@ -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}
|
||||
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}
|
||||
|
|
@ -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'])
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
};
|
||||
|
|
@ -4,5 +4,6 @@
|
|||
* (from normalize.css).
|
||||
*/
|
||||
[hidden],
|
||||
template
|
||||
display: none /* 1 */
|
||||
template {
|
||||
display: none; /* 1 */
|
||||
}
|
||||
|
|
@ -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 */
|
||||
14
src/_links.scss
Normal file
14
src/_links.scss
Normal file
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
ul, ol
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
||||
ol, ul
|
||||
padding: 0
|
||||
9
src/_lists.scss
Normal file
9
src/_lists.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
ol, ul {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%
|
||||
17
src/_responsive.scss
Normal file
17
src/_responsive.scss
Normal file
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
td, th
|
||||
padding: 0
|
||||
|
||||
caption
|
||||
text-align: inherit
|
||||
12
src/_tables.scss
Normal file
12
src/_tables.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
caption {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
|
@ -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
|
||||
101
src/_typography.scss
Normal file
101
src/_typography.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
20
src/total-reset.scss
Normal file
20
src/total-reset.scss
Normal file
|
|
@ -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 */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue