nice-buttons 1.0.3 → 1.0.4
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/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
|