Fix styles for input fields on focus state

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Nov 6, 2023 · 200a06f · 200a06f
1 parent f12a881
commit 200a06f
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
@@ -58,10 +58,14 @@
 					</ul>
 				</div>
 				<div v-if="contactsAppEnabled" class="contactsmenu__menu__content__footer">
-					<NcButton type="tertiary" :href="contactsAppURL">{{ t('core', 'Show all contacts') }}</NcButton>
+					<NcButton type="tertiary" :href="contactsAppURL">
+						{{ t('core', 'Show all contacts') }}
+					</NcButton>
 				</div>
 				<div v-else-if="canInstallApp" class="contactsmenu__menu__content__footer">
-					<NcButton type="tertiary" :href="contactsAppMgmtURL">{{ t('core', 'Install the Contacts app') }}</NcButton>
+					<NcButton type="tertiary" :href="contactsAppMgmtURL">
+						{{ t('core', 'Install the Contacts app') }}
+					</NcButton>
 				</div>
 			</div>
 		</div>
@@ -170,6 +174,13 @@ export default {
 			width: 100%;
 			height: 34px;
 			margin: 8px 0;
+
+			&:focus,
+			&:focus-visible,
+			&:active {
+				border-color: 2px solid var(--color-main-text) !important;
+				box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			}
 		}
 
 		&__content {

diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
@@ -762,6 +762,12 @@ $input-padding: 6px;
 
 	&__form-input {
 		margin: 0 !important;
+		&:focus,
+		&:focus-visible,
+		&:active {
+			border-color: 2px solid var(--color-main-text) !important;
+			box-shadow: 0 0 0 2px var(--color-main-background) !important;
+		}
 	}
 
 	&__input-row {

diff --git a/dist/core-main.js b/dist/core-main.js
diff --git a/dist/core-main.js.map b/dist/core-main.js.map
diff --git a/dist/core-unified-search.js b/dist/core-unified-search.js
diff --git a/dist/core-unified-search.js.map b/dist/core-unified-search.js.map