This import is deprecated. Please import reset utilities instead.
These utilities are used to reset your document. The easiest way to use them
is to simply @import "compass/reset" which will import this module and apply
the appropriate mixins for you.
This file can be imported using:
@import "compass/reset/utilities-legacy"
=global-reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
+reset-box-model
+reset-font
body
+reset-body
ol, ul
+reset-list-style
table
+reset-table
caption, th, td
+reset-table-cell
q, blockquote
+reset-quotation
a img
+reset-image-anchor-border
@mixin global-reset {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
@include reset-box-model;
@include reset-font;
}
body {
@include reset-body;
}
ol, ul {
@include reset-list-style;
}
table {
@include reset-table;
}
caption, th, td {
@include reset-table-cell;
}
q, blockquote {
@include reset-quotation;
}
a img {
@include reset-image-anchor-border;
}
}
Based on Eric Meyer's reset Global reset rules. For more specific resets, use the reset mixins provided below
Please Note: tables still need cellspacing="0" in the markup.
=nested-reset
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+reset-box-model
+reset-font
table
+reset-table
caption, th, td
+reset-table-cell
q, blockquote
+reset-quotation
a img
+reset-image-anchor-border
@mixin nested-reset {
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
@include reset-box-model;
@include reset-font;
}
table {
@include reset-table;
}
caption, th, td {
@include reset-table-cell;
}
q, blockquote {
@include reset-quotation;
}
a img {
@include reset-image-anchor-border;
}
}
Reset all elements within some selector scope. To reset the selector itself, mixin the appropriate reset mixin for that element type as well. This could be useful if you want to style a part of your page in a dramatically different way.
Please Note: tables still need cellspacing="0" in the markup.
=reset-box-model margin: 0 padding: 0 border: 0 outline: 0
@mixin reset-box-model {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
Reset the box model measurements.
=reset-font
font:
weight: inherit
style: inherit
size: 100%
family: inherit
vertical-align: baseline
@mixin reset-font {
font: {
weight: inherit;
style: inherit;
size: 100%;
family: inherit;
};
vertical-align: baseline;
}
Reset the font and vertical alignment.
=reset-focus outline: 0
@mixin reset-focus {
outline: 0;
}
Resets the outline when focus. For accessibility you need to apply some styling in its place.
=reset-body line-height: 1 color: black background: white
@mixin reset-body {
line-height: 1;
color: black;
background: white;
}
Reset a body element.
=reset-list-style list-style: none
@mixin reset-list-style {
list-style: none;
}
Reset the list style of an element.
=reset-table border-collapse: separate border-spacing: 0 vertical-align: middle
@mixin reset-table {
border-collapse: separate;
border-spacing: 0;
vertical-align: middle;
}
Reset a table
=reset-table-cell text-align: left font-weight: normal vertical-align: middle
@mixin reset-table-cell {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
Reset a table cell (th, td)
=reset-quotation
quotes: "" ""
&:before, &:after
content: ""
@mixin reset-quotation {
quotes: "" "";
&:before, &:after {
content: "";
}
}
Reset a quotation (q, blockquote)
=reset-image-anchor-border border: none
@mixin reset-image-anchor-border {
border: none;
}
Resets the border.
=reset-html5
#{elements-of-type(html5-block)}
+reset-box-model
display: block
@mixin reset-html5 {
#{elements-of-type(html5-block)} {
@include reset-box-model;
display: block;
}
}
Unrecognized elements are displayed inline. This reset provides a basic reset for html5 elements so they are rendered correctly in browsers that don't recognize them and reset in browsers that have default styles for them.
=reset-display($selector: "", $important: false)
#{append-selector(elements-of-type("inline"), $selector)}
@if $important
display: inline !important
@else
display: inline
#{append-selector(elements-of-type("block"), $selector)}
@if $important
display: block !important
@else
display: block
@mixin reset-display($selector: "", $important: false) {
#{append-selector(elements-of-type("inline"), $selector)} {
@if $important {
display: inline !important;
}
@else {
display: inline;
}
}
#{append-selector(elements-of-type("block"), $selector)} {
@if $important {
display: block !important;
}
@else {
display: block;
}
}
}
Resets the display of inline and block elements to their default display according to their tag type. Elements that have a default display that varies across versions of html or browser are not handled here, but this covers the 90% use case. Usage Example:
// Turn off the display for both of these classes
.unregistered-only, .registered-only
display: none
// Now turn only one of them back on depending on some other context.
body.registered
+reset-display(".registered-only")
body.unregistered
+reset-display(".unregistered-only")