PR: LIBRARY: Animation: Focus, Hover, Selected State (#7731)

surveyjs · Jan 30, 2024 · 01351a9 · 01351a9
1 parent 9023fc3
commit 01351a9
Show file tree

Hide file tree

Showing 68 changed files with 162 additions and 35 deletions.
diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -55,6 +55,7 @@
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: background-color $transition-duration, color $transition-duration;
 }
 
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {

diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -93,6 +93,8 @@
   box-sizing: border-box;
   font-weight: 600;
   margin-left: calcSize(0);
+  transition: outline $transition-duration, background $transition-duration;
+  outline: calcSize(0.25) solid transparent;
 
   svg {
     fill: $font-questiontitle-color;

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -13,6 +13,7 @@ export var surveyCss: any = {
 export var defaultV2Css = {
   root: "sd-root-modern",
   rootMobile: "sd-root-modern--mobile",
+  rootAnimationDisabled: "sd-root-modern--animation-disabled",
   rootReadOnly: "sd-root--readonly",
   rootCompact: "sd-root--compact",
   rootFitToContainer: "sd-root-modern--full-container",

diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
@@ -14,6 +14,7 @@
   font-size: $font-questiontitle-size;
   line-height: multiply(1.5, $font-questiontitle-size);
   outline: none;
+  transition: background-color $transition-duration;
 }
 
 .sd-action--negative {
@@ -39,6 +40,7 @@
 
   use {
     fill: $font-questiondescription-color;
+    transition: fill $transition-duration;
   }
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss
@@ -6,10 +6,11 @@
   padding: calcSize(0.5);
   background-color: $editor-background;
   border-radius: calcSize(12.5);
-  box-shadow: $shadow-inner;
+  box-shadow: $shadow-inner, 0 0 0 0px $primary;
+  transition: box-shadow $transition-duration;
 
   &.sd-boolean--allowhover:focus-within {
-    box-shadow: 0 0 0 2px $primary;
+    box-shadow: $shadow-inner-reset, 0 0 0 2px $primary;
   }
 }
 
@@ -86,11 +87,13 @@
 
 .sd-boolean__thumb-ghost {
   z-index: 1;
+  border-radius: calcSize(12.5);
+  background-color: transparent;
+  transition: background-color $transition-duration;
 }
 
 .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
   background-color: $background-dim-dark;
-  border-radius: calcSize(12.5);
 }
 
 .sd-boolean--error {

diff --git a/src/defaultV2-theme/blocks/sd-button.scss b/src/defaultV2-theme/blocks/sd-button.scss
@@ -6,7 +6,6 @@
   -moz-appearance: none;
   padding: calcSize(2) calcSize(6);
   background: $question-background;
-  box-shadow: $shadow-small;
   border-radius: calcCornerRadius(1);
   cursor: pointer;
 
@@ -19,6 +18,9 @@
   color: $primary;
   border: none;
   outline: none;
+
+  box-shadow: $shadow-small, 0 0 0 0px $primary;
+  transition: box-shadow $transition-duration, background $transition-duration;
 }
 
 .sd-btn--small {
@@ -31,7 +33,7 @@
 }
 
 .sd-btn:focus-visible {
-  box-shadow: 0 0 0 2px $primary;
+  box-shadow: $shadow-small-reset, 0 0 0 2px $primary;
 }
 
 .sd-btn:disabled {

diff --git a/src/defaultV2-theme/blocks/sd-checkbox.scss b/src/defaultV2-theme/blocks/sd-checkbox.scss
@@ -8,7 +8,7 @@
 
   use {
     fill: transparent;
-    //transition: fill 250ms;
+    transition: fill $transition-duration;
   }
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-context-btn.scss b/src/defaultV2-theme/blocks/sd-context-btn.scss
@@ -18,6 +18,7 @@
 
   use {
     fill: $foreground-light;
+    transition: fill $transition-duration;
   }
 
   cursor: pointer;

diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -86,7 +86,7 @@
 }
 
 .sd-input.sd-dropdown:focus-within {
-  box-shadow: 0 0 0 2px $primary;
+  box-shadow: $shadow-inner-reset, 0 0 0 2px $primary;
 }
 
 .sd-input.sd-dropdown:focus-within {

diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
@@ -200,11 +200,7 @@
   img:hover+.sd-file__remove-file-button,
   svg:hover+.sd-file__remove-file-button,
   .sd-file__remove-file-button:hover {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    opacity: 1;
   }
 }
 
@@ -234,7 +230,13 @@
 }
 
 .sd-file__remove-file-button {
-  display: none;
+  display: block;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity $transition-duration;
 }
 
 .sd-file__decorator--error {

diff --git a/src/defaultV2-theme/blocks/sd-imagepicker.scss b/src/defaultV2-theme/blocks/sd-imagepicker.scss
@@ -49,7 +49,8 @@
 }
 
 .sd-imagepicker__check-decorator {
-  display: none;
+  display: block;
+  opacity: 0;
   position: absolute;
   top: calcSize(1);
   right: calcSize(1);
@@ -58,6 +59,7 @@
   border-radius: 100%;
   background-color: $background;
   z-index: 1;
+  transition: opacity $transition-duration;
 }
 
 .sd-imagepicker__check-icon {
@@ -69,7 +71,7 @@
 }
 
 .sd-imagepicker__item--checked .sd-imagepicker__check-decorator {
-  display: block;
+  opacity: 1;
 }
 
 .sd-imagepicker__item--error .sd-imagepicker__image-container::before {
@@ -94,6 +96,7 @@
   display: block;
   box-sizing: border-box;
   max-width: 100%;
+  transition: opacity $transition-duration;
 }
 
 .sd-imagepicker__text {

diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss
@@ -17,7 +17,7 @@
   border-radius: $editor-corner-radius;
   text-align: start;
   box-shadow: $shadow-inner, 0 0 0 0px $primary;
-  //transition: box-shadow 250ms;
+  transition: box-shadow $transition-duration;
 }
 
 .sd-input:focus {

diff --git a/src/defaultV2-theme/blocks/sd-item.scss b/src/defaultV2-theme/blocks/sd-item.scss
@@ -16,7 +16,7 @@
   flex-shrink: 0;
   margin-top: calc(calc(multiply(1.5, $font-editorfont-size) - calcSize(3)) / 2);
   box-shadow: $shadow-inner, 0 0 0 0px $primary;
-  //transition: box-shadow 250ms, background 250ms;
+  transition: box-shadow $transition-duration, background $transition-duration;
 }
 
 .sd-radio__decorator:after {

diff --git a/src/defaultV2-theme/blocks/sd-multipletext.scss b/src/defaultV2-theme/blocks/sd-multipletext.scss
@@ -16,7 +16,7 @@
 }
 
 .sd-multipletext__item-container.sd-input:focus-within {
-  box-shadow: 0 0 0 2px $primary;
+  box-shadow: $shadow-inner-reset, 0 0 0 2px $primary;
 }
 
 .sd-multipletext__item-container {

diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -196,6 +196,8 @@
     color: $font-questiondescription-color;
     overflow-x: hidden;
     white-space: nowrap;
+    box-shadow: inset 0px 0px 0px $primary;
+    transition: box-shadow $transition-duration;
 
     &:hover,
     &:focus-visible {

diff --git a/src/defaultV2-theme/blocks/sd-radio.scss b/src/defaultV2-theme/blocks/sd-radio.scss
@@ -8,7 +8,7 @@
     height: calcSize(1);
     border-radius: 50%;
     background-color: transparent;
-    //transition: background-color 250ms;
+    transition: background-color $transition-duration;
   }
 }
 .sd-radio--checked .sd-radio__decorator:after {

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -105,7 +105,6 @@
 .sd-rating__item {
   position: relative;
   background: $question-background;
-  box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   white-space: nowrap;
   padding: calcSize(0.5) calcSize(2.5);
@@ -116,10 +115,12 @@
   box-sizing: border-box;
   min-width: calcSize(6);
   text-align: center;
-  border: none;
+  border: 0px solid transparent;
   color: $foreground;
   fill: $foreground;
   font-size: calcFontSize(1);
+  box-shadow: $shadow-small, inset 0 0 0 0px $background;
+  transition: border $transition-duration, box-shadow $transition-duration, background-color $transition-duration;
 }
 
 .sd-rating__item--fixed-size {
@@ -172,7 +173,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
 }
 
 .sd-rating__item--selected:focus-within {
-  box-shadow: inset 0 0 0 2px $background;
+  box-shadow: $shadow-small-reset, inset 0 0 0 2px $background;
 }
 
 .sd-rating__item-smiley {
@@ -186,6 +187,8 @@ legend+sv-ng-rating-item+.sd-rating__item {
   border: 2px solid $border;
   color: $foreground;
   fill: $border;
+  box-shadow: $shadow-small-reset, inset 0 0 0 0px $background;
+  transition: border $transition-duration, box-shadow $transition-duration, background-color $transition-duration;
 
   svg {
     display: block;
@@ -214,6 +217,10 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   margin-inline-start: 2px;
 }
 
+.sd-rating__item-smiley--scale-colored {
+  transition: border $transition-duration, box-shadow $transition-duration, opacity $transition-duration, background-color $transition-duration;
+}
+
 .sd-rating__item-smiley--error {
   background-color: $red-light;
   border-color: transparent;
@@ -250,7 +257,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley--selected:focus-within {
-  box-shadow: inset 0 0 0 2px $background;
+  box-shadow: $shadow-small-reset, inset 0 0 0 2px $background;
 }
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
@@ -288,14 +295,20 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
   svg {
     stroke: $border;
-    fill: none;
+    fill: transparent;
     width: calcSize(6);
     height: calcSize(6);
     display: block;
+    position: absolute;
+    transition: stroke $transition-duration, opacity $transition-duration, fill $transition-duration;
+  }
+
+  .sv-star {
+    opacity: 1;
   }
 
   .sv-star-2 {
-    display: none;
+    opacity: 0;
   }
 }
 
@@ -311,7 +324,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
 .sd-rating__item-star--selected {
   svg {
-    stroke: none;
+    stroke: transparent;
     fill: $primary;
   }
 }
@@ -342,13 +355,13 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 .sd-rating__item-star:focus-within {
   svg {
     stroke: $primary;
-    fill: none;
+    fill: transparent;
   }
 }
 
 .sd-rating__item-star--unhighlighted {
   svg {
-    stroke: none;
+    stroke: transparent;
     fill: $border;
   }
 }
@@ -374,11 +387,11 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   }
 
   .sv-star {
-    display: none;
+    opacity: 0;
   }
 
   .sv-star-2 {
-    display: block;
+    opacity: 1;
   }
 }
 
@@ -392,6 +405,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   display: inline-block;
   border: 2px solid transparent;
   box-sizing: border-box;
+  transition: color $transition-duration;
 
   &.sd-rating__min-text,
   &.sd-rating__max-text {

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -288,13 +288,15 @@
   background: transparent;
   border-radius: calcSize(2);
   padding: calcSize(1);
+  transition: background $transition-duration;
 
   svg {
     @include useEditorFontSize;
     display: block;
     width: multiply(1, $font-editorfont-size);
     height: multiply(1, $font-editorfont-size);
     fill: $font-questiondescription-color;
+    transition: fill $transition-duration;
   }
 
   &:hover,
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
       use {
         fill: transparent;
-        //transition: fill 250ms;
+        transition: fill $transition-duration;
       }
     }
@@ Expand Down @@