@seed-design/css 1.1.8 → 1.1.9-alpha-20251125084640
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.css +30 -7
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/app-bar.css +1 -6
- package/recipes/app-screen.css +22 -0
- package/recipes/app-screen.d.ts +4 -0
- package/recipes/app-screen.mjs +27 -2
- package/recipes/avatar.css +3 -0
package/all.css
CHANGED
|
@@ -1579,13 +1579,7 @@
|
|
|
1579
1579
|
}
|
|
1580
1580
|
|
|
1581
1581
|
.seed-app-bar__root--tone_transparent {
|
|
1582
|
-
|
|
1583
|
-
--transparent-gradient-dim-background: linear-gradient(180deg, #00000059 0%, #0000 100%);
|
|
1584
|
-
}
|
|
1585
|
-
|
|
1586
|
-
.seed-app-bar__root--tone_transparent:before {
|
|
1587
|
-
height: var(--transparent-gradient-dim-height);
|
|
1588
|
-
background: var(--transparent-gradient-dim-background);
|
|
1582
|
+
background-color: #0000;
|
|
1589
1583
|
}
|
|
1590
1584
|
|
|
1591
1585
|
.seed-app-bar__icon--tone_transparent {
|
|
@@ -2035,6 +2029,32 @@
|
|
|
2035
2029
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
2036
2030
|
}
|
|
2037
2031
|
|
|
2032
|
+
.seed-app-screen__layer--tone_transparent-gradient_true:before {
|
|
2033
|
+
content: "";
|
|
2034
|
+
margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
|
|
2035
|
+
height: calc(66px + 400px + var(--seed-safe-area-top));
|
|
2036
|
+
pointer-events: none;
|
|
2037
|
+
z-index: 1;
|
|
2038
|
+
background: linear-gradient(#0003 0%, #00000059 400px, #0000 100%);
|
|
2039
|
+
display: block;
|
|
2040
|
+
position: sticky;
|
|
2041
|
+
top: 0;
|
|
2042
|
+
left: 0;
|
|
2043
|
+
right: 0;
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
|
|
2047
|
+
transform: translateY(-400px);
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea:before {
|
|
2051
|
+
transform: translateY(calc(-400px - var(--seed-safe-area-top)));
|
|
2052
|
+
}
|
|
2053
|
+
|
|
2054
|
+
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar:before {
|
|
2055
|
+
transform: translateY(calc(-400px - var(--app-bar-offset)));
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2038
2058
|
.seed-article {
|
|
2039
2059
|
user-select: text;
|
|
2040
2060
|
word-break: normal;
|
|
@@ -2073,6 +2093,7 @@
|
|
|
2073
2093
|
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
2074
2094
|
position: absolute;
|
|
2075
2095
|
inset: 0;
|
|
2096
|
+
transform: translateZ(0);
|
|
2076
2097
|
mask-repeat: no-repeat;
|
|
2077
2098
|
mask-composite: subtract;
|
|
2078
2099
|
}
|
|
@@ -2091,6 +2112,7 @@
|
|
|
2091
2112
|
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
2092
2113
|
display: block;
|
|
2093
2114
|
overflow: hidden;
|
|
2115
|
+
transform: translateZ(0);
|
|
2094
2116
|
mask-repeat: no-repeat;
|
|
2095
2117
|
mask-composite: subtract;
|
|
2096
2118
|
}
|
|
@@ -2116,6 +2138,7 @@
|
|
|
2116
2138
|
align-items: center;
|
|
2117
2139
|
display: flex;
|
|
2118
2140
|
overflow: hidden;
|
|
2141
|
+
transform: translateZ(0);
|
|
2119
2142
|
mask-repeat: no-repeat;
|
|
2120
2143
|
mask-composite: subtract;
|
|
2121
2144
|
}
|