Permalink
Browse files

Adding basic IE gradient overlay support

  • Loading branch information...
1 parent 9b188c3 commit 07ed969efd53117a217bf2e228e895da0c13bf0b @jhardy committed Dec 24, 2011
View
@@ -88,6 +88,7 @@ The Sassy Buttons extension provides a set of default sass variables that are us
$sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
$sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
$sb-pseudo-states: true // Automatically generate pseudo state styles.
+ $sb-ie-support: false // Add gradient png for IE 7+
# Sassy Button structure mixin that gets called every time you create a sassy button.
# You can add any custom styles you want applied to all your buttons.
View
@@ -1,7 +1,7 @@
Gem::Specification.new do |s|
# Release Specific Information
- s.version = "0.0.7"
- s.date = "2011-11-17"
+ s.version = "0.0.8"
+ s.date = "2011-12-23"
# Gem Details
s.name = "sassy-buttons"
@@ -18,13 +18,14 @@
$sb-base-color: rgba(11,153,194,1) // Base color of button.
$sb-second-color: false // Optional secondary color for gradient.
-$sb-border-radius: 10px // Border radius of button.
+$sb-border-radius: 5px // Border radius of button.
$sb-padding: .3em 1.5em // Padding that gives button structure.
$sb-font-size: 16px // Font size.
$sb-text-color: #fff // Button font color.
$sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
$sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
$sb-pseudo-states: true // Automatically generate pseudo state styles.
+$sb-ie-support: false // Add gradient png for IE 7+
// Mixing that gets included when calling the sassy-button-structure if you need any
@@ -35,9 +36,9 @@ $sb-pseudo-states: true // Automatically generate pseudo state
line-height: 1.5
// The Sassy Button kitchen sink.
-@mixin sassy-button($gradient-style: $sb-gradient-style, $border-radius: $sb-border-radius, $font-size: $sb-font-size, $first-color: $sb-base-color, $second-color: $sb-second-color, $text-color:$sb-text-color, $text-style: $sb-text-style, $auto-states: $sb-pseudo-states)
+@mixin sassy-button($gradient-style: $sb-gradient-style, $border-radius: $sb-border-radius, $font-size: $sb-font-size, $first-color: $sb-base-color, $second-color: $sb-second-color, $text-color:$sb-text-color, $text-style: $sb-text-style, $auto-states: $sb-pseudo-states, $ie: $sb-ie-support)
@include sassy-button-structure($border-radius, $font-size, $sb-padding)
- @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states)
+ @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states, $ie)
@@ -2,14 +2,18 @@
@import "sassy-button-text"
@import "sassy-button-shadows"
-@mixin sassy-button-gradient($style: "matte", $base-color: $sb-base-color, $second-color: false, $text-color: $sb-text-color, $text-style: $sb-text-style, $auto-states: true)
+@mixin sassy-button-gradient($style: "matte", $base-color: $sb-base-color, $second-color: false, $text-color: $sb-text-color, $text-style: $sb-text-style, $auto-states: $sb-pseudo-states, $ie: $sb-ie-support)
$first-color: $base-color
$lightness : lightness($base-color)
$brightnessDivsor : 1
@if $lightness > 75
$brightnessDivsor : 2
- background-color: $base-color
+ // Add IE Gradient PNG if $sb-ie-support is true else just put add the background color
+ @if $ie
+ background: image-url("sassy-ie-overlay.png") repeat-x bottom left $base-color
+ @else
+ background-color: $base-color
// Matte Gradient Style
@if $style == "matte"
@@ -7,13 +7,14 @@
$sb-base-color: rgba(11,153,194,1) // Base color of button.
$sb-second-color: false // Optional secondary color for gradient.
-$sb-border-radius: 10px // Border radius of button.
+$sb-border-radius: 5px // Border radius of button.
$sb-padding: .3em 1.5em // Padding that gives button structure.
$sb-font-size: 16px // Font size.
$sb-text-color: #fff // Button font color.
$sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
$sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
$sb-pseudo-states: true // Automatically generate pseudo state styles.
+$sb-ie-support: false // Add gradient png for IE 7+
// Mixin that gets included when calling the sassy-button-structure if you need any
// styles applied to all your sassy buttons, add it here.
@@ -27,6 +28,6 @@ $sb-pseudo-states: true // Automatically generate pseudo state
// * Mixin reference
// * -----------------------------------------
-// * @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states);
+// * @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states, ie-support);
// * @include sassy-button-structure(-border-radius, font-size, padding);
-// * @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);
+// * @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states, ie-support);
@@ -1,5 +1,6 @@
# Make sure you list all the project template files here in the manifest.
stylesheet '_sassybuttons.sass', :media => 'screen, projection'
+image 'sassy-ie-overlay.png'
description "Sassy Buttons"
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 07ed969

Please sign in to comment.