@inchurch/matcha-theme 20.0.11 → 20.277.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 (116) hide show
  1. package/abstracts/_colors.scss +404 -404
  2. package/abstracts/_elevation.scss +102 -102
  3. package/abstracts/_functions.scss +1186 -1212
  4. package/abstracts/_media-breakpoint.scss +23 -23
  5. package/abstracts/_theme-api.scss +230 -0
  6. package/abstracts/_typography.scss +127 -127
  7. package/base/_reset.scss +438 -438
  8. package/components/app-page-header.scss +259 -0
  9. package/components/matcha-accordion.scss +293 -157
  10. package/components/matcha-audio-player.scss +1 -2
  11. package/components/matcha-autocomplete.scss +10 -11
  12. package/components/matcha-avatar.scss +173 -33
  13. package/components/matcha-badge.scss +15 -15
  14. package/components/matcha-breadcrumb.scss +231 -126
  15. package/components/matcha-button-toggle.scss +46 -2
  16. package/components/matcha-buttons.scss +908 -784
  17. package/components/matcha-calendar.scss +99 -35
  18. package/components/matcha-cards.scss +58 -33
  19. package/components/matcha-chart-card.scss +5 -12
  20. package/components/matcha-checkbox.scss +191 -490
  21. package/components/matcha-chip.scss +297 -212
  22. package/components/matcha-color-pick.scss +1 -2
  23. package/components/matcha-command-palette.scss +290 -63
  24. package/components/matcha-crop.scss +406 -172
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +86 -31
  27. package/components/matcha-draggable.scss +4 -5
  28. package/components/matcha-drawer.scss +207 -66
  29. package/components/matcha-drop-image.scss +14 -0
  30. package/components/matcha-drop-list.scss +87 -47
  31. package/components/matcha-emoji.scss +2 -2
  32. package/components/matcha-empty-state.scss +195 -83
  33. package/components/matcha-file-uploader.scss +462 -0
  34. package/components/matcha-flag.scss +93 -52
  35. package/components/matcha-footer.scss +67 -164
  36. package/components/matcha-form-field.scss +55 -3
  37. package/components/matcha-form-section.scss +100 -101
  38. package/components/matcha-header.scss +134 -325
  39. package/components/matcha-highlight.scss +65 -197
  40. package/components/matcha-hint-text.scss +25 -4
  41. package/components/matcha-horizontal-tree.scss +316 -317
  42. package/components/matcha-icon.scss +37 -45
  43. package/components/matcha-image.scss +2 -3
  44. package/components/matcha-list.scss +14 -15
  45. package/components/matcha-menu.scss +15 -2
  46. package/components/matcha-modal.scss +59 -86
  47. package/components/matcha-nav.scss +362 -231
  48. package/components/matcha-notification.scss +412 -197
  49. package/components/matcha-option.scss +98 -23
  50. package/components/matcha-page-builder.scss +16 -16
  51. package/components/matcha-paginator.scss +688 -235
  52. package/components/matcha-panel.scss +42 -27
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +257 -153
  55. package/components/matcha-radio.scss +244 -452
  56. package/components/matcha-scrollbar.scss +1 -2
  57. package/components/matcha-scrollbox-shadow.scss +120 -122
  58. package/components/matcha-section.scss +5 -9
  59. package/components/matcha-select-multiple.scss +56 -0
  60. package/components/matcha-select.scss +10 -10
  61. package/components/matcha-skeleton.scss +24 -7
  62. package/components/matcha-slide-toggle.scss +80 -301
  63. package/components/matcha-slider.scss +174 -77
  64. package/components/matcha-snack-bar.scss +123 -131
  65. package/components/matcha-spin.scss +12 -103
  66. package/components/matcha-spinner.scss +76 -57
  67. package/components/matcha-status-pill.scss +82 -0
  68. package/components/matcha-stepper.scss +376 -177
  69. package/components/matcha-table.scss +568 -785
  70. package/components/matcha-tabs.scss +622 -469
  71. package/components/matcha-text-editor.scss +78 -78
  72. package/components/matcha-time.scss +2 -2
  73. package/components/matcha-toolbar.scss +359 -206
  74. package/components/matcha-tooltip.scss +158 -62
  75. package/components/matcha-tree-view.scss +189 -0
  76. package/fonts/manrope/manrope-latin-ext.woff2 +0 -0
  77. package/fonts/manrope/manrope-latin.woff2 +0 -0
  78. package/layout/matcha-page-layout.scss +4 -4
  79. package/main.scss +237 -265
  80. package/package.json +1 -1
  81. package/tokens/_animations-tokens.scss +37 -37
  82. package/tokens/_breakpoints-tokens.scss +35 -26
  83. package/tokens/_color-tokens.scss +1149 -1152
  84. package/tokens/_css-custom-properties.scss +704 -568
  85. package/tokens/_primitives.scss +82 -0
  86. package/tokens/_semantic-aliases.scss +120 -0
  87. package/tokens/_spacing-tokens.scss +94 -94
  88. package/vendors/angular-editor.scss +56 -56
  89. package/vendors/angular-material-fixes.scss +297 -297
  90. package/vendors/charts.scss +92 -92
  91. package/vendors/ng5-slider.scss +56 -56
  92. package/vendors/ngx-material-timepicker.scss +50 -50
  93. package/components/matcha-uploader.scss +0 -215
  94. package/fonts/CircularStd-Black.eot +0 -0
  95. package/fonts/CircularStd-Black.svg +0 -3426
  96. package/fonts/CircularStd-Black.ttf +0 -0
  97. package/fonts/CircularStd-Black.woff +0 -0
  98. package/fonts/CircularStd-Black.woff2 +0 -0
  99. package/fonts/CircularStd-Bold.eot +0 -0
  100. package/fonts/CircularStd-Bold.otf +0 -0
  101. package/fonts/CircularStd-Bold.svg +0 -13532
  102. package/fonts/CircularStd-Bold.ttf +0 -0
  103. package/fonts/CircularStd-Bold.woff +0 -0
  104. package/fonts/CircularStd-Bold.woff2 +0 -0
  105. package/fonts/CircularStd-Medium.eot +0 -0
  106. package/fonts/CircularStd-Medium.otf +0 -0
  107. package/fonts/CircularStd-Medium.svg +0 -13511
  108. package/fonts/CircularStd-Medium.ttf +0 -0
  109. package/fonts/CircularStd-Medium.woff +0 -0
  110. package/fonts/CircularStd-Medium.woff2 +0 -0
  111. package/fonts/CircularStd-Regular.eot +0 -0
  112. package/fonts/CircularStd-Regular.otf +0 -0
  113. package/fonts/CircularStd-Regular.svg +0 -2378
  114. package/fonts/CircularStd-Regular.ttf +0 -0
  115. package/fonts/CircularStd-Regular.woff +0 -0
  116. package/fonts/CircularStd-Regular.woff2 +0 -0
package/components/matcha-horizontal-tree.scss CHANGED
@@ -1,317 +1,316 @@
1
- @use "sass:map";
2
-
3
- // =============================================================================
4
- // matcha-horizontal-tree.scss — Horizontal org tree with connector lines
5
- // Angular: matcha-horizontal-tree
6
- // =============================================================================
7
-
8
- @mixin matcha-horizontal-tree-theme($theme) {
9
- $is-dark: map.get($theme, is-dark);
10
-
11
- .svg-line line {
12
- stroke: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
13
- }
14
-
15
- .child {
16
- .the-line-connect-first {
17
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
18
- }
19
-
20
- .the-line-connect {
21
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
22
- }
23
-
24
- .the-line-connect-last {
25
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
26
- }
27
-
28
- .the-line-connect-first-modal {
29
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
30
- }
31
-
32
- .the-line-connect-second-modal {
33
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
34
- }
35
-
36
- .the-line-connect-last-modal {
37
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
38
- }
39
-
40
- .the-line-connect-start-modal {
41
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
42
- }
43
-
44
- .the-line-connect-middle {
45
- box-shadow: inset 2px -2px 0 2px var(--matcha-color-border, #{getGrey($theme)});
46
- }
47
- }
48
-
49
- .tree-node {
50
- &-content {
51
- &-btn-add-node {
52
- background: var(--matcha-color-surface, #{getSurface($theme)});
53
- box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
54
-
55
- &-i {
56
- color: var(--matcha-color-accent, #{getAccent($theme)});
57
- }
58
- }
59
- }
60
- }
61
-
62
- .tree-first-node {
63
- &-begin {
64
- &-btn-add-node {
65
- background: var(--matcha-color-surface, #{getSurface($theme)});
66
- box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
67
-
68
- &-i {
69
- color: var(--matcha-color-accent, #{getAccent($theme)});
70
- }
71
- }
72
- }
73
- }
74
- }
75
-
76
- // ── Layout ──────────────────────────────────────────────────────────────────
77
-
78
- .svg-line {
79
- position: absolute;
80
- top: 0;
81
- left: 0;
82
- width: 100%;
83
- height: 100%;
84
- z-index: 0;
85
- pointer-events: none;
86
-
87
- line {
88
- stroke-width: var(--matcha-border-medium, 4px);
89
- }
90
- }
91
-
92
- .child {
93
- display: flex;
94
- position: relative;
95
- pointer-events: none;
96
-
97
- div {
98
- pointer-events: all;
99
- }
100
-
101
- .the-line-connect-first {
102
- width: 56px;
103
- height: var(--matcha-border-medium, 4px);
104
- margin: 56px -16px 56px -40px;
105
- display: flex;
106
- position: absolute;
107
- z-index: 0;
108
- background: transparent;
109
- }
110
-
111
- .the-line-connect {
112
- width: 56px;
113
- height: 92px;
114
- margin: -34px -16px 56px -40px;
115
- display: flex;
116
- position: absolute;
117
- z-index: 0;
118
- background: transparent;
119
- border-radius: 0 0 0 40px;
120
- }
121
-
122
- .the-line-connect-last {
123
- width: 56px;
124
- height: 136px;
125
- margin: -80px -16px 56px -40px;
126
- display: flex;
127
- position: absolute;
128
- z-index: 0;
129
- border-radius: 0 0 0 40px;
130
- background: transparent;
131
- }
132
-
133
- .the-line-connect-first-modal {
134
- width: 56px;
135
- height: var(--matcha-border-medium, 4px);
136
- margin: 56px -16px 56px -40px;
137
- display: flex;
138
- position: absolute;
139
- z-index: 0;
140
- background: transparent;
141
- }
142
-
143
- .the-line-connect-second-modal {
144
- width: 56px;
145
- border-radius: 0 0 0 40px;
146
- z-index: 1;
147
- margin: -16px -16px 56px -40px;
148
- height: 72px;
149
- display: flex;
150
- position: absolute;
151
- background: transparent;
152
- }
153
-
154
- .the-line-connect-last-modal {
155
- width: 56px;
156
- height: 150px;
157
- margin: -90px -16px 56px -40px;
158
- display: flex;
159
- position: absolute;
160
- border-radius: 0 0 0 40px;
161
- z-index: 1;
162
- background: transparent;
163
- }
164
-
165
- .the-line-connect-start-modal {
166
- height: 92px;
167
- margin: -34px -16px 56px -40px;
168
- width: 56px;
169
- border-radius: 0 0 0 40px;
170
- z-index: 1;
171
- display: flex;
172
- position: absolute;
173
- background: transparent;
174
- }
175
-
176
- .the-line-connect-middle {
177
- height: 92px;
178
- margin: -34px -16px 56px -40px;
179
- width: 56px;
180
- border-radius: 0 0 0 40px;
181
- z-index: 0;
182
- display: flex;
183
- position: absolute;
184
- background: transparent;
185
- }
186
- }
187
-
188
- .tree-node {
189
- min-width: 264px;
190
- max-width: 264px;
191
- width: 264px;
192
- height: 80px;
193
- z-index: 1;
194
-
195
- &-header {
196
- display: flex;
197
- justify-content: space-between;
198
- margin-bottom: var(--matcha-space-050, 4px);
199
-
200
- &-title {
201
- font-family: var(--matcha-font-family);
202
- font-size: var(--matcha-text-body-sm, 12px);
203
- line-height: var(--matcha-leading-body-sm, 16px);
204
- display: flex;
205
- margin: 0 0 var(--matcha-space-050, 4px) 0;
206
- align-items: center;
207
- letter-spacing: 0.08em;
208
- text-transform: uppercase;
209
- font-weight: var(--matcha-weight-bold, 700);
210
-
211
- &-bullet {
212
- height: var(--matcha-space-200, 16px);
213
- width: var(--matcha-space-100, 8px);
214
- margin: 0 var(--matcha-space-100, 8px) 0 0;
215
- display: inline-block;
216
- position: relative;
217
- border-radius: var(--matcha-radius-pill, 9999px);
218
- }
219
- }
220
- }
221
-
222
- &-content {
223
- display: flex;
224
- justify-content: space-between;
225
-
226
- &-profile {
227
- display: flex;
228
- align-items: center;
229
- width: 100%;
230
-
231
- &-avatar {
232
- border-radius: var(--matcha-radius-pill, 9999px);
233
- min-width: var(--matcha-icon-size-md, 24px);
234
- min-height: var(--matcha-icon-size-md, 24px);
235
- width: var(--matcha-icon-size-md, 24px);
236
- height: var(--matcha-icon-size-md, 24px);
237
- max-width: var(--matcha-icon-size-md, 24px);
238
- max-height: var(--matcha-icon-size-md, 24px);
239
- }
240
-
241
- &-name {
242
- width: calc(100% - 48px);
243
- display: flex;
244
- line-height: var(--matcha-leading-body-md, 20px);
245
- font-size: var(--matcha-text-title-sm, 16px);
246
- margin: 0 0 0 var(--matcha-space-100, 8px);
247
- -webkit-line-clamp: 2;
248
- overflow: hidden;
249
- text-overflow: ellipsis;
250
- word-break: break-word;
251
- white-space: nowrap;
252
- -webkit-box-orient: vertical;
253
- }
254
- }
255
-
256
- &-btn-add-node {
257
- position: absolute;
258
- margin: var(--matcha-space-300, 24px) 0 0 236px;
259
- width: var(--matcha-icon-size-md, 24px);
260
- height: var(--matcha-icon-size-md, 24px);
261
-
262
- &-i {
263
- line-height: var(--matcha-leading-body-sm, 16px);
264
- border-radius: var(--matcha-radius-pill, 9999px);
265
- }
266
- }
267
- }
268
- }
269
-
270
- .tree-first-node {
271
- display: flex;
272
- justify-content: center;
273
- align-items: center;
274
- min-width: 264px;
275
- max-width: 264px;
276
- width: 264px;
277
- height: 80px;
278
- margin: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) -10px var(--matcha-space-200, 16px);
279
- border-radius: var(--matcha-radius-lg, 8px);
280
- position: relative;
281
- z-index: 1;
282
-
283
- &-begin {
284
- font-family: var(--matcha-font-family);
285
- font-size: var(--matcha-text-title-sm, 16px);
286
- font-weight: var(--matcha-weight-bold, 700);
287
- line-height: var(--matcha-leading-body-sm, 16px);
288
- display: -webkit-box;
289
- -webkit-line-clamp: 2;
290
- overflow: hidden;
291
- text-overflow: ellipsis;
292
- word-break: break-word;
293
- white-space: initial;
294
- -webkit-box-orient: vertical;
295
- text-transform: capitalize;
296
-
297
- &-btn-add-node {
298
- width: var(--matcha-icon-size-md, 24px);
299
- height: var(--matcha-icon-size-md, 24px);
300
- display: block;
301
- margin: 0 auto;
302
- position: relative;
303
- z-index: 1;
304
-
305
- &-i {
306
- line-height: var(--matcha-leading-body-sm, 16px);
307
- border-radius: var(--matcha-radius-pill, 9999px);
308
- }
309
- }
310
- }
311
- }
312
-
313
- .matcha-horizontal-tree {
314
- overflow: auto;
315
- user-select: none;
316
- -webkit-user-select: none;
317
- }
1
+ @use "sass:map";
2
+
3
+ // =============================================================================
4
+ // matcha-horizontal-tree.scss — Horizontal org tree with connector lines
5
+ // Angular: matcha-horizontal-tree
6
+ // =============================================================================
7
+
8
+ @mixin matcha-horizontal-tree-theme($theme) {
9
+
10
+ .svg-line line {
11
+ stroke: var(--matcha-color-text-placeholder);
12
+ }
13
+
14
+ .child {
15
+ .the-line-connect-first {
16
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
17
+ }
18
+
19
+ .the-line-connect {
20
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
21
+ }
22
+
23
+ .the-line-connect-last {
24
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
25
+ }
26
+
27
+ .the-line-connect-first-modal {
28
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
29
+ }
30
+
31
+ .the-line-connect-second-modal {
32
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
33
+ }
34
+
35
+ .the-line-connect-last-modal {
36
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
37
+ }
38
+
39
+ .the-line-connect-start-modal {
40
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
41
+ }
42
+
43
+ .the-line-connect-middle {
44
+ box-shadow: inset 2px -2px 0 2px var(--matcha-color-border);
45
+ }
46
+ }
47
+
48
+ .tree-node {
49
+ &-content {
50
+ &-btn-add-node {
51
+ background: var(--matcha-color-surface);
52
+ box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
53
+
54
+ &-i {
55
+ color: var(--matcha-color-accent);
56
+ }
57
+ }
58
+ }
59
+ }
60
+
61
+ .tree-first-node {
62
+ &-begin {
63
+ &-btn-add-node {
64
+ background: var(--matcha-color-surface);
65
+ box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
66
+
67
+ &-i {
68
+ color: var(--matcha-color-accent);
69
+ }
70
+ }
71
+ }
72
+ }
73
+ }
74
+
75
+ // ── Layout ──────────────────────────────────────────────────────────────────
76
+
77
+ .svg-line {
78
+ position: absolute;
79
+ top: 0;
80
+ left: 0;
81
+ width: 100%;
82
+ height: 100%;
83
+ z-index: 0;
84
+ pointer-events: none;
85
+
86
+ line {
87
+ stroke-width: var(--matcha-border-medium, 4px);
88
+ }
89
+ }
90
+
91
+ .child {
92
+ display: flex;
93
+ position: relative;
94
+ pointer-events: none;
95
+
96
+ div {
97
+ pointer-events: all;
98
+ }
99
+
100
+ .the-line-connect-first {
101
+ width: 56px;
102
+ height: var(--matcha-border-medium, 4px);
103
+ margin: 56px -16px 56px -40px;
104
+ display: flex;
105
+ position: absolute;
106
+ z-index: 0;
107
+ background: transparent;
108
+ }
109
+
110
+ .the-line-connect {
111
+ width: 56px;
112
+ height: 92px;
113
+ margin: -34px -16px 56px -40px;
114
+ display: flex;
115
+ position: absolute;
116
+ z-index: 0;
117
+ background: transparent;
118
+ border-radius: 0 0 0 40px;
119
+ }
120
+
121
+ .the-line-connect-last {
122
+ width: 56px;
123
+ height: 136px;
124
+ margin: -80px -16px 56px -40px;
125
+ display: flex;
126
+ position: absolute;
127
+ z-index: 0;
128
+ border-radius: 0 0 0 40px;
129
+ background: transparent;
130
+ }
131
+
132
+ .the-line-connect-first-modal {
133
+ width: 56px;
134
+ height: var(--matcha-border-medium, 4px);
135
+ margin: 56px -16px 56px -40px;
136
+ display: flex;
137
+ position: absolute;
138
+ z-index: 0;
139
+ background: transparent;
140
+ }
141
+
142
+ .the-line-connect-second-modal {
143
+ width: 56px;
144
+ border-radius: 0 0 0 40px;
145
+ z-index: 1;
146
+ margin: -16px -16px 56px -40px;
147
+ height: 72px;
148
+ display: flex;
149
+ position: absolute;
150
+ background: transparent;
151
+ }
152
+
153
+ .the-line-connect-last-modal {
154
+ width: 56px;
155
+ height: 150px;
156
+ margin: -90px -16px 56px -40px;
157
+ display: flex;
158
+ position: absolute;
159
+ border-radius: 0 0 0 40px;
160
+ z-index: 1;
161
+ background: transparent;
162
+ }
163
+
164
+ .the-line-connect-start-modal {
165
+ height: 92px;
166
+ margin: -34px -16px 56px -40px;
167
+ width: 56px;
168
+ border-radius: 0 0 0 40px;
169
+ z-index: 1;
170
+ display: flex;
171
+ position: absolute;
172
+ background: transparent;
173
+ }
174
+
175
+ .the-line-connect-middle {
176
+ height: 92px;
177
+ margin: -34px -16px 56px -40px;
178
+ width: 56px;
179
+ border-radius: 0 0 0 40px;
180
+ z-index: 0;
181
+ display: flex;
182
+ position: absolute;
183
+ background: transparent;
184
+ }
185
+ }
186
+
187
+ .tree-node {
188
+ min-width: 264px;
189
+ max-width: 264px;
190
+ width: 264px;
191
+ height: 80px;
192
+ z-index: 1;
193
+
194
+ &-header {
195
+ display: flex;
196
+ justify-content: space-between;
197
+ margin-bottom: var(--matcha-space-050, 4px);
198
+
199
+ &-title {
200
+ font-family: var(--matcha-font-family);
201
+ font-size: var(--matcha-text-body-sm, 12px);
202
+ line-height: var(--matcha-leading-body-sm, 16px);
203
+ display: flex;
204
+ margin: 0 0 var(--matcha-space-050, 4px) 0;
205
+ align-items: center;
206
+ letter-spacing: 0.08em;
207
+ text-transform: uppercase;
208
+ font-weight: var(--matcha-weight-bold, 700);
209
+
210
+ &-bullet {
211
+ height: var(--matcha-space-200, 16px);
212
+ width: var(--matcha-space-100, 8px);
213
+ margin: 0 var(--matcha-space-100, 8px) 0 0;
214
+ display: inline-block;
215
+ position: relative;
216
+ border-radius: var(--matcha-radius-pill, 9999px);
217
+ }
218
+ }
219
+ }
220
+
221
+ &-content {
222
+ display: flex;
223
+ justify-content: space-between;
224
+
225
+ &-profile {
226
+ display: flex;
227
+ align-items: center;
228
+ width: 100%;
229
+
230
+ &-avatar {
231
+ border-radius: var(--matcha-radius-pill, 9999px);
232
+ min-width: var(--matcha-icon-size-md, 24px);
233
+ min-height: var(--matcha-icon-size-md, 24px);
234
+ width: var(--matcha-icon-size-md, 24px);
235
+ height: var(--matcha-icon-size-md, 24px);
236
+ max-width: var(--matcha-icon-size-md, 24px);
237
+ max-height: var(--matcha-icon-size-md, 24px);
238
+ }
239
+
240
+ &-name {
241
+ width: calc(100% - 48px);
242
+ display: flex;
243
+ line-height: var(--matcha-leading-body-md, 20px);
244
+ font-size: var(--matcha-text-title-sm, 16px);
245
+ margin: 0 0 0 var(--matcha-space-100, 8px);
246
+ -webkit-line-clamp: 2;
247
+ overflow: hidden;
248
+ text-overflow: ellipsis;
249
+ word-break: break-word;
250
+ white-space: nowrap;
251
+ -webkit-box-orient: vertical;
252
+ }
253
+ }
254
+
255
+ &-btn-add-node {
256
+ position: absolute;
257
+ margin: var(--matcha-space-300, 24px) 0 0 236px;
258
+ width: var(--matcha-icon-size-md, 24px);
259
+ height: var(--matcha-icon-size-md, 24px);
260
+
261
+ &-i {
262
+ line-height: var(--matcha-leading-body-sm, 16px);
263
+ border-radius: var(--matcha-radius-pill, 9999px);
264
+ }
265
+ }
266
+ }
267
+ }
268
+
269
+ .tree-first-node {
270
+ display: flex;
271
+ justify-content: center;
272
+ align-items: center;
273
+ min-width: 264px;
274
+ max-width: 264px;
275
+ width: 264px;
276
+ height: 80px;
277
+ margin: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) -10px var(--matcha-space-200, 16px);
278
+ border-radius: var(--matcha-radius-lg, 8px);
279
+ position: relative;
280
+ z-index: 1;
281
+
282
+ &-begin {
283
+ font-family: var(--matcha-font-family);
284
+ font-size: var(--matcha-text-title-sm, 16px);
285
+ font-weight: var(--matcha-weight-bold, 700);
286
+ line-height: var(--matcha-leading-body-sm, 16px);
287
+ display: -webkit-box;
288
+ -webkit-line-clamp: 2;
289
+ overflow: hidden;
290
+ text-overflow: ellipsis;
291
+ word-break: break-word;
292
+ white-space: initial;
293
+ -webkit-box-orient: vertical;
294
+ text-transform: capitalize;
295
+
296
+ &-btn-add-node {
297
+ width: var(--matcha-icon-size-md, 24px);
298
+ height: var(--matcha-icon-size-md, 24px);
299
+ display: block;
300
+ margin: 0 auto;
301
+ position: relative;
302
+ z-index: 1;
303
+
304
+ &-i {
305
+ line-height: var(--matcha-leading-body-sm, 16px);
306
+ border-radius: var(--matcha-radius-pill, 9999px);
307
+ }
308
+ }
309
+ }
310
+ }
311
+
312
+ .matcha-horizontal-tree {
313
+ overflow: auto;
314
+ user-select: none;
315
+ -webkit-user-select: none;
316
+ }