Created
August 16, 2012 09:57
-
-
Save stryju/3369008 to your computer and use it in GitHub Desktop.
custom normalize
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ | |
/* | |
* usage: | |
* @import "normalize"; | |
* | |
* // this will print out ALL selectors | |
* @include normalize(); | |
* | |
* // this will print out minimal set (*) -- you can see the list of "excluded" tags below | |
* @include normalize( $include : none ); | |
* | |
* // this will print out minimal set + article, but without form ( and anything related to form, like input ) and h1-h6 tags | |
* @include normalize( $include : article, $exclude : form "h*" ); | |
* | |
* // this will print out ALL selectors, but will not use IE 6/7 "hacks" | |
* @include normalize( $hacks : false ); | |
*/ | |
/* | |
* (*) "excluded" in minimal: | |
* - abbr | |
* - article | |
* - aside | |
* - audio | |
* - blockquote | |
* - canvas | |
* - code | |
* - details | |
* - dfn | |
* - fieldset | |
* - figcaption | |
* - figure | |
* - footer | |
* - header | |
* - hgroup | |
* - kdb | |
* - legend | |
* - mark | |
* - menu | |
* - nav | |
* - q | |
* - samp | |
* - section | |
* - small | |
* - sub | |
* - summary | |
* - sup | |
* - svg | |
* - table | |
* - video | |
*/ | |
@function in-list( $value, $list ) { | |
$found : false; | |
@each $item in $list { | |
@if $value == $item { | |
$found : true; | |
} | |
} | |
@return $found; | |
} | |
@mixin if-in-list( | |
$elements, | |
$list, | |
$extend, | |
$is-in-list : true | |
) { | |
@each $element in $elements { | |
$found : false; | |
@if $is-in-list { | |
@if in-list( $element, $list ) { | |
$found : true; | |
} | |
} @else { | |
@if not in-list( $element, $list ) { | |
$found : true; | |
} | |
} | |
@if $found { | |
#{$element} { | |
@extend %#{$extend}; | |
} | |
} | |
} | |
} | |
@mixin normalize( | |
$include : abbr article aside audio blockquote canvas code details dfn fieldset figcaption figure footer header hgroup kdb legend mark menu nav q samp section small sub summary sup svg table video, | |
$exclude : none, | |
$hacks : false | |
) { | |
///// base css placeholders ///// | |
// display: block; | |
%normalize-display-block { | |
display: block; | |
} | |
// display: inline-block; | |
%normalize-display-inline-block { | |
display: inline-block; | |
@if $hacks { | |
*display: inline; | |
*zoom: 1; | |
} | |
} | |
// display: none; | |
%normalize-display-none { | |
display: none; | |
} | |
// border: 0; | |
%normalize-border-0 { | |
border: 0; | |
} | |
// font-family: sans-serif; | |
%normalize-font-sans-serif { | |
font-family: sans-serif; | |
} | |
// font-family: monospace; | |
%normalize-font-mono { | |
font-family: monospace, serif; | |
_font-family: 'courier new', monospace; | |
font-size: 1em; | |
} | |
// font-weight: bold; | |
%normalize-font-weight-bold { | |
font-weight: 700; | |
} | |
// outline:0; | |
%normalize-outline-0 { | |
outline: 0; | |
} | |
// line-height: normal; | |
%normalize-line-height-normal { | |
line-height: normal; | |
} | |
// margin: 0; | |
%normalize-margin-0 { | |
margin: 0; | |
} | |
// margin: 1em 0; | |
%normalize-margin-1em-0 { | |
margin: 1em 0; | |
} | |
// padding: 0; | |
%normalize-padding-0 { | |
padding: 0; | |
} | |
// padding: 0 0 0 40px; | |
%normalize-padding-0-0-0-40px { | |
padding: 0 0 0 40px; | |
} | |
// list-style: none; | |
%no-list-style { | |
list-style: none; | |
list-style-image: none; | |
} | |
// cursor: default; | |
%normalize-cursor-default { | |
cursor: default; | |
} | |
///// element placeholders ///// | |
// sup, sub | |
%normalized-sup_sub { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
// pre | |
%normalized-pre { | |
white-space: pre; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
} | |
// input, select, button, textarea | |
/* | |
* 1. Corrects font size not being inherited in all browsers. | |
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, | |
* and Chrome. | |
* 3. Improves appearance and consistency in all browsers. | |
*/ | |
%normalized-inputs { | |
font-size: 100%; /* 1 */ | |
@extend %normalize-margin-0; /* 2 */ | |
vertical-align: baseline; /* 3 */ | |
@if $hacks { | |
*vertical-align: middle; /* 3 */ | |
} | |
} | |
// button, input[type="submit"], input[type="button"] ... | |
/* | |
* 2. Corrects inability to style clickable `input` types in iOS. | |
* 3. Improves usability and consistency of cursor style between image-type | |
* `input` and others. | |
* 4. Removes inner spacing in IE 7 without affecting normal text inputs. | |
* Known issue: inner spacing remains in IE 6. | |
*/ | |
%normalized-button { | |
-webkit-appearance: button; /* 2 */ | |
cursor: pointer; /* 3 */ | |
@if $hacks { | |
*overflow: visible; /* 4 */ | |
} | |
} | |
// input[type="checkbox"], input[type="radio"] | |
%normalized-checkable { | |
box-sizing: border-box; /* 1 */ | |
@extend %normalize-padding-0; /* 2 */ | |
@if $hacks { | |
*height: 13px; /* 3 */ | |
*width: 13px; /* 3 */ | |
} | |
} | |
// ::-moz-focus-inner | |
/* | |
* Removes inner padding and border in Firefox 3+. | |
*/ | |
%normalized-moz-focus-inner { | |
@if not in-list( "::-moz-focus-inner", $exclude ) { | |
@extend %normalize-border-0; | |
@extend %normalize-padding-0; | |
} | |
} | |
/* ========================================================================== | |
HTML5 display definitions | |
========================================================================== */ | |
/* | |
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. | |
*/ | |
@include if-in-list( | |
$elements : article aside details figcaption figure footer header hgroup nav section summary, | |
$list : $include, | |
$extend : normalize-display-block | |
); | |
/* | |
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. | |
*/ | |
@include if-in-list( | |
$elements : audio canvas video, | |
$list : $include, | |
$extend : normalize-display-inline-block | |
); | |
/* | |
* Prevents modern browsers from displaying `audio` without controls. | |
* Remove excess height in iOS 5 devices. | |
*/ | |
@if in-list( audio, $include) and not in-list( 'audio:not[controls]', $exclude ) { | |
audio:not([controls]) { | |
@extend %normalize-display-none; | |
height: 0; | |
} | |
} | |
/* | |
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, | |
* and Safari 4. | |
* Known issue: no IE 6 support. | |
*/ | |
@if not in-list( '[hidden]', $exclude ) { | |
[hidden] { | |
@extend %normalize-display-none; | |
} | |
} | |
/* ========================================================================== | |
Base | |
========================================================================== */ | |
/* | |
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using | |
* `em` units. | |
* 2. Prevents iOS text size adjust after orientation change, without disabling | |
* user zoom. | |
*/ | |
@if not in-list( html, $exclude ) { | |
html { | |
@if $hacks { | |
font-size: 100%; /* 1 */ | |
} | |
-webkit-text-size-adjust: 100%; /* 2 */ | |
-ms-text-size-adjust: 100%; /* 2 */ | |
} | |
} | |
/* | |
* Addresses `font-family` inconsistency between `textarea` and other form | |
* elements. | |
*/ | |
@include if-in-list( | |
$elements : html button input select textarea, | |
$list : $exclude, | |
$extend : normalize-font-sans-serif, | |
$is-in-list : false | |
); | |
/* | |
* Addresses margins handled incorrectly in IE 6/7. | |
*/ | |
@if not in-list( body, $exclude ) { | |
body { | |
margin: 0; | |
} | |
} | |
/* ========================================================================== | |
Links | |
========================================================================== */ | |
@if not in-list( a, $exclude ) { | |
a { | |
/* | |
* Addresses `outline` inconsistency between Chrome and other browsers. | |
*/ | |
@if not in-list( 'a:focus', $exclude ){ | |
&:focus { | |
outline: thin dotted; | |
} | |
} | |
/* | |
* Improves readability when focused and also mouse hovered in all browsers. | |
*/ | |
@include if-in-list( | |
$elements : 'a:active' 'a:hover', | |
$list : $exclude, | |
$extend : normalize-outline-0, | |
$is-in-list : false | |
); | |
} | |
} | |
/* ========================================================================== | |
Typography | |
========================================================================== */ | |
/* | |
* Addresses font sizes and margins set differently in IE 6/7. | |
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, | |
* and Chrome. | |
*/ | |
@if not in-list( 'h*', $exclude ) { | |
// h1 | |
@if not in-list( h1, $exclude ) { | |
h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
} | |
} | |
// h2 | |
@if not in-list( h2, $exclude ) { | |
h2 { | |
font-size: 1.5em; | |
margin: 0.83em 0; | |
} | |
} | |
// h3 | |
@if not in-list( h3, $exclude ) { | |
h3 { | |
font-size: 1.17em; | |
margin: 1em 0; | |
} | |
} | |
// h4 | |
@if not in-list( h4, $exclude ) { | |
h4 { | |
font-size: 1em; | |
margin: 1.33em 0; | |
} | |
} | |
// h5 | |
@if not in-list( h5, $exclude ) { | |
h5 { | |
font-size: 0.83em; | |
margin: 1.67em 0; | |
} | |
} | |
// h6 | |
@if not in-list( h6, $exclude ) { | |
h6 { | |
font-size: 0.75em; | |
margin: 2.33em 0; | |
} | |
} | |
} | |
/* | |
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. | |
*/ | |
@if in-list( abbr, $include ) { | |
abbr[title] { | |
border-bottom: 1px dotted; | |
} | |
} | |
/* | |
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. | |
*/ | |
@include if-in-list( | |
$elements : b strong, | |
$list : $exclude, | |
$extend : normalize-font-weight-bold, | |
$is-in-list : false | |
); | |
@if in-list( blockquote, $include ) { | |
blockquote { | |
margin: 1em 40px; | |
} | |
} | |
/* | |
* Addresses styling not present in Safari 5 and Chrome. | |
*/ | |
@if in-list( dfn, $include ) { | |
dfn { | |
font-style: italic; | |
} | |
} | |
/* | |
* Addresses styling not present in IE 6/7/8/9. | |
*/ | |
@if in-list( mark, $include ) { | |
mark { | |
background: #ff0; | |
color: #000; | |
} | |
} | |
/* | |
* Addresses margins set differently in IE 6/7. | |
*/ | |
@include if-in-list( | |
$elements : p pre, | |
$list : $exclude, | |
$extend : normalize-margin-1em-0, | |
$is-in-list : false | |
); | |
/* | |
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. | |
*/ | |
@include if-in-list( | |
$elements : code kdb samp, | |
$list : $include, | |
$extend : normalize-font-mono | |
); | |
/* | |
* Improves readability of pre-formatted text in all browsers. | |
*/ | |
@if not in-list( pre, $exclude ) { | |
pre { | |
@extend %normalize-font-mono; | |
@extend %normalized-pre; | |
} | |
} | |
@if in-list( q, $include ) { | |
/* | |
* Addresses CSS quotes not supported in IE 6/7. | |
*/ | |
q { | |
quotes: none; | |
} | |
/* | |
* Addresses `quotes` property not supported in Safari 4. | |
*/ | |
q:before, | |
q:after { | |
content: ''; | |
content: none; | |
} | |
} | |
@if in-list( small, $include ) { | |
small { | |
font-size: 75%; | |
} | |
} | |
/* | |
* Prevents `sub` and `sup` affecting `line-height` in all browsers. | |
*/ | |
@if in-list( sup, $include ) { | |
sup { | |
@extend %normalized-sup_sub; | |
top: -0.5em; | |
} | |
} | |
@if in-list( sub, $include ) { | |
sub { | |
@extend %normalized-sup_sub; | |
bottom: -0.25em; | |
} | |
} | |
/* ========================================================================== | |
Lists | |
========================================================================== */ | |
@if not in-list( lists, $exclude ) { | |
/* | |
* Addresses margins set differently in IE 6/7. | |
*/ | |
@include if-in-list( | |
$elements : dl ol ul, | |
$list : $exclude, | |
$extend : normalize-margin-1em-0, | |
$is-in-list : false | |
); | |
@if in-list( menu, $include ) { | |
menu { | |
@extend %normalize-margin-1em-0; | |
@extend %normalize-padding-0-0-0-40px; | |
} | |
} | |
@if not in-list( dl, $exclude ) and not in-list( dd, $exclude ) { | |
dd { | |
margin: 0 0 0 40px; | |
} | |
} | |
/* | |
* Addresses paddings set differently in IE 6/7. | |
*/ | |
@include if-in-list( | |
$elements : ol ul, | |
$list : $exclude, | |
$extend : normalize-padding-0-0-0-40px, | |
$is-in-list : false | |
); | |
/* | |
* Corrects list images handled incorrectly in IE 7. | |
*/ | |
@if in-list( nav, $include ) { | |
nav { | |
@include if-in-list( | |
$elements : ol ul, | |
$list : $exclude, | |
$extend : no-list-style, | |
$is-in-list : false | |
); | |
} | |
} | |
} | |
/* ========================================================================== | |
Embedded content | |
========================================================================== */ | |
/* | |
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. | |
* 2. Improves image quality when scaled in IE 7. | |
*/ | |
@if not in-list( img, $exclude ) { | |
img { | |
@extend %normalize-border-0; /* 1 */ | |
@if $hacks { | |
-ms-interpolation-mode: bicubic; /* 2 */ | |
} | |
} | |
} | |
/* | |
* Corrects overflow displayed oddly in IE 9. | |
*/ | |
@if in-list( svg, $include) { | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
} | |
/* ========================================================================== | |
Figures | |
========================================================================== */ | |
/* | |
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. | |
*/ | |
@if in-list( figure, $include ) { | |
figure { | |
@extend %normalize-margin-0; | |
} | |
} | |
/* ========================================================================== | |
Forms | |
========================================================================== */ | |
@if not in-list( form, $exclude ) { | |
/* | |
* Corrects margin displayed oddly in IE 6/7. | |
*/ | |
form { | |
@extend %normalize-margin-0; | |
} | |
/* | |
* Define consistent border, margin, and padding. | |
*/ | |
@if in-list( fieldset, $include ) { | |
fieldset { | |
border: 1px solid #c0c0c0; | |
margin: 0 2px; | |
padding: 0.35em 0.625em 0.75em; | |
} | |
/* | |
* 1. Corrects color not being inherited in IE 6/7/8/9. | |
* 2. Corrects text not wrapping in Firefox 3. | |
* 3. Corrects alignment displayed oddly in IE 6/7. | |
*/ | |
@if in-list( legend, $include ) { | |
legend { | |
@extend %normalize-border-0; /* 1 */ | |
@extend %normalize-padding-0; | |
white-space: normal; /* 2 */ | |
@if $hacks { | |
*margin-left: -7px; /* 3 */ | |
} | |
} | |
} | |
} | |
@include if-in-list( | |
$elements : button input select textarea, | |
$list : $exclude, | |
$extend : normalized-inputs, | |
$is-in-list : false | |
); | |
/* | |
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in | |
* the UA stylesheet. | |
*/ | |
@include if-in-list( | |
$elements : button input, | |
$list : $exclude, | |
$extend : normalize-line-height-normal, | |
$is-in-list : false | |
); | |
/* | |
* Re-set default cursor for disabled elements. | |
*/ | |
@if not in-list( button, $exclude ) { | |
button { | |
@extend %normalized-button; | |
&::-moz-focus-inner { | |
@extend %normalized-moz-focus-inner; | |
} | |
@if not in-list( "[disabled]", $exclude ) and not in-list( "button[disabled]", $exclude ) { | |
&[disabled] { | |
@extend %normalize-cursor-default; | |
} | |
} | |
} | |
} | |
@if not in-list( "input", $exclude ) { | |
input { | |
@extend %normalize-line-height-normal; | |
&::-moz-focus-inner { | |
@extend %normalized-moz-focus-inner; | |
} | |
@if not in-list( "[disabled]", $exclude ) and not in-list( "input[disabled]", $exclude ) { | |
&[disabled] { | |
@extend %normalize-cursor-default; | |
} | |
} | |
} | |
@if not in-list( "[type]", $exclude ) and not in-list( "input[type]", $exclude ) { | |
/* | |
* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
* and `video` controls. | |
*/ | |
@if not in-list( 'input[type="button"]', $exclude ) { | |
html input[type="button"] { | |
@extend %normalized-button; | |
} | |
} | |
@include if-in-list( | |
$elements : 'input[type="reset"]' 'input[type="submit"]', | |
$list : $exclude, | |
$extend : normalized-button, | |
$is-in-list : false | |
); | |
/* | |
* 1. Addresses box sizing set to content-box in IE 8/9. | |
* 2. Removes excess padding in IE 8/9. | |
* 3. Removes excess padding in IE 7. | |
* Known issue: excess padding remains in IE 6. | |
*/ | |
@if not in-list( ":checkable", $exclude ) { | |
@include if-in-list( | |
$elements : 'input[type="checkbox"]' 'input[type="radio"]', | |
$list : $exclude, | |
$extend : normalized-checkable, | |
$is-in-list : false | |
); | |
} | |
/* | |
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. | |
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome | |
* (include `-moz` to future-proof). | |
*/ | |
@if not in-list( 'input[type="search"]', $exclude ) { | |
input[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; /* 2 */ | |
box-sizing: content-box; | |
/* | |
* Removes inner padding and search cancel button in Safari 5 and Chrome | |
* on OS X. | |
*/ | |
&::-webkit-search-cancel-button, | |
&::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
} | |
} | |
} | |
} | |
/* | |
* 1. Removes default vertical scrollbar in IE 6/7/8/9. | |
* 2. Improves readability and alignment in all browsers. | |
*/ | |
@if not in-list( textarea, $exclude ) { | |
textarea { | |
overflow: auto; /* 1 */ | |
vertical-align: top; /* 2 */ | |
} | |
} | |
} | |
/* ========================================================================== | |
Tables | |
========================================================================== */ | |
/* | |
* Remove most spacing between table cells. | |
*/ | |
@if in-list( table, $include ) { | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "normalize"; | |
@include normalize(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment