mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 08:08:15 -05:00
54 lines
2.7 KiB
Sass
54 lines
2.7 KiB
Sass
@import "app/styles/bootstrap/mixins"
|
|
|
|
@mixin gradient-radial-custom-stops($innerColor: #555, $innerStop: 20%, $outerColor: #333, $outerStop: 70%)
|
|
background-color: $outerColor
|
|
@include gradient-vertical($innerColor, $outerColor) // IE6-9 fallback on vertical gradient
|
|
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor $innerStop), to($outerColor $outerStop))
|
|
background-image: -webkit-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
|
|
background-image: -moz-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
|
|
background-image: -o-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
|
|
background-image: radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
|
|
background-repeat: no-repeat
|
|
|
|
@mixin gradient-banner-button($topBottomColor: #2C446A, $middleColor: #3A537F)
|
|
background-color: mix($topBottomColor, $middleColor, 80%)
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($topBottomColor), color-stop(16%, $topBottomColor), color-stop(17%, $middleColor), color-stop(83%, $middleColor), color-stop(84%, $topBottomColor), to($topBottomColor))
|
|
background-image: -webkit-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
|
|
background-image: -moz-linear-gradient(top, $topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
|
|
background-image: -o-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
|
|
background-image: linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
|
|
background-repeat: no-repeat
|
|
|
|
@mixin banner-button($backgroundColor: #3A537F, $textColor: #FFF)
|
|
$topBottomColor: darken($backgroundColor, 9%)
|
|
@include gradient-banner-button($topBottomColor, $backgroundColor)
|
|
color: $textColor
|
|
|
|
&:hover:not(.disabled):not([disabled]), &:focus:not(.disabled):not([disabled])
|
|
@include gradient-banner-button(lighten($topBottomColor, 6%), lighten($backgroundColor, 6%))
|
|
|
|
&.active, &:active
|
|
background-image: none
|
|
outline: 0
|
|
@include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05))
|
|
|
|
// Disabled state
|
|
&.disabled, &[disabled]
|
|
cursor: default
|
|
background-image: none
|
|
@include opacity(0.65)
|
|
@include box-shadow(none)
|
|
|
|
// keyframes mixin from https://gist.github.com/ericam/1607696
|
|
=keyframes($name)
|
|
@-webkit-keyframes #{$name}
|
|
@content
|
|
@-moz-keyframes #{$name}
|
|
@content
|
|
@-ms-keyframes #{$name}
|
|
@content
|
|
@-o-keyframes #{$name}
|
|
@content
|
|
@keyframes #{$name}
|
|
@content
|
|
|