More colors
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
7e9906c315
commit
5e1499ed82
|
@ -199,8 +199,8 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
key={key}
|
key={key}
|
||||||
data-index={i}
|
data-index={i}
|
||||||
className={clsx({
|
className={clsx({
|
||||||
'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
|
'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group black:hover:bg-gray-900 black:focus:bg-gray-900': true,
|
||||||
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
|
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 black:bg-gray-900 black:hover:bg-gray-900': i === selectedSuggestion,
|
||||||
})}
|
})}
|
||||||
onMouseDown={this.onSuggestionClick}
|
onMouseDown={this.onSuggestionClick}
|
||||||
onTouchEnd={this.onSuggestionClick}
|
onTouchEnd={this.onSuggestionClick}
|
||||||
|
|
|
@ -86,7 +86,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
|
||||||
title={item.text}
|
title={item.text}
|
||||||
className={
|
className={
|
||||||
clsx({
|
clsx({
|
||||||
'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer': true,
|
'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer black:hover:bg-gray-900 black:focus:bg-gray-900': true,
|
||||||
'text-danger-600 dark:text-danger-400': item.destructive,
|
'text-danger-600 dark:text-danger-400': item.destructive,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
||||||
['normal', 'search'].includes(theme),
|
['normal', 'search'].includes(theme),
|
||||||
'text-gray-900 dark:text-gray-100': !props.disabled,
|
'text-gray-900 dark:text-gray-100': !props.disabled,
|
||||||
'text-gray-600': props.disabled,
|
'text-gray-600': props.disabled,
|
||||||
'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
|
'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800 black:bg-black': theme === 'normal',
|
||||||
'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white dark:focus:bg-gray-900': theme === 'search',
|
'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white dark:focus:bg-gray-900': theme === 'search',
|
||||||
'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
|
'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
|
||||||
'pl-8': typeof icon !== 'undefined',
|
'pl-8': typeof icon !== 'undefined',
|
||||||
|
|
|
@ -13,7 +13,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
|
||||||
<select
|
<select
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
|
'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...filteredProps}
|
{...filteredProps}
|
||||||
|
|
|
@ -378,8 +378,8 @@ const AutosuggestPlugin = ({
|
||||||
key={key}
|
key={key}
|
||||||
data-index={i}
|
data-index={i}
|
||||||
className={clsx({
|
className={clsx({
|
||||||
'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
|
'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group black:hover:bg-gray-900 black:focus:bg-gray-900': true,
|
||||||
'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
|
'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 black:bg-gray-900 black:hover:bg-gray-900': i === selectedSuggestion,
|
||||||
})}
|
})}
|
||||||
onMouseDown={handleSelectSuggestion}
|
onMouseDown={handleSelectSuggestion}
|
||||||
>
|
>
|
||||||
|
|
|
@ -128,7 +128,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__dropdown {
|
&__dropdown {
|
||||||
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
|
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden black:bg-black black:border black:border-gray-800;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
transform-origin: 50% 100%;
|
transform-origin: 50% 100%;
|
||||||
|
@ -140,10 +140,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__option {
|
&__option {
|
||||||
@apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
|
@apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer black:hover:bg-gray-900;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@apply bg-gray-100 dark:bg-gray-800;
|
@apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
|
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
|
||||||
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
|
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
|
||||||
@apply border-b-white dark:border-b-gray-900;
|
@apply border-b-white dark:border-b-gray-900 black:border-b-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
|
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
|
||||||
|
|
Loading…
Reference in New Issue