diff --git a/src/assets/css/base.css b/src/assets/css/base.css index 0e83bc4..d127c65 100755 --- a/src/assets/css/base.css +++ b/src/assets/css/base.css @@ -65,4 +65,23 @@ } .dx-datagrid .dx-row > td{ font-size: 10px !important; +} +.dx-toolbar .dx-toolbar-items-container{ + height: 56px !important; +} +.dx-texteditor-input{ + border: 1px solid #d1d5db !important; + border-radius: 8px !important; +} +.dx-texteditor.dx-editor-filled::after{ + border: none !important; +} +.dx-texteditor.dx-state-active::before, .dx-texteditor.dx-state-focused::before{ + border: none !important; +} +.dx-button-has-icon .dx-icon{ + font-size: 24px !important; +} +.dx-list-item-icon{ + font-size: 24px !important; } \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 74e5e85..8e0eb1f 100755 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -930,8 +930,8 @@ body { .filter-input-label { margin-bottom: 0.5rem; display: block; - font-size: 0.875rem; - line-height: 1.25rem; + font-size: 0.75rem; + line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); @@ -943,6 +943,103 @@ body { } } +.rich-select-trigger { + position: relative; + display: flex; + width: 100%; + cursor: pointer; + align-items: center; + justify-content: space-between; + border-style: none; + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.rich-select-trigger:focus { + z-index: 10; + outline: 2px solid transparent; + outline-offset: 2px; +} + +.rich-select-trigger:focus-visible { + --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(2px + 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: rgb(255 255 255 / var(--tw-ring-opacity)); + --tw-ring-opacity: 0.75; + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #5eead4; +} + +.rich-select-trigger:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +.rich-select-search-input { + display: inline-block; + width: 100%; + border-radius: 0.5rem; + border-width: 0px; + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.rich-select-search-input::-moz-placeholder { + color: rgb(107 114 128 / 0.6); +} + +.rich-select-search-input::placeholder { + color: rgb(107 114 128 / 0.6); +} + +.rich-select-search-input:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.rich-select-search-input:focus-visible { + --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(2px + 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: rgb(255 255 255 / var(--tw-ring-opacity)); + --tw-ring-opacity: 0.75; + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #5eead4; +} + +.rich-select-selected-highlighted-option { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.rich-select-selected-highlighted-option:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + .sr-only { position: absolute; width: 1px; diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css index 100e458..3e680f2 100755 --- a/src/assets/css/tailwind.css +++ b/src/assets/css/tailwind.css @@ -48,6 +48,16 @@ @apply !align-middle text-sm font-medium text-primary-800; } .filter-input-label { - @apply block mb-2 text-sm font-semibold text-gray-800 sm:mb-0; + @apply block mb-2 text-xs font-semibold text-gray-800 sm:mb-0; } + .rich-select-trigger{ + @apply bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3; + } + .rich-select-search-input{ + @apply inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200; + } + .rich-select-selected-highlighted-option{ + @apply font-semibold bg-teal-600 focus:outline-none text-white; + } + } diff --git a/src/main.ts b/src/main.ts index dec27b9..8b52fc5 100755 --- a/src/main.ts +++ b/src/main.ts @@ -21,11 +21,9 @@ app.use( defineConfiguration({ RichSelect: { classes: { - trigger: - 'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3', - searchInput: - 'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200', - selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white' + trigger: 'rich-select-trigger', + searchInput: 'rich-select-search-input', + selectedHighlightedOption: 'rich-select-selected-highlighted-option' } } })