From 47d4cc4638e64b9f50308cfa1549df2efce68b51 Mon Sep 17 00:00:00 2001 From: ltackett Date: Sun, 25 Apr 2010 23:49:16 -0700 Subject: [PATCH] Support for the experimental display: box model. --- doc-src/Gemfile | 2 +- doc-src/Gemfile.lock | 14 ++- .../content/examples/compass/css3/box.haml | 8 ++ .../examples/compass/css3/box/markup.haml | 4 + .../examples/compass/css3/box/stylesheet.sass | 18 ++++ .../content/reference/compass/css3/box.haml | 13 +++ .../compass/stylesheets/compass/_css3.scss | 1 + .../stylesheets/compass/css3/_box.scss | 89 ++++++++++++++++++ .../stylesheets/compass/css3/_shared.scss | 17 ++++ test/compass_test.rb | 2 +- test/fixtures/stylesheets/compass/css/box.css | 90 +++++++++++++++++++ .../stylesheets/compass/sass/box.sass | 50 +++++++++++ 12 files changed, 298 insertions(+), 10 deletions(-) create mode 100644 doc-src/content/examples/compass/css3/box.haml create mode 100644 doc-src/content/examples/compass/css3/box/markup.haml create mode 100644 doc-src/content/examples/compass/css3/box/stylesheet.sass create mode 100644 doc-src/content/reference/compass/css3/box.haml create mode 100644 frameworks/compass/stylesheets/compass/css3/_box.scss create mode 100644 test/fixtures/stylesheets/compass/css/box.css create mode 100644 test/fixtures/stylesheets/compass/sass/box.sass diff --git a/doc-src/Gemfile b/doc-src/Gemfile index e492c282..041cb33d 100644 --- a/doc-src/Gemfile +++ b/doc-src/Gemfile @@ -1,7 +1,7 @@ source :gemcutter # We can switch nanoc to a normal gem when 3.1.3 is released. -gem 'nanoc3', :require => false, :git => "git@github.com:chriseppstein/nanoc.git", :branch => "3.1.x" +gem 'nanoc3', :require => false, :git => "git://github.com/chriseppstein/nanoc.git", :branch => "3.1.x" gem 'rdiscount' gem 'thor' gem 'rack' diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 187b900b..271db5e0 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -68,8 +68,7 @@ specs: - coderay: version: 0.9.3 - haml: - version: 3.0.0.beta.3 - source: 0 + version: 3.0.0.rc.1 - compass: version: 0.10.0.rc3 source: 0 @@ -79,7 +78,6 @@ specs: version: 1.0.1 - css-slideshow: version: 0.2.0 - source: 0 - fssm: version: 0.1.4 - mime-types: @@ -92,20 +90,20 @@ specs: - rack: version: 1.1.0 - rdiscount: - version: 1.6.3 + version: 1.6.3.1 - serve: version: 0.10.0 - thor: version: 0.13.4 -hash: c67f2ebb37154944e05b728b70c2e3322d370d59 +hash: 09bc9dccbf40f91aa0fa543d0f77ef9bb3951559 sources: - Path: path: !ruby/object:Pathname - path: /Users/chris/Projects/compass/doc-src/../.. + path: /Users/ltackett/github/compass/doc-src/../.. - Git: - uri: git@github.com:chriseppstein/nanoc.git + uri: git://github.com/chriseppstein/nanoc.git branch: 3.1.x - git: git@github.com:chriseppstein/nanoc.git + git: git://github.com/chriseppstein/nanoc.git require: false ref: 398294262623dac9bb15dcbbfc0ba33c04f8125e - Rubygems: diff --git a/doc-src/content/examples/compass/css3/box.haml b/doc-src/content/examples/compass/css3/box.haml new file mode 100644 index 00000000..cb6a6e05 --- /dev/null +++ b/doc-src/content/examples/compass/css3/box.haml @@ -0,0 +1,8 @@ +--- +title: CSS3 Flexible Box +description: mixins for the CSS3 flexible box +framework: compass +stylesheet: compass/css3/_box.scss +example: true +--- += render "partials/example" diff --git a/doc-src/content/examples/compass/css3/box/markup.haml b/doc-src/content/examples/compass/css3/box/markup.haml new file mode 100644 index 00000000..eb890bd7 --- /dev/null +++ b/doc-src/content/examples/compass/css3/box/markup.haml @@ -0,0 +1,4 @@ +.example + .content Some great content + .sidebar A sidebar + diff --git a/doc-src/content/examples/compass/css3/box/stylesheet.sass b/doc-src/content/examples/compass/css3/box/stylesheet.sass new file mode 100644 index 00000000..255a83e0 --- /dev/null +++ b/doc-src/content/examples/compass/css3/box/stylesheet.sass @@ -0,0 +1,18 @@ +@import compass/css3 + +.example + +display-box + +box-orient(horizontal) + +box-align(stretch) + +box-direction(reverse) + height: 200px + width: 100% + .content, .sidebar + padding: 20px + .content + +box-flex(4) + background-color: #C5C1B4 + .sidebar + +box-flex(1) + background-color: #375F99 + margin-right: 1px \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/box.haml b/doc-src/content/reference/compass/css3/box.haml new file mode 100644 index 00000000..d8b6f883 --- /dev/null +++ b/doc-src/content/reference/compass/css3/box.haml @@ -0,0 +1,13 @@ +--- +title: Compass Box +crumb: Box +framework: compass +stylesheet: compass/css3/_box.scss +meta_description: This module provides mixins that pertain to the CSS3 Flexible Box. +layout: core +classnames: + - reference +--- +- render 'reference' do + %p + This module provides mixins that pertain to the CSS3 Flexible Box. diff --git a/frameworks/compass/stylesheets/compass/_css3.scss b/frameworks/compass/stylesheets/compass/_css3.scss index 76a09756..c87e3d45 100644 --- a/frameworks/compass/stylesheets/compass/_css3.scss +++ b/frameworks/compass/stylesheets/compass/_css3.scss @@ -5,6 +5,7 @@ @import "css3/text-shadow"; @import "css3/columns"; @import "css3/box-sizing"; +@import "css3/box"; @import "css3/gradient"; @import "css3/background-clip"; @import "css3/background-origin"; diff --git a/frameworks/compass/stylesheets/compass/css3/_box.scss b/frameworks/compass/stylesheets/compass/css3/_box.scss new file mode 100644 index 00000000..47e471fe --- /dev/null +++ b/frameworks/compass/stylesheets/compass/css3/_box.scss @@ -0,0 +1,89 @@ +@import "shared"; + +// display:box; must be used for any of the other flexbox mixins to work properly +@mixin display-box { + @include experimental-value(display,box); +} + +// Default box orientation, assuming that the user wants something less block-like +$default-box-orient: horizontal !default; + +// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ] +@mixin box-orient( + $orientation: $default-box-orient +) { + @include experimental(box-orient, $orientation); +} + +// Default box-align +$default-box-align: stretch !default; + +// Box align [ start | end | center | baseline | stretch ] +@mixin box-align( + $alignment: $default-box-align +) { + @include experimental(box-align, $alignment); +} + +// Default box flex +$default-box-flex: 0 !default; + +// mixin which takes an int argument for box flex. Apply this to the children inside the box. +// +// For example: "div.display-box > div.child-box" would get the box flex mixin. +@mixin box-flex( + $flex: $default-box-flex +) { + @include experimental(box-flex, $flex); + display: block; +} + +// Default flex group +$default-box-flex-group: 1 !default; + +// mixin which takes an int argument for flexible grouping +@mixin box-flex-group( + $group: $default-box-flex-group +) { + @include experimental(box-flex-group, $group); +} + +// default for ordinal group +$default-box-ordinal-group: 1 !default; + +// mixin which takes an int argument for ordinal grouping and rearranging the order +@mixin box-ordinal-group( + $group: $default-ordinal-flex-group +) { + @include experimental(box-ordinal-group, $group); +} + +// Box direction default value +$default-box-direction: normal !default; + +// mixin for box-direction [ normal | reverse | inherit ] +@mixin box-direction( + $direction: $default-box-direction +) { + @include experimental(box-direction, $direction); +} + +// default for box lines +$default-box-lines: single !default; + +// mixin for box lines [ single | multiple ] +@mixin box-lines( + $lines: $default-box-lines +) { + @include experimental(box-lines, $lines); +} + +// default for box pack +$default-box-pack: start !default; + +// mixin for box pack [ start | end | center | justify ] +@mixin box-pack( + $pack: $default-box-pack +) { + @include experimental(box-pack, $pack); +} \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_shared.scss b/frameworks/compass/stylesheets/compass/css3/_shared.scss index 85c7e247..3b51e892 100644 --- a/frameworks/compass/stylesheets/compass/css3/_shared.scss +++ b/frameworks/compass/stylesheets/compass/css3/_shared.scss @@ -27,4 +27,21 @@ $experimental-support-for-khtml : false !default; @if $ms { -ms-#{$property} : $value; } @if $khtml { -khtml-#{$property} : $value; } @if $official { #{$property} : $value; } +} + +// Same as experimental(), but for cases when the property is the same and the value is vendorized +@mixin experimental-value($property, $value, + $moz : $experimental-support-for-mozilla, + $webkit : $experimental-support-for-webkit, + $o : $experimental-support-for-opera, + $ms : $experimental-support-for-microsoft, + $khtml : $experimental-support-for-khtml, + $official : true +) { + @if $moz { #{$property} : -moz-#{$value}; } + @if $webkit { #{$property} : -webkit-#{$value}; } + @if $o { #{$property} : -o-#{$value}; } + @if $ms { #{$property} : -ms-#{$value}; } + @if $khtml { #{$property} : -khtml-#{$value}; } + @if $official { #{$property} : #{$value}; } } \ No newline at end of file diff --git a/test/compass_test.rb b/test/compass_test.rb index 665d0070..fabec4db 100644 --- a/test/compass_test.rb +++ b/test/compass_test.rb @@ -42,7 +42,7 @@ class CompassTest < Test::Unit::TestCase each_css_file(proj.css_path) do |css_file| assert_no_errors css_file, 'compass' end - assert_renders_correctly :reset, :layout, :utilities, :gradients, :image_size + assert_renders_correctly :reset, :layout, :utilities, :gradients, :image_size, :box end end diff --git a/test/fixtures/stylesheets/compass/css/box.css b/test/fixtures/stylesheets/compass/css/box.css new file mode 100644 index 00000000..795c795e --- /dev/null +++ b/test/fixtures/stylesheets/compass/css/box.css @@ -0,0 +1,90 @@ +.hbox { + display: -moz-box; + display: -webkit-box; + display: box; + -moz-box-orient: horizontal; + -webkit-box-orient: horizontal; + box-orient: horizontal; + -moz-box-align: stretch; + -webkit-box-align: stretch; + box-align: stretch; } + .hbox > * { + -moz-box-flex: 0; + -webkit-box-flex: 0; + box-flex: 0; + display: block; } + +.vbox { + display: -moz-box; + display: -webkit-box; + display: box; + -moz-box-orient: vertical; + -webkit-box-orient: vertical; + box-orient: vertical; + -moz-box-align: stretch; + -webkit-box-align: stretch; + box-align: stretch; } + .vbox > * { + -moz-box-flex: 0; + -webkit-box-flex: 0; + box-flex: 0; + display: block; } + +.spacer { + -moz-box-flex: 1; + -webkit-box-flex: 1; + box-flex: 1; + display: block; } + +.reverse { + -moz-box-direction: reverse; + -webkit-box-direction: reverse; + box-direction: reverse; } + +.box-flex-0 { + -moz-box-flex: 0; + -webkit-box-flex: 0; + box-flex: 0; + display: block; } + +.box-flex-1 { + -moz-box-flex: 1; + -webkit-box-flex: 1; + box-flex: 1; + display: block; } + +.box-flex-2 { + -moz-box-flex: 2; + -webkit-box-flex: 2; + box-flex: 2; + display: block; } + +.box-flex-group-0 { + -moz-box-flex-group: 0; + -webkit-box-flex-group: 0; + box-flex-group: 0; } + +.box-flex-group-1 { + -moz-box-flex-group: 1; + -webkit-box-flex-group: 1; + box-flex-group: 1; } + +.box-flex-group-2 { + -moz-box-flex-group: 2; + -webkit-box-flex-group: 2; + box-flex-group: 2; } + +.start { + -moz-box-pack: start; + -webkit-box-pack: start; + box-pack: start; } + +.end { + -moz-box-pack: end; + -webkit-box-pack: end; + box-pack: end; } + +.center { + -moz-box-pack: center; + -webkit-box-pack: center; + box-pack: center; } diff --git a/test/fixtures/stylesheets/compass/sass/box.sass b/test/fixtures/stylesheets/compass/sass/box.sass new file mode 100644 index 00000000..879a3b5d --- /dev/null +++ b/test/fixtures/stylesheets/compass/sass/box.sass @@ -0,0 +1,50 @@ +@import compass/css3 + +.hbox + +display-box + +box-orient + +box-align + + & > * + +box-flex + +.vbox + +display-box + +box-orient(vertical) + +box-align + + & > * + +box-flex + +.spacer + +box-flex(1) + +.reverse + +box-direction(reverse) + +.box-flex-0 + +box-flex(0) + +.box-flex-1 + +box-flex(1) + +.box-flex-2 + +box-flex(2) + +.box-flex-group-0 + +box-flex-group(0) + +.box-flex-group-1 + +box-flex-group(1) + +.box-flex-group-2 + +box-flex-group(2) + +.start + +box-pack(start) + +.end + +box-pack(end) + +.center + +box-pack(center) \ No newline at end of file