Created
January 19, 2016 15:15
-
-
Save autovalue/b6b914f34df57e9703a2 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.3.2) | |
| // ---- | |
| @mixin font-face($font-family, $file-path, $weight: normal, $style: normal) { | |
| @font-face { | |
| font-family: $font-family; | |
| font-weight: $weight; | |
| font-style: $style; | |
| src: url('#{$file-path}.eot?#iefix'); // IE9 Compat Modes | |
| src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), // IE6-IE8 | |
| url('#{$file-path}.woff') format('woff'), // Pretty Modern Browsers | |
| url('#{$file-path}.ttf') format('truetype'), // Safari, Android, iOS | |
| url('#{$file-path}.svg##{$font-family}') format('svg'); // Legacy iOS | |
| } | |
| } | |
| @mixin primary-font { | |
| font-family: "Bebas", "Bebas Neue Bold", Helvetica, Arial, "Times New Roman", sans-serif; | |
| } | |
| @mixin secondary-font { | |
| font-family: "BrandonGrotesque-Medium", Georgia, "Times New Roman", Times, serif; | |
| } | |
| @mixin transform($transforms) { | |
| -moz-transform: $transforms; | |
| -o-transform: $transforms; | |
| -ms-transform: $transforms; | |
| -webkit-transform: $transforms; | |
| transform: $transforms; | |
| } | |
| /// Prepend a css selector and rule to the current rule set. | |
| /// @content : <content> | |
| /// @param $selector : <span> | |
| /// @param $isParent : <span> Whether the $selector will be applied as a parent or not. | |
| /// @author Michael Shonibare. | |
| @mixin prepend-selector($selector, $isParent: true) { | |
| @if($isParent) { | |
| @at-root #{$selector} & { | |
| @content; | |
| } | |
| } @else { | |
| @at-root #{$selector}#{&} { | |
| @content; | |
| } | |
| } | |
| } | |
| $color-a: #4162a8; | |
| $color-b: #38538c; | |
| $color-c: #1f2d4d; | |
| $color-d: #151e33; | |
| $color-e: #5c8bee; | |
| $color-f: #1d2c4d; | |
| $color-g: #1f3053; | |
| $color-h: #111111; | |
| $color-i: #87adff; | |
| a.punch { | |
| display: inline-block; | |
| background: $color-a; | |
| border-top: 1px solid $color-b; | |
| border-right: 1px solid $color-c; | |
| border-bottom: 1px solid $color-d; | |
| border-left: 1px solid $color-c; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 10px 1px $color-e, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -moz-box-shadow: inset 0 1px 10px 1px $color-e, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -ms-box-shadow: inset 0 1px 10px 1px $color-e, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -o-box-shadow: inset 0 1px 10px 1px $color-e, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| box-shadow: inset 0 1px 10px 1px $color-e, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| color: #fff; | |
| font: bold 14px "helvetica neue", helvetica, arial, sans-serif; | |
| line-height: 1; | |
| margin-bottom: 15px; | |
| padding: 8px 0 10px 0; | |
| text-align: center; | |
| text-shadow: 0px -1px 1px #1e2d4d; | |
| text-decoration: none; | |
| width: 225px; | |
| -webkit-background-clip: padding-box; | |
| } | |
| a.punch:hover { | |
| -webkit-box-shadow: inset 0 0px 20px 1px $color-i, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -moz-box-shadow: inset 0 0px 20px 1px $color-i, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -ms-box-shadow: inset 0 0px 20px 1px $color-i, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| -o-box-shadow: inset 0 0px 20px 1px $color-i, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| box-shadow: inset 0 0px 20px 1px $color-i, 0px 1px 0 $color-f, 0 6px 0px $color-g, 0 8px 4px 1px $color-h; | |
| cursor: pointer; | |
| } | |
| a.punch:active { | |
| -webkit-box-shadow: inset 0 1px 10px 1px $color-e, 0 1px 0 $color-f, 0 2px 0 $color-g, 0 4px 3px 0 $color-h; | |
| -moz-box-shadow: inset 0 1px 10px 1px $color-e, 0 1px 0 $color-f, 0 2px 0 $color-g, 0 4px 3px 0 $color-h; | |
| -ms-box-shadow: inset 0 1px 10px 1px $color-e, 0 1px 0 $color-f, 0 2px 0 $color-g, 0 4px 3px 0 $color-h; | |
| -o-box-shadow: inset 0 1px 10px 1px $color-e, 0 1px 0 $color-f, 0 2px 0 $color-g, 0 4px 3px 0 $color-h; | |
| box-shadow: inset 0 1px 10px 1px $color-e, 0 1px 0 $color-f, 0 2px 0 $color-g, 0 4px 3px 0 $color-h; | |
| margin-top: 5px; | |
| margin-bottom: 10px | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a.punch { | |
| display: inline-block; | |
| background: #4162a8; | |
| border-top: 1px solid #38538c; | |
| border-right: 1px solid #1f2d4d; | |
| border-bottom: 1px solid #151e33; | |
| border-left: 1px solid #1f2d4d; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| color: #fff; | |
| font: bold 14px "helvetica neue", helvetica, arial, sans-serif; | |
| line-height: 1; | |
| margin-bottom: 15px; | |
| padding: 8px 0 10px 0; | |
| text-align: center; | |
| text-shadow: 0px -1px 1px #1e2d4d; | |
| text-decoration: none; | |
| width: 225px; | |
| -webkit-background-clip: padding-box; | |
| } | |
| a.punch:hover { | |
| -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -ms-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| -o-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; | |
| cursor: pointer; | |
| } | |
| a.punch:active { | |
| -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; | |
| -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; | |
| -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; | |
| -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; | |
| box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; | |
| margin-top: 5px; | |
| margin-bottom: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment