@mixin box-sizing { * { -moz-box-sizing: border-box; -webkit-border-box: border-box; box-sizing: border-box; } } @mixin section { border: $border-width solid $border-color; @include border-radius($outer-radius); background: $black; margin-bottom: $outer-gap; } @mixin linear-gradient($deg, $first, $values...) { background-color: $first; background: -webkit-linear-gradient($deg, $first, $values); background: -moz-linear-gradient($deg, $first, $values); background: linear-gradient($deg, $first, $values); } @mixin border-radius($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } @mixin text-decoration($decor) { -moz-text-decoration: $decor; -webkit-text-decoration: $decor; text-decoration: $decor; } @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } @mixin animation($args...) { -moz-animation: $args; -webkit-animation: $args; animation: $args; } @mixin animation-delay($args...) { -moz-animation-delay: $args; -webkit-animation-delay: $args; animation-delay: $args; } @mixin transition($trans...) { -moz-transition: $trans; -webkit-transition: $trans; transition: $trans; } @mixin transform($trans...) { -moz-transform: $trans; -webkit-transform: $trans; transform: $trans; } @mixin font-face($name) { @font-face { font-family: $name; src: url("../font/" + $name + ".eot"); src: url("../font/" + $name + ".eot?#iefix") format("embedded-opentype"), url("../font/" + $name + ".woff2") format("woff2"), url("../font/" + $name + ".woff") format("woff"), url("../font/" + $name + ".ttf") format("truetype"), url("../font/" + $name + ".otf") format("opentype"), url("../font/" + $name + ".svg#" + $name) format('svg'); font-weight: normal; font-style: normal; font-display: swap; } } @mixin display-table($spacing) { -dt-display: table; display: table; border-spacing: $spacing; -dt-border-spacing: $spacing; } @mixin display-table-cell { -dt-display: table-cell; display: table-cell; }