diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 60d7a2d7..19f04ecb 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -30,6 +30,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org syntax across all browsers. It is now possible to configure which browsers support which experimental functions outside of the compass release cycle. For details, see the [cross browser helpers](/reference/compass/helpers/cross-browser/). +* [Blueprint] Added a new sass function called span($n) to the grid module which replaces + the now **deprecated span mixin**. If you are using this mixin, please replace it with: + `width: span($n)`. +* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`, + and `select` form fields, so compass no longer defaults to using `!important` in those cases. + If you were relying on this behavior, you may need to adjust your stylesheets accordingly. 0.11.alpha.4 (12/08/2010) diff --git a/examples/blueprint_semantic/src/liquid.scss b/examples/blueprint_semantic/src/liquid.scss index 79ca5dc2..0668be8d 100644 --- a/examples/blueprint_semantic/src/liquid.scss +++ b/examples/blueprint_semantic/src/liquid.scss @@ -20,11 +20,11 @@ body.blueprint { body#index { #page-header { - @include span(6); } + width: span(6); } #files-header { - @include span(8); } + width: span(8); } #description-header { - @include span(10); } + width: span(10); } #info { @include box; ul { diff --git a/examples/blueprint_semantic/src/screen.scss b/examples/blueprint_semantic/src/screen.scss index 889f12c7..b600ab27 100644 --- a/examples/blueprint_semantic/src/screen.scss +++ b/examples/blueprint_semantic/src/screen.scss @@ -20,11 +20,11 @@ body.blueprint { body#index { #page-header { - @include span(6); } + width: span(6); } #files-header { - @include span(8); } + width: span(8); } #description-header { - @include span(10); } + width: span(10); } #info { @include box; ul { diff --git a/frameworks/blueprint/stylesheets/blueprint/_grid.scss b/frameworks/blueprint/stylesheets/blueprint/_grid.scss index 6b6aa28d..2b35b331 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_grid.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_grid.scss @@ -54,15 +54,15 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns @for $n from 1 to $blueprint-grid-columns { .span-#{$n} { @extend .column; - @include span($n); } } + width: span($n); } } .span-#{$blueprint-grid-columns} { @extend .column; - @include span($blueprint-grid-columns); + width: span($blueprint-grid-columns); margin: 0; } input, textarea, select { @for $n from 1 through $blueprint-grid-columns { &.span-#{$n} { - @include span($n, true); } } } + width: span($n); } } } // Add these to a column to append empty cols. @for $n from 1 to $blueprint-grid-columns { .append-#{$n} { @@ -106,9 +106,9 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns // Use this mixins to set the width of n columns. @mixin column($n, $last: false) { @include column-base($last); - @include span($n); } + width: span($n); } -// Return the width of `$n` columns. +// Return the width in pixels of `$n` columns. @function span($n) { @return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1); } @@ -117,7 +117,10 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns // Most of the time you'll want to use `+column` instead. // // This mixin is especially useful for aligning tables to the grid. +// +// @deprecated Please use the span function with the width property instead. @mixin span($n, $important: false) { + @warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})"; @if $important { width: span($n) !important; } @else { diff --git a/test/fixtures/stylesheets/blueprint/css/screen.css b/test/fixtures/stylesheets/blueprint/css/screen.css index 8f301369..db7e3410 100644 --- a/test/fixtures/stylesheets/blueprint/css/screen.css +++ b/test/fixtures/stylesheets/blueprint/css/screen.css @@ -315,53 +315,53 @@ caption { margin: 0; } input.span-1, textarea.span-1, select.span-1 { - width: 30px !important; } + width: 30px; } input.span-2, textarea.span-2, select.span-2 { - width: 70px !important; } + width: 70px; } input.span-3, textarea.span-3, select.span-3 { - width: 110px !important; } + width: 110px; } input.span-4, textarea.span-4, select.span-4 { - width: 150px !important; } + width: 150px; } input.span-5, textarea.span-5, select.span-5 { - width: 190px !important; } + width: 190px; } input.span-6, textarea.span-6, select.span-6 { - width: 230px !important; } + width: 230px; } input.span-7, textarea.span-7, select.span-7 { - width: 270px !important; } + width: 270px; } input.span-8, textarea.span-8, select.span-8 { - width: 310px !important; } + width: 310px; } input.span-9, textarea.span-9, select.span-9 { - width: 350px !important; } + width: 350px; } input.span-10, textarea.span-10, select.span-10 { - width: 390px !important; } + width: 390px; } input.span-11, textarea.span-11, select.span-11 { - width: 430px !important; } + width: 430px; } input.span-12, textarea.span-12, select.span-12 { - width: 470px !important; } + width: 470px; } input.span-13, textarea.span-13, select.span-13 { - width: 510px !important; } + width: 510px; } input.span-14, textarea.span-14, select.span-14 { - width: 550px !important; } + width: 550px; } input.span-15, textarea.span-15, select.span-15 { - width: 590px !important; } + width: 590px; } input.span-16, textarea.span-16, select.span-16 { - width: 630px !important; } + width: 630px; } input.span-17, textarea.span-17, select.span-17 { - width: 670px !important; } + width: 670px; } input.span-18, textarea.span-18, select.span-18 { - width: 710px !important; } + width: 710px; } input.span-19, textarea.span-19, select.span-19 { - width: 750px !important; } + width: 750px; } input.span-20, textarea.span-20, select.span-20 { - width: 790px !important; } + width: 790px; } input.span-21, textarea.span-21, select.span-21 { - width: 830px !important; } + width: 830px; } input.span-22, textarea.span-22, select.span-22 { - width: 870px !important; } + width: 870px; } input.span-23, textarea.span-23, select.span-23 { - width: 910px !important; } + width: 910px; } input.span-24, textarea.span-24, select.span-24 { - width: 950px !important; } + width: 950px; } .append-1 { padding-right: 40px; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css b/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css index a0174227..e017275e 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css @@ -88,53 +88,53 @@ margin: 0; } input.span-1, textarea.span-1, select.span-1 { - width: 30px !important; } + width: 30px; } input.span-2, textarea.span-2, select.span-2 { - width: 70px !important; } + width: 70px; } input.span-3, textarea.span-3, select.span-3 { - width: 110px !important; } + width: 110px; } input.span-4, textarea.span-4, select.span-4 { - width: 150px !important; } + width: 150px; } input.span-5, textarea.span-5, select.span-5 { - width: 190px !important; } + width: 190px; } input.span-6, textarea.span-6, select.span-6 { - width: 230px !important; } + width: 230px; } input.span-7, textarea.span-7, select.span-7 { - width: 270px !important; } + width: 270px; } input.span-8, textarea.span-8, select.span-8 { - width: 310px !important; } + width: 310px; } input.span-9, textarea.span-9, select.span-9 { - width: 350px !important; } + width: 350px; } input.span-10, textarea.span-10, select.span-10 { - width: 390px !important; } + width: 390px; } input.span-11, textarea.span-11, select.span-11 { - width: 430px !important; } + width: 430px; } input.span-12, textarea.span-12, select.span-12 { - width: 470px !important; } + width: 470px; } input.span-13, textarea.span-13, select.span-13 { - width: 510px !important; } + width: 510px; } input.span-14, textarea.span-14, select.span-14 { - width: 550px !important; } + width: 550px; } input.span-15, textarea.span-15, select.span-15 { - width: 590px !important; } + width: 590px; } input.span-16, textarea.span-16, select.span-16 { - width: 630px !important; } + width: 630px; } input.span-17, textarea.span-17, select.span-17 { - width: 670px !important; } + width: 670px; } input.span-18, textarea.span-18, select.span-18 { - width: 710px !important; } + width: 710px; } input.span-19, textarea.span-19, select.span-19 { - width: 750px !important; } + width: 750px; } input.span-20, textarea.span-20, select.span-20 { - width: 790px !important; } + width: 790px; } input.span-21, textarea.span-21, select.span-21 { - width: 830px !important; } + width: 830px; } input.span-22, textarea.span-22, select.span-22 { - width: 870px !important; } + width: 870px; } input.span-23, textarea.span-23, select.span-23 { - width: 910px !important; } + width: 910px; } input.span-24, textarea.span-24, select.span-24 { - width: 950px !important; } + width: 950px; } .append-1 { padding-right: 40px; } diff --git a/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css b/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css index a49ae0ce..c8b84ff6 100644 --- a/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css +++ b/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css @@ -90,53 +90,53 @@ margin: 0; } input.span-1, textarea.span-1, select.span-1 { - width: 30px !important; } + width: 30px; } input.span-2, textarea.span-2, select.span-2 { - width: 70px !important; } + width: 70px; } input.span-3, textarea.span-3, select.span-3 { - width: 110px !important; } + width: 110px; } input.span-4, textarea.span-4, select.span-4 { - width: 150px !important; } + width: 150px; } input.span-5, textarea.span-5, select.span-5 { - width: 190px !important; } + width: 190px; } input.span-6, textarea.span-6, select.span-6 { - width: 230px !important; } + width: 230px; } input.span-7, textarea.span-7, select.span-7 { - width: 270px !important; } + width: 270px; } input.span-8, textarea.span-8, select.span-8 { - width: 310px !important; } + width: 310px; } input.span-9, textarea.span-9, select.span-9 { - width: 350px !important; } + width: 350px; } input.span-10, textarea.span-10, select.span-10 { - width: 390px !important; } + width: 390px; } input.span-11, textarea.span-11, select.span-11 { - width: 430px !important; } + width: 430px; } input.span-12, textarea.span-12, select.span-12 { - width: 470px !important; } + width: 470px; } input.span-13, textarea.span-13, select.span-13 { - width: 510px !important; } + width: 510px; } input.span-14, textarea.span-14, select.span-14 { - width: 550px !important; } + width: 550px; } input.span-15, textarea.span-15, select.span-15 { - width: 590px !important; } + width: 590px; } input.span-16, textarea.span-16, select.span-16 { - width: 630px !important; } + width: 630px; } input.span-17, textarea.span-17, select.span-17 { - width: 670px !important; } + width: 670px; } input.span-18, textarea.span-18, select.span-18 { - width: 710px !important; } + width: 710px; } input.span-19, textarea.span-19, select.span-19 { - width: 750px !important; } + width: 750px; } input.span-20, textarea.span-20, select.span-20 { - width: 790px !important; } + width: 790px; } input.span-21, textarea.span-21, select.span-21 { - width: 830px !important; } + width: 830px; } input.span-22, textarea.span-22, select.span-22 { - width: 870px !important; } + width: 870px; } input.span-23, textarea.span-23, select.span-23 { - width: 910px !important; } + width: 910px; } input.span-24, textarea.span-24, select.span-24 { - width: 950px !important; } + width: 950px; } .append-1 { padding-left: 40px; }