@seed-design/css 1.2.6 → 1.2.7

package/all.css

@@ -1701,6 +1701,96 @@
   animation: none !important;
 }
 
+[data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+  opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+  opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  animation: none;
+}
+
+[data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  opacity: 1;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  opacity: 0;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  opacity: 1;
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  animation: none;
+}
+
+[data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: 0;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: 1;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
 [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
   --seed-enter-translate-x: 0;
   --seed-enter-translate-y: 8vh;
@@ -2418,6 +2508,18 @@
   --badge-offset: 30px;
 }
 
+.seed-avatar__root--size_56 {
+  --avatar-size: 56px;
+  --avatar-stroke-width: 1px;
+  --badge-mask-size: 24px;
+  --badge-mask-offset: 34px;
+}
+
+.seed-avatar__badge--size_56 {
+  --badge-size: 20px;
+  --badge-offset: 36px;
+}
+
 .seed-avatar__root--size_64 {
   --avatar-size: 64px;
   --avatar-stroke-width: 1px;
@@ -2543,6 +2645,15 @@
   box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
 }
 
+.seed-avatar-stack__item--size_56:not(:first-child) {
+  margin-left: -13px;
+}
+
+.seed-avatar-stack__item--size_56 {
+  clip-path: inset(-3px);
+  box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+}
+
 .seed-avatar-stack__item--size_64:not(:first-child) {
   margin-left: -16px;
 }

package/all.layered.css

@@ -1798,6 +1798,96 @@
     animation: none !important;
   }
 
+  [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
   [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 8vh;
@@ -2515,6 +2605,18 @@
     --badge-offset: 30px;
   }
 
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
   .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;
@@ -2640,6 +2742,15 @@
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
   }
 
+  .seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px;
+  }
+
+  .seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  }
+
   .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px;
   }