sassy-buttons 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.mkdn CHANGED
@@ -38,6 +38,9 @@ Installing Sassy Buttons on Rails 3.1
38
38
  # Bundle your gems to get the sassy-buttons plugin to compass
39
39
  $ bundle install
40
40
 
41
+ # Install Sassy Buttons Assets
42
+ $ bundle exec compass install sassy-buttons
43
+
41
44
  Using Sassy Buttons
42
45
  ===================
43
46
 
@@ -138,10 +141,10 @@ Available Sassy Buttons Mixins
138
141
 
139
142
  A sassy button is made up a few different mixins, which all get called by the main sassy button mixin (@include sassy-button). These mixins are available for you to use for advanced control over your buttons.
140
143
 
141
- # Mixin for the structure of your button (this mixin calls the sassy-button-default structure mixin).
142
- # Example use: Creating a custom button structure to apply color and text style mixins on.
143
- @include sassy-button-structure(border-radius, font-size, padding)
144
+ # Mixin for the structure of your button (this mixin calls the sassy-button-default structure mixin).
145
+ # Example use: Creating a custom button structure to apply color and text style mixins on.
146
+ @include sassy-button-structure(border-radius, font-size, padding)
144
147
 
145
- # Mixin for the gradient styles
146
- # Example use: You could call this mixin on a :hover or :active state to provide your own styles for those pseudo states.
147
- @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states)
148
+ # Mixin for the gradient styles
149
+ # Example use: You could call this mixin on a :hover or :active state to provide your own styles for those pseudo states.
150
+ @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states)
@@ -44,7 +44,7 @@ $sb-gradient-style: "simple" !default
44
44
  $sb-pseudo-states: true !default
45
45
 
46
46
  // Add gradient png for IE 7+
47
- $sb-ie-support: false !default
47
+ $sb-ie-support: true !default
48
48
 
49
49
  // Set the default Line height
50
50
  $sb-line-height: 1.5 !default
@@ -56,6 +56,7 @@ $sb-line-height: 1.5 !default
56
56
  display: inline-block
57
57
  cursor: pointer
58
58
  line-height: $sb-line-height
59
+ text-decoration: none
59
60
 
60
61
  // The Sassy Button kitchen sink.
61
62
  @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)
@@ -63,7 +64,6 @@ $sb-line-height: 1.5 !default
63
64
  @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states, $ie)
64
65
 
65
66
 
66
-
67
67
  // Structure for a sassy button
68
68
  @mixin sassy-button-structure($border-radius: $sb-border-radius, $font-size: $sb-font-size, $padding: $sb-padding)
69
69
  font-size: $font-size
@@ -9,7 +9,7 @@
9
9
  @if $lightness > 75
10
10
  $brightnessDivsor : 2
11
11
 
12
- // Add IE Gradient PNG if $sb-ie-support is true else just put add the background color
12
+ // Add IE Gradient PNG if $sb-ie-support is true else just add the background color
13
13
  @if $ie
14
14
  background: image-url("sassy-ie-overlay.png") repeat-x bottom left $base-color
15
15
  @else
@@ -1,8 +1,14 @@
1
- // Mixin that generates :hover and :active psuedo states.
1
+ // Mixin that generates :hover, :active, and disabled psuedo states
2
2
 
3
3
  @mixin sassy-pseudo-states($first-color, $second-color, $style)
4
4
  @include sassy-button-hover($first-color, $second-color, $style)
5
5
 
6
+ &.disabled, &[disabled]
7
+ opacity: 0.6
8
+ background: $second-color
9
+ cursor: default
10
+ @include box-shadow(none)
11
+
6
12
 
7
13
  @mixin sassy-button-hover($first-color, $second-color, $style)
8
14
 
@@ -40,3 +46,4 @@
40
46
 
41
47
 
42
48
 
49
+
@@ -14,7 +14,7 @@ $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
+ $sb-ie-support: true // Add gradient png for IE 7+
18
18
 
19
19
  // Mixin that gets included when calling the sassy-button-structure if you need any
20
20
  // styles applied to all your sassy buttons, add it here.
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.1.0
4
+ version: 0.1.1
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: 2012-04-15 00:00:00.000000000 -07:00
12
+ date: 2012-06-23 00:00:00.000000000 -07:00
13
13
  default_executable:
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: compass
17
- requirement: &70149672718280 !ruby/object:Gem::Requirement
17
+ requirement: &70136250042280 !ruby/object:Gem::Requirement
18
18
  none: false
19
19
  requirements:
20
20
  - - ! '>='
@@ -22,7 +22,7 @@ dependencies:
22
22
  version: 0.12.1
23
23
  type: :runtime
24
24
  prerelease: false
25
- version_requirements: *70149672718280
25
+ version_requirements: *70136250042280
26
26
  description: Sassy css3 buttons using compass
27
27
  email: jared@jaredhardy.com
28
28
  executables: []