sassy-buttons 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
data/README.mkdn
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
Compass CSS Sassy Buttons
|
|
2
|
+
=========================
|
|
3
3
|
|
|
4
4
|
Super sassy and super easy CSS3 buttons.
|
|
5
5
|
|
|
6
|
+
|
|
7
|
+
|
|
6
8
|
Installation
|
|
7
9
|
============
|
|
8
10
|
|
|
@@ -48,12 +50,12 @@ The Sassy Button mixin
|
|
|
48
50
|
|
|
49
51
|
Sassy Buttons Gradient Styles
|
|
50
52
|
----------------------------
|
|
51
|
-
Sassy buttons offer five gradient styles for your buttons. These gradients are generated for you
|
|
53
|
+
Sassy buttons offer five gradient styles for your buttons. These gradients are generated for you based on the colors you provide. If you don't provide a second color, the mixin will create one for you.
|
|
52
54
|
|
|
53
55
|
* Simple - A straight gradient from first color to the second color.
|
|
54
|
-
* Matte - A gradient that adds depth but
|
|
56
|
+
* Matte - A gradient that adds depth but retains a matte finish.
|
|
55
57
|
* Shiny - A gradient that has a larger highlight area that gives a shinier look.
|
|
56
|
-
* Glass - A gradient
|
|
58
|
+
* Glass - A gradient that provides a glass finish
|
|
57
59
|
* Flat - No gradient, button will be given first color provided.
|
|
58
60
|
|
|
59
61
|
Sassy Buttons Text Styles
|
|
@@ -67,7 +69,7 @@ Sassy buttons has three text styles
|
|
|
67
69
|
Sassy Buttons Defaults
|
|
68
70
|
----------------------
|
|
69
71
|
|
|
70
|
-
The Sassy Buttons extension provides a set of
|
|
72
|
+
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.
|
|
71
73
|
|
|
72
74
|
# Available defaults
|
|
73
75
|
$sb-base-color: rgba(11,153,194,1) // Base color of button, used to caluclate graident styles.
|
|
@@ -85,10 +87,10 @@ The Sassy Buttons extension provides a set of defaults sass variables that are u
|
|
|
85
87
|
# Sassy Button structure mixin that gets called everytime you create a sassy button.
|
|
86
88
|
# You can add any custom styles you want applied to all your buttons.
|
|
87
89
|
@mixin sassy-button-default-structure
|
|
88
|
-
:
|
|
89
|
-
:
|
|
90
|
-
:
|
|
91
|
-
:
|
|
90
|
+
display: inline-block
|
|
91
|
+
width: auto
|
|
92
|
+
height: auto
|
|
93
|
+
cursor: pointer
|
|
92
94
|
|
|
93
95
|
Additional Sassy Button Styles
|
|
94
96
|
------------------------------
|
|
@@ -101,13 +103,13 @@ Sassy Buttons provides two mixins that can add a little extra style to your butt
|
|
|
101
103
|
Available styles:
|
|
102
104
|
|
|
103
105
|
* Inset - box shadow that gives button an inset look.
|
|
104
|
-
* Push - box shadow that gives button a
|
|
106
|
+
* Push - box shadow that gives button a pushable look.
|
|
105
107
|
|
|
106
108
|
|
|
107
109
|
Available Sassy Buttons Mixins
|
|
108
110
|
------------------------------
|
|
109
111
|
|
|
110
|
-
|
|
112
|
+
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.
|
|
111
113
|
|
|
112
114
|
# Mixin for the structure of your button (this mixin calls the sassy-button-default structure mixin).
|
|
113
115
|
# Example use: Creating a custom button structure to apply color and text style mixins on.
|
|
@@ -44,8 +44,8 @@ $sb-ieSupport: false // TODO - Better IE support
|
|
|
44
44
|
// The Sassy Button kitchen sink.
|
|
45
45
|
@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-hover: $sb-hover)
|
|
46
46
|
@include sassy-button-structure($border-radius, $sb-border-width, $sb-padding, $font-size, $sb-line-height)
|
|
47
|
-
@include sassy-button-colors($gradient-style, $first-color, $second-color, $auto-hover)
|
|
48
|
-
|
|
47
|
+
@include sassy-button-colors($gradient-style, $first-color, $second-color, $auto-hover, $text-color, $text-style)
|
|
48
|
+
|
|
49
49
|
|
|
50
50
|
// Structure for a sassy button
|
|
51
51
|
@mixin sassy-button-structure($border-radius: $sb-border-radius, $border-width: $sb-border-width, $padding: $sb-padding, $font-size: $sb-font-size, $line-height: $sb-line-height)
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
// Mixin that does all the gradient magic
|
|
1
|
+
// Mixin that does all the gradient magic
|
|
2
|
+
@import "sassy-button-text"
|
|
2
3
|
|
|
3
|
-
@mixin sassy-button-colors($style: "matte", $base-color: $sb-base-color, $second-color: "false", $auto-states: true)
|
|
4
|
-
|
|
4
|
+
@mixin sassy-button-colors($style: "matte", $base-color: $sb-base-color, $second-color: "false", $auto-states: true, $text-color: $sb-text-color, $text-style: $sb-text-stlye)
|
|
5
|
+
$first-color: $base-color
|
|
5
6
|
$lightness : lightness($base-color)
|
|
6
7
|
$brightnessDivsor : 1
|
|
7
8
|
@if $lightness > 75
|
|
@@ -65,7 +66,12 @@
|
|
|
65
66
|
|
|
66
67
|
@if $style == "flat"
|
|
67
68
|
:background-color $base-color
|
|
69
|
+
:border 0
|
|
68
70
|
|
|
69
71
|
@if $auto-states
|
|
70
72
|
@include sassy-pseudo-states("all", $base-color, false, false, $style)
|
|
73
|
+
|
|
74
|
+
// Apply Text Styles
|
|
75
|
+
@if $text-style
|
|
76
|
+
@include sassy-button-text-style($first-color, $second-color, $text-color, $text-style)
|
|
71
77
|
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
// Mixin that controls the text style
|
|
2
|
-
@mixin sassy-button-text-style($base-color, $text-color, $text-style: "inset")
|
|
2
|
+
@mixin sassy-button-text-style($base-color, $second-color, $text-color, $text-style: "inset")
|
|
3
3
|
$text-lightness: lightness($text-color)
|
|
4
|
+
$text-color-shift: 0
|
|
5
|
+
$diff : lightness($base-color) - lightness($second-color)
|
|
6
|
+
|
|
7
|
+
@if $diff > 40
|
|
8
|
+
$text-color-shift: 30 + ($diff/10)
|
|
9
|
+
@else if $diff > 18
|
|
10
|
+
$text-color-shift: 20 + ($diff/10)
|
|
11
|
+
@else
|
|
12
|
+
$text-color-shift: 10 + ($diff/10)
|
|
4
13
|
|
|
5
14
|
:color $text-color
|
|
6
15
|
@if $text-style == "inset"
|
|
7
16
|
@if $text-lightness < 50
|
|
8
|
-
@include text-shadow(lighten($base-color,
|
|
17
|
+
@include text-shadow(lighten($base-color, $text-color-shift), 0, 1px, 0)
|
|
9
18
|
@else
|
|
10
|
-
@include text-shadow(darken($base-color,
|
|
19
|
+
@include text-shadow(darken($base-color, $text-color-shift), 0, -1px, 0)
|
|
11
20
|
@if $text-style == "raised"
|
|
12
21
|
@if $text-lightness < 50
|
|
13
|
-
@include text-shadow(lighten($base-color,
|
|
22
|
+
@include text-shadow(lighten($base-color, $text-color-shift), 0, -1px, 0)
|
|
14
23
|
@else
|
|
15
|
-
@include text-shadow(darken($base-color,
|
|
24
|
+
@include text-shadow(darken($base-color, $text-color-shift), 0, 1px, 0)
|
|
@@ -21,7 +21,6 @@ $sb-ieSupport: false // TODO - Better IE support
|
|
|
21
21
|
// Mixing that gets included when calling the sassy-button-structure if you need any
|
|
22
22
|
// styles applied to all your sassy buttons, you can add them here.
|
|
23
23
|
@mixin sassy-button-default-structure
|
|
24
|
-
:background $sb-base-color
|
|
25
24
|
:display inline-block
|
|
26
25
|
:width auto
|
|
27
26
|
:height auto
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 0
|
|
8
|
-
-
|
|
9
|
-
version: 0.0.
|
|
8
|
+
- 2
|
|
9
|
+
version: 0.0.2
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Jared Hardy
|
|
@@ -14,7 +14,7 @@ autorequire:
|
|
|
14
14
|
bindir: bin
|
|
15
15
|
cert_chain: []
|
|
16
16
|
|
|
17
|
-
date: 2011-02-
|
|
17
|
+
date: 2011-02-25 00:00:00 -08:00
|
|
18
18
|
default_executable:
|
|
19
19
|
dependencies:
|
|
20
20
|
- !ruby/object:Gem::Dependency
|