1 @import "utilities/linear-gradient";
3 @mixin background-color-with-alpha($color, $alpha) {
4 background-color: $color;
5 background-color: rgba($color, $alpha);
8 @mixin transform($transform) {
9 -moz-transform: $transform;
10 -ms-transform: $transform;
11 -o-transform: $transform;
12 -webkit-transform: $transform;
13 transform: $transform;
16 @mixin transition($string: $transition--default) {
17 -webkit-transition: $string;
18 -moz-transition: $string;
19 -o-transition: $string;
23 @mixin hide-visually {
34 @mixin border-radius($radius) {
35 -webkit-border-radius: $radius;
36 -moz-border-radius: $radius;
37 border-radius: $radius;
40 @mixin animation($string: spin 1s infinite linear) {
41 -webkit-animation: $string;
42 -moz-animation: $string;
43 -o-animation: $string;
47 @mixin display-flex($alignment: '', $justification: '') {
49 display: -webkit-flex;
53 @if $alignment != '' {
54 -webkit-box-align: $alignment;
55 -webkit-align-items: $alignment;
56 -ms-flex-align: $alignment;
57 align-items: $alignment;
60 @if $justification != '' {
61 -webkit-box-pack: $justification;
62 -webkit-justify-content: $justification;
63 -ms-flex-pack: $justification;
64 justify-content: $justification;
69 // @include context('.video-js', '.video-js.vjs-no-flex') {
70 // display: table-cell;
71 // vertical-align: middle;
72 // @if ($value == 'auto') {
77 -webkit-box-flex: $value;
78 -moz-box-flex: $value;
84 // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
85 @mixin user-select($string: none) {
86 -webkit-user-select: $string;
87 -moz-user-select: $string;
88 -ms-user-select: $string;
92 // https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
93 @mixin box-shadow ($string: 0 0 1em rgba(0, 0, 0, 0.25)) {
94 -webkit-box-shadow: $string;
95 -moz-box-shadow: $string;
99 @mixin order($value) {
100 -webkit-box-ordinal-group: $value;
101 -moz-box-ordinal-group: $value;
102 -ms-flex-order: $value;
103 -webkit-order: $value;
116 @extend %fill-parent;