AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 13:59:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add until className defines (#6141)

Browse Source
This commit is contained in:
Joel 2024-07-10 15:34:56 +08:00 committed by GitHub
parent 1d2ab2126c
commit a62325ac87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 146 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/app/text-generate/item/index.tsx
View File

@ -73,7 +73,7 @@ export const SimpleBtn = ({ className, isDisabled, onClick, children }: {
children: React.ReactNode
}) => (
<div
className={cn(className, isDisabled ? 'border-gray-100 text-gray-300' : 'border-gray-200 text-gray-700 cursor-pointer hover:border-gray-300 hover:shadow-sm', 'flex items-center h-7 px-3 rounded-md border text-xs font-medium')}
className={cn(isDisabled ? 'border-gray-100 text-gray-300' : 'border-gray-200 text-gray-700 cursor-pointer hover:border-gray-300 hover:shadow-sm', 'flex items-center h-7 px-3 rounded-md border text-xs font-medium', className)}
onClick={() => !isDisabled && onClick?.()}
>
{children}
@ -277,7 +277,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
const [currentTab, setCurrentTab] = useState<string>('DETAIL')
return (
<div ref={ref} className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')}
<div ref={ref} className={cn(isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0', className)}
style={isTop
? {
boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',

2
web/app/components/workflow/block-selector/tabs.tsx
View File

@ -36,7 +36,7 @@ const Tabs: FC<TabsProps> = ({
<div
key={tab.key}
className={cn(
'relative mr-4 h-[34px] leading-[34px] text-[13px] font-medium cursor-pointer',
'relative mr-4 h-[34px] text-[13px] leading-[34px] font-medium cursor-pointer',
activeTab === tab.key
? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
: 'text-gray-500',

2
web/app/components/workflow/block-selector/tools.tsx
View File

@ -46,7 +46,7 @@ const Blocks = ({
key={tool.name}
selector={`workflow-block-tool-${tool.name}`}
position='right'
className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !bg-transparent !rounded-xl !shadow-lg'
className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
htmlContent={(
<div>
<BlockIcon

151
web/app/styles/globals.css
View File

@ -132,368 +132,501 @@ button:focus-within {
.system-kbd {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.system-2xs-regular-uppercase {
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
line-height: 12px;
}
.system-2xs-medium {
font-size: 10px;
font-weight: 500;
line-height: 12px;
}
.system-2xs-medium-uppercase {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
line-height: 12px;
}
.system-2xs-semibold-uppercase {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
line-height: 12px;
}
.system-xs-regular {
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.system-xs-regular-uppercase {
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 16px;
}
.system-xs-medium {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.system-xs-medium-uppercase {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
line-height: 16px;
}
.system-xs-semibold {
font-size: 12px;
font-weight: 600;
line-height: 16px;
}
.system-xs-semibold-uppercase {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
line-height: 16px;
}
.system-sm-regular {
font-size: 13px;
font-weight: 400;
line-height: 16px;
}
.system-sm-medium {
font-size: 13px;
font-weight: 500;
line-height: 16px;
}
.system-sm-medium-uppercase {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
line-height: 16px;
}
.system-sm-semibold {
font-size: 13px;
font-weight: 600;
line-height: 16px;
}
.system-sm-semibold-uppercase {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
line-height: 16px;
}
.system-md-regular {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.system-md-medium {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.system-md-semibold {
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
.system-md-semibold-uppercase {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
line-height: 20px;
}
.system-xl-regular {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.system-xl-medium {
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.system-xl-semibold {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.code-xs-regular {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.code-xs-semibold {
font-size: 12px;
font-weight: undefined;
font-weight: 600;
line-height: 1.5;
}
.code-sm-regular {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.code-sm-semibold {
font-size: 13px;
font-weight: undefined;
font-weight: 600;
line-height: 1.5;
}
.code-md-regular {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.code-md-semibold {
font-size: 14px;
font-weight: undefined;
font-weight: 600;
line-height: 1.5;
}
.body-xs-light {
font-size: 12px;
font-weight: undefined;
font-weight: 300;
line-height: 16px;
}
.body-xs-regular {
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
.body-xs-medium {
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.body-sm-light {
font-size: 13px;
font-weight: undefined;
font-weight: 300;
line-height: 16px;
}
.body-sm-regular {
font-size: 13px;
font-weight: 400;
line-height: 16px;
}
.body-sm-medium {
font-size: 13px;
font-weight: 500;
line-height: 16px;
}
.body-md-light {
font-size: 14px;
font-weight: undefined;
font-weight: 300;
line-height: 20px;
}
.body-md-regular {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.body-md-medium {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.body-lg-light {
font-size: 15px;
font-weight: undefined;
font-weight: 300;
line-height: 20px;
}
.body-lg-regular {
font-size: 15px;
font-weight: 400;
line-height: 20px;
}
.body-lg-medium {
font-size: 15px;
font-weight: 500;
line-height: 20px;
}
.body-xl-regular {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.body-xl-medium {
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.body-xl-light {
font-size: 16px;
font-weight: undefined;
font-weight: 300;
line-height: 24px;
}
.body-2xl-light {
font-size: 18px;
font-weight: undefined;
font-weight: 300;
line-height: 1.5;
}
.body-2xl-regular {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
}
.body-2xl-medium {
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
.title-xs-semi-bold {
font-size: 12px;
font-weight: 600;
line-height: 16px;
}
.title-xs-bold {
font-size: 12px;
font-weight: 700;
line-height: 16px;
}
.title-sm-semi-bold {
font-size: 13px;
font-weight: 600;
line-height: 16px;
}
.title-sm-bold {
font-size: 13px;
font-weight: 700;
line-height: 16px;
}
.title-md-semi-bold {
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
.title-md-bold {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.title-lg-semi-bold {
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
.title-lg-bold {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.title-xl-semi-bold {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.title-xl-bold {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.title-2xl-semi-bold {
font-size: 18px;
font-weight: 600;
line-height: 1.2;
}
.title-2xl-bold {
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.title-3xl-semi-bold {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.title-3xl-bold {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.title-4xl-semi-bold {
font-size: 24px;
font-weight: 600;
line-height: 1.2;
}
.title-4xl-bold {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.title-5xl-semi-bold {
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
.title-5xl-bold {
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
.title-6xl-semi-bold {
font-size: 36px;
font-weight: 600;
line-height: 1.2;
}
.title-6xl-bold {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
}
.title-7xl-semi-bold {
font-size: 48px;
font-weight: 600;
line-height: 1.2;
}
.title-7xl-bold {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
}
.title-8xl-semi-bold {
font-size: 60px;
font-weight: 600;
line-height: 1.2;
}
.title-8xl-bold {
font-size: 60px;
font-weight: 700;
line-height: 1.2;
}
/* font define end */
/* border radius start */
.radius-2xs {
border-radius: 2px;
}
.radius-xs {
border-radius: 4px;
}
.radius-sm {
border-radius: 6px;
}
.radius-md {
border-radius: 8px;
}
.radius-lg {
border-radius: 10px;
}
.radius-xl {
border-radius: 12px;
}
.radius-2xl {
border-radius: 16px;
}
.radius-3xl {
border-radius: 20px;
}
.radius-4xl {
border-radius: 24px;
}
.radius-5xl {
border-radius: 24px;
}
.radius-6xl {
border-radius: 28px;
}
.radius-7xl {
border-radius: 32px;
}
.radius-8xl {
border-radius: 40px;
}
.radius-9xl {
border-radius: 48px;
}
.radius-full {
border-radius: 64px;
}
/* border radius end */
.link {
@apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
}