mirror of
https://github.com/langgenius/dify.git
synced 2024-11-16 19:59:50 +08:00
chore: transform field type css to tailwind and multi theme
This commit is contained in:
parent
6c9c3faf78
commit
c159b7a781
|
@ -2,7 +2,6 @@
|
||||||
import type { FC } from 'react'
|
import type { FC } from 'react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import s from './style.module.css'
|
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
import type { InputVarType } from '@/app/components/workflow/types'
|
import type { InputVarType } from '@/app/components/workflow/types'
|
||||||
import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
|
import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
|
||||||
|
@ -27,13 +26,15 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn('space-y-1', selected && s.selected, s.item)}
|
className={cn(
|
||||||
|
'flex flex-col justify-center items-center h-[58px] rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg space-y-1',
|
||||||
|
selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs cursor-pointer system-xs-regular')}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div className='shrink-0'>
|
<div className='shrink-0'>
|
||||||
<InputVarTypeIcon type={type} className='w-5 h-5' />
|
<InputVarTypeIcon type={type} className='w-5 h-5' />
|
||||||
</div>
|
</div>
|
||||||
<span className={cn(s.text)}>{typeName}</span>
|
<span>{typeName}</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,40 +0,0 @@
|
||||||
.item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 58px;
|
|
||||||
/* width: 98px; */
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #EAECF0;
|
|
||||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:not(.selected):hover {
|
|
||||||
border-color: #B2CCFF;
|
|
||||||
background-color: #F5F8FF;
|
|
||||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item.selected {
|
|
||||||
color: #155EEF;
|
|
||||||
border-color: #528BFF;
|
|
||||||
background-color: #F5F8FF;
|
|
||||||
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #667085;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item.selected .text {
|
|
||||||
color: #155EEF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:not(.selected):hover {
|
|
||||||
color: #344054;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user