wiskey 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +28 -0
- data/.rvmrc +1 -0
- data/Gemfile +10 -0
- data/Gemfile.lock +89 -0
- data/MIT-LICENSE +20 -0
- data/README.rdoc +3 -0
- data/Rakefile +29 -0
- data/app/assets/stylesheets/_wiskey.scss +25 -0
- data/app/assets/stylesheets/addons/_animation-keyframes.scss +28 -0
- data/app/assets/stylesheets/addons/_button.scss +169 -0
- data/app/assets/stylesheets/addons/_position.scss +30 -0
- data/app/assets/stylesheets/addons/_timing-functions.scss +29 -0
- data/app/assets/stylesheets/css3/_animation.scss +161 -0
- data/app/assets/stylesheets/css3/_background-clip.scss +25 -0
- data/app/assets/stylesheets/css3/_border-radius.scss +54 -0
- data/app/assets/stylesheets/css3/_box-shadow.scss +3 -0
- data/app/assets/stylesheets/css3/_box-sizing.scss +8 -0
- data/app/assets/stylesheets/css3/_flex-box.scss +67 -0
- data/app/assets/stylesheets/css3/_inline-block.scss +21 -0
- data/app/assets/stylesheets/css3/_linear-gradient.scss +32 -0
- data/app/assets/stylesheets/css3/_opacity.scss +6 -0
- data/app/assets/stylesheets/css3/_radial-gradient.scss +21 -0
- data/app/assets/stylesheets/css3/_text-overflow.scss +5 -0
- data/app/assets/stylesheets/css3/_text-shadow.scss +3 -0
- data/app/assets/stylesheets/css3/_transform.scss +19 -0
- data/app/assets/stylesheets/css3/_transition.scss +104 -0
- data/app/assets/stylesheets/functions/_experimental.scss +15 -0
- data/app/assets/stylesheets/functions/_linear-gradient.scss +21 -0
- data/lib/tasks/install.rake +10 -0
- data/lib/wiskey/engine.rb +5 -0
- data/lib/wiskey/sass_extensions/functions/compact.rb +13 -0
- data/lib/wiskey/sass_extensions/functions.rb +13 -0
- data/lib/wiskey/sass_extensions.rb +6 -0
- data/lib/wiskey/version.rb +3 -0
- data/lib/wiskey.rb +17 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/config/application.rb +48 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/database.yml +22 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +25 -0
- data/test/dummy/config/environments/production.rb +52 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +10 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +58 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/public/404.html +26 -0
- data/test/dummy/public/422.html +26 -0
- data/test/dummy/public/500.html +26 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/javascripts/application.js +2 -0
- data/test/dummy/public/javascripts/controls.js +965 -0
- data/test/dummy/public/javascripts/dragdrop.js +974 -0
- data/test/dummy/public/javascripts/effects.js +1123 -0
- data/test/dummy/public/javascripts/prototype.js +6001 -0
- data/test/dummy/public/javascripts/rails.js +191 -0
- data/test/dummy/public/stylesheets/.gitkeep +0 -0
- data/test/dummy/script/rails +6 -0
- data/test/integration/navigation_test.rb +7 -0
- data/test/support/integration_case.rb +5 -0
- data/test/test_helper.rb +22 -0
- data/test/wiskey_test.rb +7 -0
- data/wiskey.gemspec +16 -0
- metadata +129 -0
data/.gitignore
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
.bundle/
|
2
|
+
log/*.log
|
3
|
+
pkg/
|
4
|
+
test/dummy/db/*.sqlite3
|
5
|
+
test/dummy/log/*.log
|
6
|
+
test/dummy/tmp/
|
7
|
+
test/dummy/.sass-cache/
|
8
|
+
pkg
|
9
|
+
Icon?
|
10
|
+
.DS_Store
|
11
|
+
.swp
|
12
|
+
TAGS
|
13
|
+
REVISION
|
14
|
+
*.tmproj
|
15
|
+
*~
|
16
|
+
.autotest
|
17
|
+
.settings
|
18
|
+
.project
|
19
|
+
.tasks-cache
|
20
|
+
.svn
|
21
|
+
/nbproject
|
22
|
+
/.idea
|
23
|
+
tmp/
|
24
|
+
*DONOTVERSION*
|
25
|
+
/coverage
|
26
|
+
/coverage.data
|
27
|
+
.loadpath
|
28
|
+
.sass-cache
|
data/.rvmrc
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
rvm use 1.9.2@wiskey
|
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -0,0 +1,89 @@
|
|
1
|
+
GEM
|
2
|
+
remote: http://rubygems.org/
|
3
|
+
specs:
|
4
|
+
actionmailer (3.1.0)
|
5
|
+
actionpack (= 3.1.0)
|
6
|
+
mail (~> 2.3.0)
|
7
|
+
actionpack (3.1.0)
|
8
|
+
activemodel (= 3.1.0)
|
9
|
+
activesupport (= 3.1.0)
|
10
|
+
builder (~> 3.0.0)
|
11
|
+
erubis (~> 2.7.0)
|
12
|
+
i18n (~> 0.6)
|
13
|
+
rack (~> 1.3.2)
|
14
|
+
rack-cache (~> 1.0.3)
|
15
|
+
rack-mount (~> 0.8.2)
|
16
|
+
rack-test (~> 0.6.1)
|
17
|
+
sprockets (~> 2.0.0)
|
18
|
+
activemodel (3.1.0)
|
19
|
+
activesupport (= 3.1.0)
|
20
|
+
bcrypt-ruby (~> 3.0.0)
|
21
|
+
builder (~> 3.0.0)
|
22
|
+
i18n (~> 0.6)
|
23
|
+
activerecord (3.1.0)
|
24
|
+
activemodel (= 3.1.0)
|
25
|
+
activesupport (= 3.1.0)
|
26
|
+
arel (~> 2.2.1)
|
27
|
+
tzinfo (~> 0.3.29)
|
28
|
+
activeresource (3.1.0)
|
29
|
+
activemodel (= 3.1.0)
|
30
|
+
activesupport (= 3.1.0)
|
31
|
+
activesupport (3.1.0)
|
32
|
+
multi_json (~> 1.0)
|
33
|
+
arel (2.2.1)
|
34
|
+
bcrypt-ruby (3.0.0)
|
35
|
+
builder (3.0.0)
|
36
|
+
erubis (2.7.0)
|
37
|
+
hike (1.2.1)
|
38
|
+
i18n (0.6.0)
|
39
|
+
mail (2.3.0)
|
40
|
+
i18n (>= 0.4.0)
|
41
|
+
mime-types (~> 1.16)
|
42
|
+
treetop (~> 1.4.8)
|
43
|
+
mime-types (1.16)
|
44
|
+
multi_json (1.0.3)
|
45
|
+
polyglot (0.3.2)
|
46
|
+
rack (1.3.2)
|
47
|
+
rack-cache (1.0.3)
|
48
|
+
rack (>= 0.4)
|
49
|
+
rack-mount (0.8.3)
|
50
|
+
rack (>= 1.0.0)
|
51
|
+
rack-ssl (1.3.2)
|
52
|
+
rack
|
53
|
+
rack-test (0.6.1)
|
54
|
+
rack (>= 1.0)
|
55
|
+
rails (3.1.0)
|
56
|
+
actionmailer (= 3.1.0)
|
57
|
+
actionpack (= 3.1.0)
|
58
|
+
activerecord (= 3.1.0)
|
59
|
+
activeresource (= 3.1.0)
|
60
|
+
activesupport (= 3.1.0)
|
61
|
+
bundler (~> 1.0)
|
62
|
+
railties (= 3.1.0)
|
63
|
+
railties (3.1.0)
|
64
|
+
actionpack (= 3.1.0)
|
65
|
+
activesupport (= 3.1.0)
|
66
|
+
rack-ssl (~> 1.3.2)
|
67
|
+
rake (>= 0.8.7)
|
68
|
+
rdoc (~> 3.4)
|
69
|
+
thor (~> 0.14.6)
|
70
|
+
rake (0.9.2)
|
71
|
+
rdoc (3.9.4)
|
72
|
+
sass (3.1.7)
|
73
|
+
sprockets (2.0.0)
|
74
|
+
hike (~> 1.2)
|
75
|
+
rack (~> 1.0)
|
76
|
+
tilt (~> 1.1, != 1.3.0)
|
77
|
+
thor (0.14.6)
|
78
|
+
tilt (1.3.3)
|
79
|
+
treetop (1.4.10)
|
80
|
+
polyglot
|
81
|
+
polyglot (>= 0.3.1)
|
82
|
+
tzinfo (0.3.29)
|
83
|
+
|
84
|
+
PLATFORMS
|
85
|
+
ruby
|
86
|
+
|
87
|
+
DEPENDENCIES
|
88
|
+
rails (= 3.1.0)
|
89
|
+
sass
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2011 Alexey Osipenko
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.rdoc
ADDED
data/Rakefile
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
# encoding: UTF-8
|
2
|
+
require 'rubygems'
|
3
|
+
begin
|
4
|
+
require 'bundler/setup'
|
5
|
+
rescue LoadError
|
6
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
7
|
+
end
|
8
|
+
|
9
|
+
require 'rake'
|
10
|
+
require 'rake/rdoctask'
|
11
|
+
|
12
|
+
require 'rake/testtask'
|
13
|
+
|
14
|
+
Rake::TestTask.new(:test) do |t|
|
15
|
+
t.libs << 'lib'
|
16
|
+
t.libs << 'test'
|
17
|
+
t.pattern = 'test/**/*_test.rb'
|
18
|
+
t.verbose = false
|
19
|
+
end
|
20
|
+
|
21
|
+
task :default => :test
|
22
|
+
|
23
|
+
Rake::RDocTask.new(:rdoc) do |rdoc|
|
24
|
+
rdoc.rdoc_dir = 'rdoc'
|
25
|
+
rdoc.title = 'Wiskey'
|
26
|
+
rdoc.options << '--line-numbers' << '--inline-source'
|
27
|
+
rdoc.rdoc_files.include('README.rdoc')
|
28
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
29
|
+
end
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Custom Functions
|
2
|
+
@import "functions/experimental";
|
3
|
+
@import "functions/linear-gradient";
|
4
|
+
|
5
|
+
// CSS3 Mixins
|
6
|
+
@import "css3/animation";
|
7
|
+
@import "css3/background-clip";
|
8
|
+
@import "css3/border-radius";
|
9
|
+
@import "css3/box-shadow";
|
10
|
+
@import "css3/box-sizing";
|
11
|
+
@import "css3/flex-box";
|
12
|
+
@import "css3/inline-block";
|
13
|
+
@import "css3/linear-gradient";
|
14
|
+
@import "css3/radial-gradient";
|
15
|
+
@import "css3/transform";
|
16
|
+
@import "css3/transition";
|
17
|
+
@import "css3/opacity";
|
18
|
+
@import "css3/text-shadow";
|
19
|
+
@import "css3/text-overflow";
|
20
|
+
|
21
|
+
// Addons & other mixins
|
22
|
+
@import "addons/animation-keyframes";
|
23
|
+
@import "addons/button";
|
24
|
+
@import "addons/position";
|
25
|
+
@import "addons/timing-functions";
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// Keyframes for Animations
|
2
|
+
|
3
|
+
// Fade-In animation
|
4
|
+
@mixin fade-in {
|
5
|
+
0% {
|
6
|
+
opacity: 0;
|
7
|
+
}
|
8
|
+
100% {
|
9
|
+
opacity: 1;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
@-webkit-keyframes fade-in { @include fade-in; }
|
13
|
+
@-moz-keyframes fade-in { @include fade-in; }
|
14
|
+
@keyframes fade-in { @include fade-in; }
|
15
|
+
|
16
|
+
|
17
|
+
// Fade-out animation
|
18
|
+
@mixin fade-out {
|
19
|
+
0% {
|
20
|
+
opacity: 1;
|
21
|
+
}
|
22
|
+
100% {
|
23
|
+
opacity: 0;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
@-webkit-keyframes fade-out { @include fade-out; }
|
27
|
+
@-moz-keyframes fade-out { @include fade-out; }
|
28
|
+
@keyframes fade-out { @include fade-out; }
|
@@ -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,30 @@
|
|
1
|
+
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
|
2
|
+
|
3
|
+
@if type-of($position) == list {
|
4
|
+
$coordinates: $position;
|
5
|
+
$position: relative;
|
6
|
+
}
|
7
|
+
|
8
|
+
$top: nth($coordinates, 1);
|
9
|
+
$right: nth($coordinates, 2);
|
10
|
+
$bottom: nth($coordinates, 3);
|
11
|
+
$left: nth($coordinates, 4);
|
12
|
+
|
13
|
+
position: $position;
|
14
|
+
|
15
|
+
@if not(unitless($top)) {
|
16
|
+
top: $top;
|
17
|
+
}
|
18
|
+
|
19
|
+
@if not(unitless($right)) {
|
20
|
+
right: $right;
|
21
|
+
}
|
22
|
+
|
23
|
+
@if not(unitless($bottom)) {
|
24
|
+
bottom: $bottom;
|
25
|
+
}
|
26
|
+
|
27
|
+
@if not(unitless($left)) {
|
28
|
+
left: $left;
|
29
|
+
}
|
30
|
+
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
2
|
+
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
|
3
|
+
|
4
|
+
// EASE IN
|
5
|
+
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
6
|
+
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
7
|
+
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
8
|
+
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
9
|
+
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
10
|
+
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
11
|
+
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
12
|
+
|
13
|
+
// EASE OUT
|
14
|
+
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
15
|
+
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
16
|
+
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
17
|
+
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
18
|
+
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
19
|
+
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
20
|
+
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
21
|
+
|
22
|
+
// EASE IN OUT
|
23
|
+
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
24
|
+
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
25
|
+
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
26
|
+
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
27
|
+
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
28
|
+
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
29
|
+
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
@@ -0,0 +1,161 @@
|
|
1
|
+
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
2
|
+
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
3
|
+
|
4
|
+
@mixin animation-name ($name-1,
|
5
|
+
$name-2: false, $name-3: false,
|
6
|
+
$name-4: false, $name-5: false,
|
7
|
+
$name-6: false, $name-7: false,
|
8
|
+
$name-8: false, $name-9: false)
|
9
|
+
{
|
10
|
+
$full: compact($name-1, $name-2, $name-3, $name-4,
|
11
|
+
$name-5, $name-6, $name-7, $name-8, $name-9);
|
12
|
+
|
13
|
+
-webkit-animation-name: $full;
|
14
|
+
-moz-animation-name: $full;
|
15
|
+
animation-name: $full;
|
16
|
+
}
|
17
|
+
|
18
|
+
|
19
|
+
@mixin animation-duration ($time-1: 0,
|
20
|
+
$time-2: false, $time-3: false,
|
21
|
+
$time-4: false, $time-5: false,
|
22
|
+
$time-6: false, $time-7: false,
|
23
|
+
$time-8: false, $time-9: false)
|
24
|
+
{
|
25
|
+
$full: compact($time-1, $time-2, $time-3, $time-4,
|
26
|
+
$time-5, $time-6, $time-7, $time-8, $time-9);
|
27
|
+
|
28
|
+
-webkit-animation-duration: $full;
|
29
|
+
-moz-animation-duration: $full;
|
30
|
+
animation-duration: $full;
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
@mixin animation-timing-function ($motion-1: ease,
|
35
|
+
// ease | linear | ease-in | ease-out | ease-in-out
|
36
|
+
$motion-2: false, $motion-3: false,
|
37
|
+
$motion-4: false, $motion-5: false,
|
38
|
+
$motion-6: false, $motion-7: false,
|
39
|
+
$motion-8: false, $motion-9: false)
|
40
|
+
{
|
41
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
|
42
|
+
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
|
43
|
+
|
44
|
+
-webkit-animation-timing-function: $full;
|
45
|
+
-moz-animation-timing-function: $full;
|
46
|
+
animation-timing-function: $full;
|
47
|
+
}
|
48
|
+
|
49
|
+
|
50
|
+
@mixin animation-iteration-count ($value-1: 1,
|
51
|
+
// infinite | <number>
|
52
|
+
$value-2: false, $value-3: false,
|
53
|
+
$value-4: false, $value-5: false,
|
54
|
+
$value-6: false, $value-7: false,
|
55
|
+
$value-8: false, $value-9: false)
|
56
|
+
{
|
57
|
+
$full: compact($value-1, $value-2, $value-3, $value-4,
|
58
|
+
$value-5, $value-6, $value-7, $value-8, $value-9);
|
59
|
+
|
60
|
+
-webkit-animation-iteration-count: $full;
|
61
|
+
-moz-animation-iteration-count: $full;
|
62
|
+
animation-iteration-count: $full;
|
63
|
+
}
|
64
|
+
|
65
|
+
|
66
|
+
@mixin animation-direction ($direction-1: normal,
|
67
|
+
// normal | alternate
|
68
|
+
$direction-2: false, $direction-3: false,
|
69
|
+
$direction-4: false, $direction-5: false,
|
70
|
+
$direction-6: false, $direction-7: false,
|
71
|
+
$direction-8: false, $direction-9: false)
|
72
|
+
{
|
73
|
+
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
|
74
|
+
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
|
75
|
+
|
76
|
+
-webkit-animation-direction: $full;
|
77
|
+
-moz-animation-direction: $full;
|
78
|
+
animation-direction: $full;
|
79
|
+
}
|
80
|
+
|
81
|
+
|
82
|
+
@mixin animation-play-state ($state-1: running,
|
83
|
+
// running | paused
|
84
|
+
$state-2: false, $state-3: false,
|
85
|
+
$state-4: false, $state-5: false,
|
86
|
+
$state-6: false, $state-7: false,
|
87
|
+
$state-8: false, $state-9: false)
|
88
|
+
{
|
89
|
+
$full: compact($state-1, $state-2, $state-3, $state-4,
|
90
|
+
$state-5, $state-6, $state-7, $state-8, $state-9);
|
91
|
+
|
92
|
+
-webkit-animation-play-state: $full;
|
93
|
+
-moz-animation-play-state: $full;
|
94
|
+
animation-play-state: $full;
|
95
|
+
}
|
96
|
+
|
97
|
+
|
98
|
+
@mixin animation-delay ($time-1: 0,
|
99
|
+
$time-2: false, $time-3: false,
|
100
|
+
$time-4: false, $time-5: false,
|
101
|
+
$time-6: false, $time-7: false,
|
102
|
+
$time-8: false, $time-9: false)
|
103
|
+
{
|
104
|
+
$full: compact($time-1, $time-2, $time-3, $time-4,
|
105
|
+
$time-5, $time-6, $time-7, $time-8, $time-9);
|
106
|
+
|
107
|
+
-webkit-animation-delay: $full;
|
108
|
+
-moz-animation-delay: $full;
|
109
|
+
animation-delay: $full;
|
110
|
+
}
|
111
|
+
|
112
|
+
|
113
|
+
@mixin animation-fill-mode ($mode-1: none,
|
114
|
+
// http://goo.gl/l6ckm
|
115
|
+
// none | forwards | backwards | both
|
116
|
+
$mode-2: false, $mode-3: false,
|
117
|
+
$mode-4: false, $mode-5: false,
|
118
|
+
$mode-6: false, $mode-7: false,
|
119
|
+
$mode-8: false, $mode-9: false)
|
120
|
+
{
|
121
|
+
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
|
122
|
+
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
|
123
|
+
|
124
|
+
-webkit-animation-fill-mode: $full;
|
125
|
+
-moz-animation-fill-mode: $full;
|
126
|
+
animation-fill-mode: $full;
|
127
|
+
}
|
128
|
+
|
129
|
+
|
130
|
+
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
|
131
|
+
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
132
|
+
@mixin animation-basic ($name, $time: 0, $motion: ease) {
|
133
|
+
$length-of-name: length($name);
|
134
|
+
$length-of-time: length($time);
|
135
|
+
$length-of-motion: length($motion);
|
136
|
+
|
137
|
+
@if $length-of-name > 1 {
|
138
|
+
@include animation-name(zip($name));
|
139
|
+
} @else {
|
140
|
+
@include animation-name( $name);
|
141
|
+
}
|
142
|
+
|
143
|
+
@if $length-of-time > 1 {
|
144
|
+
@include animation-duration(zip($time));
|
145
|
+
} @else {
|
146
|
+
@include animation-duration( $time);
|
147
|
+
}
|
148
|
+
|
149
|
+
@if $length-of-motion > 1 {
|
150
|
+
@include animation-timing-function(zip($motion));
|
151
|
+
} @else {
|
152
|
+
@include animation-timing-function( $motion);
|
153
|
+
}
|
154
|
+
}
|
155
|
+
|
156
|
+
// Official animation shorthand property. Needs more work to actually be useful.
|
157
|
+
@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
|
158
|
+
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
|
159
|
+
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
|
160
|
+
animation: $name $duration $timing-function $delay $iteration-count $direction;
|
161
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@mixin background-clip($clip) {
|
2
|
+
$deprecated: $clip;
|
3
|
+
@if $clip == padding-box { $deprecated: padding; }
|
4
|
+
@if $clip == border-box { $deprecated: border; }
|
5
|
+
|
6
|
+
@include experimental(background-clip, $deprecated,
|
7
|
+
-moz,
|
8
|
+
-webkit,
|
9
|
+
not -o,
|
10
|
+
not -ms,
|
11
|
+
not -khtml,
|
12
|
+
not official
|
13
|
+
);
|
14
|
+
@include experimental(background-clip, $clip,
|
15
|
+
not -moz,
|
16
|
+
not -webkit,
|
17
|
+
-o,
|
18
|
+
-ms,
|
19
|
+
-khtml,
|
20
|
+
official
|
21
|
+
);
|
22
|
+
}
|
23
|
+
|
24
|
+
// @include background-clip(padding-box);
|
25
|
+
// @include background-clip(border-box);
|