sassy-buttons 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. data/README.mkdn +1 -0
  2. data/stylesheets/_sassy-buttons.sass +4 -3
  3. data/stylesheets/sassy-buttons/_sassy-button-gradients.sass +6 -2
  4. data/templates/project/_sassybuttons.sass +4 -3
  5. data/templates/project/manifest.rb +1 -0
  6. data/templates/project/sassy-ie-overlay.png +0 -0
  7. metadata +5 -4
data/README.mkdn CHANGED
@@ -88,6 +88,7 @@ The Sassy Buttons extension provides a set of default sass variables that are us
88
88
  $sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
89
89
  $sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
90
90
  $sb-pseudo-states: true // Automatically generate pseudo state styles.
91
+ $sb-ie-support: false // Add gradient png for IE 7+
91
92
 
92
93
  # Sassy Button structure mixin that gets called every time you create a sassy button.
93
94
  # You can add any custom styles you want applied to all your buttons.
data/stylesheets/_sassy-buttons.sass CHANGED
@@ -18,13 +18,14 @@
18
18
 
19
19
  $sb-base-color: rgba(11,153,194,1) // Base color of button.
20
20
  $sb-second-color: false // Optional secondary color for gradient.
21
- $sb-border-radius: 10px // Border radius of button.
21
+ $sb-border-radius: 5px // Border radius of button.
22
22
  $sb-padding: .3em 1.5em // Padding that gives button structure.
23
23
  $sb-font-size: 16px // Font size.
24
24
  $sb-text-color: #fff // Button font color.
25
25
  $sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
26
26
  $sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
27
27
  $sb-pseudo-states: true // Automatically generate pseudo state styles.
28
+ $sb-ie-support: false // Add gradient png for IE 7+
28
29
 
29
30
 
30
31
  // 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
35
36
  line-height: 1.5
36
37
 
37
38
  // The Sassy Button kitchen sink.
38
- @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)
39
+ @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)
39
40
  @include sassy-button-structure($border-radius, $font-size, $sb-padding)
40
- @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states)
41
+ @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states, $ie)
41
42
 
42
43
 
43
44
 
data/stylesheets/sassy-buttons/_sassy-button-gradients.sass CHANGED
@@ -2,14 +2,18 @@
2
2
  @import "sassy-button-text"
3
3
  @import "sassy-button-shadows"
4
4
 
5
- @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)
5
+ @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)
6
6
  $first-color: $base-color
7
7
  $lightness : lightness($base-color)
8
8
  $brightnessDivsor : 1
9
9
  @if $lightness > 75
10
10
  $brightnessDivsor : 2
11
11
 
12
- background-color: $base-color
12
+ // Add IE Gradient PNG if $sb-ie-support is true else just put add the background color
13
+ @if $ie
14
+ background: image-url("sassy-ie-overlay.png") repeat-x bottom left $base-color
15
+ @else
16
+ background-color: $base-color
13
17
 
14
18
  // Matte Gradient Style
15
19
  @if $style == "matte"
data/templates/project/_sassybuttons.sass CHANGED
@@ -7,13 +7,14 @@
7
7
 
8
8
  $sb-base-color: rgba(11,153,194,1) // Base color of button.
9
9
  $sb-second-color: false // Optional secondary color for gradient.
10
- $sb-border-radius: 10px // Border radius of button.
10
+ $sb-border-radius: 5px // Border radius of button.
11
11
  $sb-padding: .3em 1.5em // Padding that gives button structure.
12
12
  $sb-font-size: 16px // Font size.
13
13
  $sb-text-color: #fff // Button font color.
14
14
  $sb-text-style: "inset" // Style of button text, can be "inset" or "raised" or false.
15
15
  $sb-gradient-style: "simple" // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
16
16
  $sb-pseudo-states: true // Automatically generate pseudo state styles.
17
+ $sb-ie-support: false // Add gradient png for IE 7+
17
18
 
18
19
  // Mixin that gets included when calling the sassy-button-structure if you need any
19
20
  // styles applied to all your sassy buttons, add it here.
@@ -27,6 +28,6 @@ $sb-pseudo-states: true // Automatically generate pseudo state
27
28
 
28
29
  // * Mixin reference
29
30
  // * -----------------------------------------
30
- // * @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states);
31
+ // * @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states, ie-support);
31
32
  // * @include sassy-button-structure(-border-radius, font-size, padding);
32
- // * @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);
33
+ // * @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states, ie-support);
data/templates/project/manifest.rb CHANGED
@@ -1,5 +1,6 @@
1
1
  # Make sure you list all the project template files here in the manifest.
2
2
  stylesheet '_sassybuttons.sass', :media => 'screen, projection'
3
+ image 'sassy-ie-overlay.png'
3
4
 
4
5
  description "Sassy Buttons"
5
6
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sassy-buttons
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.7
4
+ version: 0.0.8
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,12 +9,12 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2011-11-17 00:00:00.000000000 -08:00
12
+ date: 2011-12-23 00:00:00.000000000 -08:00
13
13
  default_executable:
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: compass
17
- requirement: &70148937861500 !ruby/object:Gem::Requirement
17
+ requirement: &70292819151800 !ruby/object:Gem::Requirement
18
18
  none: false
19
19
  requirements:
20
20
  - - ! '>='
@@ -22,7 +22,7 @@ dependencies:
22
22
  version: '0.11'
23
23
  type: :runtime
24
24
  prerelease: false
25
- version_requirements: *70148937861500
25
+ version_requirements: *70292819151800
26
26
  description: Sassy css3 buttons using compass
27
27
  email: jared@jaredhardy.com
28
28
  executables: []
@@ -39,6 +39,7 @@ files:
39
39
  - stylesheets/sassy-buttons/_sassy-button-text.sass
40
40
  - templates/project/_sassybuttons.sass
41
41
  - templates/project/manifest.rb
42
+ - templates/project/sassy-ie-overlay.png
42
43
  has_rdoc: true
43
44
  homepage: http://www.jaredhardy.com
44
45
  licenses: []