| /* |
| * Copyright (c) 2014-2018 BSI Business Systems Integration AG. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| * Contributors: |
| * BSI Business Systems Integration AG - initial API and implementation |
| */ |
| #scout { |
| /* args = keyframeName, timingFunction, iterationCount */ |
| .animation(@args) { |
| -webkit-animation: @args; |
| -moz-animation: @args; |
| -o-animation: @args; |
| animation: @args; |
| } |
| |
| .animation-duration(@duration) { |
| -webkit-animation-duration: @duration; |
| -moz-animation-duration: @duration; |
| -o-animation-duration: @duration; |
| animation-duration: @duration; |
| } |
| |
| .animation-name(@name) { |
| -webkit-animation-name: @name; |
| -moz-animation-name: @name; |
| -o-animation-name: @name; |
| animation-name: @name; |
| } |
| |
| .animation-delay(@delay) { |
| -webkit-animation-delay: @delay; |
| -moz-animation-delay: @delay; |
| -o-animation-delay: @delay; |
| animation-delay: @delay; |
| } |
| |
| .animation-fill-mode(@fillMode) { |
| -webkit-animation-fill-mode: @fillMode; |
| -moz-animation-fill-mode: @fillMode; |
| -o-animation-fill-mode: @fillMode; |
| animation-fill-mode: @fillMode; |
| } |
| |
| .animation-timing-function(@timingFunction) { |
| -webkit-animation-timing-function: @timingFunction; |
| -moz-animation-timing-function: @timingFunction; |
| -o-animation-timing-function: @timingFunction; |
| animation-timing-function: @timingFunction; |
| } |
| |
| .animation-iteration-count(@iterationCount) { |
| -webkit-animation-iteration-count: @iterationCount; |
| -moz-animation-iteration-count: @iterationCount; |
| -o-animation-iteration-count: @iterationCount; |
| animation-iteration-count: @iterationCount; |
| } |
| |
| /*** Fade In ***/ |
| |
| .keyframes-fade-in() { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @-webkit-keyframes fade-in { |
| .keyframes-fade-in() |
| } |
| @keyframes fade-in { |
| .keyframes-fade-in() |
| } |
| |
| /*** Fade Out ***/ |
| |
| .keyframes-fade-out() { |
| from { |
| opacity: 1; |
| } |
| to { |
| opacity: 0; |
| } |
| } |
| |
| @-webkit-keyframes fade-out { |
| .keyframes-fade-out(); |
| } |
| @keyframes fade-out { |
| .keyframes-fade-out(); |
| } |
| |
| /*** Fade with Short Drop ***/ |
| |
| .keyframes-short-drop() { |
| 0% { |
| #scout.transform(translateY(-40px)); |
| } |
| 40% { |
| #scout.transform(translateY(7px)); |
| } |
| 100% { |
| #scout.transform(translateY(0)); |
| } |
| } |
| |
| @-webkit-keyframes short-drop { |
| .keyframes-short-drop(); |
| } |
| @keyframes short-drop { |
| .keyframes-short-drop(); |
| } |
| |
| /*** Fade out and shrink with blur ***/ |
| |
| .keyframes-fadeout-shrink-blur() { |
| from { |
| opacity: 1; |
| transform: scale(1, 1); |
| filter: blur(0); |
| } |
| to { |
| opacity: 0; |
| transform: scale(0.5, 0.5); |
| filter: blur(10px); |
| } |
| } |
| |
| @-webkit-keyframes fadeout-shrink-blur { |
| .keyframes-fadeout-shrink-blur(); |
| } |
| @keyframes fadeout-shrink-blur { |
| .keyframes-fadeout-shrink-blur(); |
| } |
| |
| /*** Fade out and shrink ***/ |
| |
| .keyframes-fadeout-shrink() { |
| from { |
| opacity: 1; |
| transform: scale(1, 1); |
| } |
| to { |
| opacity: 0; |
| transform: scale(0, 0); |
| } |
| } |
| |
| @-webkit-keyframes fadeout-shrink { |
| .keyframes-fadeout-shrink(); |
| } |
| @keyframes fadeout-shrink { |
| .keyframes-fadeout-shrink(); |
| } |
| |
| /*** Fade out and grow with blur ***/ |
| |
| .keyframes-fadeout-grow-blur() { |
| from { |
| opacity: 1; |
| transform: scale(1, 1); |
| filter: blur(0); |
| } |
| to { |
| opacity: 0; |
| transform: scale(2, 2); |
| filter: blur(10px); |
| } |
| } |
| |
| @-webkit-keyframes fadeout-grow-blur { |
| .keyframes-fadeout-grow-blur(); |
| } |
| @keyframes fadeout-grow-blur { |
| .keyframes-fadeout-grow-blur(); |
| } |
| |
| /*** Fade out and grow ***/ |
| |
| .keyframes-fadeout-grow() { |
| from { |
| opacity: 1; |
| transform: scale(1, 1); |
| } |
| to { |
| opacity: 0; |
| transform: scale(2, 2); |
| } |
| } |
| |
| @-webkit-keyframes fadeout-grow { |
| .keyframes-fadeout-grow(); |
| } |
| @keyframes fadeout-grow { |
| .keyframes-fadeout-grow(); |
| } |
| |
| /*** Fade in and grow with blur ***/ |
| |
| .keyframes-fadein-grow-blur() { |
| from { |
| opacity: 0; |
| transform: scale(0.5, 0.5); |
| filter: blur(10px); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1, 1); |
| filter: blur(0); |
| } |
| } |
| |
| @-webkit-keyframes fadein-grow-blur { |
| .keyframes-fadein-grow-blur(); |
| } |
| @keyframes fadein-grow-blur { |
| .keyframes-fadein-grow-blur(); |
| } |
| |
| /*** Fade in and grow ***/ |
| |
| .keyframes-fadein-grow() { |
| from { |
| opacity: 0; |
| transform: scale(0, 0); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1, 1); |
| } |
| } |
| |
| @-webkit-keyframes fadein-grow { |
| .keyframes-fadein-grow(); |
| } |
| @keyframes fadein-grow { |
| .keyframes-fadein-grow(); |
| } |
| |
| /*** Slide In Bottom *** |
| Moves the element into screen from bottom up */ |
| |
| .keyframes-slidein-bottom() { |
| 0% { |
| #scout.transform(translateY(100%)); |
| } |
| } |
| |
| @-webkit-keyframes slidein-bottom { |
| .keyframes-slidein-bottom(); |
| } |
| @keyframes slidein-bottom { |
| .keyframes-slidein-bottom(); |
| } |
| |
| /*** Slide Out Bottom *** |
| Moves the element out of bottom screen border */ |
| |
| .keyframes-slideout-bottom() { |
| 100% { |
| #scout.transform(translateY(100%)); |
| } |
| } |
| |
| @-webkit-keyframes slideout-bottom { |
| .keyframes-slideout-bottom(); |
| } |
| @keyframes slideout-bottom { |
| .keyframes-slideout-bottom(); |
| } |
| |
| /*** Slide Out Right *** |
| Moves the element out of right screen border */ |
| |
| .keyframes-slideout-right() { |
| 100% { |
| #scout.transform(translateX(100%)); |
| } |
| } |
| |
| @-webkit-keyframes slideout-right { |
| .keyframes-slideout-right(); |
| } |
| @keyframes slideout-right { |
| .keyframes-slideout-right(); |
| } |
| |
| /*** Grow Y *** |
| Scales the element along the y axis until 1. Expects the element to be scaled (e.g. scaleY(0)) when the animation starts. |
| To create a slide down animation (as known from jQuery) set transform-origin to top. */ |
| |
| .keyframes-grow-y() { |
| 100% { |
| #scout.transform(scaleY(1)); |
| } |
| } |
| |
| @-webkit-keyframes grow-y { |
| .keyframes-grow-y(); |
| } |
| @keyframes grow-y { |
| .keyframes-grow-y(); |
| } |
| |
| |
| /*** Shrink Y *** |
| Shrinks the element along the y axis until 0*/ |
| |
| .keyframes-shrink-y() { |
| 100% { |
| #scout.transform(scaleY(0)); |
| } |
| } |
| |
| @-webkit-keyframes shrink-y { |
| .keyframes-shrink-y(); |
| } |
| @keyframes shrink-y { |
| .keyframes-shrink-y(); |
| } |
| |
| |
| /*** Fade In Zoom Bounce ***/ |
| |
| .keyframes-fadein-zoom-bounce() { |
| 0% { |
| opacity: 0; |
| #scout.transform(scale(0.75, 0.75)); |
| } |
| 65% { |
| opacity: 1; |
| #scout.transform(scale(1.02, 1.02)); |
| } |
| 100% { |
| #scout.transform(scale(1, 1)); |
| } |
| } |
| |
| @-webkit-keyframes fadein-zoom-bounce { |
| .keyframes-fadein-zoom-bounce(); |
| } |
| @keyframes fadein-zoom-bounce { |
| .keyframes-fadein-zoom-bounce(); |
| } |
| |
| /*** Rotation ***/ |
| |
| .keyframes-rotation () { |
| 0% { |
| #scout.transform(rotate(0deg)); |
| } |
| 100% { |
| #scout.transform(rotate(359deg)); |
| } |
| } |
| |
| @-webkit-keyframes rotation { |
| .keyframes-rotation(); |
| } |
| @keyframes rotation { |
| .keyframes-rotation(); |
| } |
| |
| /*** Rotation-Reverse ***/ |
| |
| .keyframes-rotation-reverse () { |
| 0% { |
| #scout.transform(rotate(-0deg)); |
| } |
| 100% { |
| #scout.transform(rotate(-359deg)); |
| } |
| } |
| |
| @-webkit-keyframes rotation-reverse { |
| .keyframes-rotation-reverse(); |
| } |
| @keyframes rotation-reverse { |
| .keyframes-rotation-reverse(); |
| } |
| |
| /*** Pulse Opacity ***/ |
| |
| .keyframes-pulse-opacity () { |
| 0% { |
| opacity: 1.0; |
| } |
| 50% { |
| opacity: 0.05; |
| } |
| 100% { |
| opacity: 1.0; |
| } |
| } |
| |
| @-webkit-keyframes pulse-opacity { |
| .keyframes-pulse-opacity(); |
| } |
| @keyframes pulse-opacity { |
| .keyframes-pulse-opacity(); |
| } |
| |
| /*** Pulsate ***/ |
| |
| .keyframes-pulsate () { |
| 0% { |
| #scout.transform(scale(0.25)); |
| opacity: 0.35; |
| } |
| 45% { |
| opacity: 1.0; |
| } |
| 96% { |
| #scout.transform(scale(1.2)); |
| opacity: 0.2; |
| } |
| 100% { |
| #scout.transform(scale(1.2)); |
| opacity: 0.04; |
| } |
| } |
| |
| @-webkit-keyframes pulsate { |
| .keyframes-pulsate(); |
| } |
| @keyframes pulsate { |
| .keyframes-pulsate(); |
| } |
| |
| /*** Pulsate Reverse ***/ |
| |
| .keyframes-pulsate-reverse () { |
| 0% { |
| #scout.transform(scale(1.2)); |
| opacity: 0.0; |
| } |
| 50% { |
| opacity: 1.0; |
| } |
| 100% { |
| #scout.transform(scale(0.1)); |
| opacity: 0.0; |
| } |
| } |
| |
| @-webkit-keyframes pulsate-reverse { |
| .keyframes-pulsate-reverse(); |
| } |
| @keyframes pulsate-reverse { |
| .keyframes-pulsate-reverse(); |
| } |
| |
| /*** Pulsate In-Out ***/ |
| |
| .keyframes-pulsate-in-out () { |
| 0% { |
| #scout.transform(scale(1)); |
| opacity: 1.0; |
| } |
| 50% { |
| #scout.transform(scale(0.1)); |
| opacity: 0.01; |
| } |
| 100% { |
| #scout.transform(scale(1)); |
| opacity: 1.0; |
| } |
| } |
| |
| @-webkit-keyframes pulsate-in-out { |
| .keyframes-pulsate-in-out(); |
| } |
| @keyframes pulsate-in-out { |
| .keyframes-pulsate-in-out(); |
| } |
| |
| /*** Attention ***/ |
| |
| .keyframes-attention () { |
| 0% { |
| #scout.transform(scale3d(1, 1, 1)); |
| } |
| 10% { |
| #scout.transform(scale3d(1.1, 1.1, 1.1)); |
| } |
| 20% { |
| #scout.transform(scale3d(1, 1, 1)); |
| } |
| 100% { |
| #scout.transform(scale3d(1, 1, 1)); |
| } |
| } |
| |
| @-webkit-keyframes attention { |
| .keyframes-attention(); |
| } |
| @keyframes attention { |
| .keyframes-attention(); |
| } |
| |
| /*** Rotate-X ***/ |
| |
| .keyframes-rotate-x () { |
| 0% { |
| #scout.transform(perspective(120px) rotateY(0deg)); |
| } |
| 50% { |
| #scout.transform(perspective(120px) rotateY(-180.0deg)); |
| } |
| 100% { |
| #scout.transform(perspective(120px) rotateY(-360deg)); |
| } |
| } |
| |
| @-webkit-keyframes rotate-x { |
| .keyframes-rotate-x(); |
| } |
| @keyframes rotate-x { |
| .keyframes-rotate-x(); |
| } |
| |
| /*** Animate Dot ***/ |
| |
| .keyframes-animate-dot () { |
| 0% { |
| color: @text-color; |
| bottom: 0; |
| } |
| 25% { |
| color: @palette-gray-5; |
| bottom: 4px; |
| } |
| 50% { |
| color: @text-color; |
| bottom: 0; |
| } |
| 100% { |
| color: @text-color; |
| bottom: 0; |
| } |
| } |
| |
| @-webkit-keyframes animateDot { |
| .keyframes-animate-dot(); |
| } |
| @keyframes animateDot { |
| .keyframes-animate-dot(); |
| } |
| |
| /*** Shake ***/ |
| |
| .animation-shake() { |
| #scout.transform-origin(50% 50%); |
| #scout.animation-name(shake); |
| #scout.animation-duration(0.2s); |
| #scout.animation-iteration-count(1); |
| #scout.animation-timing-function(linear); |
| } |
| |
| .keyframes-shake() { |
| 0% { |
| #scout.transform(translate(2px, 1px) rotate(0deg)); |
| } |
| 10% { |
| #scout.transform(translate(-1px, -2px) rotate(-1deg)); |
| } |
| 20% { |
| #scout.transform(translate(-3px, 0) rotate(1deg)); |
| } |
| 30% { |
| #scout.transform(translate(0, 2px) rotate(0deg)); |
| } |
| 40% { |
| #scout.transform(translate(1px, -1px) rotate(1deg)); |
| } |
| 50% { |
| #scout.transform(translate(-1px, 2px) rotate(-1deg)); |
| } |
| 60% { |
| #scout.transform(translate(-3px, 1px) rotate(0deg)); |
| } |
| 70% { |
| #scout.transform(translate(2px, 1px) rotate(-1deg)); |
| } |
| 80% { |
| #scout.transform(translate(-1px, -1px) rotate(1deg)); |
| } |
| 90% { |
| #scout.transform(translate(2px, 2px) rotate(0deg)); |
| } |
| 100% { |
| #scout.transform(translate(1px, -2px) rotate(-1deg)); |
| } |
| } |
| |
| @-webkit-keyframes shake { |
| .keyframes-shake(); |
| } |
| @keyframes shake { |
| .keyframes-shake(); |
| } |
| |
| /*** Flash-Gray ***/ |
| |
| .animation-flash-gray(@keyframes-name: flash-gray) { |
| #scout.animation-name(@keyframes-name); |
| #scout.animation-duration(0.4s); |
| #scout.animation-iteration-count(1); |
| #scout.animation-timing-function(linear); |
| } |
| |
| .keyframes-flash-gray() { |
| 0% { |
| background-color: @simple-tab-background-color; |
| } |
| 25% { |
| background-color: @simple-tab-flash-background-color; |
| } |
| 50% { |
| background-color: @simple-tab-background-color; |
| } |
| 75% { |
| background-color: @simple-tab-flash-background-color; |
| } |
| 100% { |
| background-color: @simple-tab-background-color; |
| } |
| } |
| |
| @-webkit-keyframes flash-gray { |
| .keyframes-flash-gray(); |
| } |
| @keyframes flash-gray { |
| .keyframes-flash-gray(); |
| } |
| } |