diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 6c207d3a76..f4e6326475 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -27,7 +27,7 @@ border-radius: $ouiBorderRadius; z-index: $ouiZModal; min-width: $ouiFormMaxWidth; - animation: ouiModal $ouiAnimSpeedSlow $ouiAnimSlightBounce; + animation: ouiModal $ouiAnimSpeedExtraFast $ouiAnimSlightBounce; max-width: calc(100vw - #{$ouiSize}); // Remove the outline from the focusable container diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index b095a1dcff..b920a7438d 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -51,16 +51,16 @@ opacity: 0; /* 2 */ visibility: hidden; /* 2 */ transition: /* 2 */ - opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow, - visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow; + opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast; // Don't animate when using the attached mode like for inputs &:not(.ouiPopover__panel-isAttached) { transform: translateY(0) translateX(0) translateZ(0); /* 2 */ transition: /* 2 */ - opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow, - visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow, - transform $ouiAnimSlightBounce ($ouiAnimSpeedSlow + 100ms); + opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + transform $ouiAnimSlightBounce ($ouiAnimSpeedExtraFast + 100ms); } &.ouiPopover__panel-isOpen { diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index ccb72ebc81..b27cc1ebda 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -86,47 +86,39 @@ @keyframes ouiToolTipTop { 0% { opacity: 0; - transform: translateY(-$ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipBottom { 0% { opacity: 0; - transform: translateY($ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipLeft { 0% { opacity: 0; - transform: translateX(-$ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipRight { 0% { opacity: 0; - transform: translateX($ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } diff --git a/src/global_styling/mixins/_tool_tip.scss b/src/global_styling/mixins/_tool_tip.scss index ea10762cfb..d1310dc8c2 100644 --- a/src/global_styling/mixins/_tool_tip.scss +++ b/src/global_styling/mixins/_tool_tip.scss @@ -35,7 +35,7 @@ } @mixin ouiToolTipAnimation($side: 'top') { - animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards; + animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards; } diff --git a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss index ea10762cfb..d1310dc8c2 100644 --- a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss +++ b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss @@ -35,7 +35,7 @@ } @mixin ouiToolTipAnimation($side: 'top') { - animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards; + animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards; }