feat: added focus styling for input and button elements
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Nov 6, 2023 at 23:06 UTC
6a974de3bc0ae5fcd931b77485bf7b7d8cfed1a8
6 files changed
+31
-9
src/config/themes/dark-theme.json
+1
-1
@@ -15,7 +15,7 @@
15
"inputBackground": "#333",
16
"inputForeground": "#ffffff",
17
"inputBorder": "#6f6f6f",
18
- "inputFocusBorder": "",
18
+ "inputFocusBorder": "#34b0f8",
19
"inputLabelForeground": "#c6c6c6",
20
"scrollbarBackground": "#4c4c4c38"
21
},
src/global.css
+4
-4
@@ -1,5 +1,5 @@
1
*:focus-visible, *:focus {
2
- outline: none !important;
2
+ outline: none;
3
}
4
5
html, body {
@@ -48,12 +48,12 @@ input, button, select, textarea {
48
font-size: inherit;
49
padding: 0.4em;
50
margin: 0;
51
- outline: none !important;
51
+ outline: none;
52
box-sizing: border-box;
53
}
54
55
-input:focus, button:focus, textarea:focus {
56
- outline: none !important;
55
+input:focus, textarea:focus {
56
+ outline: none;
57
}
58
59
input:disabled {
src/lib/FileTree.svelte
+7
-3
@@ -81,10 +81,14 @@
81
padding: 5px 25px;
82
font-size: 0.875rem;
83
border-radius: 2px;
84
+ &:hover {
85
+ background-color: #323232;
86
+ }
87
+ &:focus {
88
+ outline-color: #2276b2;
89
+ }
90
}
85
- .toolbar-button:hover {
86
- background-color: rgb(50 50 50);
87
- }
91
+
92
.container {
93
display:flex;
94
flex-direction:column;
src/lib/utility/Input.svelte
+8
-1
@@ -1,5 +1,5 @@
1
<script lang="ts">
2
- import { createEventDispatcher } from "svelte";
2
+ import { createEventDispatcher, onMount } from "svelte";
3
const dispatch = createEventDispatcher();
4
5
export let readonly = false;
@@ -14,6 +14,12 @@
14
export let medium = false;
15
export let invalid = false;
16
17
+ let ref: HTMLElement = null;
18
+
19
+ onMount(() => {
20
+ ref.focus();
21
+ })
22
+
23
let _ = null;
24
async function handleInput(e) {
25
clearTimeout(_);
@@ -30,6 +36,7 @@
36
{/if}
37
38
<input on:input={handleInput}
39
+ bind:this={ref}
40
autocomplete="off"
41
class="mousetrap"
42
class:invalid
src/lib/utility/Popup.svelte
+3
@@ -117,6 +117,9 @@
117
&:hover {
118
background-color: #1c88d4;
119
}
120
+ &:focus {
121
+ outline-color: #2276b2;
122
+ }
123
}
124
}
125
}
src/theme.scss
+8
@@ -15,6 +15,7 @@ $tab-container-height: 2rem;
15
--window-inputBackground: "";
16
--window-inputForeground: "";
17
--window-inputBorder: "";
18
+ --window-inputFocusBorder: "";
19
--window-inputLabelForeground: "";
20
--window-scrollbar-backgroundColor: #eeffff17;
21
@@ -107,6 +108,13 @@ input {
108
&.invalid {
109
border-bottom: 1px solid #fa4d56 !important;
110
}
111
+ &:focus{
112
+ border-bottom: 1px solid var(--window-inputFocusBorder) !important;
113
+ }
114
+}
115
+button:focus {
116
+ outline: 1px solid;
117
+ outline-offset: 3px;
118
}
119
120
.divider {