diff options
Diffstat (limited to 'app/assets/stylesheets/vendor/survival-kit/_effects.scss')
-rw-r--r-- | app/assets/stylesheets/vendor/survival-kit/_effects.scss | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/app/assets/stylesheets/vendor/survival-kit/_effects.scss b/app/assets/stylesheets/vendor/survival-kit/_effects.scss new file mode 100644 index 0000000..488a83a --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_effects.scss @@ -0,0 +1,97 @@ +// Survival ✚ Kit + +// Add a Bendy shadow to a squar element. +// @author Chris Eppstein +@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) { + @include box-shadow(0 10px 5px -5px $color); + position: relative; + z-index: 1; + &:before, &:after { + @include box-shadow(0 10px 10px 1px $color); + bottom: 2px; + content: ""; + height: 10px; + position: absolute; + width: $width / 2; + z-index: -1; + } + &:before { + @include rotate(-$angle); + left: 10px; + } + &:after { + @include rotate($angle); + right: 10px; + } +} + +// Sexy button ! +@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) { + // Params + $bg-light: $light-color; + $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%); + + $border-inset-color: $bg-light; + $border-inside-light: lighten($border-inset-color, 13%); + $border-inside-dark: $border-inset-color; + + $border-outside: darken($bg-dark, 9%); + $box-shadow: rgba(35, 35, 35, 0.2); + $text-shadow: darken($bg-dark, 7%); + + @extend .bradius-inner; + @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark); + @include gradient($bg-light, $bg-dark); + @include text-shadow(2px 2px 1px $text-shadow); + border:1px solid $border-outside; + color:#FFF !important; + + font-size:size(13px); + font-weight: bold; + padding: 9px 60px; + text-decoration: none; + text-decoration: none !important; + &:hover { + @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow); + @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%)); + } + &:active { + @include box-shadow(inset 0px 2px 3px $bg-dark); + background: mix($bg-light, $bg-dark, 50%); + } + &.small { + font-size: 12px; + padding: 7px 22px; + } +} + +// +// @TODO: Add docs to shiny-button-colors! +// +@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) { + // Params + $bg-light: $light-color; + $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%); + + $border-inset-color: $bg-light; + $border-inside-light: lighten($border-inset-color, 13%); + $border-inside-dark: $border-inset-color; + + $border-outside: darken($bg-dark, 9%); + $box-shadow: rgba(35, 35, 35, 0.2); + $text-shadow: darken($bg-dark, 7%); + + + @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark); + @include gradient($bg-light, $bg-dark); + @include text-shadow(2px 2px 1px $text-shadow); + border:1px solid $border-outside; + &:hover { + @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow); + @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%)); + } + &:active { + @include box-shadow(inset 0px 2px 3px $bg-dark); + background: mix($bg-light, $bg-dark, 50%); + } +}
\ No newline at end of file |