diff options
Diffstat (limited to 'src/style/scss/common/_animation.scss')
-rw-r--r-- | src/style/scss/common/_animation.scss | 149 |
1 files changed, 0 insertions, 149 deletions
diff --git a/src/style/scss/common/_animation.scss b/src/style/scss/common/_animation.scss deleted file mode 100644 index 659bd3b..0000000 --- a/src/style/scss/common/_animation.scss +++ /dev/null @@ -1,149 +0,0 @@ -/*********************************************************************************** - VERTICAL COLLAPSE-EXPEND TRANSITION ANIMATION PAIR. - - We use the 'transition-vertical-collapse' for the collapse/idle block element, - and the 'transition-vertical-expand' to expend that element. - - -important: The element that will be used for the animation should be - a block element, adn have a content or width and height settings for it to work. -*********************************************************************************/ - -/** -Enable to fold an expended block element -@param $offsetY - The top position from which the drop down should fold - */ -@mixin keyframes-expand-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3), $margin:0){ - @keyframes #{$name} { - 0% { - opacity: 0; - max-height: 0; - overflow: hidden; - box-shadow: 0 0 0px 0px rgba(0,0,0,.3); - margin:0; - } - 10% { - opacity: 1; - margin: $margin; - } - 50% { - box-shadow: $boxShadow; - } - 99%{ - max-height:$maxHeight; - - overflow: hidden; - } - 100%{ - opacity: 1; - max-height:$maxHeight; - overflow: auto; - } - } -} - -/** -Enable to expend a folded block element -@param $maxHeight - most of the animation is done over the max-height property - so we have to set the maximum height the expended element can expend to. - */ -@mixin keyframes-collapse-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3)){ - @keyframes #{$name} { - 0% { - opacity: 1; - max-height:$maxHeight; - box-shadow: $boxShadow; - overflow: hidden; - } - 40%{ - opacity: 1; - } - 99%{ - opacity: 0; - max-height: 0; - overflow: hidden; - box-shadow: 0 0 0px 0px rgba(0,0,0,.3); - } - 100%{ - opacity: 0; - max-height: 0; - overflow: auto; - } - } -} - -/******************************************************************************** - SIMPLE FADE-IN KEYFRAMES ANIMATION (Used in tooltip for example) - - we use 'mixin-keyframes-fade-in-vertically' to create css @keyframes rule that - we later can use with animation property inside our prefered css rules: - .our_class { - ... - animation: keyframes-fade-in-vertically 1s ease-out; - ... - } -*********************************************************************************/ -@mixin mixin-keyframes-fade-in-vertically($fromRelativeHeight, $keyframesName:keyframes-fade-in-vertically){ - @keyframes #{$keyframesName} { - from { - transform: translateY($fromRelativeHeight); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } - } -} - -/******************************************************************************** - SIMPLE FADE-OUT KEYFRAMES ANIMATION (Opposite of fade-in mixin above) -*********************************************************************************/ -@mixin mixin-keyframes-fade-out-vertically($toRelativeHeight, $keyframesName:keyframes-fade-out-vertically){ - @keyframes #{$keyframesName} { - from { - transform: translateY(0); - opacity: 1; - } - to { - transform: translateY($toRelativeHeight); - opacity: 0; - } - } -} - - - -/******************************************************************************** - RIPPLE ANIMATION (Used for ripple-click directive) -*********************************************************************************/ -@keyframes ripple-animation { - from { - transform: scale(0,0); - opacity: 1; - } - to { - transform: scale(2,2); - opacity: 0; - } -} - -.sdc-ripple-click__animated { - position:relative; -} -.sdc-ripple-click__animated::before{ - display: inline-block; - position:absolute; - top: 0; - left: 0; - content: ''; - animation: ripple-animation .3s ease-out; - background-color: $blue; - width: 14px; - height: 14px; - border-radius: 50%; - pointer-events: none; - opacity: 0; -} - - - |