From c54c1d82cf1e3be0fd97d2b716b44f61648aa239 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 5 Sep 2022 21:46:41 +0200 Subject: [PATCH] fix(Tooltip): use Eufemia cubic-bezier for animations --- .../__snapshots__/Autocomplete.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Button.test.js.snap | 14 +++++++------- .../__snapshots__/DatePicker.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Dialog.test.tsx.snap | 14 +++++++------- .../__tests__/__snapshots__/Drawer.test.tsx.snap | 14 +++++++------- .../__tests__/__snapshots__/Dropdown.test.js.snap | 14 +++++++------- .../__snapshots__/GlobalError.test.js.snap | 14 +++++++------- .../__snapshots__/GlobalStatus.test.js.snap | 14 +++++++------- .../__snapshots__/HelpButton.test.js.snap | 14 +++++++------- .../__snapshots__/InputMasked.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Input.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Modal.test.tsx.snap | 14 +++++++------- .../__snapshots__/NumberFormat.test.js.snap | 14 +++++++------- .../__snapshots__/Pagination.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Slider.test.tsx.snap | 14 +++++++------- .../__snapshots__/StepIndicator-v1.test.js.snap | 14 +++++++------- .../__snapshots__/StepIndicator.test.js.snap | 14 +++++++------- .../tag/__tests__/__snapshots__/Tag.test.tsx.snap | 14 +++++++------- .../__snapshots__/ToggleButton.test.js.snap | 14 +++++++------- .../__tests__/__snapshots__/Tooltip.test.js.snap | 14 +++++++------- .../src/components/tooltip/style/_tooltip.scss | 15 ++++++++------- 21 files changed, 148 insertions(+), 147 deletions(-) diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index 68e5d5869e8..f89cf535046 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -1460,29 +1460,29 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap index fbcb569f070..31076d942e8 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -1559,29 +1559,29 @@ exports[`Button scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 38c0eb93310..67ed449b7eb 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -2002,29 +2002,29 @@ exports[`DatePicker scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index eb895a4f995..e84c79c0b13 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -1392,29 +1392,29 @@ exports[`Dialog scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index a3b707a5852..3135beb40cd 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -1406,29 +1406,29 @@ exports[`Drawer scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 31be744a840..0c175c2407a 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -1558,29 +1558,29 @@ exports[`Dropdown scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap index 1a1c637dda0..47d359b147e 100644 --- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap @@ -161,29 +161,29 @@ exports[`GlobalError scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap index 0b3990b0542..515bb28e108 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap @@ -186,29 +186,29 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap index 835637e246f..8964f05f5f7 100644 --- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap +++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap @@ -338,29 +338,29 @@ exports[`HelpButton scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 30041b32417..94bf68f4161 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -397,29 +397,29 @@ exports[`InputMasked scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 335e7ed06c0..ec2b631e4de 100644 --- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -991,29 +991,29 @@ exports[`Input scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap index 12318c13c1c..275f0d0c9bb 100644 --- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap @@ -1379,29 +1379,29 @@ exports[`Modal scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap index 173790d58b7..c88281ea50e 100644 --- a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap +++ b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.js.snap @@ -153,29 +153,29 @@ exports[`NumberFormat scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap index 1bc0c3e1cf4..a46b6cd4642 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap @@ -1780,29 +1780,29 @@ exports[`Pagination scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap index 1f01173ccb6..6a41e8a14ad 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -153,29 +153,29 @@ exports[`Slider scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap index 48a07baffb7..c00ae7410aa 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator-v1.test.js.snap @@ -882,29 +882,29 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index 143fe595fe5..d6b55a750f6 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -8414,29 +8414,29 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap index e482b7b8839..c0b3a016bbe 100644 --- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -153,29 +153,29 @@ exports[`Tag scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap index 7193057b844..b183a09bc0d 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap @@ -1901,29 +1901,29 @@ legend.dnb-form-label { padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap index 5a534c1b7e6..a29e8e5bda4 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap @@ -102,29 +102,29 @@ exports[`Tooltip scss have to match snapshot 1`] = ` padding: 0 1rem; opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; } + transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--large { padding: 0.25rem 1rem; } .dnb-tooltip--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; } + transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); } .dnb-tooltip--active { visibility: visible; /* because of the first \\"show\\" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; } + animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation { - animation: show-tooltip 1ms ease-out forwards; } + animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; } + animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; } .dnb-tooltip--hide.dnb-tooltip--no-animation { - animation: hide-tooltip 1ms ease-out forwards; } + animation: hide-tooltip 1ms linear forwards; } .dnb-tooltip--fixed { position: fixed; } html[data-visual-test] .dnb-tooltip--hide { - animation: hide-tooltip 1ms ease-out 1s forwards; } + animation: hide-tooltip 1ms linear 1s forwards; } .dnb-tooltip__portal { position: absolute; top: 0; diff --git a/packages/dnb-eufemia/src/components/tooltip/style/_tooltip.scss b/packages/dnb-eufemia/src/components/tooltip/style/_tooltip.scss index 225e8ebf6bd..ccfe11b1a4c 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/_tooltip.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/_tooltip.scss @@ -21,9 +21,10 @@ opacity: 0; visibility: hidden; - transition: opacity 200ms ease-out; + transition: opacity 200ms #{$defaultEasing}; &--animate_position { - transition: all 300ms ease-in-out, opacity 200ms ease-out; + transition: all 200ms #{$defaultEasing}, + opacity 200ms #{$defaultEasing}; } &--active { @@ -33,25 +34,25 @@ because of the first "show" we also use animation also, use forwards because of the usage of visibility */ - animation: show-tooltip 200ms ease-out forwards; + animation: show-tooltip 200ms #{$defaultEasing} forwards; } html[data-visual-test] &--active, &--active#{&}--no-animation { - animation: show-tooltip 1ms ease-out forwards; + animation: show-tooltip 1ms #{$defaultEasing} forwards; } &--hide { visibility: visible; - animation: hide-tooltip 200ms ease-in-out forwards; + animation: hide-tooltip 200ms #{$defaultEasing} forwards; } &--hide#{&}--no-animation { - animation: hide-tooltip 1ms ease-out forwards; + animation: hide-tooltip 1ms linear forwards; } &--fixed { position: fixed; } html[data-visual-test] &--hide { // use a delay before hiding, because of visual tests - animation: hide-tooltip 1ms ease-out 1s forwards; + animation: hide-tooltip 1ms linear 1s forwards; } &__portal {