Skip to content

Instantly share code, notes, and snippets.

@calvincorreli
Created November 30, 2011 10:25
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save calvincorreli/1408585 to your computer and use it in GitHub Desktop.
Save calvincorreli/1408585 to your computer and use it in GitHub Desktop.
IE gradient mixin with SCSS/SASS
@mixin gradient($first, $second) {
background-color: $second;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($first)}', endColorstr='#{ie-hex-str($second)}');";
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($first)}', endColorstr='#{ie-hex-str($second)}');;
zoom: 1;
background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
background: -moz-linear-gradient(top, $first, $second);
}
require 'sass'
module Sass::Script::Functions
# LARS: Snatched from compass - 2011-11-29 - used for gradients in IE6-9
# returns an IE hex string for a color with an alpha channel
# suitable for passing to IE filters.
def ie_hex_str(color)
assert_type color, :Color
alpha = (color.alpha * 255).round
alphastr = alpha.to_s(16).rjust(2, '0')
Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
end
declare :ie_hex_str, [:color]
end
@jensgro
Copy link

jensgro commented Apr 5, 2012

I tried for a long time today to solve exactly this problem. But unfortunately there is no dec-to-hex-function in Sass. Your solution ssems straightforward for me. How could I use your sass_helpers.rb without having a ruby-project and without having any knowledge of ruby? Is this only for ruby-programmers?

@calvincorreli
Copy link
Author

calvincorreli commented Apr 11, 2012 via email

@dsecrest
Copy link

dsecrest commented May 4, 2012

Where would one put this sass_helpers.rb file in a rails project?

@calvincorreli
Copy link
Author

calvincorreli commented May 4, 2012 via email

@xhh
Copy link

xhh commented Jan 10, 2013

Where to put the mixins.css.scss file? I put it to *lib/assets/stylesheets/" but it doesn't work, seems not overriding activeadmin's default gradient mixin.

@xhh
Copy link

xhh commented Jan 10, 2013

Answering my own question: I need to "@import" the mixin scss file in active_admin.css.scss

BTW setting "alphastr" to "00" works better for activeadmin buttons (the default is "FF", displaying a white background for rounded buttons).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment