diff --git a/app/assets/stylesheets/_bourbon.css.scss b/app/assets/stylesheets/_bourbon.css.scss index 6206e160b..7fc6ff35e 100644 --- a/app/assets/stylesheets/_bourbon.css.scss +++ b/app/assets/stylesheets/_bourbon.css.scss @@ -1,12 +1,11 @@ // Custom Functions -@import "functions/compact"; @import "functions/golden-ratio"; -@import "functions/linear-gradient"; @import "functions/tint-shade"; +@import "functions/gradient"; // CSS3 Mixins @import "css3/animation"; -@import "css3/backround-image"; +@import "css3/background-image"; @import "css3/border-radius"; @import "css3/box-shadow"; @import "css3/box-sizing"; diff --git a/app/assets/stylesheets/css3/_background-image.css.scss b/app/assets/stylesheets/css3/_background-image.css.scss index 749dbb1fc..0e47a74d5 100644 --- a/app/assets/stylesheets/css3/_background-image.css.scss +++ b/app/assets/stylesheets/css3/_background-image.css.scss @@ -7,54 +7,96 @@ $image-7: false, $image-8: false, $image-9: false, $image-10: false ) { - $images: $image-1, $image-2, + $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, - $image-9, $image-10; + $image-9, $image-10); $assets: false; $gradients: false; - $all-assets: 0; - $all-gradients: 0; + $count: 0; - @each $image in $images { - // Detect images passed into mixin and join into a list. - @if type-of($image) == string { - $assets: join($assets, $image); + //Find all asset images in list + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); + + @if $type == list { + $count: $count + 1; } - // Detect gradients passed into mixin and join into a list. - @else if type-of($image) == list { - $gradients: join($gradients, $image); + + @else if $type == string { + @if $assets == false { + $assets: nth($images, $i); + } + + @else { + $assets: join($assets, nth($images, $i), comma); + } } } - // Remove false value - $all-assets: nth($assets, 2); - @for $n from 3 through length($assets) { - @if $n { - $all-assets: $all-assets, nth($assets, $n); + // Find all gradients in list + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); + + @if $type == list { + @if $gradients == false { + $gradients: nth($images, $i); + } + @else { + $gradients: $gradients, nth($images, $i); + } } } - @if length($gradients) >= 2 { - // Remove flase value - $all-gradients: nth($gradients, 2); - @for $n from 3 through length($gradients) { - @if $n { - $all-gradients: $all-gradients, nth($gradients, $n); + @function render-gradients($gradients, $vendor: false) { + @if $count == 1 { + $vendor-gradients: false; + @if $vendor { + $vendor-gradients: -#{$vendor}-linear-gradient($gradients); } + @else if $vendor == false { + $vendor-gradients: linear-gradient($gradients); + } + @return $vendor-gradients; + } + + @else if $count >= 2 { + $vendor-gradients: false; + @for $i from 1 through length($gradients) { + @if $vendor { + @if $vendor-gradients == false { + $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i)); + } + @else { + $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i)); + } + } + @else if $vendor == false { + @if $vendor-gradients { + $vendor-gradients: linear-gradient(nth($gradients, $i)); + } + @else { + $vendor-gradients: $vendor-gradients, linear-gradient(nth($gradients, $i)); + } + } + } + @return $vendor-gradients; } } - @if length($gradients) >= 2 { - background-image: $all-assets, -webkit-linear-gradient($all-gradients); - background-image: $all-assets, -moz-linear-gradient($all-gradients); - background-image: $all-assets, -ms-linear-gradient($all-gradients); - background-image: $all-assets, -o-linear-gradient($all-gradients); - background-image: $all-assets, linear-gradient($all-gradients); + + + @if $count >= 1 { + background-image: $assets, render-gradients($gradients, webkit); + background-image: $assets, render-gradients($gradients, moz); + background-image: $assets, render-gradients($gradients, ms); + background-image: $assets, render-gradients($gradients, o); + background-image: $assets, render-gradients($gradients); + } @else { - background-image: $all-assets; + background-image: $assets; } } //Examples: diff --git a/app/assets/stylesheets/functions/_compact.css.scss b/app/assets/stylesheets/functions/_compact.css.scss deleted file mode 100644 index a54a880d4..000000000 --- a/app/assets/stylesheets/functions/_compact.css.scss +++ /dev/null @@ -1,16 +0,0 @@ -@function compact($var-1, $var-2: false, - $var-3: false, $var-4: false, - $var-5: false, $var-6: false, - $var-7: false, $var-8: false, - $var-9: false, $var-10: false) { - $full: $var-1; - $vars: $var-2, $var-3, $var-4, $var-5, - $var-6, $var-7, $var-8, $var-9, $var-10; - - @each $var in $vars { - @if $var { - $full: $full, $var; - } - } - @return $full; -} diff --git a/app/assets/stylesheets/functions/_gradient.css.scss b/app/assets/stylesheets/functions/_gradient.css.scss new file mode 100644 index 000000000..f3db494d9 --- /dev/null +++ b/app/assets/stylesheets/functions/_gradient.css.scss @@ -0,0 +1,19 @@ +@function gradient($pos: top, $G1: false, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if $pos-type == color or transparent { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + @return join($pos, $full, comma); + //@return $pos, $full; +} diff --git a/lib/bourbon.rb b/lib/bourbon.rb index be80d42ce..7c2102316 100644 --- a/lib/bourbon.rb +++ b/lib/bourbon.rb @@ -11,3 +11,5 @@ class Railtie < ::Rails::Railtie end end end + +require "bourbon/sass_extensions" diff --git a/lib/bourbon/sass_extensions.rb b/lib/bourbon/sass_extensions.rb new file mode 100644 index 000000000..52d35d4a1 --- /dev/null +++ b/lib/bourbon/sass_extensions.rb @@ -0,0 +1,4 @@ +module Bourbon::SassExtensions +end + +require "bourbon/sass_extensions/functions" diff --git a/lib/bourbon/sass_extensions/functions.rb b/lib/bourbon/sass_extensions/functions.rb new file mode 100644 index 000000000..ea2b89a2d --- /dev/null +++ b/lib/bourbon/sass_extensions/functions.rb @@ -0,0 +1,15 @@ +module Bourbon::SassExtensions::Functions +end + +%w(compact).each do |func| + require "bourbon/sass_extensions/functions/#{func}" +end + +module Sass::Script::Functions + include Bourbon::SassExtensions::Functions::Compact +end + +# Wierd that this has to be re-included to pick up sub-modules. Ruby bug? +class Sass::Script::Functions::EvaluationContext + include Sass::Script::Functions +end diff --git a/lib/bourbon/sass_extensions/functions/compact.rb b/lib/bourbon/sass_extensions/functions/compact.rb new file mode 100644 index 000000000..5192e921e --- /dev/null +++ b/lib/bourbon/sass_extensions/functions/compact.rb @@ -0,0 +1,13 @@ +# Compact function pulled from compass +module Bourbon::SassExtensions::Functions::Compact + + def compact(*args) + sep = :comma + if args.size == 1 && args.first.is_a?(Sass::Script::List) + args = args.first.value + sep = args.first.separator + end + Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) + end + +end