sassy-buttons 0.0.7 → 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
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: []