From ca3abef449f7bd350456c882c1ecf304f585e822 Mon Sep 17 00:00:00 2001 From: Libertie Valance Date: Thu, 16 Sep 2021 12:14:29 -0400 Subject: [PATCH] Override tailwindcss/forms focus styling --- README.md | 4 ++-- themes/tailwind.css | 2 +- themes/tailwind.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0f8c97f..ff38283 100644 --- a/README.md +++ b/README.md @@ -465,14 +465,14 @@ Alternatively you can define class names directly by passing them to the `Multis containerActive: 'ring ring-green-500 ring-opacity-30', singleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5', multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5', - search: 'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5', + search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5', tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2', tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap', tagDisabled: 'pr-2 opacity-50', tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group', tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60', tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full', - tagsSearch: 'absolute inset-0 border-0 outline-none appearance-none p-0 text-base font-sans box-border w-full', + tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full', tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px', placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400', caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none', diff --git a/themes/tailwind.css b/themes/tailwind.css index db5d061..8a5a966 100644 --- a/themes/tailwind.css +++ b/themes/tailwind.css @@ -1 +1 @@ -.multiselect{@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none}.multiselect.is-disabled{@apply cursor-default bg-gray-100}.multiselect.is-open{@apply rounded-b-none}.multiselect.is-open-top{@apply rounded-t-none}.multiselect.is-active{@apply ring ring-green-500 ring-opacity-30}.multiselect-multiple-label,.multiselect-single-label{@apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5}.multiselect-search{@apply w-full absolute inset-0 outline-none appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5}.multiselect-tags{@apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2}.multiselect-tag{@apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap}.multiselect-tag.is-disabled{@apply pr-2 opacity-50}.multiselect-tag-remove{@apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group}.multiselect-tag-remove-icon{@apply bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60}.multiselect-tags-search-wrapper{@apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full}.multiselect-tags-search{@apply absolute inset-0 border-0 outline-none appearance-none p-0 text-base font-sans box-border w-full}.multiselect-tags-search-copy{@apply invisible whitespace-pre-wrap inline-block h-px}.multiselect-placeholder{@apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400}.multiselect-caret{@apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none}.multiselect-caret.is-open{@apply rotate-180 pointer-events-auto}.multiselect-clear{@apply pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80}.multiselect-clear-icon{@apply bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block}.multiselect-spinner{@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0}.multiselect-dropdown{@apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b}.multiselect-dropdown.is-top{@apply -translate-y-full top-px bottom-auto flex-col-reverse rounded-b-none rounded-t}.multiselect-dropdown.is-hidden{@apply hidden}.multiselect-options{@apply flex flex-col p-0 m-0 list-none}.multiselect-options.is-top{@apply flex-col-reverse}.multiselect-group{@apply p-0 m-0}.multiselect-group-label{@apply flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal}.multiselect-group-label.is-pointable{@apply cursor-pointer}.multiselect-group-label.is-pointed{@apply bg-gray-300 text-gray-700}.multiselect-group-label.is-selected{@apply bg-green-600 text-white}.multiselect-group-label.is-disabled{@apply bg-gray-100 text-gray-300 cursor-not-allowed}.multiselect-group-label.is-selected.is-pointed{@apply bg-green-600 text-white opacity-90}.multiselect-group-label.is-selected.is-disabled{@apply text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed}.multiselect-group-options{@apply p-0 m-0}.multiselect-option{@apply flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3}.multiselect-option.is-pointed{@apply text-gray-800 bg-gray-100}.multiselect-option.is-selected{@apply text-white bg-green-500}.multiselect-option.is-disabled{@apply text-gray-300 cursor-not-allowed}.multiselect-option.is-selected.is-pointed{@apply text-white bg-green-500 opacity-90}.multiselect-option.is-selected.is-disabled{@apply text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed}.multiselect-no-options,.multiselect-no-results{@apply py-2 px-3 text-gray-600 bg-white}.multiselect-fake-input{@apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent}.multiselect-spacer{@apply h-9 py-px box-content} \ No newline at end of file +.multiselect{@apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none}.multiselect.is-disabled{@apply cursor-default bg-gray-100}.multiselect.is-open{@apply rounded-b-none}.multiselect.is-open-top{@apply rounded-t-none}.multiselect.is-active{@apply ring ring-green-500 ring-opacity-30}.multiselect-multiple-label,.multiselect-single-label{@apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5}.multiselect-search{@apply w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5}.multiselect-tags{@apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2}.multiselect-tag{@apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap}.multiselect-tag.is-disabled{@apply pr-2 opacity-50}.multiselect-tag-remove{@apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group}.multiselect-tag-remove-icon{@apply bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60}.multiselect-tags-search-wrapper{@apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full}.multiselect-tags-search{@apply absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full}.multiselect-tags-search-copy{@apply invisible whitespace-pre-wrap inline-block h-px}.multiselect-placeholder{@apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400}.multiselect-caret{@apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none}.multiselect-caret.is-open{@apply rotate-180 pointer-events-auto}.multiselect-clear{@apply pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80}.multiselect-clear-icon{@apply bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block}.multiselect-spinner{@apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0}.multiselect-dropdown{@apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b}.multiselect-dropdown.is-top{@apply -translate-y-full top-px bottom-auto flex-col-reverse rounded-b-none rounded-t}.multiselect-dropdown.is-hidden{@apply hidden}.multiselect-options{@apply flex flex-col p-0 m-0 list-none}.multiselect-options.is-top{@apply flex-col-reverse}.multiselect-group{@apply p-0 m-0}.multiselect-group-label{@apply flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal}.multiselect-group-label.is-pointable{@apply cursor-pointer}.multiselect-group-label.is-pointed{@apply bg-gray-300 text-gray-700}.multiselect-group-label.is-selected{@apply bg-green-600 text-white}.multiselect-group-label.is-disabled{@apply bg-gray-100 text-gray-300 cursor-not-allowed}.multiselect-group-label.is-selected.is-pointed{@apply bg-green-600 text-white opacity-90}.multiselect-group-label.is-selected.is-disabled{@apply text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed}.multiselect-group-options{@apply p-0 m-0}.multiselect-option{@apply flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3}.multiselect-option.is-pointed{@apply text-gray-800 bg-gray-100}.multiselect-option.is-selected{@apply text-white bg-green-500}.multiselect-option.is-disabled{@apply text-gray-300 cursor-not-allowed}.multiselect-option.is-selected.is-pointed{@apply text-white bg-green-500 opacity-90}.multiselect-option.is-selected.is-disabled{@apply text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed}.multiselect-no-options,.multiselect-no-results{@apply py-2 px-3 text-gray-600 bg-white}.multiselect-fake-input{@apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent}.multiselect-spacer{@apply h-9 py-px box-content} \ No newline at end of file diff --git a/themes/tailwind.scss b/themes/tailwind.scss index 6600aa8..6eced27 100644 --- a/themes/tailwind.scss +++ b/themes/tailwind.scss @@ -27,7 +27,7 @@ } .multiselect-search { - @apply w-full absolute inset-0 outline-none appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5; + @apply w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5; } .multiselect-tags { @@ -55,7 +55,7 @@ } .multiselect-tags-search { - @apply absolute inset-0 border-0 outline-none appearance-none p-0 text-base font-sans box-border w-full; + @apply absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full; } .multiselect-tags-search-copy {