feat: update chart tooltip animation

telerik · Dec 15, 2022 · 4c364a0 · 4c364a0
1 parent d4409ef
commit 4c364a0
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss
@@ -94,8 +94,6 @@ $chart-title-font-size: 1.143em !default;
 $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
-$chart-inactive: rgba( $body-text, .5 ) !default;
-
 /// The color of the Chart grid lines (major).
 /// @group charts
 $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
@@ -104,10 +102,13 @@ $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 /// @group charts
 $chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
+$chart-inactive: rgba( $body-text, .5 ) !default;
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
 $chart-line-inactive-opacity: .3 !default;
 
+$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+
 $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;

diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss
@@ -94,8 +94,6 @@ $chart-title-font-size: 1.143em !default;
 $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
-$chart-inactive: rgba( $body-text, .5 ) !default;
-
 /// The color of the Chart grid lines (major).
 /// @group charts
 $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
@@ -104,10 +102,13 @@ $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 /// @group charts
 $chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
+$chart-inactive: rgba( $body-text, .5 ) !default;
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
 $chart-line-inactive-opacity: .1 !default;
 
+$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+
 $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;

diff --git a/packages/default/scss/dataviz/_layout.scss b/packages/default/scss/dataviz/_layout.scss
@@ -62,7 +62,7 @@
 
     .k-chart-tooltip-wrapper .k-animation-container-shown,
     .k-chart-tooltip-wrapper.k-animation-container-shown {
-        transition: left ease-in 80ms, top ease-in 80ms;
+        transition: $chart-tooltip-transition;
     }
 
     .k-sparkline-tooltip-wrapper,

diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss
@@ -94,8 +94,6 @@ $chart-title-font-size: 1.143em !default;
 $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
-$chart-inactive: rgba( $body-text, .5 ) !default;
-
 /// The color of the Chart grid lines (major).
 /// @group charts
 $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
@@ -104,10 +102,13 @@ $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 /// @group charts
 $chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
+$chart-inactive: rgba( $body-text, .5 ) !default;
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
 $chart-line-inactive-opacity: .3 !default;
 
+$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+
 $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;

diff --git a/packages/material/scss/dataviz/_variables.scss b/packages/material/scss/dataviz/_variables.scss
@@ -94,8 +94,6 @@ $chart-title-font-size: 1.143em !default;
 $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
-$chart-inactive: rgba( $component-text, .5 ) !default;
-
 /// The color of the Chart grid lines (major).
 /// @group charts
 $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
@@ -104,10 +102,13 @@ $chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 /// @group charts
 $chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
+$chart-inactive: rgba( $component-text, .5 ) !default;
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
 $chart-line-inactive-opacity: .3 !default;
 
+$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+
 $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;