mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.5 KiB
85 lines
2.5 KiB
// |
|
// Mixins |
|
// -------------------------------------------------- |
|
|
|
|
|
// General |
|
// -------------------------------------------------- |
|
|
|
// Box orient |
|
@mixin box-orient($orient) { |
|
-webkit-box-orient: $orient; |
|
box-orient: $orient; |
|
} |
|
|
|
//Box flex |
|
@mixin box-flex($flex) { |
|
-webkit-box-flex: $flex; |
|
box-flex: $flex; |
|
} |
|
|
|
// Box shadow |
|
@mixin box-shadow($shadow...) { |
|
-webkit-box-shadow: $shadow; |
|
box-shadow: $shadow; |
|
} |
|
|
|
|
|
// Transforms |
|
// -------------------------------------------------- |
|
@mixin transform($transform) { |
|
-webkit-transform: $transform; |
|
transform: $transform; |
|
} |
|
|
|
|
|
// Transitions |
|
// -------------------------------------------------- |
|
@mixin transition($transition...) { |
|
-webkit-transition: $transition; |
|
transition: $transition; |
|
} |
|
@mixin transition-property($property...) { |
|
-webkit-transition-property: $property; |
|
transition-property: $property; |
|
} |
|
@mixin transition-duration($duration...) { |
|
-webkit-transition-duration: $duration; |
|
transition-duration: $duration; |
|
} |
|
@mixin transition-timing-function($function...) { |
|
-webkit-transition-timing-function: $function; |
|
transition-timing-function: $function; |
|
} |
|
|
|
|
|
// Animations |
|
// -------------------------------------------------- |
|
@mixin animation-name($name) { |
|
-webkit-animation-name: $name; |
|
animation-name: $name; |
|
} |
|
@mixin animation-duration($duration) { |
|
-webkit-animation-duration: $duration; |
|
animation-duration: $duration; |
|
} |
|
@mixin animation-direction($direction) { |
|
-webkit-animation-direction: $direction; |
|
animation-direction: $direction; |
|
} |
|
|
|
|
|
// Misc |
|
// -------------------------------------------------- |
|
@mixin hairline($type, $color, $width, $offset) { |
|
@if $type == single { |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"); |
|
background-position: $offset 100%; |
|
|
|
} @else if $type == double { |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"), |
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"); |
|
background-position: $offset 100%, $offset 0%; |
|
} |
|
background-repeat: no-repeat; |
|
}
|
|
|