From 239e43b4e04ee28a59edfa4678c87d6076f85d1d Mon Sep 17 00:00:00 2001 From: Glenn McLelland Date: Fri, 25 Mar 2011 17:21:50 -0500 Subject: [PATCH 1/4] Added force-wrap mixin to prevent URLs and long lines of text from breaking layouts. Closes GH-321 --- doc-src/content/CHANGELOG.markdown | 1 + .../compass/typography/text/force-wrap.haml | 15 +++++++++++++++ .../stylesheets/compass/typography/_text.scss | 1 + .../compass/typography/text/_force-wrap.scss | 12 ++++++++++++ .../stylesheets/compass/css/force-wrap.css | 10 ++++++++++ .../stylesheets/compass/sass/force-wrap.scss | 3 +++ 6 files changed, 42 insertions(+) create mode 100644 doc-src/content/reference/compass/typography/text/force-wrap.haml create mode 100644 frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss create mode 100644 test/fixtures/stylesheets/compass/css/force-wrap.css create mode 100644 test/fixtures/stylesheets/compass/sass/force-wrap.scss diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 30b83893..1a4876c6 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -21,6 +21,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org Set `$relative-font-sizing` to `false` to enable. * Vertical rhythm now has a minimum padding that defaults to 2px. This makes some edge cases look better. +* New mixin `force-wrap` prevents URLs and long lines of text from breaking layouts. 0.11.3 (06/11/2011) ------------------- diff --git a/doc-src/content/reference/compass/typography/text/force-wrap.haml b/doc-src/content/reference/compass/typography/text/force-wrap.haml new file mode 100644 index 00000000..01c747d2 --- /dev/null +++ b/doc-src/content/reference/compass/typography/text/force-wrap.haml @@ -0,0 +1,15 @@ +--- +title: Wrapping Long Text and URLs +crumb: Force Wrap +framework: compass +stylesheet: compass/typography/text/_force-wrap.scss +layout: core +meta_description: Wrap URLs and long lines of text. +classnames: + - reference + - core + - typography +--- +- render 'reference' do + %p + This mixin will wrap URLs and long lines of text to prevent text from breaking layouts. diff --git a/frameworks/compass/stylesheets/compass/typography/_text.scss b/frameworks/compass/stylesheets/compass/typography/_text.scss index 9cd3f0a1..885f729d 100644 --- a/frameworks/compass/stylesheets/compass/typography/_text.scss +++ b/frameworks/compass/stylesheets/compass/typography/_text.scss @@ -1,3 +1,4 @@ @import "text/ellipsis"; @import "text/nowrap"; @import "text/replacement"; +@import "text/force-wrap"; diff --git a/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss b/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss new file mode 100644 index 00000000..8a14e8f4 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss @@ -0,0 +1,12 @@ +// Prevent long urls and text from breaking layouts +// [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/) +@mixin force-wrap { + white-space: pre; // CSS 2.0 + white-space: pre-wrap; // CSS 2.1 + white-space: pre-line; // CSS 3.0 + white-space: -pre-wrap; // Opera 4-6 + white-space: -o-pre-wrap; // Opera 7 + white-space: -moz-pre-wrap; // Mozilla + white-space: -hp-pre-wrap; // HP Printers + word-wrap: break-word; // IE 5+ +} diff --git a/test/fixtures/stylesheets/compass/css/force-wrap.css b/test/fixtures/stylesheets/compass/css/force-wrap.css new file mode 100644 index 00000000..5eda4c31 --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/force-wrap.css @@ -0,0 +1,10 @@ +pre { + white-space: pre; /* CSS 2.0 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3.0 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + white-space: -moz-pre-wrap; /* Mozilla */ + white-space: -hp-pre-wrap; /* HP Printers */ + word-wrap: break-word; /* IE 5+ */ +} diff --git a/test/fixtures/stylesheets/compass/sass/force-wrap.scss b/test/fixtures/stylesheets/compass/sass/force-wrap.scss new file mode 100644 index 00000000..c71f28e6 --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/force-wrap.scss @@ -0,0 +1,3 @@ +@import "compass/typography/text"; + +pre { @include force-wrap; } From 8837b0a3470be2448a1913694bcf27f907a95dca Mon Sep 17 00:00:00 2001 From: "German M. Bravo" Date: Fri, 22 Apr 2011 12:37:39 -0500 Subject: [PATCH 2/4] Transitions accepting multiple transitions separated by commas --- .../stylesheets/compass/css3/_transition.scss | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index 60487bcc..405a3c26 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss @@ -72,7 +72,7 @@ $default-transition-delay: false !default; // Transition all-in-one shorthand -@mixin transition( +@mixin single-transition( $properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, @@ -83,3 +83,37 @@ $default-transition-delay: false !default; @if $function { @include transition-timing-function($function); } @if $delay { @include transition-delay($delay); } } + +@mixin transition( + $transition-1 : default, + $transition-2 : false, + $transition-3 : false, + $transition-4 : false, + $transition-5 : false, + $transition-6 : false, + $transition-7 : false, + $transition-8 : false, + $transition-9 : false, + $transition-10: false +) { + $legacy: (type-of($transition-1) == string and type-of(if($transition-2, $transition-2, 0)) == number and type-of(if($transition-3, $transition-3, '')) == string and type-of(if($transition-4, $transition-4, 0)) == number and ($transition-2 or $transition-3 or $transition-4)); + @if $legacy { + @warn "Passing separate arguments for a single transition to transition is deprecated. " + + "Pass the values as a single space-separated list, or use the single-transition mixin."; + @include single-transition( + if($transition-1, $transition-1, $default-transition-property), + if($transition-2, $transition-2, $default-transition-duration), + if($transition-3, $transition-3, $default-transition-funciton), + if($transition-4, $transition-4, $default-transition-delay) + ); + } + @else { + @if $transition-1 == default { + $transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay)); + } + $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10); + @include experimental(transition, $transition, + -moz, -webkit, -o, not -ms, not -khtml, official + ); + } +} From 349e29f7ca7c13f64f393b56f79f0563ad268e4c Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 2 Jul 2011 17:54:38 -0700 Subject: [PATCH 3/4] Fix broken test. --- .../stylesheets/compass/css/force-wrap.css | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/test/fixtures/stylesheets/compass/css/force-wrap.css b/test/fixtures/stylesheets/compass/css/force-wrap.css index 5eda4c31..2fb33551 100644 --- a/test/fixtures/stylesheets/compass/css/force-wrap.css +++ b/test/fixtures/stylesheets/compass/css/force-wrap.css @@ -1,10 +1,9 @@ -pre { - white-space: pre; /* CSS 2.0 */ - white-space: pre-wrap; /* CSS 2.1 */ - white-space: pre-line; /* CSS 3.0 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - white-space: -moz-pre-wrap; /* Mozilla */ - white-space: -hp-pre-wrap; /* HP Printers */ - word-wrap: break-word; /* IE 5+ */ -} +pre { + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + white-space: -moz-pre-wrap; + white-space: -hp-pre-wrap; + word-wrap: break-word; } From ab270c1adb0e2f26711bf70c2f37eff62b6ccf23 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 2 Jul 2011 18:05:02 -0700 Subject: [PATCH 4/4] Fix edge case issue when there's no cache location. --- lib/compass/compiler.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compass/compiler.rb b/lib/compass/compiler.rb index a10aee99..76f59b89 100644 --- a/lib/compass/compiler.rb +++ b/lib/compass/compiler.rb @@ -84,7 +84,7 @@ module Compass def run if new_config? # Wipe out the cache and force compilation if the configuration has changed. - remove options[:cache_location] + remove options[:cache_location] if options[:cache_location] options[:force] = true end