nice-buttons 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/LICENSE +22 -0
- data/README.md +61 -0
- data/lib/nice-buttons.rb +5 -0
- data/stylesheets/_color-helpers.scss +14 -0
- data/stylesheets/nice-buttons.scss +64 -0
- data/templates/project/demo.html +10 -0
- data/templates/project/demo.scss +17 -0
- data/templates/project/manifest.rb +11 -0
- data/templates/project/screenshot.png +0 -0
- metadata +13 -6
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 Brandon Mathis
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,61 @@
|
|
1
|
+
# Nice-Buttons
|
2
|
+
|
3
|
+
Nice Buttons makes it easy to create beautiful CSS3 buttons. This is an extension for the Compass framework.
|
4
|
+
|
5
|
+
## Installation with Bundler
|
6
|
+
|
7
|
+
If you have the Bundler gem installed, add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
group :assets do
|
10
|
+
gem 'nice-buttons'
|
11
|
+
end
|
12
|
+
|
13
|
+
Next, install this gem by running:
|
14
|
+
|
15
|
+
# command line
|
16
|
+
bundle
|
17
|
+
|
18
|
+
Now you can begin using Nice Buttons in your Compass project.
|
19
|
+
|
20
|
+
## Manual installation
|
21
|
+
|
22
|
+
To install this gem without Bundler run:
|
23
|
+
|
24
|
+
# command line
|
25
|
+
gem install nice-buttons
|
26
|
+
|
27
|
+
Next add the following to the top of your project's Compass configuration:
|
28
|
+
|
29
|
+
require "nice-buttons"
|
30
|
+
|
31
|
+
## Usage
|
32
|
+
|
33
|
+
To use Nice Buttons, import the Nice Buttons in a Sass file in your project, then style a button or a link with the `nice-button` mixin:
|
34
|
+
|
35
|
+
``` scss
|
36
|
+
@import "nice-buttons";
|
37
|
+
|
38
|
+
button {
|
39
|
+
@include nice-button(#494e57);
|
40
|
+
}
|
41
|
+
```
|
42
|
+
|
43
|
+
## Demo Project
|
44
|
+
|
45
|
+
Nice buttons comes with a demo so you can see how it works and play around with it. To install the demo files, run the following:
|
46
|
+
|
47
|
+
#command line
|
48
|
+
bundle exec compass install nice-buttons
|
49
|
+
|
50
|
+
Or if you aren't using bundler run this instead:
|
51
|
+
|
52
|
+
#command line
|
53
|
+
compass install nice-buttons
|
54
|
+
|
55
|
+
## Contributing
|
56
|
+
|
57
|
+
1. Fork it
|
58
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
59
|
+
3. Commit your changes (`git commit -am 'Added some feature'`)
|
60
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
61
|
+
5. Create new Pull Request
|
data/lib/nice-buttons.rb
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
// Returns true if the color is brighter than 50% lightness
|
2
|
+
@function is-bright($color) {
|
3
|
+
@return (lightness($color) > 50%);
|
4
|
+
}
|
5
|
+
|
6
|
+
// Picks the color with the highest contrast
|
7
|
+
@function if-bright($bg, $light: true, $dark: false) {
|
8
|
+
@return if(is-bright($bg), $light, $dark);
|
9
|
+
}
|
10
|
+
|
11
|
+
// Picks the color with the highest contrast
|
12
|
+
@function text-contrast($bg, $dark-text: #000, $light-text: #fff) {
|
13
|
+
@return if-bright($bg, $dark-text, $light-text);
|
14
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
@import "compass/css3";
|
2
|
+
@import "color-helpers";
|
3
|
+
|
4
|
+
// Button style reset and basic styles
|
5
|
+
@mixin nb-reset() {
|
6
|
+
font: normal 16px "Lucida Grande", Lucida, Arial, sans-serif;
|
7
|
+
margin: 0;
|
8
|
+
text-decoration: none;
|
9
|
+
margin-bottom: .3em;
|
10
|
+
cursor: pointer;
|
11
|
+
padding: .5em 1.2em;
|
12
|
+
display: inline-block;
|
13
|
+
border: { width: 1px; style: solid }
|
14
|
+
@include border-radius(.3em);
|
15
|
+
&:active, &:hover { outline: none }
|
16
|
+
@include transition(background-color,box-shadow .15s);
|
17
|
+
}
|
18
|
+
|
19
|
+
%nb-reset { @include nb-reset; }
|
20
|
+
|
21
|
+
// Automate the gradient picking with simple color shifting
|
22
|
+
|
23
|
+
@mixin nb-gradient($bg) {
|
24
|
+
// scale main color to pick
|
25
|
+
$top: scale-color($bg, $lightness: if-bright($bg,80%,40%));
|
26
|
+
$middle-1: scale-color($bg, $lightness: if-bright($bg,20%,10%));
|
27
|
+
$middle-2: scale-color($bg, $lightness: if-bright($bg,-2%,-5%));
|
28
|
+
$bottom: scale-color($bg, $lightness: if-bright($bg,-10%,-20%));
|
29
|
+
|
30
|
+
@include background-image(linear-gradient(
|
31
|
+
$top, $middle-1 50%, $middle-2 50%, $bottom));
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
@mixin nice-button($bg: #eee) {
|
36
|
+
@extend %nb-reset;
|
37
|
+
|
38
|
+
// Normal styles
|
39
|
+
background-color: $bg;
|
40
|
+
border-color: scale-color($bg, $lightness: -20%);
|
41
|
+
color: text-contrast($bg);
|
42
|
+
@include nb-gradient(rgba($bg, .7)); // alpha shows color transitions
|
43
|
+
|
44
|
+
text-shadow: scale-color($bg, $lightness:
|
45
|
+
if-bright($bg,25%,-25%)) 0 1px 1px;
|
46
|
+
@include box-shadow(rgba(#fff,
|
47
|
+
if-bright($bg,.6,.2)) 0 0 1px 1px inset);
|
48
|
+
|
49
|
+
// State styles
|
50
|
+
&:hover, &:focus {
|
51
|
+
background-color: scale-color($bg, $lightness: if-bright($bg, 85%, 25%));
|
52
|
+
}
|
53
|
+
|
54
|
+
&:active {
|
55
|
+
background: scale-color($bg,
|
56
|
+
$lightness: if-bright($bg, 25%, 10%));
|
57
|
+
border-color: rgba(#000, if-bright($bg, .4, .8));
|
58
|
+
@include box-shadow(
|
59
|
+
if-bright($bg,
|
60
|
+
rgba(mix($bg, #000, 25%), .4), rgba(mix($bg, #000), .9)
|
61
|
+
) 0 2px 12px inset
|
62
|
+
);
|
63
|
+
}
|
64
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<!DOCTYPE html><html><head>
|
2
|
+
<title>Nice Buttons - Demo</title>
|
3
|
+
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
|
4
|
+
</head>
|
5
|
+
<body>
|
6
|
+
<h1>Button Test</h1>
|
7
|
+
<button>Click Me!</button>
|
8
|
+
<a class="button" href="#">Click Me!</a>
|
9
|
+
</body>
|
10
|
+
</html>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
@import 'nice-buttons';
|
2
|
+
|
3
|
+
html {
|
4
|
+
text-align: center;
|
5
|
+
font-family: Helvetica, Arial, sans;
|
6
|
+
background: #f4f4f4;
|
7
|
+
}
|
8
|
+
body {
|
9
|
+
position: absolute;
|
10
|
+
top: 30px; left: 30px; bottom: 30px; right: 30px;
|
11
|
+
padding-top: 20px;
|
12
|
+
background: #fff;
|
13
|
+
border: 1px solid #e5e5e5;
|
14
|
+
}
|
15
|
+
|
16
|
+
button { @include nice-button }
|
17
|
+
.button { @include nice-button(#494e57) }
|
@@ -0,0 +1,11 @@
|
|
1
|
+
# Make sure you list all the project template files here in the manifest.
|
2
|
+
stylesheet 'demo.scss', :media => 'screen, projection'
|
3
|
+
html 'demo.html'
|
4
|
+
|
5
|
+
description "Create beautiful CSS3 buttons from a single color"
|
6
|
+
help "This will install a demo (HTML and Scss) to show you how to use nice-buttons"
|
7
|
+
welcome_message %Q{
|
8
|
+
Example usage: button { @include nice-buttons(#444) }
|
9
|
+
See demo.html and demo.scss for some examples.
|
10
|
+
Enjoy!
|
11
|
+
}
|
Binary file
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: nice-buttons
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-11-06 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -49,15 +49,22 @@ email:
|
|
49
49
|
executables: []
|
50
50
|
extensions: []
|
51
51
|
extra_rdoc_files: []
|
52
|
-
files:
|
52
|
+
files:
|
53
|
+
- README.md
|
54
|
+
- LICENSE
|
55
|
+
- lib/nice-buttons.rb
|
56
|
+
- stylesheets/_color-helpers.scss
|
57
|
+
- stylesheets/nice-buttons.scss
|
58
|
+
- templates/project/demo.html
|
59
|
+
- templates/project/demo.scss
|
60
|
+
- templates/project/manifest.rb
|
61
|
+
- templates/project/screenshot.png
|
53
62
|
homepage: http://github.com/imathis/nice-buttons
|
54
63
|
licenses: []
|
55
64
|
post_install_message:
|
56
65
|
rdoc_options: []
|
57
66
|
require_paths:
|
58
67
|
- lib
|
59
|
-
- stylesheets
|
60
|
-
- templates
|
61
68
|
required_ruby_version: !ruby/object:Gem::Requirement
|
62
69
|
none: false
|
63
70
|
requirements:
|
@@ -72,7 +79,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
72
79
|
version: '0'
|
73
80
|
requirements: []
|
74
81
|
rubyforge_project:
|
75
|
-
rubygems_version: 1.8.
|
82
|
+
rubygems_version: 1.8.23
|
76
83
|
signing_key:
|
77
84
|
specification_version: 3
|
78
85
|
summary: Nice and easy CSS3 buttons for Compass users
|