sassy-buttons 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +38 -17
- data/stylesheets/_sassy-buttons.sass +33 -11
- metadata +4 -4
data/README.mkdn
CHANGED
|
@@ -77,25 +77,46 @@ Sassy Buttons Defaults
|
|
|
77
77
|
----------------------
|
|
78
78
|
|
|
79
79
|
The Sassy Buttons extension provides a set of default sass variables that are used in the various mixins to create the buttons. These defaults can be overridden to customize your buttons and has the added benefit of having to provide less arguments when calling the sassy button mixin.
|
|
80
|
+
|
|
81
|
+
// Base color of button.
|
|
82
|
+
$sb-base-color: rgba(11, 153, 194, 1) !default
|
|
83
|
+
|
|
84
|
+
// Optional secondary color for gradient.
|
|
85
|
+
$sb-second-color: false !default
|
|
80
86
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
// Border radius of button.
|
|
88
|
+
$sb-border-radius: 5px !default
|
|
89
|
+
|
|
90
|
+
// Padding that gives button structure.
|
|
91
|
+
$sb-padding: 0.3em 1.5em !default
|
|
92
|
+
|
|
93
|
+
// Font size.
|
|
94
|
+
$sb-font-size: 16px !default
|
|
95
|
+
|
|
96
|
+
// Button font color.
|
|
97
|
+
$sb-text-color: white !default
|
|
98
|
+
|
|
99
|
+
// Style of button text, can be "inset" or "raised" or false.
|
|
100
|
+
$sb-text-style: "inset" !default
|
|
101
|
+
|
|
102
|
+
// Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
|
|
103
|
+
$sb-gradient-style: "simple" !default
|
|
104
|
+
|
|
105
|
+
// Automatically generate pseudo state styles.
|
|
106
|
+
$sb-pseudo-states: true !default
|
|
107
|
+
|
|
108
|
+
// Add gradient png for IE 7+
|
|
109
|
+
$sb-ie-support: false !default
|
|
110
|
+
|
|
111
|
+
// Set the default Line height
|
|
112
|
+
$sb-line-height: 1.5 !default
|
|
92
113
|
|
|
93
114
|
# Sassy Button structure mixin that gets called every time you create a sassy button.
|
|
94
115
|
# You can add any custom styles you want applied to all your buttons.
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
116
|
+
@mixin sassy-button-default-sassytructure
|
|
117
|
+
display: inline-block
|
|
118
|
+
cursor: pointer
|
|
119
|
+
line-height: $sb-line-height
|
|
99
120
|
|
|
100
121
|
|
|
101
122
|
Additional Sassy Button Styles
|
|
@@ -103,8 +124,8 @@ Additional Sassy Button Styles
|
|
|
103
124
|
|
|
104
125
|
Sassy Buttons provides two mixins that can add a little extra style to your buttons
|
|
105
126
|
|
|
106
|
-
|
|
107
|
-
|
|
127
|
+
# Mixin for adding styles to buttons
|
|
128
|
+
@include sassy-button-style(style, color)
|
|
108
129
|
|
|
109
130
|
Available styles:
|
|
110
131
|
|
|
@@ -16,16 +16,38 @@
|
|
|
16
16
|
// These are the base defaults for the buttons, if you are going to use similar buttons on an entire site changing these
|
|
17
17
|
// can save you some time by calling the sassy button mixin with less arguments.
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
$sb-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
$sb-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
$sb-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
// Base color of button.
|
|
20
|
+
$sb-base-color: rgba(11, 153, 194, 1) !default
|
|
21
|
+
|
|
22
|
+
// Optional secondary color for gradient.
|
|
23
|
+
$sb-second-color: false !default
|
|
24
|
+
|
|
25
|
+
// Border radius of button.
|
|
26
|
+
$sb-border-radius: 5px !default
|
|
27
|
+
|
|
28
|
+
// Padding that gives button structure.
|
|
29
|
+
$sb-padding: 0.3em 1.5em !default
|
|
30
|
+
|
|
31
|
+
// Font size.
|
|
32
|
+
$sb-font-size: 16px !default
|
|
33
|
+
|
|
34
|
+
// Button font color.
|
|
35
|
+
$sb-text-color: white !default
|
|
36
|
+
|
|
37
|
+
// Style of button text, can be "inset" or "raised" or false.
|
|
38
|
+
$sb-text-style: "inset" !default
|
|
39
|
+
|
|
40
|
+
// Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
|
|
41
|
+
$sb-gradient-style: "simple" !default
|
|
42
|
+
|
|
43
|
+
// Automatically generate pseudo state styles.
|
|
44
|
+
$sb-pseudo-states: true !default
|
|
45
|
+
|
|
46
|
+
// Add gradient png for IE 7+
|
|
47
|
+
$sb-ie-support: false !default
|
|
48
|
+
|
|
49
|
+
// Set the default Line height
|
|
50
|
+
$sb-line-height: 1.5 !default
|
|
29
51
|
|
|
30
52
|
|
|
31
53
|
// Mixing that gets included when calling the sassy-button-structure if you need any
|
|
@@ -33,7 +55,7 @@ $sb-ie-support: false // Add gradient png for IE 7+
|
|
|
33
55
|
@mixin sassy-button-default-structure
|
|
34
56
|
display: inline-block
|
|
35
57
|
cursor: pointer
|
|
36
|
-
line-height:
|
|
58
|
+
line-height: $sb-line-height
|
|
37
59
|
|
|
38
60
|
// The Sassy Button kitchen sink.
|
|
39
61
|
@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)
|
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.
|
|
4
|
+
version: 0.0.9
|
|
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:
|
|
12
|
+
date: 2012-01-02 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: &
|
|
17
|
+
requirement: &70338369549980 !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: *
|
|
25
|
+
version_requirements: *70338369549980
|
|
26
26
|
description: Sassy css3 buttons using compass
|
|
27
27
|
email: jared@jaredhardy.com
|
|
28
28
|
executables: []
|