@itwin/itwinui-css 0.53.1 → 0.53.2

package/css/all.css

@@ -5493,7 +5493,7 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page{
-    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
   }
 }
 .iui-modal-full-page > .iui-modal-dialog{
@@ -5501,7 +5501,7 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
   }
 }
 .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
@@ -5509,14 +5509,14 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.4s ease-out;
+    transition:transform 0.3s ease-out;
   }
 }
-.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
 }
@@ -9617,6 +9617,7 @@ div.iui-tile-thumbnail-picture{
   position:fixed;
   text-align:center;
   left:50%;
+  opacity:0;
   top:22px;
   transform:translateX(-50%) translateY(-170%);
   transition:background-color 0.2s ease-in-out;
@@ -9640,7 +9641,7 @@ div.iui-tile-thumbnail-picture{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link{
-    transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
+    transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
   }
 }
 .iui-skip-to-content-link:hover{
@@ -9655,12 +9656,13 @@ div.iui-tile-thumbnail-picture{
   }
 }
 .iui-skip-to-content-link:focus{
+  opacity:1;
   transform:translateX(-50%) translateY(0);
   box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link:focus{
-    transition:transform 0.2s ease-in-out;
+    transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   }
 }
 

package/css/modal.css

@@ -95,7 +95,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page{
-    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
   }
 }
 .iui-modal-full-page > .iui-modal-dialog{
@@ -103,7 +103,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
   }
 }
 .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
@@ -111,14 +111,14 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.4s ease-out;
+    transition:transform 0.3s ease-out;
   }
 }
-.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
 }

package/css/skip-to-content.css

@@ -17,6 +17,7 @@
   position:fixed;
   text-align:center;
   left:50%;
+  opacity:0;
   top:22px;
   transform:translateX(-50%) translateY(-170%);
   transition:background-color 0.2s ease-in-out;
@@ -40,7 +41,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link{
-    transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
+    transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
   }
 }
 .iui-skip-to-content-link:hover{
@@ -55,11 +56,12 @@
   }
 }
 .iui-skip-to-content-link:focus{
+  opacity:1;
   transform:translateX(-50%) translateY(0);
   box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link:focus{
-    transition:transform 0.2s ease-in-out;
+    transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.53.1",
+  "version": "0.53.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/modal/modal.scss

@@ -91,6 +91,9 @@
 }
 
 @mixin iui-modal-full-page {
+  $iui-full-page-modal-slide-in-speed: 0.3s;
+  $iui-full-page-modal-slide-out-speed: 0.25s;
+
   > .iui-modal-dialog {
     display: flex;
     flex-direction: column;
@@ -107,21 +110,21 @@
 
   // #region Full Page Modal Animations for CSS
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed ease-out $iui-speed-fast;
+    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
   }
 
   > .iui-modal-dialog {
     transform: translateY(100%);
     @media (prefers-reduced-motion: no-preference) {
       transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-        transform $iui-speed ease-in;
+        transform $iui-full-page-modal-slide-out-speed ease-in;
     }
   }
 
   &.iui-modal-visible > .iui-modal-dialog {
     transform: translateY(0);
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed ease-out;
+      transition: transform $iui-full-page-modal-slide-in-speed ease-out;
     }
   }
   // #endregion Full Page Modal Animations for CSS
@@ -129,12 +132,12 @@
 
 @mixin iui-modal-animation {
   // Full Page Modal Animations for React
-  &-enter .iui-modal .iui-modal-dialog {
+  &-enter .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &-enter-active .iui-modal .iui-modal-dialog {
+  &-enter-active .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(0);
     opacity: 1;
   }

package/scss/skip-to-content/skip-to-content.scss

@@ -15,12 +15,13 @@
   position: fixed;
   text-align: center;
   left: 50%;
+  opacity: 0;
   top: $iui-baseline * 2;
   transform: translateX(-50%) translateY(-170%);
   transition: background-color $iui-speed-fast ease-in-out;
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color $iui-speed-fast ease-in-out, transform $iui-speed-slow ease-in-out,
-      box-shadow $iui-speed-fast ease-in-out;
+    transition: opacity $iui-speed-slow ease-in-out, background-color $iui-speed-slow ease-in-out,
+      transform $iui-speed-slow ease-in-out, box-shadow $iui-speed-slow ease-in-out;
   }
 
   &:hover {
@@ -28,10 +29,12 @@
   }
 
   &:focus {
+    opacity: 1;
     transform: translateX(-50%) translateY(0);
     box-shadow: $iui-elevation-16;
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed-fast ease-in-out;
+      transition: opacity $iui-speed-instant ease-in-out, background-color $iui-speed-fast ease-in-out,
+        transform $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
     }
   }
 }