From a35d507fb4948d2b73980a6780fd53131e51a5cd Mon Sep 17 00:00:00 2001 From: Erim Icel Date: Sun, 5 Jan 2025 15:22:39 +0000 Subject: [PATCH] Fixing common error states --- README.md | 1 - dist/select2-tailwindcss-theme-plain.css | 35 +++++++------------ dist/select2-tailwindcss-theme-plain.min.css | 2 +- dist/select2-tailwindcss-theme.css | 17 ++++----- dist/select2-tailwindcss-theme.min.css | 2 +- .../select2-tailwindcss-theme-plain.min.css | 2 +- docs/index.html | 2 +- src/_layout.scss | 9 +++++ src/_multiple.scss | 5 --- src/_single.scss | 5 --- 10 files changed, 33 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 7ee39a9..2a89e51 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,6 @@ https://erimicel.github.io/select2-tailwindcss-theme/ ## Current issues to be fixed - [ ] Prepend and Append Styles -- [ ] Error state - [ ] Fix height of multi select box ## 📦 Installation diff --git a/dist/select2-tailwindcss-theme-plain.css b/dist/select2-tailwindcss-theme-plain.css index 6c4331f..ae3ca11 100644 --- a/dist/select2-tailwindcss-theme-plain.css +++ b/dist/select2-tailwindcss-theme-plain.css @@ -199,6 +199,19 @@ content: "" } +/* Error states */ +.field_with_errors .select2-container--tailwindcss-3 .select2-selection, +select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection, +select:invalid ~ .select2-container--tailwindcss-3 .select2-selection{ + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) +} + /* Single Selection */ .select2-container--tailwindcss-3 .select2-selection--single{ position: relative; @@ -314,17 +327,6 @@ --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) } -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--single{ - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) -} - /* RTL Support */ .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{ padding-left: 2.5rem; @@ -468,14 +470,3 @@ --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) } - -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple{ - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) -} diff --git a/dist/select2-tailwindcss-theme-plain.min.css b/dist/select2-tailwindcss-theme-plain.min.css index 484c3ef..5ebc49f 100644 --- a/dist/select2-tailwindcss-theme-plain.min.css +++ b/dist/select2-tailwindcss-theme-plain.min.css @@ -1 +1 @@ -@charset "UTF-8";.select2-container--tailwindcss-3{display:block;width:100%}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:.875rem;line-height:1.25rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(37 99 235/var(--tw-border-opacity,1));content:""}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:default;height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-selection--single:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:0;padding-right:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--error .select2-selection--single{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .5rem}.select2-container--tailwindcss-3 .select2-selection--multiple:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:inline;float:left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;margin:.25rem;--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;width:1rem;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:.875rem;height:2rem;line-height:1.25rem;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:700;margin-right:1rem;margin-top:.5rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))} \ No newline at end of file +@charset "UTF-8";.select2-container--tailwindcss-3{display:block;width:100%}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:.875rem;line-height:1.25rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(37 99 235/var(--tw-border-opacity,1));content:""}.field_with_errors .select2-container--tailwindcss-3 .select2-selection,select.is-invalid~.select2-container--tailwindcss-3 .select2-selection,select:invalid~.select2-container--tailwindcss-3 .select2-selection{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:default;height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-selection--single:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:0;padding-right:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .5rem}.select2-container--tailwindcss-3 .select2-selection--multiple:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:inline;float:left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;margin:.25rem;--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;width:1rem;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:.875rem;height:2rem;line-height:1.25rem;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:700;margin-right:1rem;margin-top:.5rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))} \ No newline at end of file diff --git a/dist/select2-tailwindcss-theme.css b/dist/select2-tailwindcss-theme.css index a2504db..70b2dcc 100644 --- a/dist/select2-tailwindcss-theme.css +++ b/dist/select2-tailwindcss-theme.css @@ -70,6 +70,13 @@ content: ""; } +/* Error states */ +.field_with_errors .select2-container--tailwindcss-3 .select2-selection, +select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection, +select:invalid ~ .select2-container--tailwindcss-3 .select2-selection { + @apply border-red-500 ring-1 ring-red-500; +} + /* Single Selection */ .select2-container--tailwindcss-3 .select2-selection--single { @apply relative w-full h-9 py-1.5 pl-3 pr-8 text-left transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm; @@ -114,11 +121,6 @@ @apply border-blue-500 ring-1 ring-blue-500; } -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--single { - @apply border-red-500 ring-1 ring-red-500; -} - /* RTL Support */ .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered { @apply pl-10 pr-3; @@ -168,8 +170,3 @@ .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple { @apply border-blue-500 ring-1 ring-blue-500; } - -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple { - @apply border-red-500 ring-1 ring-red-500; -} diff --git a/dist/select2-tailwindcss-theme.min.css b/dist/select2-tailwindcss-theme.min.css index 70d6b59..f066245 100644 --- a/dist/select2-tailwindcss-theme.min.css +++ b/dist/select2-tailwindcss-theme.min.css @@ -1 +1 @@ -@charset "UTF-8";.select2-container--tailwindcss-3{@apply block w-full}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{@apply w-full py-1 mt-1 overflow-auto text-base bg-white border-none rounded-md shadow-lg max-h-60 ring-1 ring-black/5 ring-opacity-5 focus:outline-none sm:text-sm}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{@apply origin-top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{@apply origin-bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{@apply block w-full px-3 py-1.5 text-sm placeholder-gray-400 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500}.select2-container--tailwindcss-3 .select2-results__options{@apply overflow-auto max-h-60}.select2-container--tailwindcss-3 .select2-results__option{@apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 ease-in-out cursor-default select-none pr-9}.select2-container--tailwindcss-3 .select2-results__option--highlighted{@apply text-white bg-indigo-600}.select2-container--tailwindcss-3 .select2-results__option--selected{@apply font-medium text-blue-900 bg-blue-100}.select2-container--tailwindcss-3 .select2-results__option--selected:after{@apply absolute inset-y-0 flex items-center text-blue-600 right-3;content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{@apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700}.select2-container--tailwindcss-3 .select2-results__option--group{@apply px-0 py-0}.select2-container--tailwindcss-3 .select2-results__option--loading{@apply flex items-center justify-center py-4 text-gray-400}.select2-container--tailwindcss-3 .select2-results__option--loading:after{@apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-blue-600;content:""}.select2-container--tailwindcss-3 .select2-selection--single{@apply relative w-full h-9 py-1.5 pl-3 pr-8 text-left transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{@apply block pl-0 pr-0 text-gray-900 truncate}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{@apply text-gray-400}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{@apply absolute inset-y-0 right-0 flex items-center pr-2}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{@apply w-5 h-5 text-gray-400;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{@apply text-gray-500 cursor-not-allowed bg-gray-50}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{@apply float-right pr-0 mr-0 font-bold text-gray-400 cursor-pointer hover:text-gray-600}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{@apply border-blue-500 ring-1 ring-blue-500}.select2-container--tailwindcss-3.select2-container--error .select2-selection--single{@apply border-red-500 ring-1 ring-red-500}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{@apply pl-10 pr-3}.select2-container--tailwindcss-3 .select2-selection--multiple{@apply min-h-[2.25rem] rounded-md border border-gray-300 bg-white py-1 px-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{@apply inline float-left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{@apply m-1 inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{@apply -ml-1 mr-1.5 h-4 w-4 items-center flex justify-center rounded-full text-blue-600 hover:bg-blue-200 hover:text-blue-900}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{@apply h-8 p-0 text-sm placeholder-gray-400 bg-transparent border-0 focus:outline-none focus:ring-0}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{@apply text-gray-500 cursor-not-allowed bg-gray-50}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{@apply pr-4}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{@apply absolute top-0 right-0 mt-2 mr-4 font-bold text-gray-400 cursor-pointer hover:text-gray-600}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{@apply border-blue-500 ring-1 ring-blue-500}.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple{@apply border-red-500 ring-1 ring-red-500} \ No newline at end of file +@charset "UTF-8";.select2-container--tailwindcss-3{@apply block w-full}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{@apply w-full py-1 mt-1 overflow-auto text-base bg-white border-none rounded-md shadow-lg max-h-60 ring-1 ring-black/5 ring-opacity-5 focus:outline-none sm:text-sm}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{@apply origin-top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{@apply origin-bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{@apply block w-full px-3 py-1.5 text-sm placeholder-gray-400 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500}.select2-container--tailwindcss-3 .select2-results__options{@apply overflow-auto max-h-60}.select2-container--tailwindcss-3 .select2-results__option{@apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 ease-in-out cursor-default select-none pr-9}.select2-container--tailwindcss-3 .select2-results__option--highlighted{@apply text-white bg-indigo-600}.select2-container--tailwindcss-3 .select2-results__option--selected{@apply font-medium text-blue-900 bg-blue-100}.select2-container--tailwindcss-3 .select2-results__option--selected:after{@apply absolute inset-y-0 flex items-center text-blue-600 right-3;content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{@apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700}.select2-container--tailwindcss-3 .select2-results__option--group{@apply px-0 py-0}.select2-container--tailwindcss-3 .select2-results__option--loading{@apply flex items-center justify-center py-4 text-gray-400}.select2-container--tailwindcss-3 .select2-results__option--loading:after{@apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-blue-600;content:""}.field_with_errors .select2-container--tailwindcss-3 .select2-selection,select.is-invalid~.select2-container--tailwindcss-3 .select2-selection,select:invalid~.select2-container--tailwindcss-3 .select2-selection{@apply border-red-500 ring-1 ring-red-500}.select2-container--tailwindcss-3 .select2-selection--single{@apply relative w-full h-9 py-1.5 pl-3 pr-8 text-left transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{@apply block pl-0 pr-0 text-gray-900 truncate}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{@apply text-gray-400}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{@apply absolute inset-y-0 right-0 flex items-center pr-2}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{@apply w-5 h-5 text-gray-400;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{@apply text-gray-500 cursor-not-allowed bg-gray-50}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{@apply float-right pr-0 mr-0 font-bold text-gray-400 cursor-pointer hover:text-gray-600}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{@apply border-blue-500 ring-1 ring-blue-500}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{@apply pl-10 pr-3}.select2-container--tailwindcss-3 .select2-selection--multiple{@apply min-h-[2.25rem] rounded-md border border-gray-300 bg-white py-1 px-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{@apply inline float-left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{@apply m-1 inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{@apply -ml-1 mr-1.5 h-4 w-4 items-center flex justify-center rounded-full text-blue-600 hover:bg-blue-200 hover:text-blue-900}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{@apply h-8 p-0 text-sm placeholder-gray-400 bg-transparent border-0 focus:outline-none focus:ring-0}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{@apply text-gray-500 cursor-not-allowed bg-gray-50}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{@apply pr-4}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{@apply absolute top-0 right-0 mt-2 mr-4 font-bold text-gray-400 cursor-pointer hover:text-gray-600}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{@apply border-blue-500 ring-1 ring-blue-500} \ No newline at end of file diff --git a/docs/css/select2-tailwindcss-theme-plain.min.css b/docs/css/select2-tailwindcss-theme-plain.min.css index 484c3ef..5ebc49f 100644 --- a/docs/css/select2-tailwindcss-theme-plain.min.css +++ b/docs/css/select2-tailwindcss-theme-plain.min.css @@ -1 +1 @@ -@charset "UTF-8";.select2-container--tailwindcss-3{display:block;width:100%}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:.875rem;line-height:1.25rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(37 99 235/var(--tw-border-opacity,1));content:""}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:default;height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-selection--single:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:0;padding-right:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--error .select2-selection--single{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .5rem}.select2-container--tailwindcss-3 .select2-selection--multiple:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:inline;float:left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;margin:.25rem;--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;width:1rem;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:.875rem;height:2rem;line-height:1.25rem;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:700;margin-right:1rem;margin-top:.5rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))} \ No newline at end of file +@charset "UTF-8";.select2-container--tailwindcss-3{display:block;width:100%}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:.875rem;line-height:1.25rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-weight:500;--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(37 99 235/var(--tw-border-opacity,1));content:""}.field_with_errors .select2-container--tailwindcss-3 .select2-selection,select.is-invalid~.select2-container--tailwindcss-3 .select2-selection,select:invalid~.select2-container--tailwindcss-3 .select2-selection{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:default;height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-selection--single:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:0;padding-right:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:.25rem .5rem}.select2-container--tailwindcss-3 .select2-selection--multiple:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:inline;float:left}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;margin:.25rem;--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1));font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;width:1rem;--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:.875rem;height:2rem;line-height:1.25rem;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:700;margin-right:1rem;margin-top:.5rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 3b3e27a..d62e3dc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -134,7 +134,7 @@

-

Something is wrong.

diff --git a/src/_layout.scss b/src/_layout.scss index 15cbe38..43e0901 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -68,3 +68,12 @@ @apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-blue-600; content: ''; } + +/* Error states */ +// Ruby on Rails common error fields +.field_with_errors .select2-container--tailwindcss-3 .select2-selection, +// Common select invalid state +select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection, +select:invalid ~ .select2-container--tailwindcss-3 .select2-selection { + @apply border-red-500 ring-1 ring-red-500; +} diff --git a/src/_multiple.scss b/src/_multiple.scss index 2037301..b00b1ce 100644 --- a/src/_multiple.scss +++ b/src/_multiple.scss @@ -42,8 +42,3 @@ .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple { @apply border-blue-500 ring-1 ring-blue-500; } - -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--multiple { - @apply border-red-500 ring-1 ring-red-500; -} \ No newline at end of file diff --git a/src/_single.scss b/src/_single.scss index e913428..1a758dd 100644 --- a/src/_single.scss +++ b/src/_single.scss @@ -42,11 +42,6 @@ @apply border-blue-500 ring-1 ring-blue-500; } -/* Error state */ -.select2-container--tailwindcss-3.select2-container--error .select2-selection--single { - @apply border-red-500 ring-1 ring-red-500; -} - /* RTL Support */ .select2-container--tailwindcss-3[dir="rtl"] .select2-selection--single .select2-selection__rendered { @apply pl-10 pr-3;