@seed-design/css 1.2.10 → 1.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/all.layered.css CHANGED
@@ -1569,8 +1569,7 @@
1569
1569
  top: 0;
1570
1570
  }
1571
1571
 
1572
- .seed-app-bar__root:before {
1573
- content: "";
1572
+ .seed-app-bar__background {
1574
1573
  pointer-events: none;
1575
1574
  z-index: -1;
1576
1575
  position: absolute;
@@ -1668,269 +1667,7 @@
1668
1667
  padding-right: 16px;
1669
1668
  }
1670
1669
 
1671
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1672
- --seed-enter-translate-x: 100%;
1673
- --seed-enter-translate-y: 0;
1674
- --seed-enter-opacity: 1;
1675
- --seed-enter-scale: 1;
1676
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1677
- transform: translate3d(0, 0, 0);
1678
- }
1679
-
1680
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1681
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
1682
- --seed-exit-translate-x: 100%;
1683
- --seed-exit-translate-y: 0;
1684
- --seed-exit-opacity: 1;
1685
- --seed-exit-scale: 1;
1686
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1687
- }
1688
-
1689
- [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1690
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
1691
- --seed-enter-translate-y: 0;
1692
- --seed-enter-opacity: 1;
1693
- --seed-enter-scale: 1;
1694
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1695
- transform: translate3d(0, 0, 0);
1696
- }
1697
-
1698
- [data-swipe-back-state="swiping"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1699
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
1700
- animation: none;
1701
- }
1702
-
1703
- [data-swipe-back-state="canceling"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1704
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1705
- transform: translate3d(0, 0, 0);
1706
- animation: none !important;
1707
- }
1708
-
1709
- [data-swipe-back-state="completing"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1710
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1711
- transform: translate3d(100%, 0, 0);
1712
- animation: none !important;
1713
- }
1714
-
1715
- [data-global-transition-state="enter-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1716
- --seed-enter-translate-x: 0;
1717
- --seed-enter-translate-y: 0;
1718
- --seed-enter-opacity: 0;
1719
- --seed-enter-scale: 1;
1720
- opacity: 1;
1721
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1722
- }
1723
-
1724
- [data-global-transition-state="exit-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1725
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1726
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1727
- --seed-exit-translate-x: 0;
1728
- --seed-exit-translate-y: 0;
1729
- --seed-exit-opacity: 0;
1730
- --seed-exit-scale: 1;
1731
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1732
- }
1733
-
1734
- [data-global-transition-state="enter-done"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1735
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
1736
- --seed-enter-translate-y: 0;
1737
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1738
- --seed-enter-scale: 1;
1739
- opacity: 1;
1740
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1741
- }
1742
-
1743
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1744
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1745
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1746
- animation: none;
1747
- }
1748
-
1749
- [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1750
- opacity: 1;
1751
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1752
- animation: none !important;
1753
- }
1754
-
1755
- [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1756
- opacity: 0;
1757
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1758
- animation: none !important;
1759
- }
1760
-
1761
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1762
- opacity: 1;
1763
- --seed-exit-translate-x: 0;
1764
- --seed-exit-translate-y: 0;
1765
- --seed-exit-opacity: 0;
1766
- --seed-exit-scale: 1;
1767
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1768
- }
1769
-
1770
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1771
- --seed-enter-translate-x: 0;
1772
- --seed-enter-translate-y: 0;
1773
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
1774
- --seed-enter-scale: 1;
1775
- opacity: 1;
1776
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1777
- }
1778
-
1779
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1780
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1781
- --seed-exit-translate-x: 0;
1782
- --seed-exit-translate-y: 0;
1783
- --seed-exit-opacity: 0;
1784
- --seed-exit-scale: 1;
1785
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1786
- }
1787
-
1788
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1789
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1790
- animation: none;
1791
- }
1792
-
1793
- [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1794
- opacity: 0;
1795
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1796
- animation: none !important;
1797
- }
1798
-
1799
- [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1800
- opacity: 1;
1801
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1802
- animation: none !important;
1803
- }
1804
-
1805
- [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1806
- --seed-enter-translate-x: 0;
1807
- --seed-enter-translate-y: 0;
1808
- --seed-enter-opacity: 0;
1809
- --seed-enter-scale: 1;
1810
- opacity: 1;
1811
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1812
- }
1813
-
1814
- [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1815
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1816
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1817
- --seed-exit-translate-x: 0;
1818
- --seed-exit-translate-y: 0;
1819
- --seed-exit-opacity: 0;
1820
- --seed-exit-scale: 1;
1821
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1822
- }
1823
-
1824
- [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1825
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
1826
- --seed-enter-translate-y: 0;
1827
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1828
- --seed-enter-scale: 1;
1829
- opacity: 1;
1830
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1831
- }
1832
-
1833
- [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1834
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1835
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1836
- animation: none;
1837
- }
1838
-
1839
- [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1840
- opacity: 1;
1841
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1842
- animation: none !important;
1843
- }
1844
-
1845
- [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1846
- opacity: 0;
1847
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1848
- animation: none !important;
1849
- }
1850
-
1851
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1852
- opacity: 1;
1853
- --seed-exit-translate-x: 0;
1854
- --seed-exit-translate-y: 0;
1855
- --seed-exit-opacity: 0;
1856
- --seed-exit-scale: 1;
1857
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1858
- }
1859
-
1860
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1861
- --seed-enter-translate-x: 0;
1862
- --seed-enter-translate-y: 0;
1863
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
1864
- --seed-enter-scale: 1;
1865
- opacity: 1;
1866
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1867
- }
1868
-
1869
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1870
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1871
- --seed-exit-translate-x: 0;
1872
- --seed-exit-translate-y: 0;
1873
- --seed-exit-opacity: 0;
1874
- --seed-exit-scale: 1;
1875
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1876
- }
1877
-
1878
- [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1879
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1880
- animation: none;
1881
- }
1882
-
1883
- [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1884
- opacity: 0;
1885
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1886
- animation: none !important;
1887
- }
1888
-
1889
- [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1890
- opacity: 1;
1891
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1892
- animation: none !important;
1893
- }
1894
-
1895
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
1896
- --seed-enter-translate-x: 0;
1897
- --seed-enter-translate-y: 8vh;
1898
- --seed-enter-opacity: 0;
1899
- --seed-enter-scale: 1;
1900
- opacity: 1;
1901
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
1902
- transform: translate3d(0, 0, 0);
1903
- }
1904
-
1905
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
1906
- opacity: 1;
1907
- --seed-exit-translate-x: 0;
1908
- --seed-exit-translate-y: 8vh;
1909
- --seed-exit-opacity: 0;
1910
- --seed-exit-scale: 1;
1911
- animation: .15s linear forwards seed-exit;
1912
- transform: translate3d(0, 0, 0);
1913
- }
1914
-
1915
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
1916
- --seed-enter-translate-x: 0;
1917
- --seed-enter-translate-y: 0;
1918
- --seed-enter-opacity: 0;
1919
- --seed-enter-scale: 1;
1920
- opacity: 1;
1921
- animation: .3s ease-out seed-enter;
1922
- }
1923
-
1924
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
1925
- opacity: 1;
1926
- --seed-exit-translate-x: 0;
1927
- --seed-exit-translate-y: 0;
1928
- --seed-exit-opacity: 0;
1929
- --seed-exit-scale: 1;
1930
- animation: .15s ease-in forwards seed-exit;
1931
- }
1932
-
1933
- .seed-app-bar__root--tone_layer:before {
1670
+ .seed-app-bar__background--tone_layer {
1934
1671
  background: var(--seed-box-background, var(--seed-color-bg-layer-default));
1935
1672
  }
1936
1673
 
@@ -1946,7 +1683,7 @@
1946
1683
  color: var(--seed-icon-color, var(--seed-color-palette-static-white));
1947
1684
  }
1948
1685
 
1949
- .seed-app-bar__root--divider_true:before {
1686
+ .seed-app-bar__background--divider_true {
1950
1687
  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
1951
1688
  }
1952
1689
 
@@ -2002,106 +1739,6 @@
2002
1739
  display: flex;
2003
1740
  }
2004
1741
 
2005
- [data-global-transition-state="enter-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2006
- --seed-enter-translate-x: 25%;
2007
- --seed-enter-translate-y: 0;
2008
- --seed-enter-opacity: 0;
2009
- --seed-enter-scale: 1;
2010
- opacity: 1;
2011
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2012
- transform: translate3d(0, 0, 0);
2013
- }
2014
-
2015
- [data-global-transition-state="exit-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2016
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
2017
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
2018
- --seed-exit-translate-x: 25%;
2019
- --seed-exit-translate-y: 0;
2020
- --seed-exit-opacity: 0;
2021
- --seed-exit-scale: 1;
2022
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2023
- }
2024
-
2025
- [data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2026
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
2027
- --seed-enter-translate-y: 0;
2028
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
2029
- --seed-enter-scale: 1;
2030
- opacity: 1;
2031
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2032
- transform: translate3d(0, 0, 0);
2033
- }
2034
-
2035
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2036
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
2037
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
2038
- animation: none;
2039
- }
2040
-
2041
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2042
- opacity: 1;
2043
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2044
- transform: translate3d(0, 0, 0);
2045
- animation: none !important;
2046
- }
2047
-
2048
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2049
- opacity: 0;
2050
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2051
- transform: translate3d(25%, 0, 0);
2052
- animation: none !important;
2053
- }
2054
-
2055
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2056
- opacity: 1;
2057
- --seed-exit-translate-x: -25%;
2058
- --seed-exit-translate-y: 0;
2059
- --seed-exit-opacity: 0;
2060
- --seed-exit-scale: 1;
2061
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2062
- transform: translate3d(0, 0, 0);
2063
- }
2064
-
2065
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2066
- --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .15);
2067
- --seed-enter-translate-y: 0;
2068
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
2069
- --seed-enter-scale: 1;
2070
- opacity: 1;
2071
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2072
- transform: translate3d(0, 0, 0);
2073
- }
2074
-
2075
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2076
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
2077
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
2078
- --seed-exit-translate-x: -25%;
2079
- --seed-exit-translate-y: 0;
2080
- --seed-exit-opacity: 0;
2081
- --seed-exit-scale: 1;
2082
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2083
- }
2084
-
2085
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2086
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
2087
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
2088
- animation: none;
2089
- }
2090
-
2091
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2092
- opacity: 0;
2093
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2094
- transform: translate3d(-25%, 0, 0);
2095
- animation: none !important;
2096
- }
2097
-
2098
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2099
- opacity: 1;
2100
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2101
- transform: translate3d(0, 0, 0);
2102
- animation: none !important;
2103
- }
2104
-
2105
1742
  .seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
2106
1743
  color: var(--seed-color-fg-neutral);
2107
1744
  }
@@ -2185,143 +1822,11 @@
2185
1822
  transform: translate3d(0, 0, 0);
2186
1823
  }
2187
1824
 
2188
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2189
- --seed-enter-translate-x: 100%;
2190
- --seed-enter-translate-y: 0;
2191
- --seed-enter-opacity: 1;
2192
- --seed-enter-scale: 1;
2193
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
2194
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2195
- }
2196
-
2197
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2198
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
2199
- --seed-exit-translate-x: 100%;
2200
- --seed-exit-translate-y: 0;
2201
- --seed-exit-opacity: 1;
2202
- --seed-exit-scale: 1;
2203
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2204
- }
2205
-
2206
- [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2207
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
2208
- --seed-enter-translate-y: 0;
2209
- --seed-enter-opacity: 1;
2210
- --seed-enter-scale: 1;
2211
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
2212
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2213
- }
2214
-
2215
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2216
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
2217
- animation: none;
2218
- }
2219
-
2220
- [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2221
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2222
- transform: translate3d(0, 0, 0);
2223
- animation: none !important;
2224
- }
2225
-
2226
- [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2227
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2228
- transform: translate3d(100%, 0, 0);
2229
- animation: none !important;
2230
- }
2231
-
2232
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2233
- --seed-exit-translate-x: -30%;
2234
- --seed-exit-translate-y: 0;
2235
- --seed-exit-opacity: 1;
2236
- --seed-exit-scale: 1;
2237
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2238
- transform: translate3d(0, 0, 0);
2239
- }
2240
-
2241
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2242
- --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
2243
- --seed-enter-translate-y: 0;
2244
- --seed-enter-opacity: 1;
2245
- --seed-enter-scale: 1;
2246
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2247
- transform: translate3d(0, 0, 0);
2248
- }
2249
-
2250
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2251
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
2252
- --seed-exit-translate-x: -30%;
2253
- --seed-exit-translate-y: 0;
2254
- --seed-exit-opacity: 1;
2255
- --seed-exit-scale: 1;
2256
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2257
- }
2258
-
2259
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2260
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
2261
- animation: none;
2262
- }
2263
-
2264
- [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2265
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2266
- transform: translate3d(-30%, 0, 0);
2267
- animation: none !important;
2268
- }
2269
-
2270
- [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2271
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2272
- transform: translate3d(0, 0, 0);
2273
- animation: none !important;
2274
- }
2275
-
2276
1825
  .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
2277
1826
  background: var(--seed-color-bg-overlay);
2278
1827
  height: 100%;
2279
1828
  }
2280
1829
 
2281
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2282
- --seed-enter-translate-x: 0;
2283
- --seed-enter-translate-y: 0;
2284
- --seed-enter-opacity: 0;
2285
- --seed-enter-scale: 1;
2286
- opacity: 1;
2287
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2288
- }
2289
-
2290
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2291
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2292
- --seed-exit-translate-x: 0;
2293
- --seed-exit-translate-y: 0;
2294
- --seed-exit-opacity: 0;
2295
- --seed-exit-scale: 1;
2296
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2297
- }
2298
-
2299
- [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2300
- --seed-enter-translate-x: 0;
2301
- --seed-enter-translate-y: 0;
2302
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2303
- --seed-enter-scale: 1;
2304
- opacity: 1;
2305
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2306
- }
2307
-
2308
- [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2309
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2310
- animation: none;
2311
- }
2312
-
2313
- [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2314
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2315
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2316
- animation: none !important;
2317
- }
2318
-
2319
- [data-swipe-back-state="completing"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2320
- opacity: 0;
2321
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2322
- animation: none !important;
2323
- }
2324
-
2325
1830
  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
2326
1831
  --z-index-dim: calc(var(--z-index-base) + 0);
2327
1832
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -2334,50 +1839,10 @@
2334
1839
  height: 160px;
2335
1840
  }
2336
1841
 
2337
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2338
- --seed-enter-translate-x: 0;
2339
- --seed-enter-translate-y: 0;
2340
- --seed-enter-opacity: 0;
2341
- --seed-enter-scale: 1;
2342
- opacity: 1;
2343
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
2344
- transform: translate3d(0, -8vh, 0);
2345
- }
2346
-
2347
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2348
- opacity: 1;
2349
- --seed-exit-translate-x: 0;
2350
- --seed-exit-translate-y: 0;
2351
- --seed-exit-opacity: 0;
2352
- --seed-exit-scale: 1;
2353
- animation: .15s linear forwards seed-exit;
2354
- transform: translate3d(0, -8vh, 0);
2355
- }
2356
-
2357
1842
  .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
2358
1843
  transform: translate3d(0, 0, 0);
2359
1844
  }
2360
1845
 
2361
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2362
- --seed-enter-translate-x: 0;
2363
- --seed-enter-translate-y: 8vh;
2364
- --seed-enter-opacity: 0;
2365
- --seed-enter-scale: 1;
2366
- opacity: 1;
2367
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
2368
- transform: translate3d(0, 0, 0);
2369
- }
2370
-
2371
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2372
- opacity: 1;
2373
- --seed-exit-translate-x: 0;
2374
- --seed-exit-translate-y: 8vh;
2375
- --seed-exit-opacity: 0;
2376
- --seed-exit-scale: 1;
2377
- animation: .15s linear forwards seed-exit;
2378
- transform: translate3d(0, 0, 0);
2379
- }
2380
-
2381
1846
  .seed-app-screen__root--transitionStyle_fadeIn {
2382
1847
  --z-index-dim: calc(var(--z-index-base) + 0);
2383
1848
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -2389,24 +1854,6 @@
2389
1854
  display: none;
2390
1855
  }
2391
1856
 
2392
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
2393
- --seed-enter-translate-x: 0;
2394
- --seed-enter-translate-y: 0;
2395
- --seed-enter-opacity: 0;
2396
- --seed-enter-scale: 1;
2397
- opacity: 1;
2398
- animation: .3s ease-out seed-enter;
2399
- }
2400
-
2401
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
2402
- opacity: 1;
2403
- --seed-exit-translate-x: 0;
2404
- --seed-exit-translate-y: 0;
2405
- --seed-exit-opacity: 0;
2406
- --seed-exit-scale: 1;
2407
- animation: .15s ease-in forwards seed-exit;
2408
- }
2409
-
2410
1857
  .seed-app-screen__layer--layerOffsetTop_safeArea {
2411
1858
  padding-top: var(--seed-safe-area-top);
2412
1859
  }