@poirazis/supercomponents-shared 0.0.1

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 (66) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +66 -0
  3. package/dist/index.js +30635 -0
  4. package/dist/index.umd.cjs +12 -0
  5. package/dist/style.css +1 -0
  6. package/package.json +117 -0
  7. package/src/index.js +29 -0
  8. package/src/index.ts +31 -0
  9. package/src/lib/Actions/autoresize_textarea.js +14 -0
  10. package/src/lib/Actions/click_outside.js +80 -0
  11. package/src/lib/Actions/index.js +4 -0
  12. package/src/lib/Actions/position_dropdown.js +129 -0
  13. package/src/lib/SuperButton/SuperButton.svelte +341 -0
  14. package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte +91 -0
  15. package/src/lib/SuperFieldsCommon.css +54 -0
  16. package/src/lib/SuperList/SuperList.svelte +308 -0
  17. package/src/lib/SuperList/drag-handle.svelte +31 -0
  18. package/src/lib/SuperPopover/SuperPopover.svelte +134 -0
  19. package/src/lib/SuperTable/SuperTable.css +410 -0
  20. package/src/lib/SuperTable/SuperTable.svelte +1332 -0
  21. package/src/lib/SuperTable/constants.js +85 -0
  22. package/src/lib/SuperTable/controls/ColumnsSection.svelte +34 -0
  23. package/src/lib/SuperTable/controls/ControlSection.svelte +3 -0
  24. package/src/lib/SuperTable/controls/RowButtonsColumn.svelte +169 -0
  25. package/src/lib/SuperTable/controls/SelectionColumn.svelte +174 -0
  26. package/src/lib/SuperTable/controls/SuperTableWelcome.svelte +58 -0
  27. package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte +52 -0
  28. package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte +13 -0
  29. package/src/lib/SuperTable/overlays/LoadingOverlay.svelte +3 -0
  30. package/src/lib/SuperTable/overlays/RowContextMenu copy.svelte +57 -0
  31. package/src/lib/SuperTable/overlays/RowContextMenu.svelte +58 -0
  32. package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte +184 -0
  33. package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte +64 -0
  34. package/src/lib/SuperTable/state/API.js +0 -0
  35. package/src/lib/SuperTable/state/SuperTableStateMachine.js +0 -0
  36. package/src/lib/SuperTable/types.js +0 -0
  37. package/src/lib/SuperTableCells/CellAttachment.svelte +288 -0
  38. package/src/lib/SuperTableCells/CellBoolean.svelte +158 -0
  39. package/src/lib/SuperTableCells/CellColor.svelte +460 -0
  40. package/src/lib/SuperTableCells/CellCommon.css +319 -0
  41. package/src/lib/SuperTableCells/CellDatetime.svelte +180 -0
  42. package/src/lib/SuperTableCells/CellIcon.svelte +627 -0
  43. package/src/lib/SuperTableCells/CellJSON.svelte +297 -0
  44. package/src/lib/SuperTableCells/CellLink.svelte +274 -0
  45. package/src/lib/SuperTableCells/CellLinkAdvanced.svelte +298 -0
  46. package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte +355 -0
  47. package/src/lib/SuperTableCells/CellLinkPickerTable.svelte +91 -0
  48. package/src/lib/SuperTableCells/CellLinkPickerTree.svelte +226 -0
  49. package/src/lib/SuperTableCells/CellNumber.svelte +179 -0
  50. package/src/lib/SuperTableCells/CellNumberSimple.svelte +56 -0
  51. package/src/lib/SuperTableCells/CellOptions.svelte +631 -0
  52. package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte +684 -0
  53. package/src/lib/SuperTableCells/CellSkeleton.svelte +59 -0
  54. package/src/lib/SuperTableCells/CellString.svelte +178 -0
  55. package/src/lib/SuperTableCells/CellStringSimple.svelte +55 -0
  56. package/src/lib/SuperTableCells/index.js +21 -0
  57. package/src/lib/SuperTableCells/remixIcons.js +6772 -0
  58. package/src/lib/SuperTableColumn/SuperTableColumn.svelte +392 -0
  59. package/src/lib/SuperTableColumn/index.js +9 -0
  60. package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte +57 -0
  61. package/src/lib/SuperTableColumn/parts/SuperColumnFooter.svelte +14 -0
  62. package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte +228 -0
  63. package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte +142 -0
  64. package/src/lib/SuperTableColumn/parts/SuperColumnRowNew.svelte +34 -0
  65. package/src/lib/SuperTree/SuperTree.svelte +117 -0
  66. package/src/types/svelte-portal.d.ts +1 -0
@@ -0,0 +1,58 @@
1
+ <script>
2
+ import { getContext } from "svelte";
3
+ import SuperPopover from "../../SuperPopover/SuperPopover.svelte";
4
+ import SuperButton from "../../SuperButton/SuperButton.svelte";
5
+
6
+ const stbAPI = getContext("stbAPI");
7
+ const stbMenuID = getContext("stbMenuID");
8
+ const stbMenuAnchor = getContext("stbMenuAnchor");
9
+
10
+ export let rowContextMenuItems;
11
+ export let right = true;
12
+
13
+ $: isOpen = $stbMenuAnchor != -1;
14
+ </script>
15
+
16
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
17
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
18
+
19
+ {#if isOpen && rowContextMenuItems?.length}
20
+ <SuperPopover
21
+ open
22
+ anchor={$stbMenuAnchor}
23
+ align={right ? "right" : "left"}
24
+ ignoreAnchor={false}
25
+ on:close={() => {
26
+ $stbMenuID = -1;
27
+ $stbMenuAnchor = -1;
28
+ }}
29
+ >
30
+ <div class="action-menu">
31
+ {#each rowContextMenuItems as { text, icon, disabled, onClick, size, type }}
32
+ <SuperButton
33
+ {size}
34
+ {type}
35
+ {icon}
36
+ {text}
37
+ {disabled}
38
+ quiet={true}
39
+ menuItem
40
+ menuAlign={right ? "right" : "left"}
41
+ on:click={() => {
42
+ stbAPI.executeRowContextMenuAction($stbMenuID, onClick);
43
+ }}
44
+ />
45
+ {/each}
46
+ </div>
47
+ </SuperPopover>
48
+ {/if}
49
+
50
+ <style>
51
+ .action-menu {
52
+ min-width: 160px;
53
+ display: flex;
54
+ flex-direction: column;
55
+ align-items: stretch;
56
+ padding: 0.25rem;
57
+ }
58
+ </style>
@@ -0,0 +1,184 @@
1
+ <script>
2
+ import { getContext, createEventDispatcher } from "svelte";
3
+
4
+ const stbScrollPos = getContext("stbScrollPos");
5
+ const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
6
+ const stbSettings = getContext("stbSettings");
7
+
8
+ export let highlighted;
9
+ export let horizontalOffset = "0px";
10
+
11
+ export let clientHeight;
12
+ export let scrollHeight;
13
+ export let scrollWidth;
14
+
15
+ export let visible;
16
+ export let horizontalVisible;
17
+ export let anchor;
18
+
19
+ const dispatch = createEventDispatcher();
20
+
21
+ let startPos;
22
+ let startScrollPos;
23
+ let horizontalStartPos;
24
+ let verticalRange;
25
+ let horizontalRange;
26
+ let dragging = false;
27
+ let horizontalDragging = false;
28
+ let mouseoffset = 0;
29
+ let width;
30
+ let left;
31
+ let localWidth;
32
+
33
+ // Positioning Offsets
34
+ $: verticalTopOffset = $stbSettings.appearance.headerHeight + 8 + "px";
35
+ $: verticalBottomOffset = $stbSettings.appearance.footerHeight + 16 + "px";
36
+ $: horizontalBotttomOffset = $stbSettings.appearance.footerHeight + 8 + "px";
37
+
38
+ // Scrollbar variables
39
+ $: top = ($stbScrollPos / (scrollHeight + 32)) * 100 + "%";
40
+ $: left = ($stbHorizontalScrollPos / scrollWidth) * 100 + "%";
41
+ $: height = (clientHeight / scrollHeight) * 100 + "%";
42
+ $: verticalRange = Math.max(scrollHeight - clientHeight, 0);
43
+ $: calculate(localWidth, $stbScrollPos);
44
+
45
+ export const calculate = () => {
46
+ if (!anchor) return;
47
+ horizontalRange = anchor?.scrollWidth - anchor?.clientWidth;
48
+ visible = verticalRange;
49
+ horizontalVisible = horizontalRange;
50
+ scrollWidth = anchor?.scrollWidth;
51
+ width = (anchor?.clientWidth / anchor?.scrollWidth) * 100 + "%";
52
+ };
53
+ </script>
54
+
55
+ <svelte:window
56
+ on:mouseup={() => {
57
+ dragging = false;
58
+ horizontalDragging = false;
59
+ mouseoffset = 0;
60
+ startPos = 0;
61
+ horizontalStartPos = 0;
62
+ }}
63
+ on:mousemove={dragging || horizontalDragging
64
+ ? (e) => {
65
+ if (dragging) {
66
+ e.preventDefault();
67
+ e.stopPropagation();
68
+ mouseoffset =
69
+ (e.clientY - startPos) * (scrollHeight / clientHeight) +
70
+ startScrollPos;
71
+ if (mouseoffset > 0 && mouseoffset <= verticalRange)
72
+ $stbScrollPos = mouseoffset;
73
+ dispatch("positionChange");
74
+ }
75
+ if (horizontalDragging) {
76
+ e.preventDefault();
77
+ e.stopPropagation();
78
+ mouseoffset =
79
+ (e.clientX - horizontalStartPos) *
80
+ (anchor?.clientWidth / anchor?.scrollWidth) +
81
+ startScrollPos;
82
+ if (mouseoffset > 0 && mouseoffset <= horizontalRange)
83
+ $stbHorizontalScrollPos = mouseoffset;
84
+ }
85
+ anchor.scrollLeft = $stbHorizontalScrollPos;
86
+ }
87
+ : () => {}}
88
+ <
89
+ />
90
+
91
+ {#if verticalRange}
92
+ <div
93
+ class="stb-scrollbar"
94
+ class:highlighted
95
+ style:--offset={verticalTopOffset}
96
+ style:--bottomOffset={verticalBottomOffset}
97
+ >
98
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
99
+ <div
100
+ class="stb-scrollbar-indicator"
101
+ class:dragging
102
+ style:top
103
+ style:height
104
+ on:mousedown|self={(e) => {
105
+ dragging = true;
106
+ startPos = e.clientY;
107
+ startScrollPos = $stbScrollPos;
108
+ }}
109
+ />
110
+ </div>
111
+ {/if}
112
+
113
+ {#if horizontalRange}
114
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
115
+ <div
116
+ bind:clientWidth={localWidth}
117
+ class="stb-scrollbar horizontal"
118
+ class:highlighted
119
+ style:--horizontalOffset={horizontalOffset}
120
+ style:--horizontalBottomOffset={horizontalBotttomOffset}
121
+ >
122
+ <div
123
+ class="stb-scrollbar-indicator horizontal"
124
+ style:left
125
+ style:width
126
+ class:dragging={horizontalDragging}
127
+ on:mousedown|self={(e) => {
128
+ horizontalDragging = true;
129
+ horizontalStartPos = e.clientX;
130
+ startScrollPos = $stbHorizontalScrollPos;
131
+ }}
132
+ />
133
+ </div>
134
+ {/if}
135
+
136
+ <style>
137
+ .stb-scrollbar {
138
+ position: absolute;
139
+ right: 8px;
140
+ top: var(--offset);
141
+ bottom: var(--bottomOffset);
142
+ width: 8px;
143
+ border-radius: 4px;
144
+ opacity: 0.2;
145
+ z-index: 1;
146
+ transition: 230ms;
147
+ overflow: hidden;
148
+ }
149
+
150
+ .stb-scrollbar.horizontal {
151
+ top: unset;
152
+ bottom: var(--horizontalBottomOffset);
153
+ left: calc(var(--horizontalOffset) + 8px);
154
+ width: calc(100% - 32px - var(--horizontalOffset));
155
+ height: 8px;
156
+ }
157
+
158
+ .highlighted {
159
+ opacity: 0.55 !important;
160
+ }
161
+ .stb-scrollbar-indicator {
162
+ position: relative;
163
+ width: 100%;
164
+ border-radius: 4px;
165
+ background-color: var(--spectrum-global-color-gray-500);
166
+ min-height: 2rem;
167
+ z-index: 2;
168
+ }
169
+ .stb-scrollbar-indicator:hover {
170
+ cursor: pointer;
171
+ background-color: var(--spectrum-global-color-gray-700);
172
+ }
173
+ .stb-scrollbar-indicator.dragging,
174
+ .stb-scrollbar-indicator.horizontal.dragging {
175
+ cursor: pointer;
176
+ background-color: var(--spectrum-global-color-gray-700) !important;
177
+ }
178
+
179
+ .stb-scrollbar-indicator.horizontal {
180
+ min-height: unset;
181
+ min-width: 2rem;
182
+ height: 100%;
183
+ }
184
+ </style>
@@ -0,0 +1,64 @@
1
+ <script>
2
+ import { slide } from "svelte/transition";
3
+ import { quintOut } from "svelte/easing";
4
+ import SuperButton from "../../SuperButton/SuperButton.svelte";
5
+
6
+ export let stbState;
7
+ export let stbSettings;
8
+ export let tableAPI;
9
+ export let highlighted;
10
+ export let footer;
11
+ export let selectedActions;
12
+ export let stbSelected;
13
+ export let entityPlural = "Rows";
14
+ export let entitySingular = "Row";
15
+
16
+ let hidden;
17
+ $: if ($stbSelected.length == 0) hidden = false;
18
+ $: checkboxes = !$stbSettings.appearance.hideSelectionColumn;
19
+
20
+ $: left =
21
+ 1 +
22
+ (checkboxes +
23
+ $stbSettings.features.canDelete +
24
+ $stbSettings.appearance.numberingColumn) *
25
+ 2 +
26
+ "rem";
27
+ </script>
28
+
29
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
30
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
31
+ {#if $stbSelected.length && $stbState != "Inserting" && !hidden}
32
+ <div
33
+ class="selected-row-actions-overlay"
34
+ style:bottom={$stbSettings.appearance.footerHeight + 20}
35
+ style:left
36
+ class:highlighted
37
+ class:footer
38
+ transition:slide={{ delay: 25, duration: 230, easing: quintOut, axis: "y" }}
39
+ >
40
+ <SuperButton
41
+ icon="ri-close-line"
42
+ quiet={true}
43
+ size="S"
44
+ type="secondary"
45
+ on:click={() => (hidden = true)}
46
+ />
47
+ <span class="text">
48
+ {$stbSelected.length == 1
49
+ ? $stbSelected.length + " " + (entitySingular || "Row") + " "
50
+ : $stbSelected.length + " " + (entityPlural || "Rows") + " "} Selected
51
+ </span>
52
+ {#each selectedActions as { text, icon, disabled, type, size, onClick }}
53
+ <SuperButton
54
+ {text}
55
+ {icon}
56
+ quiet={true}
57
+ {type}
58
+ {disabled}
59
+ {size}
60
+ on:click={tableAPI.executeSelectedRowsAction(onClick)}
61
+ />
62
+ {/each}
63
+ </div>
64
+ {/if}
File without changes
File without changes
@@ -0,0 +1,288 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext } from "svelte";
3
+ import fsm from "svelte-fsm";
4
+ import SuperPopover from "../SuperPopover/SuperPopover.svelte";
5
+ import "./CellCommon.css";
6
+
7
+ export let value;
8
+ export let formattedValue;
9
+ export let cellOptions;
10
+ export let fieldSchema;
11
+
12
+ let originalValue = value;
13
+ let anchor;
14
+ let picker;
15
+ let open;
16
+ let focusedOptionIdx;
17
+
18
+ $: multi = fieldSchema?.type?.includes("single") !== true;
19
+ $: localvalue = value && multi ? value : value ? [value] : [];
20
+
21
+ const dispatch = createEventDispatcher();
22
+ const { processStringSync } = getContext("sdk");
23
+
24
+ export let cellState = fsm(cellOptions.initialState ?? "View", {
25
+ "*": {
26
+ goTo(state) {
27
+ return state;
28
+ },
29
+ },
30
+ View: {
31
+ _enter() {
32
+ open = false;
33
+ },
34
+ focus() {
35
+ if (!cellOptions.readonly) return "Editing";
36
+ },
37
+ },
38
+ Hovered: {
39
+ cancel: () => {
40
+ return "View";
41
+ },
42
+ },
43
+ Focused: {
44
+ unfocus() {
45
+ return "View";
46
+ },
47
+ },
48
+ Error: { check: "View" },
49
+ Editing: {
50
+ _enter() {
51
+ originalValue = value;
52
+ dispatch("enteredit");
53
+ },
54
+ _exit() {
55
+ dispatch("exitedit");
56
+ },
57
+ change(e) {
58
+ if (cellOptions.debounce) dispatch("change", value);
59
+ },
60
+ submit() {
61
+ if (value !== originalValue) {
62
+ dispatch("change", value);
63
+ }
64
+ dispatch("focusout");
65
+ return "View";
66
+ },
67
+ cancel() {
68
+ value = originalValue;
69
+ return "View";
70
+ },
71
+ },
72
+ });
73
+
74
+ $: formattedValue = cellOptions.template
75
+ ? processStringSync(cellOptions.template, { Value: value })
76
+ : undefined;
77
+
78
+ $: placeholder =
79
+ cellOptions.readonly || cellOptions.disabled
80
+ ? ""
81
+ : cellOptions.placeholder || "";
82
+
83
+ const focus = (node) => {
84
+ node.focus();
85
+ };
86
+ </script>
87
+
88
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
89
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
90
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
91
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
92
+ <div
93
+ class="superCell"
94
+ bind:this={anchor}
95
+ class:inEdit={$cellState == "Editing"}
96
+ class:inline={cellOptions.role == "inline"}
97
+ class:tableCell={cellOptions.role == "tableCell"}
98
+ class:formInput={cellOptions.role == "formInput"}
99
+ class:disabled={cellOptions.disabled}
100
+ class:readonly={cellOptions.readonly}
101
+ style:color={cellOptions.color}
102
+ style:background={$cellState == "Editing" && cellOptions.role != "inline"
103
+ ? "var(--spectrum-global-color-gray-50)"
104
+ : cellOptions.background}
105
+ >
106
+ {#if cellOptions.icon}
107
+ <i class={cellOptions.icon + " frontIcon"}></i>
108
+ {/if}
109
+
110
+ {#if $cellState == "Editing"}
111
+ <div
112
+ tabindex="0"
113
+ class="editor"
114
+ style:padding-left={cellOptions.icon ? "32px" : cellOptions.padding}
115
+ style:padding-right={cellOptions.padding}
116
+ style:justify-content={cellOptions.align ?? "flex-start"}
117
+ style:cursor="pointer"
118
+ on:focusout={cellState.submit}
119
+ on:click={() => (open = !open)}
120
+ use:focus
121
+ >
122
+ <div class="items">
123
+ {#each localvalue as file}
124
+ {#if file}
125
+ <div
126
+ class="item pill"
127
+ style:border={"1px solid var(--spectrum-global-color-gray-500)"}
128
+ >
129
+ <span>{file?.extension?.toUpperCase()}</span>
130
+ </div>
131
+ {/if}
132
+ {/each}
133
+ </div>
134
+
135
+ <i class="ri-add-line"></i>
136
+ </div>
137
+ {:else}
138
+ <div
139
+ tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
140
+ on:focusin={cellState.focus}
141
+ style:padding-left={cellOptions.icon ? "32px" : cellOptions.padding}
142
+ style:padding-right={cellOptions.clearValueIcon
143
+ ? "32px"
144
+ : cellOptions.padding}
145
+ class="value"
146
+ class:placeholder={localvalue.length < 1}
147
+ >
148
+ {#if localvalue.length}
149
+ <div class="items">
150
+ {#each localvalue as file}
151
+ {#if file}
152
+ <div
153
+ class="item pill"
154
+ style:border={"1px solid var(--spectrum-global-color-gray-300)"}
155
+ >
156
+ <span>{file?.extension?.toUpperCase()}</span>
157
+ </div>
158
+ {/if}
159
+ {/each}
160
+ </div>
161
+ {:else}
162
+ <span>{placeholder}</span>
163
+ {/if}
164
+ </div>
165
+ {/if}
166
+ </div>
167
+
168
+ {#if $cellState == "Editing"}
169
+ <SuperPopover
170
+ {anchor}
171
+ dismissible={false}
172
+ {open}
173
+ useAnchorWidth
174
+ minWidth={340}
175
+ >
176
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
177
+ <div
178
+ bind:this={picker}
179
+ class="options"
180
+ on:wheel={(e) => e.stopPropagation()}
181
+ on:mouseleave={() => (focusedOptionIdx = -1)}
182
+ >
183
+ {#if localvalue?.length}
184
+ {#each localvalue as option, idx (idx)}
185
+ <div
186
+ class="option"
187
+ class:focused={focusedOptionIdx === idx}
188
+ on:mouseenter={() => (focusedOptionIdx = idx)}
189
+ >
190
+ <div class="pill">{option.extension?.toUpperCase()}</div>
191
+ <a href={option.url} class="filename">{option.name}</a>
192
+ <i class="ri-delete-bin-line icon" />
193
+ </div>
194
+ {/each}
195
+ <div style="height: 1rem;"></div>
196
+ {/if}
197
+ <div class="new">Select Files</div>
198
+ </div>
199
+ </SuperPopover>
200
+ {/if}
201
+
202
+ <style>
203
+ .wrapper {
204
+ flex: auto;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 0.5rem;
208
+ white-space: nowrap;
209
+ }
210
+
211
+ .pill {
212
+ border: 1px solid var(--spectrum-global-color-gray-500);
213
+ padding: 0rem 0.25rem;
214
+ border-radius: 3px;
215
+ font-size: 11px;
216
+ display: flex;
217
+ text-overflow: ellipsis;
218
+ white-space: nowrap;
219
+ overflow: hidden;
220
+ justify-content: center;
221
+ }
222
+
223
+ a.filename {
224
+ width: 100%;
225
+ line-height: 22px;
226
+ text-overflow: ellipsis;
227
+ white-space: nowrap;
228
+ overflow: hidden;
229
+ text-decoration: underline;
230
+ color: var(--spectrum-global-color-blue-700);
231
+ }
232
+
233
+ .icon {
234
+ aspect-ratio: 1;
235
+ color: var(--spectrum-global-color-gray-500);
236
+ }
237
+ .icon:hover {
238
+ aspect-ratio: 1;
239
+ cursor: pointer;
240
+ }
241
+
242
+ .option {
243
+ display: flex;
244
+ align-items: center;
245
+ justify-content: stretch;
246
+ gap: 0.5rem;
247
+ padding: 0.25rem 0.25rem;
248
+ }
249
+ .option:hover {
250
+ background-color: var(--spectrum-global-color-gray-100);
251
+ }
252
+
253
+ .option:hover > .icon {
254
+ color: var(--spectrum-global-color-red-500);
255
+ }
256
+ .option:hover > .pill {
257
+ color: var(--spectrum-global-color-gray-800);
258
+ background-color: var(--spectrum-global-color-gray-50);
259
+ border: 1px solid var(--spectrum-global-color-gray-800);
260
+ }
261
+ .options {
262
+ display: flex;
263
+ flex-direction: column;
264
+ align-items: stretch;
265
+ padding: 0.25rem;
266
+ min-width: 15rem;
267
+ }
268
+ .attachment {
269
+ display: flex;
270
+ align-items: center;
271
+ border: 1px solid darkcyan;
272
+ border-radius: 4px;
273
+ height: 50%;
274
+ padding: 0 0.5rem 0 0.5rem;
275
+ min-width: 15rem;
276
+ }
277
+ .attachment:hover {
278
+ border: 1px solid lime;
279
+ }
280
+
281
+ .new {
282
+ text-align: center;
283
+ padding: 0.5rem 1rem;
284
+ color: var(--spectrum-global-color-blue-700);
285
+ text-decoration: underline;
286
+ border: 1px dashed var(--spectrum-global-color-blue-400);
287
+ }
288
+ </style>