@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.
Files changed (12) hide show
  1. package/README.md +5 -0
  2. package/all.css +18 -2
  3. package/all.layered.css +18 -2
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/package.json +1 -1
  7. package/recipes/avatar.css +11 -1
  8. package/recipes/avatar.layered.css +9 -1
  9. package/recipes/image-frame.css +11 -1
  10. package/recipes/image-frame.layered.css +9 -1
  11. package/vars/component/menu-sheet-item.d.ts +2 -6
  12. package/vars/component/menu-sheet-item.mjs +2 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "2.3.0",
3
+ "version": "2.3.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/avatar.css CHANGED
@@ -8,6 +8,7 @@
8
8
  border-radius: var(--seed-radius-full);
9
9
  width: var(--avatar-size);
10
10
  height: var(--avatar-size);
11
+ isolation: isolate;
11
12
  }
12
13
  .seed-avatar__root:after {
13
14
  content: "";
@@ -46,10 +47,19 @@
46
47
  mask-composite: subtract;
47
48
  transform: translateZ(0);
48
49
  }
49
- .seed-avatar__image:not([data-loading-state='loaded']) {
50
+ .seed-avatar__image[data-loading-state='error'] {
51
+ display: none;
52
+ }
53
+ .seed-avatar__image:is([hidden], [data-hidden]) {
50
54
  display: none;
51
55
  }
56
+ .seed-avatar__image:not([data-loading-state='loaded']) {
57
+ pointer-events: none;
58
+ }
52
59
  .seed-avatar__fallback {
60
+ position: absolute;
61
+ inset: 0;
62
+ z-index: -1;
53
63
  display: flex;
54
64
  justify-content: center;
55
65
  align-items: center;
package/recipes/avatar.layered.css CHANGED
@@ -5,6 +5,7 @@
5
5
  border-radius: var(--seed-radius-full);
6
6
  width: var(--avatar-size);
7
7
  height: var(--avatar-size);
8
+ isolation: isolate;
8
9
  justify-content: center;
9
10
  align-items: center;
10
11
  display: inline-flex;
@@ -50,11 +51,16 @@
50
51
  mask-composite: subtract;
51
52
  }
52
53
 
53
- .seed-avatar__image:not([data-loading-state="loaded"]) {
54
+ .seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
54
55
  display: none;
55
56
  }
56
57
 
58
+ .seed-avatar__image:not([data-loading-state="loaded"]) {
59
+ pointer-events: none;
60
+ }
61
+
57
62
  .seed-avatar__fallback {
63
+ z-index: -1;
58
64
  object-fit: cover;
59
65
  border-radius: var(--seed-radius-full);
60
66
  width: 100%;
@@ -70,6 +76,8 @@
70
76
  justify-content: center;
71
77
  align-items: center;
72
78
  display: flex;
79
+ position: absolute;
80
+ inset: 0;
73
81
  overflow: hidden;
74
82
  transform: translateZ(0);
75
83
  mask-repeat: no-repeat;
package/recipes/image-frame.css CHANGED
@@ -2,6 +2,7 @@
2
2
  position: relative;
3
3
  overflow: hidden;
4
4
  border-radius: inherit;
5
+ isolation: isolate;
5
6
  }
6
7
  .seed-image-frame__content {
7
8
  display: block;
@@ -10,10 +11,19 @@
10
11
  object-fit: cover;
11
12
  border-radius: inherit;
12
13
  }
13
- .seed-image-frame__content:not([data-loading-state='loaded']) {
14
+ .seed-image-frame__content[data-loading-state='error'] {
15
+ display: none;
16
+ }
17
+ .seed-image-frame__content:is([hidden], [data-hidden]) {
14
18
  display: none;
15
19
  }
20
+ .seed-image-frame__content:not([data-loading-state='loaded']) {
21
+ pointer-events: none;
22
+ }
16
23
  .seed-image-frame__fallback {
24
+ position: absolute;
25
+ inset: 0;
26
+ z-index: -1;
17
27
  width: 100%;
18
28
  height: 100%;
19
29
  }
package/recipes/image-frame.layered.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer seed-components {
2
2
  .seed-image-frame__root {
3
3
  border-radius: inherit;
4
+ isolation: isolate;
4
5
  position: relative;
5
6
  overflow: hidden;
6
7
  }
@@ -13,13 +14,20 @@
13
14
  display: block;
14
15
  }
15
16
 
16
- .seed-image-frame__content:not([data-loading-state="loaded"]) {
17
+ .seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
17
18
  display: none;
18
19
  }
19
20
 
21
+ .seed-image-frame__content:not([data-loading-state="loaded"]) {
22
+ pointer-events: none;
23
+ }
24
+
20
25
  .seed-image-frame__fallback {
26
+ z-index: -1;
21
27
  width: 100%;
22
28
  height: 100%;
29
+ position: absolute;
30
+ inset: 0;
23
31
  }
24
32
 
25
33
  .seed-image-frame__fallback[data-loading-state="loaded"] {
package/vars/component/menu-sheet-item.d.ts CHANGED
@@ -61,13 +61,9 @@ export declare const vars: {
61
61
  /**
62
62
  * 라벨을 왼쪽 정렬합니다.
63
63
  */
64
- "labelAlignLeft": {
65
- "enabled": {}
66
- },
64
+ "labelAlignLeft": {},
67
65
  /**
68
66
  * 라벨을 중앙 정렬합니다.
69
67
  */
70
- "labelAlignCenter": {
71
- "enabled": {}
72
- }
68
+ "labelAlignCenter": {}
73
69
  }
package/vars/component/menu-sheet-item.mjs CHANGED
@@ -52,10 +52,6 @@ export const vars = {
52
52
  }
53
53
  }
54
54
  },
55
- "labelAlignLeft": {
56
- "enabled": {}
57
- },
58
- "labelAlignCenter": {
59
- "enabled": {}
60
- }
55
+ "labelAlignLeft": {},
56
+ "labelAlignCenter": {}
61
57
  }