bourbon 0.0.5
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/.gitignore +3 -0
- data/Gemfile +4 -0
- data/Rakefile +2 -0
- data/app/assets/stylesheets/_bourbon.css.scss +18 -0
- data/app/assets/stylesheets/addons/_button.css.scss +174 -0
- data/app/assets/stylesheets/css3/_animation.css.scss +161 -0
- data/app/assets/stylesheets/css3/_border-radius.css.scss +7 -0
- data/app/assets/stylesheets/css3/_box-shadow.css.scss +16 -0
- data/app/assets/stylesheets/css3/_box-sizing.css.scss +8 -0
- data/app/assets/stylesheets/css3/_flex-box.css.scss +59 -0
- data/app/assets/stylesheets/css3/_inline-block.css.scss +10 -0
- data/app/assets/stylesheets/css3/_linear-gradient.css.scss +33 -0
- data/app/assets/stylesheets/css3/_radial-gradient.css.scss +21 -0
- data/app/assets/stylesheets/css3/_transform.css.scss +8 -0
- data/app/assets/stylesheets/css3/_transition.css.scss +104 -0
- data/app/assets/stylesheets/functions/_compact.css.scss +16 -0
- data/app/assets/stylesheets/functions/_tint-shade.css.scss +9 -0
- data/bourbon.gemspec +30 -0
- data/demo/index.html +66 -0
- data/demo/stylesheets/demo.css +498 -0
- data/demo/stylesheets/scss/demo.scss +100 -0
- data/lib/bourbon.rb +13 -0
- data/lib/bourbon/engine.rb +5 -0
- data/lib/bourbon/version.rb +3 -0
- data/lib/tasks/install.rake +10 -0
- data/readme.md +179 -0
- metadata +114 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Requires Sass 3.1+
|
|
2
|
+
@mixin linear-gradient($pos, $G1, $G2: false,
|
|
3
|
+
$G3: false, $G4: false,
|
|
4
|
+
$G5: false, $G6: false,
|
|
5
|
+
$G7: false, $G8: false,
|
|
6
|
+
$G9: false, $G10: false) {
|
|
7
|
+
// Detect what type of value exists in $pos
|
|
8
|
+
$pos-type: type-of(nth($pos, 1));
|
|
9
|
+
|
|
10
|
+
// If $pos is missing from mixin, reassign vars and add default position
|
|
11
|
+
@if $pos-type == color {
|
|
12
|
+
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
|
13
|
+
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
|
14
|
+
$pos: top; // Default position
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
|
18
|
+
|
|
19
|
+
background-color: nth($G1, 1);
|
|
20
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from($G1), to($G2)); /* Saf4+, Chrome */
|
|
21
|
+
background-image: -webkit-linear-gradient($pos, $full);
|
|
22
|
+
background-image: -moz-linear-gradient($pos, $full);
|
|
23
|
+
background-image: -ms-linear-gradient($pos, $full);
|
|
24
|
+
background-image: -o-linear-gradient($pos, $full);
|
|
25
|
+
background-image: linear-gradient($pos, $full);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
|
|
29
|
+
|
|
30
|
+
// @include linear-gradient(#1e5799, #2989d8);
|
|
31
|
+
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
|
|
32
|
+
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
|
|
33
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Requires Sass 3.1+
|
|
2
|
+
@mixin radial-gradient($pos, $shape-size,
|
|
3
|
+
$G1, $G2,
|
|
4
|
+
$G3: false, $G4: false,
|
|
5
|
+
$G5: false, $G6: false,
|
|
6
|
+
$G7: false, $G8: false,
|
|
7
|
+
$G9: false, $G10: false) {
|
|
8
|
+
|
|
9
|
+
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
|
10
|
+
|
|
11
|
+
background-color: nth($G1, 1);
|
|
12
|
+
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
|
|
13
|
+
background-image: -moz-radial-gradient($pos, $shape-size, $full);
|
|
14
|
+
background-image: -ms-radial-gradient($pos, $shape-size, $full);
|
|
15
|
+
background-image: -o-radial-gradient($pos, $shape-size, $full);
|
|
16
|
+
background-image: radial-gradient($pos, $shape-size, $full);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Usage: Gradient position and shape-size are required. Color stops are optional.
|
|
20
|
+
// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
|
|
21
|
+
// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
|
2
|
+
// Example: @include transition (all, 2.0s, ease-in-out);
|
|
3
|
+
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
|
|
4
|
+
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
|
|
5
|
+
|
|
6
|
+
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
|
|
7
|
+
|
|
8
|
+
// Detect # of args passed into each variable
|
|
9
|
+
$length-of-property: length($property);
|
|
10
|
+
$length-of-duration: length($duration);
|
|
11
|
+
$length-of-timing-function: length($timing-function);
|
|
12
|
+
$length-of-delay: length($delay);
|
|
13
|
+
|
|
14
|
+
@if $length-of-property > 1 {
|
|
15
|
+
@include transition-property(zip($property)); }
|
|
16
|
+
@else {
|
|
17
|
+
@include transition-property( $property);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@if $length-of-duration > 1 {
|
|
21
|
+
@include transition-duration(zip($duration)); }
|
|
22
|
+
@else {
|
|
23
|
+
@include transition-duration( $duration);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@if $length-of-timing-function > 1 {
|
|
27
|
+
@include transition-timing-function(zip($timing-function)); }
|
|
28
|
+
@else {
|
|
29
|
+
@include transition-timing-function( $timing-function);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@if $length-of-delay > 1 {
|
|
33
|
+
@include transition-delay(zip($delay)); }
|
|
34
|
+
@else {
|
|
35
|
+
@include transition-delay( $delay);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
@mixin transition-property ($prop-1: all,
|
|
41
|
+
$prop-2: false, $prop-3: false,
|
|
42
|
+
$prop-4: false, $prop-5: false,
|
|
43
|
+
$prop-6: false, $prop-7: false,
|
|
44
|
+
$prop-8: false, $prop-9: false)
|
|
45
|
+
{
|
|
46
|
+
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
|
|
47
|
+
$prop-6, $prop-7, $prop-8, $prop-9);
|
|
48
|
+
|
|
49
|
+
-webkit-transition-property: $full;
|
|
50
|
+
-moz-transition-property: $full;
|
|
51
|
+
-ms-transition-property: $full;
|
|
52
|
+
-o-transition-property: $full;
|
|
53
|
+
transition-property: $full;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@mixin transition-duration ($time-1: 0,
|
|
57
|
+
$time-2: false, $time-3: false,
|
|
58
|
+
$time-4: false, $time-5: false,
|
|
59
|
+
$time-6: false, $time-7: false,
|
|
60
|
+
$time-8: false, $time-9: false)
|
|
61
|
+
{
|
|
62
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
|
|
63
|
+
$time-6, $time-7, $time-8, $time-9);
|
|
64
|
+
|
|
65
|
+
-webkit-transition-duration: $full;
|
|
66
|
+
-moz-transition-duration: $full;
|
|
67
|
+
-ms-transition-duration: $full;
|
|
68
|
+
-o-transition-duration: $full;
|
|
69
|
+
transition-duration: $full;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@mixin transition-timing-function ($motion-1: ease,
|
|
73
|
+
$motion-2: false, $motion-3: false,
|
|
74
|
+
$motion-4: false, $motion-5: false,
|
|
75
|
+
$motion-6: false, $motion-7: false,
|
|
76
|
+
$motion-8: false, $motion-9: false)
|
|
77
|
+
{
|
|
78
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
|
|
79
|
+
$motion-6, $motion-7, $motion-8, $motion-9);
|
|
80
|
+
|
|
81
|
+
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
|
82
|
+
-webkit-transition-timing-function: $full;
|
|
83
|
+
-moz-transition-timing-function: $full;
|
|
84
|
+
-ms-transition-timing-function: $full;
|
|
85
|
+
-o-transition-timing-function: $full;
|
|
86
|
+
transition-timing-function: $full;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@mixin transition-delay ($time-1: 0,
|
|
90
|
+
$time-2: false, $time-3: false,
|
|
91
|
+
$time-4: false, $time-5: false,
|
|
92
|
+
$time-6: false, $time-7: false,
|
|
93
|
+
$time-8: false, $time-9: false)
|
|
94
|
+
{
|
|
95
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
|
|
96
|
+
$time-6, $time-7, $time-8, $time-9);
|
|
97
|
+
|
|
98
|
+
-webkit-transition-delay: $full;
|
|
99
|
+
-moz-transition-delay: $full;
|
|
100
|
+
-ms-transition-delay: $full;
|
|
101
|
+
-o-transition-delay: $full;
|
|
102
|
+
transition-delay: $full;
|
|
103
|
+
}
|
|
104
|
+
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@function compact($var-1, $var-2: false,
|
|
2
|
+
$var-3: false, $var-4: false,
|
|
3
|
+
$var-5: false, $var-6: false,
|
|
4
|
+
$var-7: false, $var-8: false,
|
|
5
|
+
$var-9: false, $var-10: false) {
|
|
6
|
+
$full: $var-1;
|
|
7
|
+
$vars: $var-2, $var-3, $var-4, $var-5,
|
|
8
|
+
$var-6, $var-7, $var-8, $var-9, $var-10;
|
|
9
|
+
|
|
10
|
+
@each $var in $vars {
|
|
11
|
+
@if $var {
|
|
12
|
+
$full: $full, $var;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
@return $full;
|
|
16
|
+
}
|
data/bourbon.gemspec
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
|
3
|
+
require "bourbon/version"
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
s.name = "bourbon"
|
|
7
|
+
s.version = Bourbon::VERSION
|
|
8
|
+
s.platform = Gem::Platform::RUBY
|
|
9
|
+
s.authors = ["Phil LaPier", "Chad Mazzola", "Mike Burns"]
|
|
10
|
+
s.email = ["support@thoughtbot.com"]
|
|
11
|
+
s.homepage = ""
|
|
12
|
+
s.summary = "Bourbon Sass Mixins using SCSS syntax."
|
|
13
|
+
s.description = <<-DESC
|
|
14
|
+
The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive framework of
|
|
15
|
+
sass mixins that are designed to be as vanilla as possible. Meaning they
|
|
16
|
+
should not deter from the original CSS syntax. The mixins contain vendor
|
|
17
|
+
specific prefixes for all CSS3 properties for support amongst modern
|
|
18
|
+
browsers. The prefixes also ensure graceful degradation for older browsers
|
|
19
|
+
that support only CSS3 prefixed properties.
|
|
20
|
+
DESC
|
|
21
|
+
|
|
22
|
+
s.rubyforge_project = "bourbon"
|
|
23
|
+
|
|
24
|
+
s.files = `git ls-files`.split("\n")
|
|
25
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
26
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
|
27
|
+
s.require_paths = ["lib"]
|
|
28
|
+
|
|
29
|
+
s.add_dependency('sass', '>= 3.1')
|
|
30
|
+
end
|
data/demo/index.html
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="description" content="Examples of the sass mixins in use.">
|
|
6
|
+
<title>Sass mixins demo page</title>
|
|
7
|
+
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css">
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<section id="buttons">
|
|
13
|
+
<h2>Demo: button mixin</h2>
|
|
14
|
+
<p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
|
|
15
|
+
|
|
16
|
+
<section class="button-set simple">
|
|
17
|
+
<p>Simple</p>
|
|
18
|
+
|
|
19
|
+
<section>
|
|
20
|
+
<button class="default">Simple button</button>
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
<section>
|
|
24
|
+
<button class="color-2">Simple button</button>
|
|
25
|
+
</section>
|
|
26
|
+
|
|
27
|
+
<section>
|
|
28
|
+
<button class="color-3">Simple button</button>
|
|
29
|
+
</section>
|
|
30
|
+
</section>
|
|
31
|
+
|
|
32
|
+
<section class="button-set shiny">
|
|
33
|
+
<p>Shiny</p>
|
|
34
|
+
|
|
35
|
+
<section>
|
|
36
|
+
<button class="default">Shiny button</button>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<section>
|
|
40
|
+
<button class="color-2">Shiny button</button>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<section>
|
|
44
|
+
<button class="color-3">Shiny button</button>
|
|
45
|
+
</section>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<section class="button-set pill">
|
|
49
|
+
<p>Pill</p>
|
|
50
|
+
|
|
51
|
+
<section>
|
|
52
|
+
<button class="default">Pill button</button>
|
|
53
|
+
</section>
|
|
54
|
+
|
|
55
|
+
<section>
|
|
56
|
+
<button class="color-2">Pill button</button>
|
|
57
|
+
</section>
|
|
58
|
+
|
|
59
|
+
<section>
|
|
60
|
+
<button class="color-3">Pill button</button>
|
|
61
|
+
</section>
|
|
62
|
+
</section>
|
|
63
|
+
</section>
|
|
64
|
+
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|
|
@@ -0,0 +1,498 @@
|
|
|
1
|
+
.clearfix:after, #buttons .button-set:after {
|
|
2
|
+
clear: both;
|
|
3
|
+
content: ' ';
|
|
4
|
+
display: block;
|
|
5
|
+
font-size: 0;
|
|
6
|
+
line-height: 0;
|
|
7
|
+
visibility: hidden;
|
|
8
|
+
width: 0;
|
|
9
|
+
height: 0; }
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
color: #333; }
|
|
13
|
+
|
|
14
|
+
#buttons {
|
|
15
|
+
margin: 50px auto;
|
|
16
|
+
width: 995px; }
|
|
17
|
+
#buttons h2 {
|
|
18
|
+
font: 300 22px "helvetica neue", sans-serif;
|
|
19
|
+
margin: 0 0 4px 0; }
|
|
20
|
+
#buttons p {
|
|
21
|
+
color: #777;
|
|
22
|
+
font: normal 14px "helvetica neue", sans-serif;
|
|
23
|
+
margin: 0 0 24px 0; }
|
|
24
|
+
#buttons .button-set {
|
|
25
|
+
margin: 0 0 40px 0; }
|
|
26
|
+
#buttons .button-set p {
|
|
27
|
+
border-bottom: 1px solid #ddd;
|
|
28
|
+
font: bold 14px "helvetica neue", sans-serif;
|
|
29
|
+
padding: 0 0 4px 0; }
|
|
30
|
+
#buttons .button-set section {
|
|
31
|
+
float: left;
|
|
32
|
+
margin-right: 25px;
|
|
33
|
+
text-align: center;
|
|
34
|
+
width: 315px; }
|
|
35
|
+
#buttons .button-set section:last-child {
|
|
36
|
+
margin-right: 0; }
|
|
37
|
+
|
|
38
|
+
.simple button.default {
|
|
39
|
+
border: 1px solid #076fe4;
|
|
40
|
+
-webkit-border-radius: 3px;
|
|
41
|
+
-moz-border-radius: 3px;
|
|
42
|
+
-ms-border-radius: 3px;
|
|
43
|
+
-o-border-radius: 3px;
|
|
44
|
+
border-radius: 3px;
|
|
45
|
+
-webkit-box-shadow: inset 0 1px 0 0 #8ebcf1;
|
|
46
|
+
-moz-box-shadow: inset 0 1px 0 0 #8ebcf1;
|
|
47
|
+
-ms-box-shadow: inset 0 1px 0 0 #8ebcf1;
|
|
48
|
+
-o-box-shadow: inset 0 1px 0 0 #8ebcf1;
|
|
49
|
+
box-shadow: inset 0 1px 0 0 #8ebcf1;
|
|
50
|
+
color: white;
|
|
51
|
+
display: inline;
|
|
52
|
+
font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
|
|
53
|
+
background-color: #4294f0;
|
|
54
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0), to(#0776f3));
|
|
55
|
+
/* Saf4+, Chrome */
|
|
56
|
+
background-image: -webkit-linear-gradient(top, #4294f0, #0776f3);
|
|
57
|
+
background-image: -moz-linear-gradient(top, #4294f0, #0776f3);
|
|
58
|
+
background-image: -ms-linear-gradient(top, #4294f0, #0776f3);
|
|
59
|
+
background-image: -o-linear-gradient(top, #4294f0, #0776f3);
|
|
60
|
+
background-image: linear-gradient(top, #4294f0, #0776f3);
|
|
61
|
+
padding: 6px 18px 7px;
|
|
62
|
+
text-shadow: 0 1px 0 #0065d6;
|
|
63
|
+
-webkit-background-clip: padding-box; }
|
|
64
|
+
.simple button.default:hover {
|
|
65
|
+
-webkit-box-shadow: inset 0 1px 0 0 #60a2ec;
|
|
66
|
+
-moz-box-shadow: inset 0 1px 0 0 #60a2ec;
|
|
67
|
+
-ms-box-shadow: inset 0 1px 0 0 #60a2ec;
|
|
68
|
+
-o-box-shadow: inset 0 1px 0 0 #60a2ec;
|
|
69
|
+
box-shadow: inset 0 1px 0 0 #60a2ec;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
background-color: #2f87ea;
|
|
72
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#2f87ea), to(#086fe3));
|
|
73
|
+
/* Saf4+, Chrome */
|
|
74
|
+
background-image: -webkit-linear-gradient(top, #2f87ea, #086fe3);
|
|
75
|
+
background-image: -moz-linear-gradient(top, #2f87ea, #086fe3);
|
|
76
|
+
background-image: -ms-linear-gradient(top, #2f87ea, #086fe3);
|
|
77
|
+
background-image: -o-linear-gradient(top, #2f87ea, #086fe3);
|
|
78
|
+
background-image: linear-gradient(top, #2f87ea, #086fe3); }
|
|
79
|
+
.simple button.default:active {
|
|
80
|
+
border: 1px solid #076fe4;
|
|
81
|
+
-webkit-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
|
|
82
|
+
-moz-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
|
|
83
|
+
-ms-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
|
|
84
|
+
-o-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
|
|
85
|
+
box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee; }
|
|
86
|
+
.simple button.color-2 {
|
|
87
|
+
border: 1px solid #b80c00;
|
|
88
|
+
-webkit-border-radius: 3px;
|
|
89
|
+
-moz-border-radius: 3px;
|
|
90
|
+
-ms-border-radius: 3px;
|
|
91
|
+
-o-border-radius: 3px;
|
|
92
|
+
border-radius: 3px;
|
|
93
|
+
-webkit-box-shadow: inset 0 1px 0 0 #f85f54;
|
|
94
|
+
-moz-box-shadow: inset 0 1px 0 0 #f85f54;
|
|
95
|
+
-ms-box-shadow: inset 0 1px 0 0 #f85f54;
|
|
96
|
+
-o-box-shadow: inset 0 1px 0 0 #f85f54;
|
|
97
|
+
box-shadow: inset 0 1px 0 0 #f85f54;
|
|
98
|
+
color: white;
|
|
99
|
+
display: inline;
|
|
100
|
+
font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
|
|
101
|
+
background-color: #ff1100;
|
|
102
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100), to(#c70d00));
|
|
103
|
+
/* Saf4+, Chrome */
|
|
104
|
+
background-image: -webkit-linear-gradient(top, #ff1100, #c70d00);
|
|
105
|
+
background-image: -moz-linear-gradient(top, #ff1100, #c70d00);
|
|
106
|
+
background-image: -ms-linear-gradient(top, #ff1100, #c70d00);
|
|
107
|
+
background-image: -o-linear-gradient(top, #ff1100, #c70d00);
|
|
108
|
+
background-image: linear-gradient(top, #ff1100, #c70d00);
|
|
109
|
+
padding: 6px 18px 7px;
|
|
110
|
+
text-shadow: 0 1px 0 #a30b00;
|
|
111
|
+
-webkit-background-clip: padding-box; }
|
|
112
|
+
.simple button.color-2:hover {
|
|
113
|
+
-webkit-box-shadow: inset 0 1px 0 0 #f73022;
|
|
114
|
+
-moz-box-shadow: inset 0 1px 0 0 #f73022;
|
|
115
|
+
-ms-box-shadow: inset 0 1px 0 0 #f73022;
|
|
116
|
+
-o-box-shadow: inset 0 1px 0 0 #f73022;
|
|
117
|
+
box-shadow: inset 0 1px 0 0 #f73022;
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
background-color: #e11305;
|
|
120
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#e11305), to(#b80c00));
|
|
121
|
+
/* Saf4+, Chrome */
|
|
122
|
+
background-image: -webkit-linear-gradient(top, #e11305, #b80c00);
|
|
123
|
+
background-image: -moz-linear-gradient(top, #e11305, #b80c00);
|
|
124
|
+
background-image: -ms-linear-gradient(top, #e11305, #b80c00);
|
|
125
|
+
background-image: -o-linear-gradient(top, #e11305, #b80c00);
|
|
126
|
+
background-image: linear-gradient(top, #e11305, #b80c00); }
|
|
127
|
+
.simple button.color-2:active {
|
|
128
|
+
border: 1px solid #b80c00;
|
|
129
|
+
-webkit-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
|
|
130
|
+
-moz-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
|
|
131
|
+
-ms-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
|
|
132
|
+
-o-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
|
|
133
|
+
box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee; }
|
|
134
|
+
.simple button.color-3 {
|
|
135
|
+
border: 1px solid #158d23;
|
|
136
|
+
-webkit-border-radius: 3px;
|
|
137
|
+
-moz-border-radius: 3px;
|
|
138
|
+
-ms-border-radius: 3px;
|
|
139
|
+
-o-border-radius: 3px;
|
|
140
|
+
border-radius: 3px;
|
|
141
|
+
-webkit-box-shadow: inset 0 1px 0 0 #62d470;
|
|
142
|
+
-moz-box-shadow: inset 0 1px 0 0 #62d470;
|
|
143
|
+
-ms-box-shadow: inset 0 1px 0 0 #62d470;
|
|
144
|
+
-o-box-shadow: inset 0 1px 0 0 #62d470;
|
|
145
|
+
box-shadow: inset 0 1px 0 0 #62d470;
|
|
146
|
+
color: white;
|
|
147
|
+
display: inline;
|
|
148
|
+
font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
|
|
149
|
+
background-color: #29c13b;
|
|
150
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b), to(#179b27));
|
|
151
|
+
/* Saf4+, Chrome */
|
|
152
|
+
background-image: -webkit-linear-gradient(top, #29c13b, #179b27);
|
|
153
|
+
background-image: -moz-linear-gradient(top, #29c13b, #179b27);
|
|
154
|
+
background-image: -ms-linear-gradient(top, #29c13b, #179b27);
|
|
155
|
+
background-image: -o-linear-gradient(top, #29c13b, #179b27);
|
|
156
|
+
background-image: linear-gradient(top, #29c13b, #179b27);
|
|
157
|
+
padding: 6px 18px 7px;
|
|
158
|
+
text-shadow: 0 1px 0 #0e801c;
|
|
159
|
+
-webkit-background-clip: padding-box; }
|
|
160
|
+
.simple button.color-3:hover {
|
|
161
|
+
-webkit-box-shadow: inset 0 1px 0 0 #39ca4a;
|
|
162
|
+
-moz-box-shadow: inset 0 1px 0 0 #39ca4a;
|
|
163
|
+
-ms-box-shadow: inset 0 1px 0 0 #39ca4a;
|
|
164
|
+
-o-box-shadow: inset 0 1px 0 0 #39ca4a;
|
|
165
|
+
box-shadow: inset 0 1px 0 0 #39ca4a;
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
background-color: #29a838;
|
|
168
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#29a838), to(#168d24));
|
|
169
|
+
/* Saf4+, Chrome */
|
|
170
|
+
background-image: -webkit-linear-gradient(top, #29a838, #168d24);
|
|
171
|
+
background-image: -moz-linear-gradient(top, #29a838, #168d24);
|
|
172
|
+
background-image: -ms-linear-gradient(top, #29a838, #168d24);
|
|
173
|
+
background-image: -o-linear-gradient(top, #29a838, #168d24);
|
|
174
|
+
background-image: linear-gradient(top, #29a838, #168d24); }
|
|
175
|
+
.simple button.color-3:active {
|
|
176
|
+
border: 1px solid #158d23;
|
|
177
|
+
-webkit-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
|
|
178
|
+
-moz-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
|
|
179
|
+
-ms-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
|
|
180
|
+
-o-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
|
|
181
|
+
box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee; }
|
|
182
|
+
|
|
183
|
+
.shiny button.default {
|
|
184
|
+
background-color: #4294f0;
|
|
185
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0 0%), to(#116dd5 50%));
|
|
186
|
+
/* Saf4+, Chrome */
|
|
187
|
+
background-image: -webkit-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
|
|
188
|
+
background-image: -moz-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
|
|
189
|
+
background-image: -ms-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
|
|
190
|
+
background-image: -o-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
|
|
191
|
+
background-image: linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
|
|
192
|
+
border: 1px solid #0e5aaf;
|
|
193
|
+
border-color: #0e5aaf #0c4b92 #093d76;
|
|
194
|
+
-webkit-border-radius: 4px;
|
|
195
|
+
-moz-border-radius: 4px;
|
|
196
|
+
-ms-border-radius: 4px;
|
|
197
|
+
-o-border-radius: 4px;
|
|
198
|
+
border-radius: 4px;
|
|
199
|
+
-webkit-box-shadow: inset 0 0 2px 0 #0a92ff;
|
|
200
|
+
-moz-box-shadow: inset 0 0 2px 0 #0a92ff;
|
|
201
|
+
-ms-box-shadow: inset 0 0 2px 0 #0a92ff;
|
|
202
|
+
-o-box-shadow: inset 0 0 2px 0 #0a92ff;
|
|
203
|
+
box-shadow: inset 0 0 2px 0 #0a92ff;
|
|
204
|
+
color: white;
|
|
205
|
+
display: inline;
|
|
206
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
|
207
|
+
padding: 7px 18px;
|
|
208
|
+
text-shadow: 0 -1px 1px #095ebe;
|
|
209
|
+
-webkit-background-clip: padding-box; }
|
|
210
|
+
.shiny button.default:hover {
|
|
211
|
+
background-color: #2886f0;
|
|
212
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#2886f0 0%), to(#0e66c9 50%));
|
|
213
|
+
/* Saf4+, Chrome */
|
|
214
|
+
background-image: -webkit-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
|
|
215
|
+
background-image: -moz-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
|
|
216
|
+
background-image: -ms-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
|
|
217
|
+
background-image: -o-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
|
|
218
|
+
background-image: linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
|
|
219
|
+
cursor: pointer; }
|
|
220
|
+
.shiny button.default:active {
|
|
221
|
+
border: 1px solid #0e63c3;
|
|
222
|
+
border-color: #0e63c3 #093f7c #07305f;
|
|
223
|
+
-webkit-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
|
|
224
|
+
-moz-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
|
|
225
|
+
-ms-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
|
|
226
|
+
-o-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
|
|
227
|
+
box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee; }
|
|
228
|
+
.shiny button.color-2 {
|
|
229
|
+
background-color: #ff1100;
|
|
230
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100 0%), to(#b30c00 50%));
|
|
231
|
+
/* Saf4+, Chrome */
|
|
232
|
+
background-image: -webkit-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
|
|
233
|
+
background-image: -moz-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
|
|
234
|
+
background-image: -ms-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
|
|
235
|
+
background-image: -o-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
|
|
236
|
+
background-image: linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
|
|
237
|
+
border: 1px solid #8a0900;
|
|
238
|
+
border-color: #8a0900 #6b0700 #4d0500;
|
|
239
|
+
-webkit-border-radius: 4px;
|
|
240
|
+
-moz-border-radius: 4px;
|
|
241
|
+
-ms-border-radius: 4px;
|
|
242
|
+
-o-border-radius: 4px;
|
|
243
|
+
border-radius: 4px;
|
|
244
|
+
-webkit-box-shadow: inset 0 0 2px 0 #d60004;
|
|
245
|
+
-moz-box-shadow: inset 0 0 2px 0 #d60004;
|
|
246
|
+
-ms-box-shadow: inset 0 0 2px 0 #d60004;
|
|
247
|
+
-o-box-shadow: inset 0 0 2px 0 #d60004;
|
|
248
|
+
box-shadow: inset 0 0 2px 0 #d60004;
|
|
249
|
+
color: white;
|
|
250
|
+
display: inline;
|
|
251
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
|
252
|
+
padding: 7px 18px;
|
|
253
|
+
text-shadow: 0 -1px 1px #940a00;
|
|
254
|
+
-webkit-background-clip: padding-box; }
|
|
255
|
+
.shiny button.color-2:hover {
|
|
256
|
+
background-color: #e60f00;
|
|
257
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#e60f00 0%), to(#a30b00 50%));
|
|
258
|
+
/* Saf4+, Chrome */
|
|
259
|
+
background-image: -webkit-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
|
|
260
|
+
background-image: -moz-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
|
|
261
|
+
background-image: -ms-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
|
|
262
|
+
background-image: -o-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
|
|
263
|
+
background-image: linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
|
|
264
|
+
cursor: pointer; }
|
|
265
|
+
.shiny button.color-2:active {
|
|
266
|
+
border: 1px solid #9e0b00;
|
|
267
|
+
border-color: #9e0b00 #520500 #330300;
|
|
268
|
+
-webkit-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
|
|
269
|
+
-moz-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
|
|
270
|
+
-ms-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
|
|
271
|
+
-o-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
|
|
272
|
+
box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee; }
|
|
273
|
+
.shiny button.color-3 {
|
|
274
|
+
background-color: #29c13b;
|
|
275
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b 0%), to(#1c8228 50%));
|
|
276
|
+
/* Saf4+, Chrome */
|
|
277
|
+
background-image: -webkit-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
|
|
278
|
+
background-image: -moz-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
|
|
279
|
+
background-image: -ms-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
|
|
280
|
+
background-image: -o-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
|
|
281
|
+
background-image: linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
|
|
282
|
+
border: 1px solid #14601d;
|
|
283
|
+
border-color: #14601d #0f4716 #0a2e0e;
|
|
284
|
+
-webkit-border-radius: 4px;
|
|
285
|
+
-moz-border-radius: 4px;
|
|
286
|
+
-ms-border-radius: 4px;
|
|
287
|
+
-o-border-radius: 4px;
|
|
288
|
+
border-radius: 4px;
|
|
289
|
+
-webkit-box-shadow: inset 0 0 2px 0 #0cb612;
|
|
290
|
+
-moz-box-shadow: inset 0 0 2px 0 #0cb612;
|
|
291
|
+
-ms-box-shadow: inset 0 0 2px 0 #0cb612;
|
|
292
|
+
-o-box-shadow: inset 0 0 2px 0 #0cb612;
|
|
293
|
+
box-shadow: inset 0 0 2px 0 #0cb612;
|
|
294
|
+
color: white;
|
|
295
|
+
display: inline;
|
|
296
|
+
font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
|
|
297
|
+
padding: 7px 18px;
|
|
298
|
+
text-shadow: 0 -1px 1px #126c1d;
|
|
299
|
+
-webkit-background-clip: padding-box; }
|
|
300
|
+
.shiny button.color-3:hover {
|
|
301
|
+
background-color: #22ae33;
|
|
302
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#22ae33 0%), to(#177723 50%));
|
|
303
|
+
/* Saf4+, Chrome */
|
|
304
|
+
background-image: -webkit-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
|
|
305
|
+
background-image: -moz-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
|
|
306
|
+
background-image: -ms-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
|
|
307
|
+
background-image: -o-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
|
|
308
|
+
background-image: linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
|
|
309
|
+
cursor: pointer; }
|
|
310
|
+
.shiny button.color-3:active {
|
|
311
|
+
border: 1px solid #177222;
|
|
312
|
+
border-color: #177222 #0a320f #051907;
|
|
313
|
+
-webkit-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
|
|
314
|
+
-moz-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
|
|
315
|
+
-ms-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
|
|
316
|
+
-o-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
|
|
317
|
+
box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee; }
|
|
318
|
+
|
|
319
|
+
.pill button.default {
|
|
320
|
+
background-color: #4294f0;
|
|
321
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0), to(#0156fe));
|
|
322
|
+
/* Saf4+, Chrome */
|
|
323
|
+
background-image: -webkit-linear-gradient(top, #4294f0, #0156fe);
|
|
324
|
+
background-image: -moz-linear-gradient(top, #4294f0, #0156fe);
|
|
325
|
+
background-image: -ms-linear-gradient(top, #4294f0, #0156fe);
|
|
326
|
+
background-image: -o-linear-gradient(top, #4294f0, #0156fe);
|
|
327
|
+
background-image: linear-gradient(top, #4294f0, #0156fe);
|
|
328
|
+
border: 1px solid #3371b2;
|
|
329
|
+
border-color: #3371b2 #2457a3 #164297;
|
|
330
|
+
-webkit-border-radius: 16px;
|
|
331
|
+
-moz-border-radius: 16px;
|
|
332
|
+
-ms-border-radius: 16px;
|
|
333
|
+
-o-border-radius: 16px;
|
|
334
|
+
border-radius: 16px;
|
|
335
|
+
-webkit-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
|
|
336
|
+
-moz-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
|
|
337
|
+
-ms-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
|
|
338
|
+
-o-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
|
|
339
|
+
box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
|
|
340
|
+
color: white;
|
|
341
|
+
display: inline;
|
|
342
|
+
font-family: "lucida grande", sans-serif;
|
|
343
|
+
font-size: 11px;
|
|
344
|
+
font-weight: normal;
|
|
345
|
+
line-height: 1;
|
|
346
|
+
padding: 3px 16px 5px;
|
|
347
|
+
text-align: center;
|
|
348
|
+
text-shadow: 0 -1px 1px #2762bf;
|
|
349
|
+
-webkit-background-clip: padding-box; }
|
|
350
|
+
.pill button.default:hover {
|
|
351
|
+
background-color: #2d88ee;
|
|
352
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d88ee), to(#1554ce));
|
|
353
|
+
/* Saf4+, Chrome */
|
|
354
|
+
background-image: -webkit-linear-gradient(top, #2d88ee, #1554ce);
|
|
355
|
+
background-image: -moz-linear-gradient(top, #2d88ee, #1554ce);
|
|
356
|
+
background-image: -ms-linear-gradient(top, #2d88ee, #1554ce);
|
|
357
|
+
background-image: -o-linear-gradient(top, #2d88ee, #1554ce);
|
|
358
|
+
background-image: linear-gradient(top, #2d88ee, #1554ce);
|
|
359
|
+
border: 1px solid #2062a7;
|
|
360
|
+
border-color: #2062a7 #0e479a #01318e;
|
|
361
|
+
-webkit-box-shadow: inset 0 1px 0 0 #519cf0;
|
|
362
|
+
-moz-box-shadow: inset 0 1px 0 0 #519cf0;
|
|
363
|
+
-ms-box-shadow: inset 0 1px 0 0 #519cf0;
|
|
364
|
+
-o-box-shadow: inset 0 1px 0 0 #519cf0;
|
|
365
|
+
box-shadow: inset 0 1px 0 0 #519cf0;
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
text-shadow: 0 -1px 1px #134faf;
|
|
368
|
+
-webkit-background-clip: padding-box; }
|
|
369
|
+
.pill button.default:active {
|
|
370
|
+
background: #226edd;
|
|
371
|
+
border: 1px solid #0d3c8c;
|
|
372
|
+
border-bottom: 1px solid #062d8d;
|
|
373
|
+
-webkit-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
|
|
374
|
+
-moz-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
|
|
375
|
+
-ms-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
|
|
376
|
+
-o-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
|
|
377
|
+
box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
|
|
378
|
+
text-shadow: 0 -1px 1px #1a52aa; }
|
|
379
|
+
.pill button.color-2 {
|
|
380
|
+
background-color: #ff1100;
|
|
381
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100), to(#cc2900));
|
|
382
|
+
/* Saf4+, Chrome */
|
|
383
|
+
background-image: -webkit-linear-gradient(top, #ff1100, #cc2900);
|
|
384
|
+
background-image: -moz-linear-gradient(top, #ff1100, #cc2900);
|
|
385
|
+
background-image: -ms-linear-gradient(top, #ff1100, #cc2900);
|
|
386
|
+
background-image: -o-linear-gradient(top, #ff1100, #cc2900);
|
|
387
|
+
background-image: linear-gradient(top, #ff1100, #cc2900);
|
|
388
|
+
border: 1px solid #98211b;
|
|
389
|
+
border-color: #98211b #841f10 #741d07;
|
|
390
|
+
-webkit-border-radius: 16px;
|
|
391
|
+
-moz-border-radius: 16px;
|
|
392
|
+
-ms-border-radius: 16px;
|
|
393
|
+
-o-border-radius: 16px;
|
|
394
|
+
border-radius: 16px;
|
|
395
|
+
-webkit-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
|
|
396
|
+
-moz-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
|
|
397
|
+
-ms-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
|
|
398
|
+
-o-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
|
|
399
|
+
box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
|
|
400
|
+
color: white;
|
|
401
|
+
display: inline;
|
|
402
|
+
font-family: "lucida grande", sans-serif;
|
|
403
|
+
font-size: 11px;
|
|
404
|
+
font-weight: normal;
|
|
405
|
+
line-height: 1;
|
|
406
|
+
padding: 3px 16px 5px;
|
|
407
|
+
text-align: center;
|
|
408
|
+
text-shadow: 0 -1px 1px #a22711;
|
|
409
|
+
-webkit-background-clip: padding-box; }
|
|
410
|
+
.pill button.color-2:hover {
|
|
411
|
+
background-color: #e80f00;
|
|
412
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#e80f00), to(#ac2504));
|
|
413
|
+
/* Saf4+, Chrome */
|
|
414
|
+
background-image: -webkit-linear-gradient(top, #e80f00, #ac2504);
|
|
415
|
+
background-image: -moz-linear-gradient(top, #e80f00, #ac2504);
|
|
416
|
+
background-image: -ms-linear-gradient(top, #e80f00, #ac2504);
|
|
417
|
+
background-image: -o-linear-gradient(top, #e80f00, #ac2504);
|
|
418
|
+
background-image: linear-gradient(top, #e80f00, #ac2504);
|
|
419
|
+
border: 1px solid #87130d;
|
|
420
|
+
border-color: #87130d #741101 #5c1200;
|
|
421
|
+
-webkit-box-shadow: inset 0 1px 0 0 #fe2010;
|
|
422
|
+
-moz-box-shadow: inset 0 1px 0 0 #fe2010;
|
|
423
|
+
-ms-box-shadow: inset 0 1px 0 0 #fe2010;
|
|
424
|
+
-o-box-shadow: inset 0 1px 0 0 #fe2010;
|
|
425
|
+
box-shadow: inset 0 1px 0 0 #fe2010;
|
|
426
|
+
cursor: pointer;
|
|
427
|
+
text-shadow: 0 -1px 1px #8b1804;
|
|
428
|
+
-webkit-background-clip: padding-box; }
|
|
429
|
+
.pill button.color-2:active {
|
|
430
|
+
background: #c0240c;
|
|
431
|
+
border: 1px solid #651201;
|
|
432
|
+
border-bottom: 1px solid #611800;
|
|
433
|
+
-webkit-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
|
|
434
|
+
-moz-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
|
|
435
|
+
-ms-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
|
|
436
|
+
-o-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
|
|
437
|
+
box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
|
|
438
|
+
text-shadow: 0 -1px 1px #891c09; }
|
|
439
|
+
.pill button.color-3 {
|
|
440
|
+
background-color: #29c13b;
|
|
441
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b), to(#13a438));
|
|
442
|
+
/* Saf4+, Chrome */
|
|
443
|
+
background-image: -webkit-linear-gradient(top, #29c13b, #13a438);
|
|
444
|
+
background-image: -moz-linear-gradient(top, #29c13b, #13a438);
|
|
445
|
+
background-image: -ms-linear-gradient(top, #29c13b, #13a438);
|
|
446
|
+
background-image: -o-linear-gradient(top, #29c13b, #13a438);
|
|
447
|
+
background-image: linear-gradient(top, #29c13b, #13a438);
|
|
448
|
+
border: 1px solid #336a39;
|
|
449
|
+
border-color: #336a39 #245b2e #174e25;
|
|
450
|
+
-webkit-border-radius: 16px;
|
|
451
|
+
-moz-border-radius: 16px;
|
|
452
|
+
-ms-border-radius: 16px;
|
|
453
|
+
-o-border-radius: 16px;
|
|
454
|
+
border-radius: 16px;
|
|
455
|
+
-webkit-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
|
|
456
|
+
-moz-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
|
|
457
|
+
-ms-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
|
|
458
|
+
-o-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
|
|
459
|
+
box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
|
|
460
|
+
color: white;
|
|
461
|
+
display: inline;
|
|
462
|
+
font-family: "lucida grande", sans-serif;
|
|
463
|
+
font-size: 11px;
|
|
464
|
+
font-weight: normal;
|
|
465
|
+
line-height: 1;
|
|
466
|
+
padding: 3px 16px 5px;
|
|
467
|
+
text-align: center;
|
|
468
|
+
text-shadow: 0 -1px 1px #2b7339;
|
|
469
|
+
-webkit-background-clip: padding-box; }
|
|
470
|
+
.pill button.color-3:hover {
|
|
471
|
+
background-color: #25ae35;
|
|
472
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#25ae35), to(#1e7d36));
|
|
473
|
+
/* Saf4+, Chrome */
|
|
474
|
+
background-image: -webkit-linear-gradient(top, #25ae35, #1e7d36);
|
|
475
|
+
background-image: -moz-linear-gradient(top, #25ae35, #1e7d36);
|
|
476
|
+
background-image: -ms-linear-gradient(top, #25ae35, #1e7d36);
|
|
477
|
+
background-image: -o-linear-gradient(top, #25ae35, #1e7d36);
|
|
478
|
+
background-image: linear-gradient(top, #25ae35, #1e7d36);
|
|
479
|
+
border: 1px solid #215e27;
|
|
480
|
+
border-color: #215e27 #124e1d #083f16;
|
|
481
|
+
-webkit-box-shadow: inset 0 1px 0 0 #2dcc40;
|
|
482
|
+
-moz-box-shadow: inset 0 1px 0 0 #2dcc40;
|
|
483
|
+
-ms-box-shadow: inset 0 1px 0 0 #2dcc40;
|
|
484
|
+
-o-box-shadow: inset 0 1px 0 0 #2dcc40;
|
|
485
|
+
box-shadow: inset 0 1px 0 0 #2dcc40;
|
|
486
|
+
cursor: pointer;
|
|
487
|
+
text-shadow: 0 -1px 1px #186127;
|
|
488
|
+
-webkit-background-clip: padding-box; }
|
|
489
|
+
.pill button.color-3:active {
|
|
490
|
+
background: #2b8c3d;
|
|
491
|
+
border: 1px solid #0f421a;
|
|
492
|
+
border-bottom: 1px solid #0b411b;
|
|
493
|
+
-webkit-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
|
|
494
|
+
-moz-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
|
|
495
|
+
-ms-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
|
|
496
|
+
-o-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
|
|
497
|
+
box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
|
|
498
|
+
text-shadow: 0 -1px 1px #1d5f2b; }
|