@seed-design/css 2.3.0 → 2.3.2
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/README.md +5 -0
- package/all.css +18 -2
- package/all.layered.css +18 -2
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/avatar.css +11 -1
- package/recipes/avatar.layered.css +9 -1
- package/recipes/image-frame.css +11 -1
- package/recipes/image-frame.layered.css +9 -1
- package/vars/component/menu-sheet-item.d.ts +2 -6
- package/vars/component/menu-sheet-item.mjs +2 -6
package/README.md
CHANGED
|
@@ -2,3 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
CSS implementation of Seed Design, providing design tokens and component styles and theming codes.
|
|
4
4
|
|
|
5
|
+
## Stability
|
|
6
|
+
|
|
7
|
+
`@seed-design/css/vars/component/typography`를 제외한 `@seed-design/css/vars/component/*` 경로는 SemVer 보장 대상이 아닙니다.
|
|
8
|
+
|
|
9
|
+
이 경로의 변수들은 rootage component spec에서 생성되는 컴포넌트 구현용 값이며, spec 변경에 따라 minor 또는 patch 버전에서도 이름이나 구조가 바뀔 수 있습니다. 앱이나 라이브러리의 공개 API, 런타임 로직에서 직접 의존하지 않는 것을 권장합니다.
|
package/all.css
CHANGED
|
@@ -2318,6 +2318,7 @@
|
|
|
2318
2318
|
border-radius: var(--seed-radius-full);
|
|
2319
2319
|
width: var(--avatar-size);
|
|
2320
2320
|
height: var(--avatar-size);
|
|
2321
|
+
isolation: isolate;
|
|
2321
2322
|
justify-content: center;
|
|
2322
2323
|
align-items: center;
|
|
2323
2324
|
display: inline-flex;
|
|
@@ -2363,11 +2364,16 @@
|
|
|
2363
2364
|
mask-composite: subtract;
|
|
2364
2365
|
}
|
|
2365
2366
|
|
|
2366
|
-
.seed-avatar__image
|
|
2367
|
+
.seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
|
|
2367
2368
|
display: none;
|
|
2368
2369
|
}
|
|
2369
2370
|
|
|
2371
|
+
.seed-avatar__image:not([data-loading-state="loaded"]) {
|
|
2372
|
+
pointer-events: none;
|
|
2373
|
+
}
|
|
2374
|
+
|
|
2370
2375
|
.seed-avatar__fallback {
|
|
2376
|
+
z-index: -1;
|
|
2371
2377
|
object-fit: cover;
|
|
2372
2378
|
border-radius: var(--seed-radius-full);
|
|
2373
2379
|
width: 100%;
|
|
@@ -2383,6 +2389,8 @@
|
|
|
2383
2389
|
justify-content: center;
|
|
2384
2390
|
align-items: center;
|
|
2385
2391
|
display: flex;
|
|
2392
|
+
position: absolute;
|
|
2393
|
+
inset: 0;
|
|
2386
2394
|
overflow: hidden;
|
|
2387
2395
|
transform: translateZ(0);
|
|
2388
2396
|
mask-repeat: no-repeat;
|
|
@@ -5733,6 +5741,7 @@
|
|
|
5733
5741
|
|
|
5734
5742
|
.seed-image-frame__root {
|
|
5735
5743
|
border-radius: inherit;
|
|
5744
|
+
isolation: isolate;
|
|
5736
5745
|
position: relative;
|
|
5737
5746
|
overflow: hidden;
|
|
5738
5747
|
}
|
|
@@ -5745,13 +5754,20 @@
|
|
|
5745
5754
|
display: block;
|
|
5746
5755
|
}
|
|
5747
5756
|
|
|
5748
|
-
.seed-image-frame__content
|
|
5757
|
+
.seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
|
|
5749
5758
|
display: none;
|
|
5750
5759
|
}
|
|
5751
5760
|
|
|
5761
|
+
.seed-image-frame__content:not([data-loading-state="loaded"]) {
|
|
5762
|
+
pointer-events: none;
|
|
5763
|
+
}
|
|
5764
|
+
|
|
5752
5765
|
.seed-image-frame__fallback {
|
|
5766
|
+
z-index: -1;
|
|
5753
5767
|
width: 100%;
|
|
5754
5768
|
height: 100%;
|
|
5769
|
+
position: absolute;
|
|
5770
|
+
inset: 0;
|
|
5755
5771
|
}
|
|
5756
5772
|
|
|
5757
5773
|
.seed-image-frame__fallback[data-loading-state="loaded"] {
|
package/all.layered.css
CHANGED
|
@@ -2567,6 +2567,7 @@
|
|
|
2567
2567
|
border-radius: var(--seed-radius-full);
|
|
2568
2568
|
width: var(--avatar-size);
|
|
2569
2569
|
height: var(--avatar-size);
|
|
2570
|
+
isolation: isolate;
|
|
2570
2571
|
justify-content: center;
|
|
2571
2572
|
align-items: center;
|
|
2572
2573
|
display: inline-flex;
|
|
@@ -2612,11 +2613,16 @@
|
|
|
2612
2613
|
mask-composite: subtract;
|
|
2613
2614
|
}
|
|
2614
2615
|
|
|
2615
|
-
.seed-avatar__image
|
|
2616
|
+
.seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
|
|
2616
2617
|
display: none;
|
|
2617
2618
|
}
|
|
2618
2619
|
|
|
2620
|
+
.seed-avatar__image:not([data-loading-state="loaded"]) {
|
|
2621
|
+
pointer-events: none;
|
|
2622
|
+
}
|
|
2623
|
+
|
|
2619
2624
|
.seed-avatar__fallback {
|
|
2625
|
+
z-index: -1;
|
|
2620
2626
|
object-fit: cover;
|
|
2621
2627
|
border-radius: var(--seed-radius-full);
|
|
2622
2628
|
width: 100%;
|
|
@@ -2632,6 +2638,8 @@
|
|
|
2632
2638
|
justify-content: center;
|
|
2633
2639
|
align-items: center;
|
|
2634
2640
|
display: flex;
|
|
2641
|
+
position: absolute;
|
|
2642
|
+
inset: 0;
|
|
2635
2643
|
overflow: hidden;
|
|
2636
2644
|
transform: translateZ(0);
|
|
2637
2645
|
mask-repeat: no-repeat;
|
|
@@ -5982,6 +5990,7 @@
|
|
|
5982
5990
|
|
|
5983
5991
|
.seed-image-frame__root {
|
|
5984
5992
|
border-radius: inherit;
|
|
5993
|
+
isolation: isolate;
|
|
5985
5994
|
position: relative;
|
|
5986
5995
|
overflow: hidden;
|
|
5987
5996
|
}
|
|
@@ -5994,13 +6003,20 @@
|
|
|
5994
6003
|
display: block;
|
|
5995
6004
|
}
|
|
5996
6005
|
|
|
5997
|
-
.seed-image-frame__content
|
|
6006
|
+
.seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
|
|
5998
6007
|
display: none;
|
|
5999
6008
|
}
|
|
6000
6009
|
|
|
6010
|
+
.seed-image-frame__content:not([data-loading-state="loaded"]) {
|
|
6011
|
+
pointer-events: none;
|
|
6012
|
+
}
|
|
6013
|
+
|
|
6001
6014
|
.seed-image-frame__fallback {
|
|
6015
|
+
z-index: -1;
|
|
6002
6016
|
width: 100%;
|
|
6003
6017
|
height: 100%;
|
|
6018
|
+
position: absolute;
|
|
6019
|
+
inset: 0;
|
|
6004
6020
|
}
|
|
6005
6021
|
|
|
6006
6022
|
.seed-image-frame__fallback[data-loading-state="loaded"] {
|