Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Tooltip): use Eufemia cubic-bezier for animations #1552

Merged
merged 1 commit into from
Sep 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1376,29 +1376,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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1390,29 +1390,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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading