nice-buttons 1.0.3 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/stylesheets/nice-buttons.scss +33 -8
- data/templates/project/demo.html +1 -0
- data/templates/project/demo.scss +1 -0
- metadata +2 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@import "compass/css3";
|
|
2
2
|
@import "color-helpers";
|
|
3
|
+
$nice-buttons-background: shiny !default;
|
|
3
4
|
|
|
4
5
|
// Button style reset and basic styles
|
|
5
6
|
@mixin nb-reset() {
|
|
@@ -13,38 +14,62 @@
|
|
|
13
14
|
border: { width: 1px; style: solid }
|
|
14
15
|
@include border-radius(.3em);
|
|
15
16
|
&:active, &:hover { outline: none }
|
|
16
|
-
@include transition(
|
|
17
|
+
@include transition(box-shadow .15s);
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
%nb-reset { @include nb-reset; }
|
|
20
21
|
|
|
21
22
|
// Automate the gradient picking with simple color shifting
|
|
22
23
|
|
|
23
|
-
@
|
|
24
|
+
@function nb-gradient-shiny($bg) {
|
|
24
25
|
// scale main color to pick
|
|
25
26
|
$top: scale-color($bg, $lightness: if-bright($bg,80%,40%));
|
|
26
27
|
$middle-1: scale-color($bg, $lightness: if-bright($bg,20%,10%));
|
|
27
28
|
$middle-2: scale-color($bg, $lightness: if-bright($bg,-2%,-5%));
|
|
28
29
|
$bottom: scale-color($bg, $lightness: if-bright($bg,-10%,-20%));
|
|
29
30
|
|
|
30
|
-
@
|
|
31
|
-
$top, $middle-1 50%, $middle-2 50%, $bottom));
|
|
31
|
+
@return linear-gradient($top, $middle-1 50%, $middle-2 50%, $bottom);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
@function nb-gradient-flat($bg) {
|
|
35
|
+
// scale main color to pick
|
|
36
|
+
$top: scale-color($bg, $lightness: if-bright($bg,80%,40%), $saturation: if-bright($bg,30%,70%));
|
|
37
|
+
$bottom: scale-color($bg, $lightness: if-bright($bg,-10%,-20%), $saturation: if-bright($bg,30%,70%));
|
|
38
|
+
@return linear-gradient($top, $bottom);
|
|
39
|
+
}
|
|
34
40
|
|
|
35
|
-
@mixin nice-button($bg: #eee) {
|
|
41
|
+
@mixin nice-button($bg: #eee, $gradient: $nice-buttons-background, $box-shadow: false) {
|
|
36
42
|
@extend %nb-reset;
|
|
37
43
|
|
|
38
44
|
// Normal styles
|
|
39
45
|
background-color: $bg;
|
|
40
46
|
border-color: scale-color($bg, $lightness: -20%);
|
|
41
47
|
color: text-contrast($bg);
|
|
42
|
-
|
|
48
|
+
|
|
49
|
+
// Gradient
|
|
50
|
+
$gradient-bg: rgba($bg, .7); // alpha shows color transitions
|
|
51
|
+
@if $gradient == shiny {
|
|
52
|
+
@include background-image(nb-gradient-shiny($gradient-bg));
|
|
53
|
+
}
|
|
54
|
+
@else if $gradient == flat {
|
|
55
|
+
@include background-image(nb-gradient-flat($gradient-bg));
|
|
56
|
+
}
|
|
57
|
+
// Allow a gradient function to be passed in.
|
|
58
|
+
@else if $gradient == none {
|
|
59
|
+
background-image: none;
|
|
60
|
+
}
|
|
61
|
+
@else {
|
|
62
|
+
@include background-image($background);
|
|
63
|
+
}
|
|
43
64
|
|
|
44
65
|
text-shadow: scale-color($bg, $lightness:
|
|
45
66
|
if-bright($bg,25%,-25%)) 0 1px 1px;
|
|
46
|
-
@
|
|
47
|
-
if-bright($bg,.6,.2)) 0 0 1px 1px inset);
|
|
67
|
+
@if $box-shadow == false {
|
|
68
|
+
@include box-shadow(rgba(#fff, if-bright($bg,.6,.2)) 0 0 1px 1px inset);
|
|
69
|
+
}
|
|
70
|
+
@else{
|
|
71
|
+
@include box-shadow($box-shadow);
|
|
72
|
+
}
|
|
48
73
|
|
|
49
74
|
// State styles
|
|
50
75
|
&:hover, &:focus {
|
data/templates/project/demo.html
CHANGED
data/templates/project/demo.scss
CHANGED
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.4
|
|
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:
|
|
12
|
+
date: 2013-01-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|