ac1a746f12
closed #89 fixed "loop connections" on same system #84 added error messages for "invalid" CREST "Client ID" added "bootboxjs" (customized styled checkboxes/radio buttons) CSS only "Font Awesome" version upgrade 4.4.0 -> 4.61 "Bootbox.js" version upgrade 4.3.0 -> 4.4.0 fixed "system dialog" (added responsive layout)
102 lines
2.0 KiB
SCSS
102 lines
2.0 KiB
SCSS
// keyframes mixin
|
|
@mixin keyframes($name) {
|
|
@-webkit-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@-moz-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@-ms-keyframes #{$name} {
|
|
@content;
|
|
}
|
|
@keyframes #{$name} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// slide in and show ==================================
|
|
.pf-animation-slide-in {
|
|
-moz-animation-duration: 1.2s;
|
|
-webkit-animation-duration: 1.2s;
|
|
-moz-animation-name: pfSlideIn;
|
|
-webkit-animation-name: pfSlideIn;
|
|
position:relative;
|
|
}
|
|
|
|
@include keyframes(pfSlideIn){
|
|
from {
|
|
opacity: 0;
|
|
top: -20px;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
top:0px;
|
|
}
|
|
};
|
|
|
|
// pulse-out ==========================================
|
|
|
|
.pf-animation-pulse-success{
|
|
@include animation( pulseBackgroundSuccess 1.5s 1 );
|
|
@include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
|
|
|
|
.sorting_1{
|
|
@include animation( pulseBackgroundSuccessActive 1.5s 1 );
|
|
@include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
|
|
}
|
|
}
|
|
|
|
.pf-animation-pulse-warning{
|
|
@include animation( pulseBackgroundWarning 1.5s 1 );
|
|
@include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
|
|
|
|
.sorting_1{
|
|
@include animation( pulseBackgroundWarningActive 1.5s 1 );
|
|
@include animation-timing-function( cubic-bezier(0.53, -0.03, 0.68, 0.38) );
|
|
}
|
|
}
|
|
|
|
@include keyframes(pulseBackgroundSuccess){
|
|
0% {}
|
|
5% {
|
|
background-color: $green-dark;
|
|
color: $gray-dark;
|
|
}
|
|
100% {}
|
|
};
|
|
@include keyframes(pulseBackgroundSuccessActive){
|
|
0% {}
|
|
5% {
|
|
background-color: darken($green-dark, 5%);
|
|
color: $gray-dark;
|
|
}
|
|
100% {}
|
|
};
|
|
|
|
@include keyframes(pulseBackgroundWarning){
|
|
0% {}
|
|
5% {
|
|
background-color: $orange;
|
|
color: $gray-darker;
|
|
}
|
|
100% {}
|
|
};
|
|
@include keyframes(pulseBackgroundWarningActive){
|
|
0% {}
|
|
5% {
|
|
background-color: darken($orange, 5%);
|
|
color: $gray-darker;
|
|
}
|
|
100% {}
|
|
};
|
|
|
|
// rotate =============================================
|
|
.pf-animate-rotate{
|
|
@include transition( all 0.08s linear );
|
|
}
|
|
|
|
.pf-animate-rotate.right{
|
|
@include rotate( 90deg );
|
|
}
|