compass-recipes 0.2.2 → 0.3.0.alpha.1
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE +6 -2
- data/README.md +103 -29
- data/VERSION +1 -1
- data/fonts/icons/entypo/entypo-webfont.eot +0 -0
- data/fonts/icons/entypo/entypo-webfont.svg +198 -0
- data/fonts/icons/entypo/entypo-webfont.ttf +0 -0
- data/fonts/icons/entypo/entypo-webfont.woff +0 -0
- data/fonts/icons/heydings-controls/SIL Open Font License 1.1.txt +91 -0
- data/fonts/icons/heydings-controls/demo.html +33 -0
- data/fonts/icons/heydings-controls/heydings_controls-webfont.eot +0 -0
- data/fonts/icons/heydings-controls/heydings_controls-webfont.svg +85 -0
- data/fonts/icons/heydings-controls/heydings_controls-webfont.ttf +0 -0
- data/fonts/icons/heydings-controls/heydings_controls-webfont.woff +0 -0
- data/fonts/icons/heydings-controls/stylesheet.css +16 -0
- data/fonts/icons/heydings/SIL Open Font License 1.1.txt +91 -0
- data/fonts/icons/heydings/demo.html +33 -0
- data/fonts/icons/heydings/heydings_icons-webfont.eot +0 -0
- data/fonts/icons/heydings/heydings_icons-webfont.svg +94 -0
- data/fonts/icons/heydings/heydings_icons-webfont.ttf +0 -0
- data/fonts/icons/heydings/heydings_icons-webfont.woff +0 -0
- data/fonts/icons/heydings/stylesheet.css +16 -0
- data/fonts/icons/icomoon/License.txt +1 -0
- data/fonts/icons/icomoon/Read Me.txt +5 -0
- data/fonts/icons/icomoon/icomoon.eot +0 -0
- data/fonts/icons/icomoon/icomoon.svg +35 -0
- data/fonts/icons/icomoon/icomoon.ttf +0 -0
- data/fonts/icons/icomoon/icomoon.woff +0 -0
- data/fonts/icons/iconic/SIL Open Font License 1.1.txt +91 -0
- data/fonts/icons/iconic/demo.html +38 -0
- data/fonts/icons/iconic/iconic_fill.eot +0 -0
- data/fonts/icons/iconic/iconic_fill.svg +475 -0
- data/fonts/icons/iconic/iconic_fill.ttf +0 -0
- data/fonts/icons/iconic/iconic_fill.woff +0 -0
- data/fonts/icons/iconic/iconic_stroke.eot +0 -0
- data/fonts/icons/iconic/iconic_stroke.svg +492 -0
- data/fonts/icons/iconic/iconic_stroke.ttf +0 -0
- data/fonts/icons/iconic/iconic_stroke.woff +0 -0
- data/fonts/icons/iconic/stylesheet.css +28 -0
- data/fonts/icons/modern-pictograms/Modern Pictograms SIL OFL Font License 1.1.txt +94 -0
- data/fonts/icons/modern-pictograms/demo.html +33 -0
- data/fonts/icons/modern-pictograms/modernpics-webfont.eot +0 -0
- data/fonts/icons/modern-pictograms/modernpics-webfont.svg +136 -0
- data/fonts/icons/modern-pictograms/modernpics-webfont.ttf +0 -0
- data/fonts/icons/modern-pictograms/modernpics-webfont.woff +0 -0
- data/fonts/icons/modern-pictograms/stylesheet.css +16 -0
- data/fonts/icons/socialico/FFF_EULA_license.pdf +0 -0
- data/fonts/icons/socialico/Socialico-webfont.otf +0 -0
- data/fonts/icons/socialico/socialico-webfont.eot +0 -0
- data/fonts/icons/socialico/socialico-webfont.svg +123 -0
- data/fonts/icons/socialico/socialico-webfont.ttf +0 -0
- data/fonts/icons/socialico/socialico-webfont.woff +0 -0
- data/fonts/icons/websymbols/OFL-FAQ.txt +369 -0
- data/fonts/icons/websymbols/OFL.txt +97 -0
- data/fonts/icons/websymbols/websymbols-regular-webfont.eot +0 -0
- data/fonts/icons/websymbols/websymbols-regular-webfont.svg +108 -0
- data/fonts/icons/websymbols/websymbols-regular-webfont.ttf +0 -0
- data/fonts/icons/websymbols/websymbols-regular-webfont.woff +0 -0
- data/lib/compass-recipes.rb +3 -0
- data/lib/compass-recipes/sass_extensions.rb +13 -0
- data/lib/compass-recipes/sass_extensions/_error.rb +9 -0
- data/lib/compass-recipes/sass_extensions/background_noise.rb +48 -0
- data/lib/compass-recipes/sass_extensions/gravatar.rb +60 -0
- data/lib/compass-recipes/sass_extensions/highres.rb +31 -0
- data/lib/compass-recipes/sass_extensions/math.rb +8 -0
- data/stylesheets/_recipes.scss +7 -3
- data/stylesheets/recipes/_animation.scss +3 -0
- data/stylesheets/recipes/_background.scss +15 -0
- data/stylesheets/recipes/_base.scss +1 -0
- data/stylesheets/recipes/_color.scss +171 -0
- data/stylesheets/recipes/_effect.scss +6 -1
- data/stylesheets/recipes/_font.scss +32 -0
- data/stylesheets/recipes/_google-webfont.scss +15 -0
- data/stylesheets/recipes/_icon-font.scss +224 -0
- data/stylesheets/recipes/_icons.scss +15 -10
- data/stylesheets/recipes/_media-queries.scss +72 -0
- data/stylesheets/recipes/_shared.scss +5 -4
- data/stylesheets/recipes/_ui.scss +5 -2
- data/stylesheets/recipes/animation/_animation.scss +145 -0
- data/stylesheets/recipes/animation/_fade.scss +29 -0
- data/stylesheets/recipes/animation/_keyframes.scss +17 -0
- data/stylesheets/recipes/animation/_timing-function.scss +29 -0
- data/stylesheets/recipes/background/_blueprint-grid.scss +52 -0
- data/stylesheets/recipes/background/_carbon-fiber.scss +33 -0
- data/stylesheets/recipes/background/_checkerboard.scss +61 -0
- data/stylesheets/recipes/background/_cicada.scss +42 -0
- data/stylesheets/recipes/background/_gradients.scss +81 -0
- data/stylesheets/recipes/background/_houndstooth.scss +51 -0
- data/stylesheets/recipes/background/_lined-paper.scss +30 -0
- data/stylesheets/recipes/background/_madras.scss +84 -0
- data/stylesheets/recipes/background/_noise.scss +47 -0
- data/stylesheets/recipes/background/_polka-dot.scss +28 -0
- data/stylesheets/recipes/background/_radial-overlay.scss +15 -0
- data/stylesheets/recipes/background/_rainbow.scss +27 -0
- data/stylesheets/recipes/background/_stripes.scss +46 -0
- data/stylesheets/recipes/background/_tablecloth.scss +30 -0
- data/stylesheets/recipes/background/_tartan.scss +81 -0
- data/stylesheets/recipes/base/_normalize.scss +455 -0
- data/stylesheets/recipes/color/_name.scss +151 -0
- data/stylesheets/recipes/effect/_bevel.scss +37 -0
- data/stylesheets/recipes/effect/_corner-folded.scss +26 -0
- data/stylesheets/recipes/effect/_corners-tucked.scss +48 -0
- data/stylesheets/recipes/effect/_cutout.scss +20 -0
- data/stylesheets/recipes/{enhancement/_corner-folded.scss → effect/_folded-corner.scss} +7 -1
- data/stylesheets/recipes/effect/_glass.scss +22 -9
- data/stylesheets/recipes/effect/_ribbon-tied.scss +133 -0
- data/stylesheets/recipes/effect/_ribbon.scss +102 -0
- data/stylesheets/recipes/effect/_scatter.scss +22 -0
- data/stylesheets/recipes/effect/_tape.scss +43 -0
- data/stylesheets/recipes/helper/_gravatar.scss +79 -0
- data/stylesheets/recipes/layout/_flexible-box-model.scss +68 -0
- data/stylesheets/recipes/shadow/_drop.scss +1 -1
- data/stylesheets/recipes/shadow/_top-edge.scss +1 -1
- data/stylesheets/recipes/shadow/drop/_curved.scss +5 -3
- data/stylesheets/recipes/shadow/drop/_flying.scss +12 -20
- data/stylesheets/recipes/shadow/drop/_transform-requirement.scss +3 -1
- data/stylesheets/recipes/shape/_polygon.scss +1 -0
- data/stylesheets/recipes/shape/_symbol.scss +5 -1
- data/stylesheets/recipes/shape/polygon/_rhombus.scss +10 -0
- data/stylesheets/recipes/shape/polygon/_star.scss +97 -29
- data/stylesheets/recipes/shape/polygon/_triangle.scss +9 -4
- data/stylesheets/recipes/shape/symbol/_diamond.scss +33 -0
- data/stylesheets/recipes/shape/symbol/_egg.scss +13 -0
- data/stylesheets/recipes/shape/symbol/_heart.scss +2 -1
- data/stylesheets/recipes/shape/symbol/_infinity.scss +3 -1
- data/stylesheets/recipes/shape/symbol/_pacman.scss +18 -0
- data/stylesheets/recipes/shape/symbol/_yin-yang.scss +49 -0
- data/stylesheets/recipes/shared/_clearfix.scss +28 -14
- data/stylesheets/recipes/shared/_pseudo-element.scss +13 -4
- data/stylesheets/recipes/shared/_user-select.scss +6 -0
- data/stylesheets/recipes/ui/_button.scss +122 -0
- data/stylesheets/recipes/ui/_convex.scss +8 -1
- data/stylesheets/recipes/ui/_glossy.scss +13 -12
- data/stylesheets/recipes/ui/_gradient.scss +4 -0
- data/stylesheets/recipes/ui/_helper.scss +1 -0
- data/stylesheets/recipes/ui/_keyboard.scss +106 -0
- data/stylesheets/recipes/ui/_menu.scss +1 -0
- data/stylesheets/recipes/ui/_overlay.scss +22 -0
- data/stylesheets/recipes/ui/_separator.scss +37 -0
- data/stylesheets/recipes/ui/border/_bevel.scss +3 -0
- data/stylesheets/recipes/ui/button/_state-selectors.scss +40 -0
- data/stylesheets/recipes/ui/button/style/_default.scss +12 -0
- data/stylesheets/recipes/ui/button/style/todo/_bonbon.scss +489 -0
- data/stylesheets/recipes/ui/button/style/todo/_bourbon.scss +169 -0
- data/stylesheets/recipes/ui/button/style/todo/_fancy.sass +178 -0
- data/stylesheets/recipes/ui/button/style/todo/_necolas-animated.scss +81 -0
- data/stylesheets/recipes/ui/button/style/todo/_ubuwaits.scss +654 -0
- data/stylesheets/recipes/ui/helper/_arrow.scss +72 -0
- data/stylesheets/recipes/ui/helper/_tag.scss +14 -0
- data/stylesheets/recipes/ui/loader/_pulse.scss +124 -0
- data/stylesheets/recipes/ui/{_menu-dropdown.scss → menu/_dropdown.scss} +11 -3
- data/templates/gravatar/getElementsByClassName.js +23 -0
- data/templates/gravatar/gravatar.js +117 -0
- data/templates/gravatar/manifest.rb +19 -0
- data/templates/gravatar/md5.js +14 -0
- data/templates/icon-fonts/fonts/icons/entypo/entypo-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/entypo/entypo-webfont.svg +198 -0
- data/templates/icon-fonts/fonts/icons/entypo/entypo-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/entypo/entypo-webfont.woff +0 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/SIL Open Font License 1.1.txt +91 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/demo.html +33 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/heydings_controls-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/heydings_controls-webfont.svg +85 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/heydings_controls-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/heydings_controls-webfont.woff +0 -0
- data/templates/icon-fonts/fonts/icons/heydings-controls/stylesheet.css +16 -0
- data/templates/icon-fonts/fonts/icons/heydings/SIL Open Font License 1.1.txt +91 -0
- data/templates/icon-fonts/fonts/icons/heydings/demo.html +33 -0
- data/templates/icon-fonts/fonts/icons/heydings/heydings_icons-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/heydings/heydings_icons-webfont.svg +94 -0
- data/templates/icon-fonts/fonts/icons/heydings/heydings_icons-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/heydings/heydings_icons-webfont.woff +0 -0
- data/templates/icon-fonts/fonts/icons/heydings/stylesheet.css +16 -0
- data/templates/icon-fonts/fonts/icons/icomoon/License.txt +1 -0
- data/templates/icon-fonts/fonts/icons/icomoon/Read Me.txt +5 -0
- data/templates/icon-fonts/fonts/icons/icomoon/icomoon.eot +0 -0
- data/templates/icon-fonts/fonts/icons/icomoon/icomoon.svg +35 -0
- data/templates/icon-fonts/fonts/icons/icomoon/icomoon.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/icomoon/icomoon.woff +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/SIL Open Font License 1.1.txt +91 -0
- data/templates/icon-fonts/fonts/icons/iconic/demo.html +38 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_fill.eot +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_fill.svg +475 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_fill.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_fill.woff +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_stroke.eot +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_stroke.svg +492 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_stroke.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/iconic_stroke.woff +0 -0
- data/templates/icon-fonts/fonts/icons/iconic/stylesheet.css +28 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/Modern Pictograms SIL OFL Font License 1.1.txt +94 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/demo.html +33 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/modernpics-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/modernpics-webfont.svg +136 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/modernpics-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/modernpics-webfont.woff +0 -0
- data/templates/icon-fonts/fonts/icons/modern-pictograms/stylesheet.css +16 -0
- data/templates/icon-fonts/fonts/icons/socialico/FFF_EULA_license.pdf +0 -0
- data/templates/icon-fonts/fonts/icons/socialico/Socialico-webfont.otf +0 -0
- data/templates/icon-fonts/fonts/icons/socialico/socialico-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/socialico/socialico-webfont.svg +123 -0
- data/templates/icon-fonts/fonts/icons/socialico/socialico-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/socialico/socialico-webfont.woff +0 -0
- data/templates/icon-fonts/fonts/icons/websymbols/OFL-FAQ.txt +369 -0
- data/templates/icon-fonts/fonts/icons/websymbols/OFL.txt +97 -0
- data/templates/icon-fonts/fonts/icons/websymbols/websymbols-regular-webfont.eot +0 -0
- data/templates/icon-fonts/fonts/icons/websymbols/websymbols-regular-webfont.svg +108 -0
- data/templates/icon-fonts/fonts/icons/websymbols/websymbols-regular-webfont.ttf +0 -0
- data/templates/icon-fonts/fonts/icons/websymbols/websymbols-regular-webfont.woff +0 -0
- data/templates/icon-fonts/manifest.rb +17 -0
- metadata +225 -20
- data/stylesheets/recipes/_enhancement.scss +0 -1
- data/stylesheets/recipes/_pattern.scss +0 -0
@@ -0,0 +1,169 @@
|
|
1
|
+
@mixin button ($style: simple, $base-color: #4294f0) {
|
2
|
+
|
3
|
+
@if type-of($style) == color {
|
4
|
+
$base-color: $style;
|
5
|
+
$style: simple;
|
6
|
+
}
|
7
|
+
|
8
|
+
@if $style == simple {
|
9
|
+
@include simple($base-color);
|
10
|
+
}
|
11
|
+
|
12
|
+
@else if $style == shiny {
|
13
|
+
@include shiny($base-color);
|
14
|
+
}
|
15
|
+
|
16
|
+
@else if $style == pill {
|
17
|
+
@include pill($base-color);
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
@mixin simple ($base-color) {
|
22
|
+
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
23
|
+
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
24
|
+
$color: hsl(0, 0, 100%);
|
25
|
+
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
26
|
+
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
27
|
+
|
28
|
+
@if lightness($base-color) > 70% {
|
29
|
+
$color: hsl(0, 0, 20%);
|
30
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
31
|
+
}
|
32
|
+
|
33
|
+
border: 1px solid $border;
|
34
|
+
@include border-radius (3px);
|
35
|
+
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
|
36
|
+
color: $color;
|
37
|
+
display: inline;
|
38
|
+
font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
|
39
|
+
@include linear-gradient ($base-color, $stop-gradient);
|
40
|
+
padding: 6px 18px 7px;
|
41
|
+
text-shadow: 0 1px 0 $text-shadow;
|
42
|
+
-webkit-background-clip: padding-box;
|
43
|
+
|
44
|
+
&:hover {
|
45
|
+
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
46
|
+
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
47
|
+
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
48
|
+
|
49
|
+
@include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
|
50
|
+
cursor: pointer;
|
51
|
+
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
52
|
+
}
|
53
|
+
|
54
|
+
&:active {
|
55
|
+
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
56
|
+
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
57
|
+
|
58
|
+
border: 1px solid $border-active;
|
59
|
+
@include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@mixin shiny($base-color) {
|
64
|
+
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
65
|
+
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
66
|
+
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
67
|
+
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
68
|
+
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
69
|
+
$color: hsl(0, 0, 100%);
|
70
|
+
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
71
|
+
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
72
|
+
|
73
|
+
@if lightness($base-color) > 70% {
|
74
|
+
$color: hsl(0, 0, 20%);
|
75
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
76
|
+
}
|
77
|
+
|
78
|
+
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
79
|
+
border: 1px solid $border;
|
80
|
+
border-bottom: 1px solid $border-bottom;
|
81
|
+
@include border-radius(5px);
|
82
|
+
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
|
83
|
+
color: $color;
|
84
|
+
display: inline;
|
85
|
+
font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
|
86
|
+
padding: 7px 20px 8px;
|
87
|
+
text-decoration: none;
|
88
|
+
text-align: center;
|
89
|
+
text-shadow: 0 -1px 1px $text-shadow;
|
90
|
+
|
91
|
+
&:hover {
|
92
|
+
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
93
|
+
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
94
|
+
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
95
|
+
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
96
|
+
|
97
|
+
@include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
|
98
|
+
cursor: pointer;
|
99
|
+
}
|
100
|
+
|
101
|
+
&:active {
|
102
|
+
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
103
|
+
|
104
|
+
@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
@mixin pill($base-color) {
|
109
|
+
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
110
|
+
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
111
|
+
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
112
|
+
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
113
|
+
$color: hsl(0, 0, 100%);
|
114
|
+
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
115
|
+
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
116
|
+
|
117
|
+
@if lightness($base-color) > 70% {
|
118
|
+
$color: hsl(0, 0, 20%);
|
119
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
120
|
+
}
|
121
|
+
|
122
|
+
@include linear-gradient ($base-color, $stop-gradient);
|
123
|
+
border: 1px solid $border-top;
|
124
|
+
border-color: $border-top $border-sides $border-bottom;
|
125
|
+
@include border-radius(16px);
|
126
|
+
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
|
127
|
+
color: $color;
|
128
|
+
display: inline;
|
129
|
+
font-family: "lucida grande", sans-serif;
|
130
|
+
font-size: 11px;
|
131
|
+
font-weight: normal;
|
132
|
+
line-height: 1;
|
133
|
+
padding: 3px 16px 5px;
|
134
|
+
text-align: center;
|
135
|
+
text-shadow: 0 -1px 1px $text-shadow;
|
136
|
+
-webkit-background-clip: padding-box;
|
137
|
+
|
138
|
+
&:hover {
|
139
|
+
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
140
|
+
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
141
|
+
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
142
|
+
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
143
|
+
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
144
|
+
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
145
|
+
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
146
|
+
|
147
|
+
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
148
|
+
border: 1px solid $border-top;
|
149
|
+
border-color: $border-top $border-sides $border-bottom;
|
150
|
+
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
|
151
|
+
cursor: pointer;
|
152
|
+
text-shadow: 0 -1px 1px $text-shadow-hover;
|
153
|
+
-webkit-background-clip: padding-box;
|
154
|
+
}
|
155
|
+
|
156
|
+
&:active {
|
157
|
+
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
158
|
+
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
159
|
+
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
160
|
+
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
161
|
+
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
162
|
+
|
163
|
+
background: $active-color;
|
164
|
+
border: 1px solid $border-active;
|
165
|
+
border-bottom: 1px solid $border-bottom-active;
|
166
|
+
@include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
|
167
|
+
text-shadow: 0 -1px 1px $text-shadow-active;
|
168
|
+
}
|
169
|
+
}
|
@@ -0,0 +1,178 @@
|
|
1
|
+
@import compass/css3/gradient
|
2
|
+
@import compass/css3/border-radius
|
3
|
+
@import compass/css3/opacity
|
4
|
+
@import compass/css3/text-shadow
|
5
|
+
@import compass/css3/box-shadow
|
6
|
+
@import compass/css3/background-clip
|
7
|
+
@import fancy-gradient
|
8
|
+
|
9
|
+
$fb-gradient-style: glossy !default
|
10
|
+
$fb-invert-on-click: 1 !default
|
11
|
+
$fb-font-size: 18px !default
|
12
|
+
$fb-color: #444444 !default
|
13
|
+
$fb-font-weight: bold !default
|
14
|
+
$fb-border-width: 1px !default
|
15
|
+
$fb-radius: 6px !default
|
16
|
+
$fb-light-text: white !default
|
17
|
+
$fb-dark-text: #222222 !default
|
18
|
+
$fb-gradient: 1 !default
|
19
|
+
$fb-image-path: image-url("button_bg.png") !default
|
20
|
+
$fb-allow-disabled: false !default
|
21
|
+
$fb-line-height: 1.2em !default
|
22
|
+
|
23
|
+
// Make a fancy button.
|
24
|
+
=fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
|
25
|
+
+fancy-button-structure($font-size, $radius, $border-width)
|
26
|
+
+fancy-button-colors($color)
|
27
|
+
|
28
|
+
// Style the button's colors, picking the most appropriate color set for the base color.
|
29
|
+
=fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled)
|
30
|
+
+fb-color($color, "default")
|
31
|
+
&:hover, &:focus
|
32
|
+
@if $hover == 0
|
33
|
+
+fb-color(darken($color, 3), "hover", $color)
|
34
|
+
@else
|
35
|
+
+fb-color($hover, "hover")
|
36
|
+
&:active
|
37
|
+
@if $active == 0
|
38
|
+
+fb-color(darken($color, 6), "active", $color)
|
39
|
+
+box-shadow(darken($color, 15) 0 .08em .2em 1px inset)
|
40
|
+
@else
|
41
|
+
+fb-color($active, "active")
|
42
|
+
+box-shadow(darken($active, 9) 0 .08em .1em 1px inset)
|
43
|
+
|
44
|
+
+box-shadow(rgba(#fff, (lightness($color))/100) 0 0 .1em 1px inset)
|
45
|
+
+background-clip(padding-box)
|
46
|
+
@if $fb-allow-disabled
|
47
|
+
&.disabled, &[disabled]
|
48
|
+
+disable-fancy-button($color)
|
49
|
+
|
50
|
+
=fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
|
51
|
+
$fb-disable-allowed: $fb-allow-disabled
|
52
|
+
$fb-allow-disabled: true
|
53
|
+
+fancy-button-structure($font-size, $radius, $border-width)
|
54
|
+
+fancy-button-colors-matte($color)
|
55
|
+
$fb-allow-disabled: $fb-disable-allowed
|
56
|
+
|
57
|
+
=fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
|
58
|
+
+fancy-button-structure($font-size, $radius, $border-width)
|
59
|
+
+fancy-button-colors-matte($color)
|
60
|
+
|
61
|
+
=fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
|
62
|
+
+fancy-button-structure($font-size, $radius, $border-width)
|
63
|
+
+fancy-button-colors-custom($color, $font-size, $radius, $border-width)
|
64
|
+
|
65
|
+
=fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0)
|
66
|
+
$fb-current-style: $fb-gradient-style
|
67
|
+
$fb-gradient-style: matte
|
68
|
+
+fancy-button-colors($color, $hover, $active)
|
69
|
+
$fb-gradient-style: $fb-current-style
|
70
|
+
|
71
|
+
=fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0)
|
72
|
+
$fb-current-style: $fb-gradient-style
|
73
|
+
$fb-gradient-style: custom
|
74
|
+
+fancy-button-colors($color, $hover, $active)
|
75
|
+
$fb-gradient-style: $fb-current-style
|
76
|
+
|
77
|
+
// Default state color settings
|
78
|
+
=fb-color($color, $state, $lumins: $color)
|
79
|
+
$gradient-top: lighten($color, 15)
|
80
|
+
$gradient-bottom: darken($color, 6)
|
81
|
+
$border-color: darken($color, 8)
|
82
|
+
@if $fb-invert-on-click != 0
|
83
|
+
$border-color: darken($color, 15)
|
84
|
+
@if saturation($color) > 0
|
85
|
+
$color: saturate($color, 40)
|
86
|
+
@else if lightness($lumins) >= lightness(#aaaaaa)
|
87
|
+
$color: lighten($color, 20)
|
88
|
+
+fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins)
|
89
|
+
|
90
|
+
// Apply the button colors specified for the button state into which it is mixed.
|
91
|
+
=fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color)
|
92
|
+
background-color: $color
|
93
|
+
@if $fb-gradient != 0
|
94
|
+
@if $fb-gradient-style == "glossy"
|
95
|
+
@if $state == "active"
|
96
|
+
+fancy-gradient-active($gradient-top, $gradient-bottom)
|
97
|
+
@else
|
98
|
+
+fancy-gradient($gradient-top, $gradient-bottom)
|
99
|
+
@else if $fb-gradient-style == "matte"
|
100
|
+
@if $state == "active"
|
101
|
+
+fancy-matte-gradient-active($gradient-top, $gradient-bottom)
|
102
|
+
@else
|
103
|
+
+fancy-matte-gradient($gradient-top, $gradient-bottom)
|
104
|
+
@else if $fb-gradient-style == "custom"
|
105
|
+
@if $state == "active"
|
106
|
+
+custom-fancy-gradient-active($gradient-top, $gradient-bottom)
|
107
|
+
@else
|
108
|
+
+custom-fancy-gradient($gradient-top, $gradient-bottom)
|
109
|
+
border:
|
110
|
+
color: $border
|
111
|
+
$text-shadow-settings: unquote("0px 1px 1px")
|
112
|
+
@if $fb-invert-on-click != 0 and $state == "active"
|
113
|
+
$text-shadow-settings: unquote("0px -1px -1px")
|
114
|
+
@if lightness($lumins) < lightness(#aaaaaa)
|
115
|
+
text-shadow: darken($color, 25) $text-shadow-settings
|
116
|
+
&, &:visited
|
117
|
+
color: $fb-light-text
|
118
|
+
@else
|
119
|
+
text-shadow: lighten($color, 15) $text-shadow-settings
|
120
|
+
&, &:visited
|
121
|
+
color: $fb-dark-text
|
122
|
+
|
123
|
+
=fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled : $fb-allow-disabled)
|
124
|
+
&, &:visited
|
125
|
+
color: $color
|
126
|
+
&:hover, &:focus
|
127
|
+
color: $hover
|
128
|
+
&:active
|
129
|
+
color: $active
|
130
|
+
@if $fb-allow-disabled
|
131
|
+
&.disabled, &[disabled]
|
132
|
+
color: $color
|
133
|
+
|
134
|
+
// Layout the button's box
|
135
|
+
=fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
|
136
|
+
@extend .fancy-button-reset-base-class
|
137
|
+
+fancy-button-size($font-size, $radius, $border-width, $line-height)
|
138
|
+
|
139
|
+
=fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
|
140
|
+
// better padding for smaller buttons
|
141
|
+
$v-padding: 0.3em
|
142
|
+
$h-padding: 1em
|
143
|
+
@if $radius > 0
|
144
|
+
+border-radius($radius)
|
145
|
+
font-size: $font-size
|
146
|
+
line-height: $line-height
|
147
|
+
+fancy-button-padding($v-padding, $h-padding, $border-width)
|
148
|
+
|
149
|
+
=fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width)
|
150
|
+
padding: $v-padding $h-padding
|
151
|
+
border-width: $border-width
|
152
|
+
|
153
|
+
// Reset the button's important properties to make sure they behave correctly
|
154
|
+
=fb-reset($font-weight: $fb-font-weight)
|
155
|
+
font-family: "Lucida Grande", Lucida, Arial, sans-serif
|
156
|
+
background: #{$fb-image-path} repeat-x bottom left
|
157
|
+
margin: 0
|
158
|
+
width: auto
|
159
|
+
overflow: visible
|
160
|
+
display: inline-block
|
161
|
+
cursor: pointer
|
162
|
+
text-decoration: none
|
163
|
+
border-style: solid
|
164
|
+
font-weight: $font-weight
|
165
|
+
&::-moz-focus-inner
|
166
|
+
border: none
|
167
|
+
padding: 0
|
168
|
+
&:focus
|
169
|
+
outline: none
|
170
|
+
|
171
|
+
=disable-fancy-button($color: $fb-color, $opacity: 0.7)
|
172
|
+
+fb-color($color, "default")
|
173
|
+
+opacity($opacity)
|
174
|
+
+box-shadow(none)
|
175
|
+
cursor: default !important
|
176
|
+
|
177
|
+
.fancy-button-reset-base-class
|
178
|
+
+fb-reset
|
@@ -0,0 +1,81 @@
|
|
1
|
+
.btn {
|
2
|
+
position: relative;
|
3
|
+
z-index: 1;
|
4
|
+
display: inline-block;
|
5
|
+
padding: 10px 20px 18px;
|
6
|
+
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
|
7
|
+
font-size:42px;
|
8
|
+
background: #1a74a1;
|
9
|
+
border-radius: 8px;
|
10
|
+
box-shadow: 0 10px 20px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.15);
|
11
|
+
-webkit-transition-property: -webkit-box-shadow; /* drop padding as pseudo-element trans not supported */
|
12
|
+
-moz-transition-property: padding, -moz-box-shadow;
|
13
|
+
-o-transition-property: box-shadow; /* drop padding as pseudo-element trans not supported */
|
14
|
+
transition-property: padding, box-shadow;
|
15
|
+
|
16
|
+
transition-duration: .2s;
|
17
|
+
|
18
|
+
transition-timing-function: ease-in-out;
|
19
|
+
}
|
20
|
+
|
21
|
+
.btn:active {
|
22
|
+
padding: 14px 20px 14px;
|
23
|
+
|
24
|
+
box-shadow: 0 6px 15px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,255,255,.15);
|
25
|
+
}
|
26
|
+
|
27
|
+
.btn:before {
|
28
|
+
content: "";
|
29
|
+
position: absolute;
|
30
|
+
z-index: -1;
|
31
|
+
top: 0;
|
32
|
+
bottom: 4px;
|
33
|
+
left: 0;
|
34
|
+
right: 0;
|
35
|
+
background: #3194c6;
|
36
|
+
|
37
|
+
background: linear-gradient(#3194c6, #5bacd6);
|
38
|
+
|
39
|
+
border-radius: 8px;
|
40
|
+
|
41
|
+
transform: translate(0, -4px);
|
42
|
+
-webkit-transition: -webkit-transform .2s ease-in-out;
|
43
|
+
-moz-transition: -moz-transform .2s ease-in-out;
|
44
|
+
-o-transition: -o-transform .2s ease-in-out;
|
45
|
+
transition: transform .2s ease-in-out;
|
46
|
+
}
|
47
|
+
|
48
|
+
.btn:active:before {
|
49
|
+
transform: translate(0, 0);
|
50
|
+
}
|
51
|
+
|
52
|
+
|
53
|
+
/* button styles */
|
54
|
+
|
55
|
+
.btn-alt {
|
56
|
+
display: inline-block;
|
57
|
+
padding: 10px 20px;
|
58
|
+
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
|
59
|
+
font-size:42px;
|
60
|
+
background: #3194c6;
|
61
|
+
background: linear-gradient(#3194c6, #5bacd6);
|
62
|
+
|
63
|
+
border-radius: 8px;
|
64
|
+
|
65
|
+
box-shadow: 0 8px 0 #1a74a1, 0 15px 20px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.15);
|
66
|
+
-webkit-transition-property: -webkit-box-shadow, -webkit-transform;
|
67
|
+
-moz-transition-property: -moz-box-shadow, -moz-transform;
|
68
|
+
-o-transition-property: box-shadow, o-transform;
|
69
|
+
transition-property: box-shadow, transform;
|
70
|
+
|
71
|
+
transition-duration: .2s;
|
72
|
+
|
73
|
+
transition-timing-function: ease-in-out;
|
74
|
+
}
|
75
|
+
|
76
|
+
.btn-alt:active {
|
77
|
+
|
78
|
+
transform: translate(0, 4px);
|
79
|
+
|
80
|
+
box-shadow: 0 4px 0 #1a74a1, 0 12px 10px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,255,255,.15);
|
81
|
+
}
|
@@ -0,0 +1,654 @@
|
|
1
|
+
@import "bourbon";
|
2
|
+
|
3
|
+
button::-moz-focus-inner {
|
4
|
+
border:0;
|
5
|
+
}
|
6
|
+
|
7
|
+
/* minimal
|
8
|
+
*******************************************************************************/
|
9
|
+
@mixin minimal {
|
10
|
+
background: #e3e3e3;
|
11
|
+
border: 1px solid #bbb;
|
12
|
+
@include border-radius (3px);
|
13
|
+
@include box-shadow(inset 0 0 1px 1px #f6f6f6);
|
14
|
+
color: #333;
|
15
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
16
|
+
line-height: 1;
|
17
|
+
padding: 8px 0 9px;
|
18
|
+
text-align: center;
|
19
|
+
text-shadow: 0 1px 0 #fff;
|
20
|
+
width: 150px;
|
21
|
+
|
22
|
+
&:hover {
|
23
|
+
background: #d9d9d9;
|
24
|
+
@include box-shadow(inset 0 0 1px 1px #eaeaea);
|
25
|
+
color: #222;
|
26
|
+
cursor: pointer;
|
27
|
+
}
|
28
|
+
|
29
|
+
&:active {
|
30
|
+
background: #d0d0d0;
|
31
|
+
@include box-shadow(inset 0 0 1px 1px #e3e3e3);
|
32
|
+
color: #000;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
button.minimal {
|
37
|
+
@include minimal;
|
38
|
+
}
|
39
|
+
|
40
|
+
/* clean gray
|
41
|
+
*******************************************************************************/
|
42
|
+
@mixin clean-gray {
|
43
|
+
@include linear-gradient(top, #eee, #ccc);
|
44
|
+
border: 1px solid #ccc;
|
45
|
+
border-bottom: 1px solid #bbb;
|
46
|
+
@include border-radius(3px);
|
47
|
+
color: #333;
|
48
|
+
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
49
|
+
line-height: 1;
|
50
|
+
padding: 8px 0;
|
51
|
+
text-align: center;
|
52
|
+
text-shadow: 0 1px 0 #eee;
|
53
|
+
width: 150px;
|
54
|
+
|
55
|
+
&:hover {
|
56
|
+
@include linear-gradient(top, #ddd, #bbb);
|
57
|
+
border: 1px solid #bbb;
|
58
|
+
border-bottom: 1px solid #999;
|
59
|
+
cursor: pointer;
|
60
|
+
text-shadow: 0 1px 0 #ddd;
|
61
|
+
}
|
62
|
+
|
63
|
+
&:active {
|
64
|
+
border: 1px solid #aaa;
|
65
|
+
border-bottom: 1px solid #888;
|
66
|
+
@include box-shadow(inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
button.clean-gray {
|
71
|
+
@include clean-gray;
|
72
|
+
}
|
73
|
+
|
74
|
+
/* cupid green (inspired by okcupid.com)
|
75
|
+
*******************************************************************************/
|
76
|
+
@mixin cupid-green {
|
77
|
+
@include linear-gradient(top, #7fbf4d, #63a62f);
|
78
|
+
border: 1px solid #63a62f;
|
79
|
+
border-bottom: 1px solid #5b992b;
|
80
|
+
@include border-radius(3px);
|
81
|
+
@include box-shadow(inset 0 1px 0 0 #96ca6d);
|
82
|
+
color: #fff;
|
83
|
+
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
84
|
+
line-height: 1;
|
85
|
+
padding: 7px 0 8px 0;
|
86
|
+
text-align: center;
|
87
|
+
text-shadow: 0 -1px 0 #4c9021;
|
88
|
+
width: 150px;
|
89
|
+
|
90
|
+
&:hover {
|
91
|
+
@include linear-gradient(top, #76b347, #5e9e2e);
|
92
|
+
@include box-shadow(inset 0 1px 0 0 #8dbf67);
|
93
|
+
cursor: pointer;
|
94
|
+
}
|
95
|
+
|
96
|
+
&:active {
|
97
|
+
border: 1px solid #5b992b;
|
98
|
+
border-bottom: 1px solid #538c27;
|
99
|
+
@include box-shadow(inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee);
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
button.cupid-green {
|
104
|
+
@include cupid-green;
|
105
|
+
}
|
106
|
+
|
107
|
+
/* cupid blue (inspired by okcupid.com)
|
108
|
+
*******************************************************************************/
|
109
|
+
@mixin cupid-blue {
|
110
|
+
@include linear-gradient(top, #d7e5f5, #cbe0f5);
|
111
|
+
border-top: 1px solid #abbbcc;
|
112
|
+
border-left: 1px solid #a7b6c7;
|
113
|
+
border-bottom: 1px solid #a1afbf;
|
114
|
+
border-right: 1px solid #a7b6c7;
|
115
|
+
@include border-radius(12px);
|
116
|
+
@include box-shadow(inset 0 1px 0 0 #fff);
|
117
|
+
color: #1a3e66;
|
118
|
+
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
119
|
+
line-height: 1;
|
120
|
+
padding: 6px 0 7px 0;
|
121
|
+
text-align: center;
|
122
|
+
text-shadow: 0 1px 1px #fff;
|
123
|
+
width: 150px;
|
124
|
+
|
125
|
+
&:hover {
|
126
|
+
@include linear-gradient(top, #ccd9e8, #c1d4e8);
|
127
|
+
border-top: 1px solid #a1afbf;
|
128
|
+
border-left: 1px solid #9caaba;
|
129
|
+
border-bottom: 1px solid #96a3b3;
|
130
|
+
border-right: 1px solid #9caaba;
|
131
|
+
@include box-shadow(inset 0 1px 0 0 #f2f2f2);
|
132
|
+
color: #163659;
|
133
|
+
cursor: pointer;
|
134
|
+
}
|
135
|
+
|
136
|
+
&:active {
|
137
|
+
border: 1px solid #8c98a7;
|
138
|
+
@include box-shadow(inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
button.cupid-blue {
|
143
|
+
@include cupid-blue;
|
144
|
+
}
|
145
|
+
|
146
|
+
/* blue pill (inspired by iTunes)
|
147
|
+
*******************************************************************************/
|
148
|
+
@mixin blue-pill {
|
149
|
+
@include linear-gradient(top, #a5b8da, #7089b3);
|
150
|
+
border-top: 1px solid #758fba;
|
151
|
+
border-right: 1px solid #6c84ab;
|
152
|
+
border-bottom: 1px solid #5c6f91;
|
153
|
+
border-left: 1px solid #6c84ab;
|
154
|
+
@include border-radius(18px);
|
155
|
+
@include box-shadow(inset 0 1px 0 0 #aec3e5);
|
156
|
+
color: #fff;
|
157
|
+
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
158
|
+
line-height: 1;
|
159
|
+
padding: 8px 0;
|
160
|
+
text-align: center;
|
161
|
+
text-shadow: 0 -1px 1px #64799e;
|
162
|
+
text-transform: uppercase;
|
163
|
+
width: 150px;
|
164
|
+
|
165
|
+
&:hover {
|
166
|
+
@include linear-gradient(top, #9badcc, #687fa6);
|
167
|
+
border-top: 1px solid #6d86ad;
|
168
|
+
border-right: 1px solid #647a9e;
|
169
|
+
border-bottom: 1px solid #546685;
|
170
|
+
border-left: 1px solid #647a9e;
|
171
|
+
@include box-shadow(inset 0 1px 0 0 #a5b9d9);
|
172
|
+
cursor: pointer;
|
173
|
+
}
|
174
|
+
|
175
|
+
&:active {
|
176
|
+
border: 1px solid #546685;
|
177
|
+
@include box-shadow(inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee);
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
button.blue-pill {
|
182
|
+
@include blue-pill;
|
183
|
+
}
|
184
|
+
|
185
|
+
/* dribbble (inspired by dribbble.com)
|
186
|
+
*******************************************************************************/
|
187
|
+
@mixin dribbble {
|
188
|
+
@include linear-gradient(top, #F26895 0, #F26895 50%, #F15587 50%, #F15587 100%);
|
189
|
+
border: 0;
|
190
|
+
-moz-border-radius: 6px;
|
191
|
+
-webkit-border-radius: 6px;
|
192
|
+
border-radius: 6px;
|
193
|
+
color: #fcfcfc;
|
194
|
+
font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
|
195
|
+
line-height: 1;
|
196
|
+
padding: 10px 0 12px 0;
|
197
|
+
text-align: center;
|
198
|
+
text-shadow: 0px -1px 1px #a64767;
|
199
|
+
width: 150px;
|
200
|
+
|
201
|
+
&:hover {
|
202
|
+
@include linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
|
203
|
+
cursor: pointer;
|
204
|
+
}
|
205
|
+
|
206
|
+
&:active {
|
207
|
+
@include linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
button.dribbble {
|
212
|
+
@include dribbble;
|
213
|
+
}
|
214
|
+
|
215
|
+
/* slick black
|
216
|
+
*******************************************************************************/
|
217
|
+
@mixin slick-black {
|
218
|
+
@include linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
219
|
+
border: 0;
|
220
|
+
@include border-radius(4px);
|
221
|
+
@include box-shadow(inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1));
|
222
|
+
color: #fff;
|
223
|
+
font: lighter 22px "helvetica neue", helvetica, arial, sans-serif;
|
224
|
+
line-height: 1;
|
225
|
+
padding: 12px 0;
|
226
|
+
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
|
227
|
+
width: 150px;
|
228
|
+
|
229
|
+
&:hover {
|
230
|
+
@include linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
|
231
|
+
cursor: pointer;
|
232
|
+
}
|
233
|
+
|
234
|
+
&:active {
|
235
|
+
@include linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
|
236
|
+
}
|
237
|
+
}
|
238
|
+
|
239
|
+
button.slick-black {
|
240
|
+
@include slick-black;
|
241
|
+
}
|
242
|
+
|
243
|
+
/* thoughtbot (inspired by thoughtbot.com)
|
244
|
+
*******************************************************************************/
|
245
|
+
@mixin thoughtbot {
|
246
|
+
@include linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
|
247
|
+
border: 1px solid #951100;
|
248
|
+
@include border-radius(5px);
|
249
|
+
@include box-shadow(inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333);
|
250
|
+
color: #fff;
|
251
|
+
font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
|
252
|
+
line-height: 1;
|
253
|
+
padding: 12px 0 14px 0;
|
254
|
+
text-align: center;
|
255
|
+
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
|
256
|
+
width: 150px;
|
257
|
+
|
258
|
+
&:hover {
|
259
|
+
@include linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
|
260
|
+
cursor: pointer;
|
261
|
+
}
|
262
|
+
|
263
|
+
&:active {
|
264
|
+
@include linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
|
265
|
+
@include box-shadow(inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4));
|
266
|
+
}
|
267
|
+
}
|
268
|
+
|
269
|
+
button.thoughtbot {
|
270
|
+
@include thoughtbot;
|
271
|
+
}
|
272
|
+
|
273
|
+
/* punch
|
274
|
+
*******************************************************************************/
|
275
|
+
@mixin punch {
|
276
|
+
background: #4162a8;
|
277
|
+
border-top: 1px solid #38538c;
|
278
|
+
border-right: 1px solid #1f2d4d;
|
279
|
+
border-bottom: 1px solid #151e33;
|
280
|
+
border-left: 1px solid #1f2d4d;
|
281
|
+
@include border-radius(4px);
|
282
|
+
@include box-shadow(inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111);
|
283
|
+
color: #fff;
|
284
|
+
font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
|
285
|
+
line-height: 1;
|
286
|
+
margin-bottom: 10px;
|
287
|
+
padding: 10px 0 12px 0;
|
288
|
+
text-align: center;
|
289
|
+
text-shadow: 0px -1px 1px #1e2d4d;
|
290
|
+
width: 150px;
|
291
|
+
-webkit-background-clip: padding-box;
|
292
|
+
|
293
|
+
&:hover {
|
294
|
+
@include box-shadow(inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111);
|
295
|
+
cursor: pointer;
|
296
|
+
}
|
297
|
+
|
298
|
+
&:active {
|
299
|
+
@include box-shadow(inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111);
|
300
|
+
margin-top: 58px;
|
301
|
+
}
|
302
|
+
}
|
303
|
+
|
304
|
+
button.punch {
|
305
|
+
@include punch;
|
306
|
+
}
|
307
|
+
|
308
|
+
/* blue candy (inspired by Apple iOS buttons)
|
309
|
+
*******************************************************************************/
|
310
|
+
@mixin blue-candy {
|
311
|
+
@include linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
|
312
|
+
@include border-radius(3px);
|
313
|
+
color: #fff;
|
314
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
315
|
+
line-height: 1;
|
316
|
+
padding: 10px 0 12px 0;
|
317
|
+
text-align: center;
|
318
|
+
text-shadow: 0px -1px 1px #2c4d93;
|
319
|
+
width: 150px;
|
320
|
+
-webkit-background-clip: padding-box;
|
321
|
+
|
322
|
+
&:hover {
|
323
|
+
@include linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
|
324
|
+
-webkit-background-clip: padding-box;
|
325
|
+
cursor: pointer;
|
326
|
+
}
|
327
|
+
|
328
|
+
&:active {
|
329
|
+
background: #1a4aab;
|
330
|
+
background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
|
331
|
+
-moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
|
332
|
+
background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
|
333
|
+
-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
|
334
|
+
color: #ddd;
|
335
|
+
-webkit-background-clip: padding-box;
|
336
|
+
}
|
337
|
+
}
|
338
|
+
|
339
|
+
button.blue-candy {
|
340
|
+
@include blue-candy;
|
341
|
+
}
|
342
|
+
|
343
|
+
/* purple candy
|
344
|
+
*******************************************************************************/
|
345
|
+
@mixin purple-candy {
|
346
|
+
@include linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
|
347
|
+
@include border-radius(3px);
|
348
|
+
color: #fff;
|
349
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
350
|
+
line-height: 1;
|
351
|
+
padding: 10px 0 12px 0;
|
352
|
+
text-align: center;
|
353
|
+
text-shadow: 0px -1px 1px #473569;
|
354
|
+
width: 150px;
|
355
|
+
-webkit-background-clip: padding-box;
|
356
|
+
|
357
|
+
&:hover {
|
358
|
+
@include linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
|
359
|
+
-webkit-background-clip: padding-box;
|
360
|
+
cursor: pointer;
|
361
|
+
}
|
362
|
+
|
363
|
+
&:active {
|
364
|
+
background: #4a1aab;
|
365
|
+
background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
|
366
|
+
-moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
|
367
|
+
background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
|
368
|
+
-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
|
369
|
+
color: #ddd;
|
370
|
+
-webkit-background-clip: padding-box;
|
371
|
+
}
|
372
|
+
}
|
373
|
+
|
374
|
+
button.purple-candy {
|
375
|
+
@include purple-candy;
|
376
|
+
}
|
377
|
+
|
378
|
+
/* shiny blue (inspired by rdio iphone interface)
|
379
|
+
*******************************************************************************/
|
380
|
+
@mixin shiny-blue {
|
381
|
+
@include linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
|
382
|
+
border-top: 1px solid #1f58cc;
|
383
|
+
border-right: 1px solid #1b4db3;
|
384
|
+
border-bottom: 1px solid #174299;
|
385
|
+
border-left: 1px solid #1b4db3;
|
386
|
+
@include border-radius(4px);
|
387
|
+
@include box-shadow(inset 0 0 2px 0 rgba(57, 140, 255, 0.8));
|
388
|
+
color: #fff;
|
389
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
390
|
+
padding: 7px 0;
|
391
|
+
text-shadow: 0 -1px 1px #1a5ad9;
|
392
|
+
width: 150px;
|
393
|
+
|
394
|
+
&:hover {
|
395
|
+
@include linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
|
396
|
+
cursor: pointer;
|
397
|
+
}
|
398
|
+
|
399
|
+
&:active {
|
400
|
+
border-top: 1px solid #1b4db3;
|
401
|
+
border-right: 1px solid #174299;
|
402
|
+
border-bottom: 1px solid #133780;
|
403
|
+
border-left: 1px solid #174299;
|
404
|
+
@include box-shadow(inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee);
|
405
|
+
}
|
406
|
+
}
|
407
|
+
|
408
|
+
button.shiny-blue {
|
409
|
+
@include shiny-blue;
|
410
|
+
}
|
411
|
+
|
412
|
+
/* download itunes
|
413
|
+
I wrote a blog post about creating this button:
|
414
|
+
http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss
|
415
|
+
*******************************************************************************/
|
416
|
+
@mixin download-itunes {
|
417
|
+
@include linear-gradient(top, #52a8e8, #377ad0);
|
418
|
+
border-top: 1px solid #4081af;
|
419
|
+
border-right: 1px solid #2e69a3;
|
420
|
+
border-bottom: 1px solid #20559a;
|
421
|
+
border-left: 1px solid #2e69a3;
|
422
|
+
@include border-radius(16px);
|
423
|
+
@include box-shadow(inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3);
|
424
|
+
color: #fff;
|
425
|
+
font: normal 11px "lucida grande", sans-serif;
|
426
|
+
line-height: 1;
|
427
|
+
padding: 3px 5px;
|
428
|
+
text-align: center;
|
429
|
+
text-shadow: 0 -1px 1px #3275bc;
|
430
|
+
width: 112px;
|
431
|
+
-webkit-background-clip: padding-box;
|
432
|
+
|
433
|
+
&:hover {
|
434
|
+
@include linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
|
435
|
+
border-top: 1px solid #2a73a6;
|
436
|
+
border-right: 1px solid #165899;
|
437
|
+
border-bottom: 1px solid #07428f;
|
438
|
+
border-left: 1px solid #165899;
|
439
|
+
@include box-shadow(inset 0 1px 0 0 #62b1e9);
|
440
|
+
cursor: pointer;
|
441
|
+
text-shadow: 0 -1px 1px #1d62ab;
|
442
|
+
-webkit-background-clip: padding-box;
|
443
|
+
}
|
444
|
+
|
445
|
+
&:active {
|
446
|
+
background: #3282d3;
|
447
|
+
border: 1px solid #154c8c;
|
448
|
+
border-bottom: 1px solid #0e408e;
|
449
|
+
@include box-shadow(inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff);
|
450
|
+
text-shadow: 0 -1px 1px #2361a4;
|
451
|
+
-webkit-background-clip: padding-box;
|
452
|
+
}
|
453
|
+
}
|
454
|
+
|
455
|
+
button.download-itunes {
|
456
|
+
@include download-itunes;
|
457
|
+
}
|
458
|
+
|
459
|
+
button[disabled].download-itunes,
|
460
|
+
button[disabled].download-itunes:hover,
|
461
|
+
button[disabled].download-itunes:active {
|
462
|
+
@include linear-gradient(top, #dadada, #f3f3f3);
|
463
|
+
border-top: 1px solid #c5c5c5;
|
464
|
+
border-right: 1px solid #cecece;
|
465
|
+
border-bottom: 1px solid #d9d9d9;
|
466
|
+
border-left: 1px solid #cecece;
|
467
|
+
@include box-shadow(none);
|
468
|
+
color: #8f8f8f;
|
469
|
+
cursor: not-allowed;
|
470
|
+
text-shadow: 0 -1px 1px #ebebeb;
|
471
|
+
}
|
472
|
+
|
473
|
+
button.download-itunes::-moz-focus-inner {
|
474
|
+
border: 0;
|
475
|
+
padding: 0;
|
476
|
+
}
|
477
|
+
|
478
|
+
/* skip (inspired by okcupid iphone interface)
|
479
|
+
*******************************************************************************/
|
480
|
+
@mixin skip {
|
481
|
+
@include linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
|
482
|
+
border: 1px solid #172d6e;
|
483
|
+
border-bottom: 1px solid #0e1d45;
|
484
|
+
@include border-radius(5px);
|
485
|
+
@include box-shadow(inset 0 1px 0 0 #b1b9cb);
|
486
|
+
color: #fff;
|
487
|
+
font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
|
488
|
+
padding: 7px 0 8px 0;
|
489
|
+
text-decoration: none;
|
490
|
+
text-align: center;
|
491
|
+
text-shadow: 0 -1px 1px #000f4d;
|
492
|
+
width: 150px;
|
493
|
+
|
494
|
+
&:hover {
|
495
|
+
@include linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
|
496
|
+
cursor: pointer;
|
497
|
+
}
|
498
|
+
|
499
|
+
&:active {
|
500
|
+
@include box-shadow(inset 0 0 20px 0 #1d2845, 0 1px 0 #fff);
|
501
|
+
}
|
502
|
+
}
|
503
|
+
|
504
|
+
button.skip {
|
505
|
+
@include skip;
|
506
|
+
}
|
507
|
+
|
508
|
+
/* minimal indent (inspired by okcupid iphone interface)
|
509
|
+
*******************************************************************************/
|
510
|
+
@mixin minimal-indent {
|
511
|
+
@include linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
|
512
|
+
border-right: 1px solid #dfdfdf;
|
513
|
+
border-bottom: 1px solid #b4b4b4;
|
514
|
+
border-right: 1px solid #dfdfdf;
|
515
|
+
@include border-radius(5px);
|
516
|
+
@include box-shadow(inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef);
|
517
|
+
color: #666;
|
518
|
+
font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
|
519
|
+
margin: 0;
|
520
|
+
padding: 7px 0;
|
521
|
+
text-shadow: 0 1px 1px #fff;
|
522
|
+
width: 150px;
|
523
|
+
|
524
|
+
&:hover {
|
525
|
+
@include linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
|
526
|
+
@include box-shadow(inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3);
|
527
|
+
}
|
528
|
+
|
529
|
+
&:active {
|
530
|
+
@include box-shadow(inset 0 0 30px 0 #999, 0 1px 0 0 #fff);
|
531
|
+
}
|
532
|
+
}
|
533
|
+
|
534
|
+
div.indent {
|
535
|
+
@include linear-gradient(top, #e2e2e2, #fafafa);
|
536
|
+
@include border-radius(8px);
|
537
|
+
margin: 50px auto 0;
|
538
|
+
padding: 10px 0;
|
539
|
+
width: 170px;
|
540
|
+
}
|
541
|
+
|
542
|
+
button.minimal-indent {
|
543
|
+
@include minimal-indent;
|
544
|
+
}
|
545
|
+
|
546
|
+
/* webkit badge
|
547
|
+
*******************************************************************************/
|
548
|
+
@mixin webkit-badge {
|
549
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
|
550
|
+
color: #fff;
|
551
|
+
font-family: "hoefler text", georgia, serif;
|
552
|
+
font-size: 30px;
|
553
|
+
font-style: italic;
|
554
|
+
font-weight: lighter;
|
555
|
+
height: 88px;
|
556
|
+
line-height: 1;
|
557
|
+
padding: 0;
|
558
|
+
text-align: center;
|
559
|
+
text-shadow: 0px -1px 1px #3d0700;
|
560
|
+
width: 150px;
|
561
|
+
-webkit-mask-image: url("../images/badge.png");
|
562
|
+
-webkit-mask-position: left top;
|
563
|
+
-webkit-mask-repeat: no-repeat;
|
564
|
+
|
565
|
+
&:hover {
|
566
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
|
567
|
+
cursor: pointer;
|
568
|
+
}
|
569
|
+
|
570
|
+
&:active {
|
571
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
|
572
|
+
}
|
573
|
+
}
|
574
|
+
|
575
|
+
button.webkit-badge {
|
576
|
+
@include webkit-badge;
|
577
|
+
}
|
578
|
+
|
579
|
+
/* webkit seal
|
580
|
+
*******************************************************************************/
|
581
|
+
@mixin webkit-seal {
|
582
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de));
|
583
|
+
color: #fff;
|
584
|
+
height: 90px;
|
585
|
+
color: #fff;
|
586
|
+
font-family: "helvetica neue", helvetica, arial, sans-serif;
|
587
|
+
font-size: 13px;
|
588
|
+
font-weight: bold;
|
589
|
+
line-height: 1;
|
590
|
+
padding: 0;
|
591
|
+
text-align: center;
|
592
|
+
text-shadow: 0px -1px 1px #473569;
|
593
|
+
width: 150px;
|
594
|
+
-webkit-mask-image: url("../images/seal.png");
|
595
|
+
-webkit-mask-position: center center;
|
596
|
+
-webkit-mask-repeat: no-repeat;
|
597
|
+
|
598
|
+
&:hover {
|
599
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4));
|
600
|
+
cursor: pointer;
|
601
|
+
}
|
602
|
+
|
603
|
+
&:active {
|
604
|
+
background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab));
|
605
|
+
}
|
606
|
+
}
|
607
|
+
|
608
|
+
button.webkit-seal {
|
609
|
+
@include webkit-seal;
|
610
|
+
}
|
611
|
+
|
612
|
+
/* webkit check
|
613
|
+
*******************************************************************************/
|
614
|
+
@mixin webkit-check {
|
615
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de));
|
616
|
+
color: #fff;
|
617
|
+
height: 88px;
|
618
|
+
line-height: 1;
|
619
|
+
padding: 0;
|
620
|
+
text-align: center;
|
621
|
+
text-indent: -9999px;
|
622
|
+
text-shadow: 0px -1px 1px #3d0700;
|
623
|
+
width: 150px;
|
624
|
+
-webkit-mask-image: url("../images/check.png");
|
625
|
+
-webkit-mask-position: center center;
|
626
|
+
-webkit-mask-repeat: no-repeat;
|
627
|
+
|
628
|
+
&:hover {
|
629
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4));
|
630
|
+
cursor: pointer;
|
631
|
+
}
|
632
|
+
|
633
|
+
&:active {
|
634
|
+
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab));
|
635
|
+
}
|
636
|
+
}
|
637
|
+
|
638
|
+
button.webkit-check {
|
639
|
+
@include webkit-check;
|
640
|
+
}
|
641
|
+
|
642
|
+
/* disabled button styles
|
643
|
+
works with this markup: <button disabled="disabled">Submit</button>
|
644
|
+
*******************************************************************************/
|
645
|
+
button[disabled],
|
646
|
+
button[disabled]:hover,
|
647
|
+
button[disabled]:active {
|
648
|
+
background: #999;
|
649
|
+
border: 0;
|
650
|
+
@include box-shadow(none);
|
651
|
+
color: #aaa;
|
652
|
+
cursor: not-allowed;
|
653
|
+
text-shadow: none;
|
654
|
+
}F
|