sammy 0.0.12 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (146) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +7 -0
  3. data/Gemfile +4 -0
  4. data/Gemfile.lock +40 -0
  5. data/LICENSE +23 -0
  6. data/README.md +94 -3
  7. data/Rakefile +9 -0
  8. data/app/assets/stylesheets/_sammy.scss +56 -0
  9. data/app/assets/stylesheets/addons/_button.scss +273 -0
  10. data/app/assets/stylesheets/addons/_clearfix.scss +29 -0
  11. data/app/assets/stylesheets/addons/_font-family.scss +5 -0
  12. data/app/assets/stylesheets/addons/_hide-text.scss +5 -0
  13. data/app/assets/stylesheets/addons/_html5-input-types.scss +56 -0
  14. data/app/assets/stylesheets/addons/_position.scss +42 -0
  15. data/app/assets/stylesheets/addons/_prefixer.scss +49 -0
  16. data/app/assets/stylesheets/addons/_retina-image.scss +32 -0
  17. data/app/assets/stylesheets/addons/_size.scss +44 -0
  18. data/app/assets/stylesheets/addons/_timing-functions.scss +32 -0
  19. data/app/assets/stylesheets/addons/_triangle.scss +45 -0
  20. data/app/assets/stylesheets/css3/_animation.scss +52 -0
  21. data/app/assets/stylesheets/css3/_appearance.scss +3 -0
  22. data/app/assets/stylesheets/css3/_backface-visibility.scss +6 -0
  23. data/app/assets/stylesheets/css3/_background-image.scss +48 -0
  24. data/app/assets/stylesheets/css3/_background.scss +103 -0
  25. data/app/assets/stylesheets/css3/_border-image.scss +53 -0
  26. data/app/assets/stylesheets/css3/_border-radius.scss +22 -0
  27. data/app/assets/stylesheets/css3/_box-sizing.scss +4 -0
  28. data/app/assets/stylesheets/css3/_columns.scss +47 -0
  29. data/app/assets/stylesheets/css3/_flex-box.scss +52 -0
  30. data/app/assets/stylesheets/css3/_font-face.scss +23 -0
  31. data/app/assets/stylesheets/css3/_hidpi-media-query.scss +10 -0
  32. data/app/assets/stylesheets/css3/_image-rendering.scss +13 -0
  33. data/app/assets/stylesheets/css3/_inline-block.scss +8 -0
  34. data/app/assets/stylesheets/css3/_keyframes.scss +41 -0
  35. data/app/assets/stylesheets/css3/_linear-gradient.scss +41 -0
  36. data/app/assets/stylesheets/css3/_perspective.scss +8 -0
  37. data/app/assets/stylesheets/css3/_placeholder.scss +29 -0
  38. data/app/assets/stylesheets/css3/_radial-gradient.scss +44 -0
  39. data/app/assets/stylesheets/css3/_transform.scss +15 -0
  40. data/app/assets/stylesheets/css3/_transition.scss +34 -0
  41. data/app/assets/stylesheets/css3/_user-select.scss +3 -0
  42. data/app/assets/stylesheets/functions/_compact.scss +11 -0
  43. data/app/assets/stylesheets/functions/_flex-grid.scss +39 -0
  44. data/app/assets/stylesheets/functions/_grid-width.scss +13 -0
  45. data/app/assets/stylesheets/functions/_linear-gradient.scss +13 -0
  46. data/app/assets/stylesheets/functions/_modular-scale.scss +40 -0
  47. data/app/assets/stylesheets/functions/_px-to-em.scss +8 -0
  48. data/app/assets/stylesheets/functions/_radial-gradient.scss +23 -0
  49. data/app/assets/stylesheets/functions/_tint-shade.scss +9 -0
  50. data/app/assets/stylesheets/functions/_transition-property-name.scss +22 -0
  51. data/app/assets/stylesheets/helpers/_deprecated-webkit-gradient.scss +39 -0
  52. data/app/assets/stylesheets/helpers/_gradient-positions-parser.scss +13 -0
  53. data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +64 -0
  54. data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +69 -0
  55. data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +18 -0
  56. data/app/assets/stylesheets/helpers/_render-gradients.scss +26 -0
  57. data/app/assets/stylesheets/helpers/_shape-size-stripper.scss +10 -0
  58. data/bin/sammy +6 -0
  59. data/lib/sammy.rb +27 -9
  60. data/lib/sammy/date.rb +3 -0
  61. data/lib/sammy/engine.rb +5 -0
  62. data/lib/sammy/generator.rb +80 -0
  63. data/lib/sammy/version.rb +3 -0
  64. data/lib/tasks/install.rake +20 -0
  65. data/sammy.gemspec +31 -0
  66. metadata +117 -88
  67. data/stylesheets/_sammy.sass +0 -3
  68. data/stylesheets/sammy/_animations.scss +0 -35
  69. data/stylesheets/sammy/_css3.scss +0 -3
  70. data/stylesheets/sammy/_shared.scss +0 -2
  71. data/stylesheets/sammy/_utilities.scss +0 -1
  72. data/stylesheets/sammy/animations/_attention-seekers.scss +0 -7
  73. data/stylesheets/sammy/animations/_bouncing-entrances.scss +0 -5
  74. data/stylesheets/sammy/animations/_bouncing-exits.scss +0 -5
  75. data/stylesheets/sammy/animations/_fading-entrances.scss +0 -12
  76. data/stylesheets/sammy/animations/_fading-exits.scss +0 -12
  77. data/stylesheets/sammy/animations/_flippers.scss +0 -5
  78. data/stylesheets/sammy/animations/_rotating-entrances.scss +0 -5
  79. data/stylesheets/sammy/animations/_rotating-exits.scss +0 -5
  80. data/stylesheets/sammy/animations/_specials.scss +0 -3
  81. data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +0 -30
  82. data/stylesheets/sammy/animations/attention-seekers/_flash.scss +0 -28
  83. data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +0 -28
  84. data/stylesheets/sammy/animations/attention-seekers/_shake.scss +0 -34
  85. data/stylesheets/sammy/animations/attention-seekers/_swing.scss +0 -30
  86. data/stylesheets/sammy/animations/attention-seekers/_tada.scss +0 -34
  87. data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +0 -32
  88. data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +0 -37
  89. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +0 -37
  90. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +0 -37
  91. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +0 -37
  92. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +0 -37
  93. data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +0 -37
  94. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +0 -34
  95. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +0 -34
  96. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +0 -34
  97. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +0 -34
  98. data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +0 -25
  99. data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +0 -31
  100. data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +0 -31
  101. data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +0 -31
  102. data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +0 -31
  103. data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +0 -31
  104. data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +0 -31
  105. data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +0 -31
  106. data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +0 -31
  107. data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +0 -25
  108. data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +0 -31
  109. data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +0 -31
  110. data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +0 -31
  111. data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +0 -31
  112. data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +0 -31
  113. data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +0 -31
  114. data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +0 -31
  115. data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +0 -31
  116. data/stylesheets/sammy/animations/flippers/_flip.scss +0 -44
  117. data/stylesheets/sammy/animations/flippers/_flipInX.scss +0 -38
  118. data/stylesheets/sammy/animations/flippers/_flipInY.scss +0 -38
  119. data/stylesheets/sammy/animations/flippers/_flipOutX.scss +0 -32
  120. data/stylesheets/sammy/animations/flippers/_flipOutY.scss +0 -32
  121. data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +0 -33
  122. data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +0 -33
  123. data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +0 -33
  124. data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +0 -33
  125. data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +0 -33
  126. data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +0 -33
  127. data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +0 -33
  128. data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +0 -33
  129. data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +0 -33
  130. data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +0 -33
  131. data/stylesheets/sammy/animations/specials/_hinge.scss +0 -48
  132. data/stylesheets/sammy/animations/specials/_rollIn.scss +0 -33
  133. data/stylesheets/sammy/animations/specials/_rollOut.scss +0 -33
  134. data/stylesheets/sammy/css3/_animation.scss +0 -75
  135. data/stylesheets/sammy/css3/_backface-visibility.scss +0 -14
  136. data/stylesheets/sammy/css3/_transform.scss +0 -27
  137. data/stylesheets/sammy/css3/animation/_animation-delay.scss +0 -18
  138. data/stylesheets/sammy/css3/animation/_animation-direction.scss +0 -18
  139. data/stylesheets/sammy/css3/animation/_animation-duration.scss +0 -17
  140. data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +0 -18
  141. data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +0 -18
  142. data/stylesheets/sammy/css3/animation/_animation-name.scss +0 -18
  143. data/stylesheets/sammy/css3/animation/_animation-play-state.scss +0 -18
  144. data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +0 -18
  145. data/stylesheets/sammy/utilities/_mixins.scss +0 -12
  146. data/templates/sammy/manifest.rb +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 404edf98d9f1c1c2c96e8dbf3ab6627d2695bd2a
4
- data.tar.gz: f1e5c84fc6dea38299a3a76535a86069e053757a
3
+ metadata.gz: 89d4d6d4182ccad552d6cc86b481c172d16f167c
4
+ data.tar.gz: 0d872a012c8a7d72658ef8d0c279f91781175dd8
5
5
  SHA512:
6
- metadata.gz: e641a450cbaf114ae208fb2db608e0a7509bb2416300d366c69029eddf9748d2145774cb1c8ee045aefab1cc38feb435c13849e3bd48438ac60caee567bca83f
7
- data.tar.gz: 6b81824e2e69d779efcaac9fea64cf7200fd99478f41df30f6cd832de8c3e04ef58d5d8bbb28c9c9e3b370af405b0e0ac4cfc04ccc1ab4d234377f809cd985e2
6
+ metadata.gz: abb1ce3515d70848a03fa8f038169457d4e4cedb74a66e761dc61ab4586d1b550a5f93f02b38c7c766009006e0dea3f40feb056aa63195e5de7477a1f92f1d90
7
+ data.tar.gz: 12beed0d5bf6cb0a200d9a8d1915aa9dd79635a47bc5748771b4edfcceaf942431edfe76f5b1799de522b631b9ce24396de46eee7a141d32795a5aaee788f353
@@ -0,0 +1,7 @@
1
+ *swp
2
+ *gem
3
+ .sass-cache/
4
+ /sammy/
5
+ demo/
6
+ tmp/
7
+ tags
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in sass-mixins.gemspec
4
+ gemspec
@@ -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
- Sammy
2
- =====
1
+ [![Bourbon Sass Mixin Library](http://bourbon.io/images/shared/bourbon-logo.png)](http://bourbon.io)
3
2
 
4
- A wicked animation library for Sass and Compass
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.
@@ -0,0 +1,9 @@
1
+ # encoding: utf-8
2
+ require 'rubygems'
3
+ require 'bundler'
4
+ require 'cucumber/rake/task'
5
+
6
+ Bundler::GemHelper.install_tasks
7
+ Cucumber::Rake::Task.new
8
+
9
+ task :default => :cucumber
@@ -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
+ }