style: updated input component style
mellbacon committed
Jun 25, 2023 at 14:24 UTC
0c346d683cb49eb68abb3879e1c3510b080a24ef
2 files changed
+19
-4
src/lib/utility/Input.svelte
+16
-4
@@ -4,15 +4,23 @@
4
export let placeholder = "";
5
6
export let value = "";
7
+ export let _class = "";
8
</script>
9
9
-{#if label}
10
- <label for="textInput">{label}:</label>
11
-{/if}
10
+<div class="input-container {_class}">
11
+ {#if label}
12
+ <label for="textInput">{label}:</label>
13
+ {/if}
14
13
-<input bind:value type="text" name="textInput" id="textInput" readonly={readonly} placeholder={placeholder}>
15
+ <input class:readonly bind:value type="text" name="textInput" id="textInput" readonly={readonly} placeholder={placeholder}>
16
+</div>
17
18
<style lang="scss">
19
+ .input-container {
20
+ display: flex;
21
+ flex-direction: column;
22
+ width: 100%;
23
+ }
24
label {
25
font-size: 0.9rem;
26
}
@@ -21,4 +29,8 @@
29
padding: 0.6em 0.4em 0.6em 0.8em;
30
width: 100%;
31
}
32
+ .readonly {
33
+ cursor: not-allowed;
34
+ background-color: #2d2d2d;
35
+ }
36
</style>
\ No newline at end of file
src/theme.scss
+3
@@ -215,3 +215,6 @@ input {
215
.ͼ4 .cm-line::selection, .ͼ2 .cm-selectionBackground {
216
background-color: #4d5054 !important;
217
}
218
+.rename-input .divider {
219
+ background-color: var(--window-inputBorder);
220
+}
\ No newline at end of file