@mixin transform-translate-x($value) {
-webkit-transform: translate3d($value, 0, 0); -moz-transform: translate3d($value, 0, 0); -o-transform: translate3d($value, 0, 0); -ms-transform: translate3d($value, 0, 0); transform: translate3d($value, 0, 0);
}
@mixin transform-translate-y($value) {
-webkit-transform: translate3d(0, $value, 0); -moz-transform: translate3d(0, $value, 0); -o-transform: translate3d(0, $value, 0); -ms-transform: translate3d(0, $value, 0); transform: translate3d(0, $value, 0);
}
@mixin transitions($time, $type) {
-webkit-transition: all $time $type; -moz-transition: all $time $type; -o-transition: all $time $type; -ms-transition: all $time $type; transition: all $time $type;
}
@mixin diagonal-gradient($start-color, $end-color) {
background: $start-color; background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color); background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color); background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color); background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color); background-size: 210% 210%; background-position: top right;
}
@mixin bar-animation($type) {
-webkit-animation: $type 500ms linear 0s; -moz-animation: $type 500ms linear 0s; animation: $type 500ms 0s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@mixin rotate-180() {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);
}
@mixin transform-translate-y-dropdown($value) {
-webkit-transform: translate3d(0, $value, 0) !important; -moz-transform: translate3d(0, $value, 0) !important; -o-transform: translate3d(0, $value, 0) !important; -ms-transform: translate3d(0, $value, 0) !important; transform: translate3d(0, $value, 0) !important;
}
@mixin linear-gradient($color, $states-color) {
background: $color; background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%); background: -o-linear-gradient(0deg, $color 0%, $states-color 100%); background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%); background: linear-gradient(0deg, $color 0%, $states-color 100%);
}
@mixin linear-gradient-right($color, $states-color) {
background: $color; background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%); background: -o-linear-gradient(to right, $color 0%, $states-color 100%); background: -moz-linear-gradient(to right, $color 0%, $states-color 100%); background: linear-gradient(to right, $color 0%, $states-color 100%);
}
@mixin sidebar-color($color) {
&:after { background: $color; } .nav li.active>a { color: $color; i { color: $color; } }
}
@mixin transition-input-focus-color() {
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@mixin topbar-x-rotation() {
@keyframes topbar-x { 0% { top: 0px; transform: rotate(0deg); } 45% { top: 6px; transform: rotate(145deg); } 75% { transform: rotate(130deg); } 100% { transform: rotate(135deg); } } @-webkit-keyframes topbar-x { 0% { top: 0px; -webkit-transform: rotate(0deg); } 45% { top: 6px; -webkit-transform: rotate(145deg); } 75% { -webkit-transform: rotate(130deg); } 100% { -webkit-transform: rotate(135deg); } } @-moz-keyframes topbar-x { 0% { top: 0px; -moz-transform: rotate(0deg); } 45% { top: 6px; -moz-transform: rotate(145deg); } 75% { -moz-transform: rotate(130deg); } 100% { -moz-transform: rotate(135deg); } }
}
@mixin topbar-back-rotation() {
@keyframes topbar-back { 0% { top: 6px; transform: rotate(135deg); } 45% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } 100% { top: 0px; transform: rotate(0); } } @-webkit-keyframes topbar-back { 0% { top: 6px; -webkit-transform: rotate(135deg); } 45% { -webkit-transform: rotate(-10deg); } 75% { -webkit-transform: rotate(5deg); } 100% { top: 0px; -webkit-transform: rotate(0); } } @-moz-keyframes topbar-back { 0% { top: 6px; -moz-transform: rotate(135deg); } 45% { -moz-transform: rotate(-10deg); } 75% { -moz-transform: rotate(5deg); } 100% { top: 0px; -moz-transform: rotate(0); } }
}
@mixin bottombar-x-rotation() {
@keyframes bottombar-x { 0% { bottom: 0px; transform: rotate(0deg); } 45% { bottom: 6px; transform: rotate(-145deg); } 75% { transform: rotate(-130deg); } 100% { transform: rotate(-135deg); } } @-webkit-keyframes bottombar-x { 0% { bottom: 0px; -webkit-transform: rotate(0deg); } 45% { bottom: 6px; -webkit-transform: rotate(-145deg); } 75% { -webkit-transform: rotate(-130deg); } 100% { -webkit-transform: rotate(-135deg); } } @-moz-keyframes bottombar-x { 0% { bottom: 0px; -moz-transform: rotate(0deg); } 45% { bottom: 6px; -moz-transform: rotate(-145deg); } 75% { -moz-transform: rotate(-130deg); } 100% { -moz-transform: rotate(-135deg); } }
}
@mixin bottombar-back-rotation {
@keyframes bottombar-back { 0% { bottom: 6px; transform: rotate(-135deg); } 45% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } 100% { bottom: 0px; transform: rotate(0); } } @-webkit-keyframes bottombar-back { 0% { bottom: 6px; -webkit-transform: rotate(-135deg); } 45% { -webkit-transform: rotate(10deg); } 75% { -webkit-transform: rotate(-5deg); } 100% { bottom: 0px; -webkit-transform: rotate(0); } } @-moz-keyframes bottombar-back { 0% { bottom: 6px; -moz-transform: rotate(-135deg); } 45% { -moz-transform: rotate(10deg); } 75% { -moz-transform: rotate(-5deg); } 100% { bottom: 0px; -moz-transform: rotate(0); } }
}
@mixin nc-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); -webkit-transform: rotate($degrees); -moz-transform: rotate($degrees); -ms-transform: rotate($degrees); -o-transform: rotate($degrees); transform: rotate($degrees);
}
@mixin nc-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); -webkit-transform: scale($horiz, $vert); -moz-transform: scale($horiz, $vert); -ms-transform: scale($horiz, $vert); -o-transform: scale($horiz, $vert); transform: scale($horiz, $vert);
}