@seed-design/css 2.8.2 → 2.9.0

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 (21) hide show
  1. package/all.css +114 -15
  2. package/all.layered.css +114 -15
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +15 -1
  6. package/base.layered.css +15 -1
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/app-bar-main.css +2 -1
  11. package/recipes/app-bar-main.layered.css +2 -1
  12. package/recipes/app-bar.css +5 -3
  13. package/recipes/app-bar.layered.css +5 -3
  14. package/recipes/app-screen.css +5 -1
  15. package/recipes/app-screen.layered.css +6 -6
  16. package/recipes/tag-group-item.css +59 -4
  17. package/recipes/tag-group-item.layered.css +64 -4
  18. package/recipes/tag-group.css +28 -10
  19. package/recipes/tag-group.layered.css +22 -0
  20. package/vars/component/top-navigation.d.ts +1 -4
  21. package/vars/component/top-navigation.mjs +1 -4
package/recipes/tag-group.css CHANGED
@@ -2,19 +2,19 @@
2
2
  color: var(--seed-color-palette-gray-600);
3
3
  font-weight: var(--seed-font-weight-regular);
4
4
  white-space: pre;
5
- user-select: none
5
+ user-select: none;
6
6
  }
7
7
  .seed-tag-group__separator--size_t2 {
8
8
  font-size: var(--seed-font-size-t2);
9
- line-height: var(--seed-line-height-t2)
9
+ line-height: var(--seed-line-height-t2);
10
10
  }
11
11
  .seed-tag-group__separator--size_t3 {
12
12
  font-size: var(--seed-font-size-t3);
13
- line-height: var(--seed-line-height-t3)
13
+ line-height: var(--seed-line-height-t3);
14
14
  }
15
15
  .seed-tag-group__separator--size_t4 {
16
16
  font-size: var(--seed-font-size-t4);
17
- line-height: var(--seed-line-height-t4)
17
+ line-height: var(--seed-line-height-t4);
18
18
  }
19
19
  .seed-tag-group__root--truncate_true {
20
20
  display: inline-flex;
@@ -23,7 +23,20 @@
23
23
  --tag-group-item-display: inline-flex;
24
24
  --tag-group-item-overflow: hidden;
25
25
  --tag-group-item-text-overflow: ellipsis;
26
- --tag-group-item-white-space: nowrap
26
+ --tag-group-item-white-space: nowrap;
27
+ --tag-group-item-align-items: baseline;
28
+ }
29
+ .seed-tag-group__root--truncate_true .seed-icon {
30
+ position: relative;
31
+ top: var(--tag-group-item-icon-flex-offset, 0px);
32
+ }
33
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
34
+ position: relative;
35
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
36
+ }
37
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
38
+ position: relative;
39
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
27
40
  }
28
41
  .seed-tag-group__root--truncate_false {
29
42
  display: inline-block;
@@ -31,17 +44,22 @@
31
44
  --tag-group-item-display: inline;
32
45
  --tag-group-item-overflow: visible;
33
46
  --tag-group-item-text-overflow: clip;
34
- --tag-group-item-white-space: normal
47
+ --tag-group-item-white-space: normal;
48
+ --tag-group-item-align-items: center;
49
+ }
50
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
51
+ position: relative;
52
+ top: var(--tag-group-item-inline-icon-offset, 0px);
35
53
  }
36
54
  .seed-tag-group__separator--truncate_false {
37
- vertical-align: middle
55
+ vertical-align: middle;
38
56
  }
39
57
  .seed-tag-group__root--size_t2-truncate_false {
40
- line-height: var(--seed-line-height-t2)
58
+ line-height: var(--seed-line-height-t2);
41
59
  }
42
60
  .seed-tag-group__root--size_t3-truncate_false {
43
- line-height: var(--seed-line-height-t3)
61
+ line-height: var(--seed-line-height-t3);
44
62
  }
45
63
  .seed-tag-group__root--size_t4-truncate_false {
46
- line-height: var(--seed-line-height-t4)
64
+ line-height: var(--seed-line-height-t4);
47
65
  }
package/recipes/tag-group.layered.css CHANGED
@@ -27,20 +27,42 @@
27
27
  --tag-group-item-overflow: hidden;
28
28
  --tag-group-item-text-overflow: ellipsis;
29
29
  --tag-group-item-white-space: nowrap;
30
+ --tag-group-item-align-items: baseline;
30
31
  align-items: center;
31
32
  max-width: 100%;
32
33
  display: inline-flex;
33
34
  }
34
35
 
36
+ .seed-tag-group__root--truncate_true .seed-icon {
37
+ top: var(--tag-group-item-icon-flex-offset, 0px);
38
+ position: relative;
39
+ }
40
+
41
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
42
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
43
+ position: relative;
44
+ }
45
+
46
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
47
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
48
+ position: relative;
49
+ }
50
+
35
51
  .seed-tag-group__root--truncate_false {
36
52
  --tag-group-item-display: inline;
37
53
  --tag-group-item-overflow: visible;
38
54
  --tag-group-item-text-overflow: clip;
39
55
  --tag-group-item-white-space: normal;
56
+ --tag-group-item-align-items: center;
40
57
  font-size: 0;
41
58
  display: inline-block;
42
59
  }
43
60
 
61
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
62
+ top: var(--tag-group-item-inline-icon-offset, 0px);
63
+ position: relative;
64
+ }
65
+
44
66
  .seed-tag-group__separator--truncate_false {
45
67
  vertical-align: middle;
46
68
  }
package/vars/component/top-navigation.d.ts CHANGED
@@ -2,6 +2,7 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
+ "height": "56px",
5
6
  "paddingX": "var(--seed-dimension-x1_5)"
6
7
  }
7
8
  }
@@ -9,7 +10,6 @@ export declare const vars: {
9
10
  "themeIos": {
10
11
  "enabled": {
11
12
  "root": {
12
- "height": "44px",
13
13
  /** main과 left/right 영역 간 최소 간격입니다. */
14
14
  "titleMinGap": "var(--seed-dimension-x2)"
15
15
  }
@@ -17,9 +17,6 @@ export declare const vars: {
17
17
  },
18
18
  "themeAndroid": {
19
19
  "enabled": {
20
- "root": {
21
- "height": "56px"
22
- },
23
20
  /** title과 subtitle을 포함하는 영역입니다. */
24
21
  "main": {
25
22
  "paddingLeft": "var(--seed-dimension-x1_5)"
package/vars/component/top-navigation.mjs CHANGED
@@ -2,6 +2,7 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
+ "height": "56px",
5
6
  "paddingX": "var(--seed-dimension-x1_5)"
6
7
  }
7
8
  }
@@ -9,16 +10,12 @@ export const vars = {
9
10
  "themeIos": {
10
11
  "enabled": {
11
12
  "root": {
12
- "height": "44px",
13
13
  "titleMinGap": "var(--seed-dimension-x2)"
14
14
  }
15
15
  }
16
16
  },
17
17
  "themeAndroid": {
18
18
  "enabled": {
19
- "root": {
20
- "height": "56px"
21
- },
22
19
  "main": {
23
20
  "paddingLeft": "var(--seed-dimension-x1_5)"
24
21
  }