sammy 0.0.12 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +7 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +40 -0
- data/LICENSE +23 -0
- data/README.md +94 -3
- data/Rakefile +9 -0
- data/app/assets/stylesheets/_sammy.scss +56 -0
- data/app/assets/stylesheets/addons/_button.scss +273 -0
- data/app/assets/stylesheets/addons/_clearfix.scss +29 -0
- data/app/assets/stylesheets/addons/_font-family.scss +5 -0
- data/app/assets/stylesheets/addons/_hide-text.scss +5 -0
- data/app/assets/stylesheets/addons/_html5-input-types.scss +56 -0
- data/app/assets/stylesheets/addons/_position.scss +42 -0
- data/app/assets/stylesheets/addons/_prefixer.scss +49 -0
- data/app/assets/stylesheets/addons/_retina-image.scss +32 -0
- data/app/assets/stylesheets/addons/_size.scss +44 -0
- data/app/assets/stylesheets/addons/_timing-functions.scss +32 -0
- data/app/assets/stylesheets/addons/_triangle.scss +45 -0
- data/app/assets/stylesheets/css3/_animation.scss +52 -0
- data/app/assets/stylesheets/css3/_appearance.scss +3 -0
- data/app/assets/stylesheets/css3/_backface-visibility.scss +6 -0
- data/app/assets/stylesheets/css3/_background-image.scss +48 -0
- data/app/assets/stylesheets/css3/_background.scss +103 -0
- data/app/assets/stylesheets/css3/_border-image.scss +53 -0
- data/app/assets/stylesheets/css3/_border-radius.scss +22 -0
- data/app/assets/stylesheets/css3/_box-sizing.scss +4 -0
- data/app/assets/stylesheets/css3/_columns.scss +47 -0
- data/app/assets/stylesheets/css3/_flex-box.scss +52 -0
- data/app/assets/stylesheets/css3/_font-face.scss +23 -0
- data/app/assets/stylesheets/css3/_hidpi-media-query.scss +10 -0
- data/app/assets/stylesheets/css3/_image-rendering.scss +13 -0
- data/app/assets/stylesheets/css3/_inline-block.scss +8 -0
- data/app/assets/stylesheets/css3/_keyframes.scss +41 -0
- data/app/assets/stylesheets/css3/_linear-gradient.scss +41 -0
- data/app/assets/stylesheets/css3/_perspective.scss +8 -0
- data/app/assets/stylesheets/css3/_placeholder.scss +29 -0
- data/app/assets/stylesheets/css3/_radial-gradient.scss +44 -0
- data/app/assets/stylesheets/css3/_transform.scss +15 -0
- data/app/assets/stylesheets/css3/_transition.scss +34 -0
- data/app/assets/stylesheets/css3/_user-select.scss +3 -0
- data/app/assets/stylesheets/functions/_compact.scss +11 -0
- data/app/assets/stylesheets/functions/_flex-grid.scss +39 -0
- data/app/assets/stylesheets/functions/_grid-width.scss +13 -0
- data/app/assets/stylesheets/functions/_linear-gradient.scss +13 -0
- data/app/assets/stylesheets/functions/_modular-scale.scss +40 -0
- data/app/assets/stylesheets/functions/_px-to-em.scss +8 -0
- data/app/assets/stylesheets/functions/_radial-gradient.scss +23 -0
- data/app/assets/stylesheets/functions/_tint-shade.scss +9 -0
- data/app/assets/stylesheets/functions/_transition-property-name.scss +22 -0
- data/app/assets/stylesheets/helpers/_deprecated-webkit-gradient.scss +39 -0
- data/app/assets/stylesheets/helpers/_gradient-positions-parser.scss +13 -0
- data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +64 -0
- data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +69 -0
- data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +18 -0
- data/app/assets/stylesheets/helpers/_render-gradients.scss +26 -0
- data/app/assets/stylesheets/helpers/_shape-size-stripper.scss +10 -0
- data/bin/sammy +6 -0
- data/lib/sammy.rb +27 -9
- data/lib/sammy/date.rb +3 -0
- data/lib/sammy/engine.rb +5 -0
- data/lib/sammy/generator.rb +80 -0
- data/lib/sammy/version.rb +3 -0
- data/lib/tasks/install.rake +20 -0
- data/sammy.gemspec +31 -0
- metadata +117 -88
- data/stylesheets/_sammy.sass +0 -3
- data/stylesheets/sammy/_animations.scss +0 -35
- data/stylesheets/sammy/_css3.scss +0 -3
- data/stylesheets/sammy/_shared.scss +0 -2
- data/stylesheets/sammy/_utilities.scss +0 -1
- data/stylesheets/sammy/animations/_attention-seekers.scss +0 -7
- data/stylesheets/sammy/animations/_bouncing-entrances.scss +0 -5
- data/stylesheets/sammy/animations/_bouncing-exits.scss +0 -5
- data/stylesheets/sammy/animations/_fading-entrances.scss +0 -12
- data/stylesheets/sammy/animations/_fading-exits.scss +0 -12
- data/stylesheets/sammy/animations/_flippers.scss +0 -5
- data/stylesheets/sammy/animations/_rotating-entrances.scss +0 -5
- data/stylesheets/sammy/animations/_rotating-exits.scss +0 -5
- data/stylesheets/sammy/animations/_specials.scss +0 -3
- data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +0 -30
- data/stylesheets/sammy/animations/attention-seekers/_flash.scss +0 -28
- data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +0 -28
- data/stylesheets/sammy/animations/attention-seekers/_shake.scss +0 -34
- data/stylesheets/sammy/animations/attention-seekers/_swing.scss +0 -30
- data/stylesheets/sammy/animations/attention-seekers/_tada.scss +0 -34
- data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +0 -32
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +0 -37
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +0 -34
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +0 -34
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +0 -34
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +0 -34
- data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +0 -25
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +0 -31
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +0 -25
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +0 -31
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +0 -31
- data/stylesheets/sammy/animations/flippers/_flip.scss +0 -44
- data/stylesheets/sammy/animations/flippers/_flipInX.scss +0 -38
- data/stylesheets/sammy/animations/flippers/_flipInY.scss +0 -38
- data/stylesheets/sammy/animations/flippers/_flipOutX.scss +0 -32
- data/stylesheets/sammy/animations/flippers/_flipOutY.scss +0 -32
- data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +0 -33
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +0 -33
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +0 -33
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +0 -33
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +0 -33
- data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +0 -33
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +0 -33
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +0 -33
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +0 -33
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +0 -33
- data/stylesheets/sammy/animations/specials/_hinge.scss +0 -48
- data/stylesheets/sammy/animations/specials/_rollIn.scss +0 -33
- data/stylesheets/sammy/animations/specials/_rollOut.scss +0 -33
- data/stylesheets/sammy/css3/_animation.scss +0 -75
- data/stylesheets/sammy/css3/_backface-visibility.scss +0 -14
- data/stylesheets/sammy/css3/_transform.scss +0 -27
- data/stylesheets/sammy/css3/animation/_animation-delay.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-direction.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-duration.scss +0 -17
- data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-name.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-play-state.scss +0 -18
- data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +0 -18
- data/stylesheets/sammy/utilities/_mixins.scss +0 -12
- data/templates/sammy/manifest.rb +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 89d4d6d4182ccad552d6cc86b481c172d16f167c
|
4
|
+
data.tar.gz: 0d872a012c8a7d72658ef8d0c279f91781175dd8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: abb1ce3515d70848a03fa8f038169457d4e4cedb74a66e761dc61ab4586d1b550a5f93f02b38c7c766009006e0dea3f40feb056aa63195e5de7477a1f92f1d90
|
7
|
+
data.tar.gz: 12beed0d5bf6cb0a200d9a8d1915aa9dd79635a47bc5748771b4edfcceaf942431edfe76f5b1799de522b631b9ce24396de46eee7a141d32795a5aaee788f353
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
PATH
|
2
|
+
remote: .
|
3
|
+
specs:
|
4
|
+
sammy (0.5.0)
|
5
|
+
sass (>= 3.2.0)
|
6
|
+
thor
|
7
|
+
|
8
|
+
GEM
|
9
|
+
remote: http://rubygems.org/
|
10
|
+
specs:
|
11
|
+
aruba (0.5.1)
|
12
|
+
childprocess (~> 0.3.6)
|
13
|
+
cucumber (>= 1.1.1)
|
14
|
+
rspec-expectations (>= 2.7.0)
|
15
|
+
builder (3.2.0)
|
16
|
+
childprocess (0.3.9)
|
17
|
+
ffi (~> 1.0, >= 1.0.11)
|
18
|
+
cucumber (1.2.5)
|
19
|
+
builder (>= 2.1.2)
|
20
|
+
diff-lcs (>= 1.1.3)
|
21
|
+
gherkin (~> 2.11.7)
|
22
|
+
multi_json (~> 1.3)
|
23
|
+
diff-lcs (1.2.3)
|
24
|
+
ffi (1.7.0-x86-mingw32)
|
25
|
+
gherkin (2.11.8-x86-mingw32)
|
26
|
+
multi_json (~> 1.3)
|
27
|
+
multi_json (1.7.2)
|
28
|
+
rake (10.0.4)
|
29
|
+
rspec-expectations (2.13.0)
|
30
|
+
diff-lcs (>= 1.1.3, < 2.0)
|
31
|
+
sass (3.2.7)
|
32
|
+
thor (0.18.1)
|
33
|
+
|
34
|
+
PLATFORMS
|
35
|
+
x86-mingw32
|
36
|
+
|
37
|
+
DEPENDENCIES
|
38
|
+
aruba (~> 0.4)
|
39
|
+
rake
|
40
|
+
sammy!
|
data/LICENSE
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
LICENSE
|
2
|
+
|
3
|
+
The MIT License
|
4
|
+
|
5
|
+
Copyright (c) 2013 Devin Halladay
|
6
|
+
|
7
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
8
|
+
of this software and associated documentation files (the "Software"), to deal
|
9
|
+
in the Software without restriction, including without limitation the rights
|
10
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
11
|
+
copies of the Software, and to permit persons to whom the Software is
|
12
|
+
furnished to do so, subject to the following conditions:
|
13
|
+
|
14
|
+
The above copyright notice and this permission notice shall be included in
|
15
|
+
all copies or substantial portions of the Software.
|
16
|
+
|
17
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
18
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
19
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
20
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
21
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
22
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
23
|
+
THE SOFTWARE.
|
data/README.md
CHANGED
@@ -1,4 +1,95 @@
|
|
1
|
-
|
2
|
-
=====
|
1
|
+
[![Bourbon Sass Mixin Library](http://bourbon.io/images/shared/bourbon-logo.png)](http://bourbon.io)
|
3
2
|
|
4
|
-
A
|
3
|
+
# A simple and lightweight mixin library for Sass
|
4
|
+
Bourbon is a comprehensive library of sass mixins that are designed to be simple
|
5
|
+
and easy to use. No configuration required.
|
6
|
+
The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
|
7
|
+
|
8
|
+
The mixins contain vendor specific prefixes for all CSS3 properties for support
|
9
|
+
amongst modern browsers. The prefixes also ensure graceful degradation for older
|
10
|
+
browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
|
11
|
+
|
12
|
+
#[Documentation & Demo](http://bourbon.io)
|
13
|
+
|
14
|
+
## Requirements
|
15
|
+
Sass 3.2+
|
16
|
+
|
17
|
+
# Install for Rails 3.1+
|
18
|
+
In your Gemfile:
|
19
|
+
|
20
|
+
gem 'bourbon'
|
21
|
+
|
22
|
+
Then run:
|
23
|
+
|
24
|
+
$ bundle install
|
25
|
+
|
26
|
+
Restart your server. Then rename application`.css` to application`.css.scss`:
|
27
|
+
|
28
|
+
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
|
29
|
+
|
30
|
+
Delete the sprocket directive in application.css.scss: [Why?](https://github.com/thoughtbot/bourbon/wiki/Rails-Sprockets)
|
31
|
+
|
32
|
+
*= require_tree .
|
33
|
+
|
34
|
+
Import Bourbon at the beginning of application.css.scss. All additional stylesheets must be imported below Bourbon:
|
35
|
+
|
36
|
+
@import "bourbon";
|
37
|
+
@import "home";
|
38
|
+
@import "users";
|
39
|
+
|
40
|
+
|
41
|
+
[Help! I'm getting an undefined mixin error.](https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin)
|
42
|
+
|
43
|
+
##### [Rails 3.0.x Install Instructions](https://github.com/thoughtbot/bourbon/wiki/Rails-3.0.x-Install) | [Rails 2.3 Install Instructions](https://github.com/thoughtbot/bourbon/wiki/Bourbon-v2.x-or-Rails-2.3-Install)
|
44
|
+
|
45
|
+
# <span id="non-rails"></span>Non-Rails projects
|
46
|
+
Bourbon includes an easy way to generate a directory with all the necessary files.
|
47
|
+
For command line help: `$ bourbon help` or visit the [Command line tools wiki](https://github.com/thoughtbot/bourbon/wiki/Command-Line-Tools)
|
48
|
+
|
49
|
+
####Install (Bourbon v3.0+)
|
50
|
+
|
51
|
+
gem install bourbon
|
52
|
+
|
53
|
+
Install Bourbon into the current directory by generating the `bourbon` folder:
|
54
|
+
|
55
|
+
bourbon install
|
56
|
+
|
57
|
+
The generated folder will contain all the mixins and other necessary Bourbon files. It is recommended not to add or modify the Bourbon files so that you can update Bourbon easily.
|
58
|
+
|
59
|
+
#### Import
|
60
|
+
|
61
|
+
Lastly, import the mixins at the beginning of your stylesheet(s):
|
62
|
+
|
63
|
+
@import 'bourbon/bourbon';
|
64
|
+
|
65
|
+
Note: Bourbon no longer requires a custom `sass --watch` command for Bourbon v3.0+
|
66
|
+
|
67
|
+
#### Other Commands
|
68
|
+
Visit the [Command line tools wiki](https://github.com/thoughtbot/bourbon/wiki/Command-Line-Tools) for a complete list
|
69
|
+
|
70
|
+
bourbon help
|
71
|
+
bourbon update
|
72
|
+
|
73
|
+
##### [Bourbon v2.x install instructions](https://github.com/thoughtbot/bourbon/wiki/Bourbon-v2.x-or-Rails-2.3-Install)
|
74
|
+
|
75
|
+
-------
|
76
|
+
# [Changelog](https://github.com/thoughtbot/bourbon/wiki)
|
77
|
+
|
78
|
+
# [Browser support](https://github.com/thoughtbot/bourbon/wiki/Browser-Support)
|
79
|
+
-------
|
80
|
+
|
81
|
+
Credits
|
82
|
+
-------
|
83
|
+
|
84
|
+
![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
|
85
|
+
|
86
|
+
Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community)
|
87
|
+
|
88
|
+
The names and logos for thoughtbot are trademarks of thoughtbot, inc.
|
89
|
+
|
90
|
+
Got questions? Need help? Tweet at [@phillapier](http://twitter.com/phillapier).
|
91
|
+
|
92
|
+
License
|
93
|
+
-------
|
94
|
+
|
95
|
+
Bourbon is Copyright © 2011-2013 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
|
data/Rakefile
ADDED
@@ -0,0 +1,56 @@
|
|
1
|
+
// Custom Helpers
|
2
|
+
@import "helpers/deprecated-webkit-gradient";
|
3
|
+
@import "helpers/gradient-positions-parser";
|
4
|
+
@import "helpers/linear-positions-parser";
|
5
|
+
@import "helpers/radial-arg-parser";
|
6
|
+
@import "helpers/radial-positions-parser";
|
7
|
+
@import "helpers/render-gradients";
|
8
|
+
@import "helpers/shape-size-stripper";
|
9
|
+
|
10
|
+
// Custom Functions
|
11
|
+
@import "functions/compact";
|
12
|
+
@import "functions/flex-grid";
|
13
|
+
@import "functions/grid-width";
|
14
|
+
@import "functions/linear-gradient";
|
15
|
+
@import "functions/modular-scale";
|
16
|
+
@import "functions/px-to-em";
|
17
|
+
@import "functions/radial-gradient";
|
18
|
+
@import "functions/tint-shade";
|
19
|
+
@import "functions/transition-property-name";
|
20
|
+
|
21
|
+
// CSS3 Mixins
|
22
|
+
@import "css3/animation";
|
23
|
+
@import "css3/appearance";
|
24
|
+
@import "css3/backface-visibility";
|
25
|
+
@import "css3/background";
|
26
|
+
@import "css3/background-image";
|
27
|
+
@import "css3/border-image";
|
28
|
+
@import "css3/border-radius";
|
29
|
+
@import "css3/box-sizing";
|
30
|
+
@import "css3/columns";
|
31
|
+
@import "css3/flex-box";
|
32
|
+
@import "css3/font-face";
|
33
|
+
@import "css3/hidpi-media-query";
|
34
|
+
@import "css3/image-rendering";
|
35
|
+
@import "css3/inline-block";
|
36
|
+
@import "css3/keyframes";
|
37
|
+
@import "css3/linear-gradient";
|
38
|
+
@import "css3/perspective";
|
39
|
+
@import "css3/radial-gradient";
|
40
|
+
@import "css3/transform";
|
41
|
+
@import "css3/transition";
|
42
|
+
@import "css3/user-select";
|
43
|
+
@import "css3/placeholder";
|
44
|
+
|
45
|
+
// Addons & other mixins
|
46
|
+
@import "addons/button";
|
47
|
+
@import "addons/clearfix";
|
48
|
+
@import "addons/font-family";
|
49
|
+
@import "addons/hide-text";
|
50
|
+
@import "addons/html5-input-types";
|
51
|
+
@import "addons/position";
|
52
|
+
@import "addons/prefixer";
|
53
|
+
@import "addons/retina-image";
|
54
|
+
@import "addons/size";
|
55
|
+
@import "addons/timing-functions";
|
56
|
+
@import "addons/triangle";
|
@@ -0,0 +1,273 @@
|
|
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
|
+
// Grayscale button
|
9
|
+
@if $base-color == grayscale($base-color) {
|
10
|
+
@if $style == simple {
|
11
|
+
@include simple($base-color, $grayscale: true);
|
12
|
+
}
|
13
|
+
|
14
|
+
@else if $style == shiny {
|
15
|
+
@include shiny($base-color, $grayscale: true);
|
16
|
+
}
|
17
|
+
|
18
|
+
@else if $style == pill {
|
19
|
+
@include pill($base-color, $grayscale: true);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
// Colored button
|
24
|
+
@else {
|
25
|
+
@if $style == simple {
|
26
|
+
@include simple($base-color);
|
27
|
+
}
|
28
|
+
|
29
|
+
@else if $style == shiny {
|
30
|
+
@include shiny($base-color);
|
31
|
+
}
|
32
|
+
|
33
|
+
@else if $style == pill {
|
34
|
+
@include pill($base-color);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
&:disabled {
|
39
|
+
opacity: 0.5;
|
40
|
+
cursor: not-allowed;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
// Simple Button
|
46
|
+
//************************************************************************//
|
47
|
+
@mixin simple($base-color, $grayscale: false) {
|
48
|
+
$color: hsl(0, 0, 100%);
|
49
|
+
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
50
|
+
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
51
|
+
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
52
|
+
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
53
|
+
|
54
|
+
@if lightness($base-color) > 70% {
|
55
|
+
$color: hsl(0, 0, 20%);
|
56
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
57
|
+
}
|
58
|
+
|
59
|
+
@if $grayscale == true {
|
60
|
+
$border: grayscale($border);
|
61
|
+
$inset-shadow: grayscale($inset-shadow);
|
62
|
+
$stop-gradient: grayscale($stop-gradient);
|
63
|
+
$text-shadow: grayscale($text-shadow);
|
64
|
+
}
|
65
|
+
|
66
|
+
border: 1px solid $border;
|
67
|
+
border-radius: 3px;
|
68
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
69
|
+
color: $color;
|
70
|
+
display: inline-block;
|
71
|
+
font-size: 11px;
|
72
|
+
font-weight: bold;
|
73
|
+
@include linear-gradient ($base-color, $stop-gradient);
|
74
|
+
padding: 7px 18px;
|
75
|
+
text-decoration: none;
|
76
|
+
text-shadow: 0 1px 0 $text-shadow;
|
77
|
+
background-clip: padding-box;
|
78
|
+
|
79
|
+
&:hover:not(:disabled) {
|
80
|
+
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
81
|
+
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
82
|
+
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
83
|
+
|
84
|
+
@if $grayscale == true {
|
85
|
+
$base-color-hover: grayscale($base-color-hover);
|
86
|
+
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
87
|
+
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
88
|
+
}
|
89
|
+
|
90
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
91
|
+
cursor: pointer;
|
92
|
+
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
93
|
+
}
|
94
|
+
|
95
|
+
&:active:not(:disabled) {
|
96
|
+
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
97
|
+
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
98
|
+
|
99
|
+
@if $grayscale == true {
|
100
|
+
$border-active: grayscale($border-active);
|
101
|
+
$inset-shadow-active: grayscale($inset-shadow-active);
|
102
|
+
}
|
103
|
+
|
104
|
+
border: 1px solid $border-active;
|
105
|
+
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
|
110
|
+
// Shiny Button
|
111
|
+
//************************************************************************//
|
112
|
+
@mixin shiny($base-color, $grayscale: false) {
|
113
|
+
$color: hsl(0, 0, 100%);
|
114
|
+
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
115
|
+
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
116
|
+
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
117
|
+
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
118
|
+
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
119
|
+
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
120
|
+
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
121
|
+
|
122
|
+
@if lightness($base-color) > 70% {
|
123
|
+
$color: hsl(0, 0, 20%);
|
124
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
125
|
+
}
|
126
|
+
|
127
|
+
@if $grayscale == true {
|
128
|
+
$border: grayscale($border);
|
129
|
+
$border-bottom: grayscale($border-bottom);
|
130
|
+
$fourth-stop: grayscale($fourth-stop);
|
131
|
+
$inset-shadow: grayscale($inset-shadow);
|
132
|
+
$second-stop: grayscale($second-stop);
|
133
|
+
$text-shadow: grayscale($text-shadow);
|
134
|
+
$third-stop: grayscale($third-stop);
|
135
|
+
}
|
136
|
+
|
137
|
+
border: 1px solid $border;
|
138
|
+
border-bottom: 1px solid $border-bottom;
|
139
|
+
border-radius: 5px;
|
140
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
141
|
+
color: $color;
|
142
|
+
display: inline-block;
|
143
|
+
font-size: 14px;
|
144
|
+
font-weight: bold;
|
145
|
+
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
146
|
+
padding: 8px 20px;
|
147
|
+
text-align: center;
|
148
|
+
text-decoration: none;
|
149
|
+
text-shadow: 0 -1px 1px $text-shadow;
|
150
|
+
|
151
|
+
&:hover:not(:disabled) {
|
152
|
+
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
153
|
+
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
154
|
+
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
155
|
+
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
156
|
+
|
157
|
+
@if $grayscale == true {
|
158
|
+
$first-stop-hover: grayscale($first-stop-hover);
|
159
|
+
$second-stop-hover: grayscale($second-stop-hover);
|
160
|
+
$third-stop-hover: grayscale($third-stop-hover);
|
161
|
+
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
162
|
+
}
|
163
|
+
|
164
|
+
cursor: pointer;
|
165
|
+
@include linear-gradient(top, $first-stop-hover 0%,
|
166
|
+
$second-stop-hover 50%,
|
167
|
+
$third-stop-hover 50%,
|
168
|
+
$fourth-stop-hover 100%);
|
169
|
+
}
|
170
|
+
|
171
|
+
&:active:not(:disabled) {
|
172
|
+
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
173
|
+
|
174
|
+
@if $grayscale == true {
|
175
|
+
$inset-shadow-active: grayscale($inset-shadow-active);
|
176
|
+
}
|
177
|
+
|
178
|
+
box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
|
183
|
+
// Pill Button
|
184
|
+
//************************************************************************//
|
185
|
+
@mixin pill($base-color, $grayscale: false) {
|
186
|
+
$color: hsl(0, 0, 100%);
|
187
|
+
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
188
|
+
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
189
|
+
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
190
|
+
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
191
|
+
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
192
|
+
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
193
|
+
|
194
|
+
@if lightness($base-color) > 70% {
|
195
|
+
$color: hsl(0, 0, 20%);
|
196
|
+
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
197
|
+
}
|
198
|
+
|
199
|
+
@if $grayscale == true {
|
200
|
+
$border-bottom: grayscale($border-bottom);
|
201
|
+
$border-sides: grayscale($border-sides);
|
202
|
+
$border-top: grayscale($border-top);
|
203
|
+
$inset-shadow: grayscale($inset-shadow);
|
204
|
+
$stop-gradient: grayscale($stop-gradient);
|
205
|
+
$text-shadow: grayscale($text-shadow);
|
206
|
+
}
|
207
|
+
|
208
|
+
border: 1px solid $border-top;
|
209
|
+
border-color: $border-top $border-sides $border-bottom;
|
210
|
+
border-radius: 16px;
|
211
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
|
212
|
+
color: $color;
|
213
|
+
display: inline-block;
|
214
|
+
font-size: 11px;
|
215
|
+
font-weight: normal;
|
216
|
+
line-height: 1;
|
217
|
+
@include linear-gradient ($base-color, $stop-gradient);
|
218
|
+
padding: 5px 16px;
|
219
|
+
text-align: center;
|
220
|
+
text-decoration: none;
|
221
|
+
text-shadow: 0 -1px 1px $text-shadow;
|
222
|
+
background-clip: padding-box;
|
223
|
+
|
224
|
+
&:hover:not(:disabled) {
|
225
|
+
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
226
|
+
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
227
|
+
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
228
|
+
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
229
|
+
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
230
|
+
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
231
|
+
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
232
|
+
|
233
|
+
@if $grayscale == true {
|
234
|
+
$base-color-hover: grayscale($base-color-hover);
|
235
|
+
$border-bottom: grayscale($border-bottom);
|
236
|
+
$border-sides: grayscale($border-sides);
|
237
|
+
$border-top: grayscale($border-top);
|
238
|
+
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
239
|
+
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
240
|
+
$text-shadow-hover: grayscale($text-shadow-hover);
|
241
|
+
}
|
242
|
+
|
243
|
+
border: 1px solid $border-top;
|
244
|
+
border-color: $border-top $border-sides $border-bottom;
|
245
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
246
|
+
cursor: pointer;
|
247
|
+
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
248
|
+
text-shadow: 0 -1px 1px $text-shadow-hover;
|
249
|
+
background-clip: padding-box;
|
250
|
+
}
|
251
|
+
|
252
|
+
&:active:not(:disabled) {
|
253
|
+
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
254
|
+
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
255
|
+
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
256
|
+
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
257
|
+
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
258
|
+
|
259
|
+
@if $grayscale == true {
|
260
|
+
$active-color: grayscale($active-color);
|
261
|
+
$border-active: grayscale($border-active);
|
262
|
+
$border-bottom-active: grayscale($border-bottom-active);
|
263
|
+
$inset-shadow-active: grayscale($inset-shadow-active);
|
264
|
+
$text-shadow-active: grayscale($text-shadow-active);
|
265
|
+
}
|
266
|
+
|
267
|
+
background: $active-color;
|
268
|
+
border: 1px solid $border-active;
|
269
|
+
border-bottom: 1px solid $border-bottom-active;
|
270
|
+
box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
|
271
|
+
text-shadow: 0 -1px 1px $text-shadow-active;
|
272
|
+
}
|
273
|
+
}
|