fluent-svelte-extra 1.3.8 → 1.3.9
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/TextArea/TextArea.scss +6 -4
- package/TextArea/TextArea.svelte +17 -5
- package/package.json +1 -1
package/TextArea/TextArea.scss
CHANGED
|
@@ -14,13 +14,15 @@
|
|
|
14
14
|
flex: 1 1 auto;
|
|
15
15
|
inline-size: 100%;
|
|
16
16
|
min-block-size: 30px;
|
|
17
|
-
|
|
17
|
+
padding: 6px 12px;
|
|
18
18
|
border-radius: var(--control-corner-radius);
|
|
19
19
|
color: var(--text-primary);
|
|
20
20
|
background-color: transparent;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
&:empty:before {
|
|
22
|
+
content: attr(placeholder);
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
display: block;
|
|
25
|
+
opacity: 0.5;
|
|
24
26
|
}
|
|
25
27
|
&::-webkit-search-decoration,
|
|
26
28
|
&::-webkit-search-cancel-button,
|
package/TextArea/TextArea.svelte
CHANGED
|
@@ -42,10 +42,22 @@ textarea.
|
|
|
42
42
|
use:externalMouseEvents={{ type: "mousedown" }}
|
|
43
43
|
on:outermousedown
|
|
44
44
|
>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
<div
|
|
46
|
+
role="textbox"
|
|
47
|
+
{spellcheck}
|
|
48
|
+
contenteditable="true"
|
|
49
|
+
bind:this={textAreaElement}
|
|
50
|
+
use:forwardEvents
|
|
51
|
+
{...inputProps}
|
|
52
|
+
bind:textContent={value}
|
|
53
|
+
/>
|
|
54
|
+
<slot />
|
|
55
|
+
<div
|
|
56
|
+
class="text-area-underline"
|
|
57
|
+
style={disableBottomBorder
|
|
58
|
+
? "--fds-bottom-border: none;"
|
|
59
|
+
: "--fds-bottom-border: 1px solid var(--fds-control-strong-stroke-default);"}
|
|
60
|
+
/>
|
|
49
61
|
</div>
|
|
50
62
|
|
|
51
|
-
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:unset;flex-grow:1;flex:1 1 auto;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:100%;line-height:20px;margin:0;min-block-size:30px;outline:none;overflow-x:hidden;overflow-y:auto;padding:6px 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-break:break-all}.text-area
|
|
63
|
+
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:unset;flex-grow:1;flex:1 1 auto;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:100%;line-height:20px;margin:0;min-block-size:30px;outline:none;overflow-x:hidden;overflow-y:auto;padding:6px 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-break:break-all}.text-area:empty:before{content:attr(placeholder);display:block;opacity:.5;pointer-events:none}.text-area::-webkit-search-cancel-button,.text-area::-webkit-search-decoration,.text-area::-webkit-search-results-button,.text-area::-webkit-search-results-decoration{-webkit-appearance:none}.text-area::-ms-reveal{display:none}.text-area:disabled{color:var(--fds-text-disabled)}.text-area:disabled::-moz-placeholder{color:var(--fds-text-disabled)}.text-area:disabled:-ms-input-placeholder{color:var(--fds-text-disabled)}.text-area:disabled::placeholder{color:var(--fds-text-disabled)}.text-area-container{align-items:center;background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-stroke-default);border-radius:var(--fds-control-corner-radius);cursor:text;display:flex;inline-size:100%;position:relative}.text-area-container:hover{background-color:var(--fds-control-fill-secondary)}.text-area-container.disabled{background-color:var(--fds-control-fill-disabled);cursor:default}.text-area-container.disabled .text-area-underline{display:none}.text-area-container:focus-within{background-color:var(--fds-control-fill-input-active)}.text-area-container:focus-within .text-area::-moz-placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area:-ms-input-placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area::placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area-underline:after{border-bottom:2px solid var(--fds-accent-default)}.text-area-container:focus-within :global(.text-area-clear-button){display:flex}.text-area-underline{block-size:calc(100% + 2px);border-radius:var(--fds-control-corner-radius);inline-size:calc(100% + 2px);inset-block-start:-1px;inset-inline-start:-1px;overflow:hidden;pointer-events:none;position:absolute}.text-area-underline:after{block-size:100%;border-bottom:var(--fds-bottom-border);box-sizing:border-box;content:"";inline-size:100%;inset-block-end:0;inset-inline-start:0;position:absolute}.text-area-buttons{align-items:center;cursor:default;display:flex;flex:0 0 auto}.text-area-buttons >:global(.text-area-button){-webkit-margin-start:6px;margin-inline-start:6px}.text-area-buttons >:global(.text-area-button:first-of-type){-webkit-margin-start:0;margin-inline-start:0}.text-area-buttons >:global(.text-area-button:last-of-type){-webkit-margin-end:4px;margin-inline-end:4px}.text-area-buttons :global(.text-area-clear-button){display:none}</style>
|
package/package.json
CHANGED