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
|
-
|
142
|
-
|
143
|
-
|
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
|
-
|
146
|
-
|
147
|
-
|
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:
|
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
|
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
|
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:
|
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.
|
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-
|
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: &
|
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: *
|
25
|
+
version_requirements: *70136250042280
|
26
26
|
description: Sassy css3 buttons using compass
|
27
27
|
email: jared@jaredhardy.com
|
28
28
|
executables: []
|