mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 08:08:15 -05:00
127 lines
4.4 KiB
Sass
127 lines
4.4 KiB
Sass
@import "app/styles/bootstrap/mixins"
|
|
@import "bower_components/modernizr-mixin/stylesheets/modernizr"
|
|
|
|
@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
|
|
|
|
@mixin filter($filters)
|
|
-webkit-filter: $filters
|
|
-moz-filter: $filters
|
|
-o-filter: $filters
|
|
filter: $filters
|
|
|
|
@mixin flexbox()
|
|
display: -webkit-box
|
|
display: -moz-box
|
|
display: -ms-flexbox
|
|
display: -webkit-flex
|
|
display: flex
|
|
|
|
@mixin flex($values)
|
|
-webkit-box-flex: $values
|
|
-moz-box-flex: $values
|
|
-webkit-flex: $values
|
|
-ms-flex: $values
|
|
flex: $values
|
|
|
|
@mixin order($val)
|
|
-webkit-box-ordinal-group: $val
|
|
-moz-box-ordinal-group: $val
|
|
-ms-flex-order: $val
|
|
-webkit-order: $val
|
|
order: $val
|
|
|
|
@mixin flex-justify()
|
|
-webkit-box-pack: justify
|
|
-webkit-justify-content: space-between
|
|
-ms-flex-pack: justify
|
|
justify-content: space-between
|
|
|
|
@mixin flex-justify-center()
|
|
-webkit-box-pack: center
|
|
-webkit-justify-content: center
|
|
-ms-flex-pack: center
|
|
justify-content: center
|
|
|
|
@mixin flex-align-content-start()
|
|
-webkit-align-content: flex-start
|
|
-ms-flex-align-content: flex-start
|
|
align-content: flex-start
|
|
|
|
@mixin flex-center()
|
|
-webkit-box-align: center
|
|
-webkit-align-items: center
|
|
-ms-flex-align: center
|
|
align-items: center
|
|
|
|
@mixin flex-wrap()
|
|
-webkit-flex-wrap: wrap
|
|
-ms-flex-wrap: wrap
|
|
flex-wrap: wrap
|
|
|
|
@mixin flex-column()
|
|
-webkit-box-orient: vertical
|
|
-moz-box-orient: vertical
|
|
-ms-box-orient: vertical
|
|
-webkit-flex-direction: column
|
|
-ms-flex-direction: column
|
|
-flex-direction: column
|
|
|
|
@mixin scaleX($ratio)
|
|
-webkit-transform: scaleX($ratio)
|
|
-ms-transform: scaleX($ratio)
|
|
transform: scaleX($ratio)
|
|
|
|
@mixin scaleXY($xRatio, $yRatio)
|
|
-webkit-transform: scaleX($xRatio) scaleY($yRatio)
|
|
-ms-transform: scaleX($xRatio) scaleY($yRatio)
|
|
transform: scaleX($xRatio) scaleY($yRatio)
|