Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding basic IE gradient overlay support

  • Loading branch information...
commit 07ed969efd53117a217bf2e228e895da0c13bf0b 1 parent 9b188c3
@jhardy authored
View
1  README.mkdn
@@ -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
4 sassy-buttons.gemspec
@@ -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"
View
7 stylesheets/_sassy-buttons.sass
@@ -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)
View
8 stylesheets/sassy-buttons/_sassy-button-gradients.sass
@@ -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"
View
7 templates/project/_sassybuttons.sass
@@ -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);
View
1  templates/project/manifest.rb
@@ -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"
View
BIN  templates/project/sassy-ie-overlay.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.