fix(components): fix input focus states and text sizes

Police-Data-Accessibility-Project · Nov 12, 2024 · 915f046 · 915f046
1 parent 9369b2c
commit 915f046
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue
@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<PdapInputProps>(), {});
 const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 </script>
 
-<style>
+<style scoped>
 @tailwind components;
 
 @layer components {

diff --git a/src/components/InputSelect/PdapInputSelect.vue b/src/components/InputSelect/PdapInputSelect.vue
@@ -253,15 +253,21 @@ watch(
 
 @layer components {
 	.pdap-custom-select {
-		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border border-solid border-neutral-500 cursor-pointer;
+		@apply relative w-full bg-neutral-50 dark:bg-neutral-950 border-2 border-solid border-neutral-500 cursor-pointer text-lg;
 	}
 
 	.pdap-custom-select-options {
 		@apply absolute top-[115%] left-[-2px] w-[calc(100%+4px)] bg-neutral-50 dark:bg-neutral-950 border-solid border border-neutral-500 max-h-48 overflow-y-auto z-20 p-1;
 	}
 
 	.pdap-custom-select-option {
-		@apply text-neutral-950 dark:text-neutral-50 p-2 w-full max-w-full cursor-pointer;
+		@apply text-neutral-950 dark:text-neutral-50 p-2 w-full max-w-full cursor-pointer border-2 border-solid;
+	}
+
+	.pdap-custom-select:focus,
+	.pdap-custom-select-option:hover,
+	.pdap-custom-select-option:focus {
+		@apply border-2 border-brand-gold-500 border-solid outline-none;
 	}
 
 	.pdap-custom-select-option:hover,

diff --git a/src/styles/components.css b/src/styles/components.css
@@ -43,7 +43,7 @@
 
 	.pdap-input input,
 	.pdap-input textarea {
-		@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
+		@apply dark:bg-neutral-950 border-neutral-500 border-solid border-2 px-3 py-2 text-[rgba(0,0,0)] rounded-md;
 	}
 
 	.pdap-input input::placeholder,
@@ -56,8 +56,9 @@
 	.pdap-input input:focus-visible,
 	.pdap-input textarea:focus,
 	.pdap-input textarea:focus-within,
-	.pdap-input textarea:focus-visible {
-		@apply border-2 border-blue-light border-solid outline-none;
+	.pdap-input textarea:focus-visible, 
+	.pdap-input-checkbox:has(input[type="checkbox"]:focus) {
+		@apply border-2 border-brand-gold-500 border-solid outline-none;
 	}
 
 	.pdap-input label {
@@ -92,10 +93,11 @@
 
 	/* Input - checkbox */
 	.pdap-input-checkbox {
-		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto;
+		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto rounded-md;
 	}
 
-	.pdap-input-checkbox:has(input:checked) {
+	.pdap-input-checkbox:has(input:checked),
+	.pdap-input-checkbox:has(input:checked):has(input[type="checkbox"]:focus) {
 		@apply border-2 border-brand-gold border-solid rounded-md;
 	}
 
@@ -112,6 +114,7 @@
 		@apply cursor-pointer;
 	}
 
+
 	/* Text area */
 	.pdap-input textarea {
 	  @apply text-lg;