// Triangle @mixin badge-triangle-variant($bg) {
color: color-yiq($bg); background-color: $bg; &:after { border-right-color: darken($bg, 10%); }
} // Transition @mixin transition($transition…) {
-moz-transition: $transition; -o-transition: $transition; -webkit-transition: $transition; transition: $transition;
} // Keyframe @mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; }
} // Animation @mixin animation ($delay, $duration, $animation, $fill-mode) {
-webkit-animation-delay: $delay; -webkit-animation-duration: $duration; -webkit-animation-name: $animation; -webkit-animation-fill-mode: $fill-mode; -moz-animation-delay: $delay; -moz-animation-duration: $duration; -moz-animation-name: $animation; -moz-animation-fill-mode: $fill-mode; -o-animation-delay: $delay; -o-animation-duration: $duration; -o-animation-name: $animation; -o-animation-fill-mode: $fill-mode; animation-delay: $delay; animation-duration: $duration; animation-name: $animation; animation-fill-mode: $fill-mode;
} // Timeline point @mixin background-image-spaced($width, $height, $margin-bottom, $image) {
// background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width}" height="#{$height + $margin-bottom}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/svg+xml;base64,#{$image}" /></svg>");
} // Alert close color @mixin alert-close-variant($color) {
g { stroke: $color; }
}