From c1be6c9362fa671d9bc8d1c0b33fec8799a369c8 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Fri, 30 Apr 2010 07:03:41 -0700 Subject: [PATCH] Move the reset utilities from utilities/general/reset to reset/utilities. --- .../compass/stylesheets/compass/_reset.scss | 2 +- .../stylesheets/compass/reset/_utilities.scss | 135 ++++++++++++++++++ .../compass/utilities/general/_reset.scss | 124 +--------------- .../stylesheets/compass/css/reset.css | 1 - 4 files changed, 138 insertions(+), 124 deletions(-) create mode 100644 frameworks/compass/stylesheets/compass/reset/_utilities.scss diff --git a/frameworks/compass/stylesheets/compass/_reset.scss b/frameworks/compass/stylesheets/compass/_reset.scss index 2e8541c9..e181dd78 100644 --- a/frameworks/compass/stylesheets/compass/_reset.scss +++ b/frameworks/compass/stylesheets/compass/_reset.scss @@ -1,3 +1,3 @@ -@import "utilities/general/reset"; +@import "reset/utilities"; @include global-reset; diff --git a/frameworks/compass/stylesheets/compass/reset/_utilities.scss b/frameworks/compass/stylesheets/compass/reset/_utilities.scss new file mode 100644 index 00000000..7e58fbeb --- /dev/null +++ b/frameworks/compass/stylesheets/compass/reset/_utilities.scss @@ -0,0 +1,135 @@ +// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) +// Global reset rules. +// For more specific resets, use the reset mixins provided below +// +// *Please Note*: tables still need `cellspacing="0"` in the markup. +@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; } + *:focus { + @include reset-focus; } + 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; } } + +// 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. +@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 the box model measurements. +@mixin reset-box-model { + margin: 0; + padding: 0; + border: 0; + outline: 0; } + +// Reset the font and vertical alignment. +@mixin reset-font { + font: { + weight: inherit; + style: inherit; + size: 100%; + family: inherit; }; + vertical-align: baseline; } + +// Resets the outline when focus. +// For accessibility you need to apply some styling in its place. +@mixin reset-focus { + outline: 0; } + +// Reset a body element. +@mixin reset-body { + line-height: 1; + color: black; + background: white; } + +// Reset the list style of an element. +@mixin reset-list-style { + list-style: none; } + +// Reset a table +@mixin reset-table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; } + +// Reset a table cell (`th`, `td`) +@mixin reset-table-cell { + text-align: left; + font-weight: normal; + vertical-align: middle; } + +// Reset a quotation (`q`, `blockquote`) +@mixin reset-quotation { + quotes: "" ""; + &:before, &:after { + content: ""; } } + +// Resets the border. +@mixin reset-image-anchor-border { + border: none; } + +// 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. +@mixin reset-html5 { + section, article, aside, header, footer, nav, dialog, figure { + 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") +@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; } } } diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_reset.scss b/frameworks/compass/stylesheets/compass/utilities/general/_reset.scss index 87134646..f5f64877 100644 --- a/frameworks/compass/stylesheets/compass/utilities/general/_reset.scss +++ b/frameworks/compass/stylesheets/compass/utilities/general/_reset.scss @@ -1,122 +1,2 @@ -// Based on Eric Meyer's reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - -// Global reset rules. -// For more specific resets, use the reset mixins provided below -@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; } - *:focus { - @include reset-focus; } - body { - @include reset-body; } - ol, ul { - @include reset-list-style; } - /* tables still need 'cellspacing="0"' in the markup */ - 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. -@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; } - /* tables still need 'cellspacing="0"' in the markup */ - table { - @include reset-table; } - caption, th, td { - @include reset-table-cell; } - q, blockquote { - @include reset-quotation; } - a img { - @include reset-image-anchor-border; } } - -//Mixins partials -@mixin reset-box-model { - margin: 0; - padding: 0; - border: 0; - outline: 0; } - -@mixin reset-font { - font: { - weight: inherit; - style: inherit; - size: 100%; - family: inherit; }; - vertical-align: baseline; } - -@mixin reset-focus { - outline: 0; } - -@mixin reset-body { - line-height: 1; - color: black; - background: white; } - -@mixin reset-list-style { - list-style: none; } - -@mixin reset-table { - border-collapse: separate; - border-spacing: 0; - vertical-align: middle; } - -@mixin reset-table-cell { - text-align: left; - font-weight: normal; - vertical-align: middle; } - -@mixin reset-quotation { - quotes: "" ""; - &:before, &:after { - content: ""; } } - -@mixin reset-image-anchor-border { - border: none; } - -@mixin reset-html5 { - section, article, aside, header, footer, nav, dialog, figure { - 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") -@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; } } } +// This module has moved. +@import "compass/reset/utilities"; \ No newline at end of file diff --git a/test/fixtures/stylesheets/compass/css/reset.css b/test/fixtures/stylesheets/compass/css/reset.css index f9c21fb5..86328e21 100644 --- a/test/fixtures/stylesheets/compass/css/reset.css +++ b/test/fixtures/stylesheets/compass/css/reset.css @@ -27,7 +27,6 @@ body { ol, ul { list-style: none; } -/* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0;