// VENDOR PREFIXR $prefixes: -webkit- -moz- -ms- -o- !default =prefix($property, $value, $prefixes) @each $prefix in $prefixes #{$prefix}#{$property}: $value #{$property}: $value =prefix-value($property, $value, $prefixes) @each $prefix in $prefixes #{$property}: #{$prefix}$value #{$property}: $value // STANDARDIZE VENDOR-SPECIFIC PROPERTIES =animation($value) +prefix(animation, $value) =animation-delay($value) +prefix(animation-delay, $value) =animation-direction($value) +prefix(animation-direction, $value) =animation-duration($value) +prefix(animation-duration, $value) =animation-fill-mode($value) +prefix(animation-fill-mode, $value) =animation-iteration-count($value) +prefix(animation-iteration-count, $value) =animation-name($value) +prefix(animation-name, $value) =animation-play-state($value) +prefix(animation-play-state, $value) =animation-timing-function($value) +prefix(animation-timing-function, $value) =appearance($value) +prefix(appearance, $value) =appearance($value) +prefix(appearance, $value) =aspect-ratio($value) +prefix(aspect-ratio, $value) =backface-visibility($value) +prefix(backface-visibility, $value) =background-clip($value) +prefix(background-clip, $value, -webkit-) =background-composite($value) +prefix(background-composite, $value) =background-inline-policy($value) +prefix(background-inline-policy, $value) =background-origin($value) +prefix(background-origin, $value, -webkit-) =background-position-x($value) +prefix(background-position-x, $value, -ms-) =background-position-y($value) +prefix(background-position-y, $value, -ms-) =background-size($value) +prefix(background-size, $value, -webkit-) =behavior($value) +prefix(behavior, $value) =binding($value) +prefix(binding, $value) =block-progression($value) +prefix(block-progression, $value) =border-after($value) +prefix(border-after, $value) =border-after-color($value) +prefix(border-after-color, $value) =border-after-style($value) +prefix(border-after-style, $value) =border-after-width($value) +prefix(border-after-width, $value) =border-before($value) +prefix(border-before, $value) =border-before-color($value) +prefix(border-before-color, $value) =border-before-style($value) +prefix(border-before-style, $value) =border-before-width($value) +prefix(border-before-width, $value) =border-bottom-left-radius($value) +prefix(border-bottom-left-radius, $value) =border-bottom-right-radius($value) +prefix(border-bottom-right-radius, $value) =border-end($value) +prefix(border-end, $value) =border-end-color($value) +prefix(border-end-color, $value) =border-end-style($value) +prefix(border-end-style, $value) =border-end-width($value) +prefix(border-end-width, $value) =border-fit($value) +prefix(border-fit, $value) =border-horizontal-spacing($value) +prefix(border-horizontal-spacing, $value) =border-image($value) +prefix(border-image, $value) =border-radius($value) +prefix(border-radius, $value) =border-start($value) +prefix(border-start, $value) =border-start-color($value) +prefix(border-start-color, $value) =border-start-style($value) +prefix(border-start-style, $value) =border-start-width($value) +prefix(border-start-width, $value) =border-top-left-radius($value) +prefix(border-top-left-radius, $value) =border-top-right-radius($value) +prefix(border-top-right-radius, $value) =border-vertical-spacing($value) +prefix(border-vertical-spacing, $value) =box-align($value) +prefix(box-align, $value) =box-direction($value) +prefix(box-direction, $value) =box-flex($value) +prefix(box-flex, $value) =box-flex-group($value) +prefix(box-flex-group, $value) =box-lines($value) +prefix(box-lines, $value) =box-ordinal-group($value) +prefix(box-ordinal-group, $value) =box-orient($value) +prefix(box-orient, $value) =box-pack($value) +prefix(box-pack, $value) =box-reflect($value) +prefix(box-reflect, $value) =box-shadow($value) +prefix(box-shadow, $value) =box-sizing($value) +prefix(box-sizing, $value) =color-correction($value) +prefix(color-correction, $value) =column-break-after($value) +prefix(column-break-after, $value) =column-break-before($value) +prefix(column-break-before, $value) =column-break-inside($value) +prefix(column-break-inside, $value) =column-count($value) +prefix(column-count, $value) =column-gap($value) +prefix(column-gap, $value) =column-rule($value) +prefix(column-rule, $value) =column-rule-color($value) +prefix(column-rule-color, $value) =column-rule-style($value) +prefix(column-rule-style, $value) =column-rule-width($value) +prefix(column-rule-width, $value) =column-span($value) +prefix(column-span, $value) =column-width($value) +prefix(column-width, $value) =columns($value) +prefix(columns, $value) =content-order($value) +prefix(content-order, $value) =dashboard-region($value) +prefix(dashboard-region, $value) =flex-order($value) +prefix(flex-order, $value) =flex-pack($value) +prefix(flex-pack, $value) =flow($value) +prefix(flow, $value) =font-feature-settings($value) +prefix(font-feature-settings, $value) =font-size-delta($value) +prefix(font-size-delta, $value) =font-smoothing($value) +prefix(font-smoothing, $value) =highlight($value) +prefix(highlight, $value) =hyphens($value) +prefix(hyphens, $value) =hyphenate-character($value) +prefix(hyphenate-character, $value) =hyphenate-limit-after($value) +prefix(hyphenate-limit-after, $value) =hyphenate-limit-before($value) +prefix(hyphenate-limit-before, $value) =line-box-contain($value) +prefix(line-box-contain, $value) =line-break($value) +prefix(line-break, $value) =line-clamp($value) +prefix(line-clamp, $value) =locale($value) +prefix(locale, $value) =logical-height($value) +prefix(logical-height, $value) =logical-width($value) +prefix(logical-width, $value) =margin-after($value) +prefix(margin-after, $value) =margin-after-collapse($value) +prefix(margin-after-collapse, $value) =margin-before($value) +prefix(margin-before, $value) =margin-before-collapse($value) +prefix(margin-before-collapse, $value) =margin-bottom-collapse($value) +prefix(margin-bottom-collapse, $value) =margin-collapse($value) +prefix(margin-collapse, $value) =margin-end($value) +prefix(margin-end, $value) =margin-start($value) +prefix(margin-start, $value) =margin-top-collapse($value) +prefix(margin-top-collapse, $value) =marquee($value) +prefix(marquee, $value) =marquee-direction($value) +prefix(marquee-direction, $value) =marquee-increment($value) +prefix(marquee-increment, $value) =marquee-repetition($value) +prefix(marquee-repetition, $value) =marquee-speed($value) +prefix(marquee-speed, $value) =marquee-style($value) +prefix(marquee-style, $value) =mask($value) +prefix(mask, $value) =mask-attachment($value) +prefix(mask-attachment, $value) =mask-box-image($value) +prefix(mask-box-image, $value) =mask-clip($value) +prefix(mask-clip, $value) =mask-composite($value) +prefix(mask-composite, $value) =mask-image($value) +prefix(mask-image, $value) =mask-origin($value) +prefix(mask-origin, $value) =mask-position($value) +prefix(mask-position, $value) =mask-position-x($value) +prefix(mask-position-x, $value) =mask-position-y($value) +prefix(mask-position-y, $value) =mask-repeat($value) +prefix(mask-repeat, $value) =mask-repeat-x($value) +prefix(mask-repeat-x, $value) =mask-repeat-y($value) +prefix(mask-repeat-y, $value) =mask-size($value) +prefix(mask-size, $value) =match-nearest-mail-blockquote-color($value) +prefix(match-nearest-mail-blockquote-color, $value) =max-logical-height($value) +prefix(max-logical-height, $value) =max-logical-width($value) +prefix(max-logical-width, $value) =min-logical-height($value) +prefix(min-logical-height, $value) =min-logical-width($value) +prefix(min-logical-width, $value) =nbsp-mode($value) +prefix(nbsp-mode, $value) =opacity($value) +prefix(opacity, $value) =padding-after($value) +prefix(padding-after, $value) =padding-before($value) +prefix(padding-before, $value) =padding-end($value) +prefix(padding-end, $value) =padding-start($value) +prefix(padding-start, $value) =perspective($value) +prefix(perspective, $value) =perspective-origin($value) +prefix(perspective-origin, $value) =perspective-origin-x($value) +prefix(perspective-origin-x, $value) =perspective-origin-y($value) +prefix(perspective-origin-y, $value) =region-break-after($value) +prefix(region-break-after, $value) =region-break-before($value) +prefix(region-break-before, $value) =region-break-inside($value) +prefix(region-break-inside, $value) =region-overflow($value) +prefix(region-overflow, $value) =rtl-ordering($value) +prefix(rtl-ordering, $value) =svg-shadow($value) +prefix(svg-shadow, $value) =tap-highlight-color($value) +prefix(tap-highlight-color, $value) =text-decorations-in-effect($value) +prefix(text-decorations-in-effect, $value) =text-emphasis-position($value) +prefix(text-emphasis-position, $value) =text-fill-color($value) +prefix(text-fill-color, $value) =text-security($value) +prefix(text-security, $value) =text-size-adjust($value) +prefix(text-size-adjust, $value) =text-stroke($value) +prefix(text-stroke, $value) =text-stroke-color($value) +prefix(text-stroke-color, $value) =text-stroke-width($value) +prefix(text-stroke-width, $value) =touch-callout($value) +prefix(touch-callout, $value) =transform($value) +prefix(transform, $value) =transform-origin($value) +prefix(transform-origin, $value) =transform-origin-x($value) +prefix(transform-origin-x, $value) =transform-origin-y($value) +prefix(transform-origin-y, $value) =transform-origin-z($value) +prefix(transform-origin-z, $value) =transform-style($value) +prefix(transform-style, $value) =transition($value: all 1s) +prefix(transition, $value) =transition-delay($value) +prefix(transition-delay, $value) =transition-duration($value) +prefix(transition-duration, $value) =transition-property($value) +prefix(transition-property, $value) =transition-timing-function($value) +prefix(transition-timing-function, $value) =user-drag($value) +prefix(user-drag, $value) =user-modify($value) +prefix(user-modify, $value) =user-select($value) +prefix(user-select, $value) =wrap-shape($value) +prefix(wrap-shape, $value) // OTHER CSS3 TOOLS =corner-radius($top, $left, $borderradius) -moz-border-radius-#{$top}#{$left}: $borderradius border-#{$top}-#{$left}-radius: $borderradius -o-border-#{$top}-#{$left}-radius: $borderradius border-#{$top}-#{$left}-radius: $borderradius =gradient($startcolor, $endcolor, $startpos: top) background-color: $startcolor / 2 + $endcolor / 2 @if $startpos == "top" filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')") -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')") background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor)) @if $startpos == "left" filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')") -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')") background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor)) @if $startpos == "bottom" background-image: -webkit-gradient(linear, bottom left, top left, from($startcolor), to($endcolor)) @if $startpos == "right" background-image: -webkit-gradient(linear, top right, top left, from($startcolor), to($endcolor)) @if $startpos == "top left" background-image: -webkit-gradient(linear, $startpos, bottom right, from($startcolor), to($endcolor)) @if $startpos == "top right" background-image: -webkit-gradient(linear, $startpos, bottom left, from($startcolor), to($endcolor)) @if $startpos == "bottom left" background-image: -webkit-gradient(linear, $startpos, top right, from($startcolor), to($endcolor)) @if $startpos == "bottom right" background-image: -webkit-gradient(linear, $startpos, top left, from($startcolor), to($endcolor)) background-image: -webkit-linear-gradient($startpos, $startcolor, $endcolor) background-image: -moz-linear-gradient($startpos, $startcolor, $endcolor) background-image: -ms-linear-gradient($startpos, $startcolor, $endcolor) background-image: -o-linear-gradient($startpos, $startcolor, $endcolor) background-image: linear-gradient($startpos, $startcolor, $endcolor) =hgradient($left, $right) @warn "@mixin hgradient will be depruciated in 0.9.3.beta4 and later." background-color: $left / 2 + $right / 2 filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$left}unquote("', endColorstr='")#{$right}unquote("')") -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$left}', endColorstr='#{$right}')") background-image: -webkit-gradient(linear, left top, right top, from($left), to($right)) background-image: -webkit-linear-gradient(left, $left, $right) background-image: -moz-linear-gradient(left, $left, $right) background-image: -ms-linear-gradient(left, $left, $right) background-image: -o-linear-gradient(left, $left, $right) background-image: linear-gradient(left, $left, $right) =gloss($color) background-color: $color filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{lighten($color, 5%)}unquote("', endColorstr='")#{darken($color, 5%)}unquote("')") -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{lighten($color, 5%)}', endColorstr='#{darken($color, 5%)}')") background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, lighten($color, 15%)), color-stop(0.5, $color), color-stop(0.49, darken($color, 5%))) background-image: -webkit-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) background-image: -moz-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) background-image: linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) // ROTATION =rotate($deg, $origin: 0% 100%) display: block +transform-origin($origin) .no-csstransforms & @if $deg == 90 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) @if $deg == 180 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) @if $deg == 270 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) +prefix(transform, rotate($deg+deg))