Manually replace the variable values in basic-vars.less and smb-theme.js. (#2102)
* fix(theme-swap): swap vars * fix(theme): fix * fix(theme): fix
This commit is contained in:
申君健
GitHub
parent
8b79fd2c25
commit
ecc4f7d009
|
|
@ -20,7 +20,7 @@ const kebab = (name: string) =>
|
|||
.map((n) => n[0].toUpperCase() + n.slice(1))
|
||||
.join('')
|
||||
|
||||
// vars.less的所有文件夹， 类似 [ 'action-menu/vars.less', 'alert/vars.less',.........]
|
||||
// 1、vars.less的所有文件夹， 类似 [ 'action-menu/vars.less', 'alert/vars.less',.........]
|
||||
fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
|
||||
.map((file) => file.split('/')[0]) // 取出组件名
|
||||
.filter((name) => fs.existsSync($smb(name))) // 过滤掉不存在在 smb-theme.js的
|
||||
|
|
@ -41,6 +41,14 @@ fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
|
|||
exceptions.push({ name, reason: '替换组件变量，写入2个文件时出错！' + error.toString() })
|
||||
}
|
||||
})
|
||||
|
||||
// 2、 替换 base/basic-var.less 与 theme/smb-theme/index.js 中的变量
|
||||
// const varsFile = fs.readFileSync(path.join(srcFold, 'base/basic-var.less'), 'utf8')
|
||||
// const smbThemeJsObj = await import('file://' + path.join(srcFold, 'theme/smb-theme/index.js'))
|
||||
// const smbJs = Object.values(smbThemeJsObj)[0]
|
||||
|
||||
// processComponent('base', varsFile, smbJs, true)
|
||||
|
||||
console.log('/////执行完毕/////')
|
||||
console.table(exceptions)
|
||||
|
||||
|
|
@ -53,7 +61,7 @@ interface QueryInfo {
|
|||
varsLost: boolean
|
||||
}
|
||||
// 处理一个组件的交换
|
||||
function processComponent(name: string, varsFile: string, smbJs: any) {
|
||||
function processComponent(name: string, varsFile: string, smbJs: any, isBase = false) {
|
||||
const smbKeys = Object.keys(smbJs)
|
||||
// 记录所有替换信息
|
||||
const result: QueryInfo[] = []
|
||||
|
|
@ -65,7 +73,7 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
|
|||
|
||||
if (start === -1) {
|
||||
info.varsLost = true
|
||||
exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到' })
|
||||
exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到:' + key })
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +91,8 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
|
|||
const end = varsFile.substring(info.varsEnd)
|
||||
varsFile = `${start} ${info.smbValue}${end}`
|
||||
})
|
||||
fs.writeFileSync($vars(name), varsFile)
|
||||
|
||||
fs.writeFileSync(isBase ? path.join(srcFold, 'base/basic-var.less') : $vars(name), varsFile)
|
||||
|
||||
// 3、 根据result, 生成old-theme.js
|
||||
const oldObj = result.reduce((pre, curr) => {
|
||||
|
|
@ -91,8 +100,18 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
|
|||
return pre
|
||||
}, {})
|
||||
|
||||
fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
|
||||
if (!isBase) {
|
||||
fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
|
||||
} else {
|
||||
// old-theme.js 似乎不太能用
|
||||
fs.writeFileSync(
|
||||
path.join(srcFold, 'base/old-theme.js'),
|
||||
`export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`
|
||||
)
|
||||
}
|
||||
|
||||
// 4、 删除smb-theme.js
|
||||
fs.rmSync($smb(name))
|
||||
if (!isBase) {
|
||||
fs.rmSync($smb(name))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
export const tinyActionMenuOldTheme = {
|
||||
'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
|
||||
'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-link, #526ecc)',
|
||||
'ti-action-menu-item-svg-margin-top': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
|
||||
'ti-action-menu-item-line-width': 'var(--ti-common-space-1)',
|
||||
'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
|
||||
'ti-action-menu-more-icon-height': '1em',
|
||||
'ti-action-menu-more-icon-width': '1em',
|
||||
'ti-action-menu-hover-text-decoratio': 'none',
|
||||
'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)'
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
export const tinyActionMenuSmbTheme = {
|
||||
'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
|
||||
'ti-action-menu-item-svg-margin-top': '0',
|
||||
'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
|
||||
'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
|
||||
'ti-action-menu-hover-text-decoratio': 'underline',
|
||||
'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
|
||||
'ti-action-menu-more-icon-width': 'var(--ti-common-size-4x)',
|
||||
'ti-action-menu-more-icon-height': 'var(--ti-common-size-4x)',
|
||||
'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-primary)'
|
||||
}
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
// 按钮文本字重
|
||||
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
|
||||
// 按钮文本装饰
|
||||
--ti-action-menu-hover-text-decoratio: none;
|
||||
--ti-action-menu-hover-text-decoratio: underline;
|
||||
// 更多...图标的宽度
|
||||
--ti-action-menu-more-icon-width: 1em;
|
||||
--ti-action-menu-more-icon-width: var(--ti-common-size-4x);
|
||||
// 更多...图标的高度
|
||||
--ti-action-menu-more-icon-height: 1em;
|
||||
--ti-action-menu-more-icon-height: var(--ti-common-size-4x);
|
||||
// 更多...图标的右边外边距
|
||||
--ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉触发源文本颜色
|
||||
|
|
@ -28,13 +28,13 @@
|
|||
// 下拉触发源文本字号
|
||||
--ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 分割线颜色
|
||||
--ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-action-menu-item-line-bg-color: var(--ti-common-color-transparent);
|
||||
// 分割线宽度
|
||||
--ti-action-menu-item-line-width: var(--ti-common-space-1);
|
||||
--ti-action-menu-item-line-width: var(--ti-common-space-0);
|
||||
// 下拉菜单项悬浮背景色
|
||||
--ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
|
||||
// 下拉菜单项文本悬浮色
|
||||
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
|
||||
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
|
||||
// 下拉菜单项图标悬浮色
|
||||
--ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
|
||||
// 下拉菜单项顶部内边距
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
// 下拉菜单项右侧内边距
|
||||
--ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项图标顶部内边距
|
||||
--ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px);
|
||||
--ti-action-menu-item-svg-margin-top: 0;
|
||||
// 下拉菜单项图标右侧内边距
|
||||
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单项图标底部部内边距
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
// 下拉菜单项图标左侧内边距
|
||||
--ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单卡片模式字体颜色
|
||||
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary);
|
||||
// 下拉菜单卡片模式字体颜色
|
||||
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
|
||||
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
export const tinyAlertOldTheme = {
|
||||
'ti-alert-title-margin-top': 'var(--ti-common-space-0)',
|
||||
'ti-alert-info-close-hover-icon-color': 'var(--ti-alert-info-icon-color)',
|
||||
'ti-alert-info-close-icon-color': 'var(--ti-alert-info-icon-color)',
|
||||
'ti-alert-success-close-hover-icon-color': 'var(--ti-alert-success-icon-color)',
|
||||
'ti-alert-success-close-icon-color': 'var(--ti-alert-success-icon-color)',
|
||||
'ti-alert-error-close-hover-icon-color': 'var(--ti-alert-error-icon-color)',
|
||||
'ti-alert-error-close-icon-color': 'var(--ti-alert-error-icon-color)',
|
||||
'ti-alert-warning-close-hover-icon-color': 'var(--ti-alert-warning-icon-color)',
|
||||
'ti-alert-warning-close-icon-color': 'var(--ti-alert-warning-icon-color)',
|
||||
'ti-alert-large-content-padding-left': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-alert-large-icon-margin-top': 'calc(var(--ti-common-space-base, 4px) - 2px)',
|
||||
'ti-alert-large-padding-right': 'calc(var(--ti-common-space-base, 4px) * 10.5)',
|
||||
'ti-alert-large-padding-bottom': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-alert-large-padding-top': 'calc(var(--ti-common-space-base, 4px) * 3.5)',
|
||||
'ti-alert-normal-margin-vertical': 'var(--ti-common-space-2x, 8px)',
|
||||
'ti-alert-normal-padding-bottom': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-alert-normal-padding-right': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-alert-normal-padding-top': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-alert-description-margin-bottom': 'var(--ti-common-space-base, 4px)',
|
||||
'ti-alert-description-margin-top': 'var(--ti-common-space-base, 4px)',
|
||||
'ti-alert-icon-margin-top': 'var(--ti-common-space-1, 1px)',
|
||||
'ti-alert-title-font-size': 'var(--ti-common-font-size-1, 14px)',
|
||||
'ti-alert-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-alert-close-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-alert-close-position-top': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-alert-border-weight': 'var(--ti-common-border-weight-normal, 1px)'
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
export const tinyAlertSmbTheme = {
|
||||
'ti-alert-border-radius': 'var(--ti-common-border-radius-4)',
|
||||
'ti-alert-border-weight': 'var(--ti-common-size-0)',
|
||||
'ti-alert-close-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-alert-error-close-icon-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-alert-info-close-icon-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-alert-success-close-icon-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-alert-warning-close-icon-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-alert-info-close-hover-icon-color': 'var(--ti-common-color-icon-darkbg-hover)',
|
||||
'ti-alert-success-close-hover-icon-color': 'var(--ti-common-color-icon-darkbg-hover)',
|
||||
'ti-alert-error-close-hover-icon-color': 'var(--ti-common-color-icon-darkbg-hover)',
|
||||
'ti-alert-warning-close-hover-icon-color': 'var(--ti-common-color-icon-darkbg-hover)',
|
||||
'ti-alert-normal-margin-vertical': 'var(--ti-common-space-4x)',
|
||||
'ti-alert-normal-padding-top': 'calc(var(--ti-common-space-2x) + 1.5px)',
|
||||
'ti-alert-normal-padding-bottom': 'calc(var(--ti-common-space-2x) + 1.5px)',
|
||||
'ti-alert-normal-padding-right': 'var(--ti-common-space-4x)',
|
||||
'ti-alert-title-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-alert-large-icon-margin-top': 'var(--ti-common-space-0)',
|
||||
'ti-alert-title-margin-top': 'var(--ti-common-size-base)',
|
||||
'ti-alert-large-padding-top': 'var(--ti-common-space-4x)',
|
||||
'ti-alert-large-padding-bottom': 'var(--ti-common-space-4x)',
|
||||
'ti-alert-large-padding-right': 'var(--ti-common-space-4x)',
|
||||
'ti-alert-large-content-padding-left': 'var(--ti-common-space-2x)',
|
||||
'ti-alert-description-margin-bottom': 'var(--ti-common-space-0)',
|
||||
'ti-alert-description-margin-top': 'var(--ti-common-space-base)',
|
||||
'ti-alert-icon-margin-top': 'calc(var(--ti-common-space-6) / 2)',
|
||||
'ti-alert-close-position-top': 'var(--ti-common-space-3x)'
|
||||
}
|
||||
|
|
@ -23,17 +23,17 @@
|
|||
'Microsoft JhengHei'
|
||||
);
|
||||
// 边框厚度(new)
|
||||
--ti-alert-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
--ti-alert-border-weight: var(--ti-common-size-0);
|
||||
// 描述字号
|
||||
--ti-alert-description-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 默认关闭图标固定定位顶部距离(hide)
|
||||
--ti-alert-close-position-top: var(--ti-common-space-4x, 16px);
|
||||
--ti-alert-close-position-top: var(--ti-common-space-3x);
|
||||
// 默认关闭图标字号
|
||||
--ti-alert-close-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-alert-close-font-size: var(--ti-common-font-size-2);
|
||||
// 自定义关闭文字字号
|
||||
--ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 组件圆角
|
||||
--ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-alert-border-radius: var(--ti-common-border-radius-4);
|
||||
// 标题文本色
|
||||
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// success类型标题文本色
|
||||
|
|
@ -47,9 +47,9 @@
|
|||
// simple类型标题文本色
|
||||
--ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 标题字号
|
||||
--ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-alert-title-font-size: var(--ti-common-font-size-2);
|
||||
// 标题图标顶部外边距
|
||||
--ti-alert-icon-margin-top: var(--ti-common-space-1, 1px);
|
||||
--ti-alert-icon-margin-top: calc(var(--ti-common-space-6) / 2);
|
||||
// 标题图标字号
|
||||
--ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 描述内容行高
|
||||
|
|
@ -59,31 +59,31 @@
|
|||
// 描述内容水平内边距
|
||||
--ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 描述内容提示内容顶部外边距
|
||||
--ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
|
||||
--ti-alert-description-margin-top: var(--ti-common-space-base);
|
||||
// 描述内容提示内容底部外边距
|
||||
--ti-alert-description-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
--ti-alert-description-margin-bottom: var(--ti-common-space-0);
|
||||
// 描述默认文本色
|
||||
--ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 默认顶部内边距
|
||||
--ti-alert-normal-padding-top: var(--ti-common-space-3x, 12px);
|
||||
--ti-alert-normal-padding-top: calc(var(--ti-common-space-2x) + 1.5px);
|
||||
// 默认右内边距
|
||||
--ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
|
||||
--ti-alert-normal-padding-right: var(--ti-common-space-4x);
|
||||
// 默认底部内边距
|
||||
--ti-alert-normal-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
--ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x) + 1.5px);
|
||||
// 默认左内边距
|
||||
--ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// 默认垂直外边距
|
||||
--ti-alert-normal-margin-vertical: var(--ti-common-space-2x, 8px);
|
||||
--ti-alert-normal-margin-vertical: var(--ti-common-space-4x);
|
||||
// 默认水平外边距
|
||||
--ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// large尺寸顶部内边距
|
||||
--ti-alert-large-padding-top: calc(var(--ti-common-space-base, 4px) * 3.5);
|
||||
--ti-alert-large-padding-top: var(--ti-common-space-4x);
|
||||
// large尺寸底部内边距
|
||||
--ti-alert-large-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
--ti-alert-large-padding-bottom: var(--ti-common-space-4x);
|
||||
// large尺寸左内边距
|
||||
--ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// large尺寸右内边距
|
||||
--ti-alert-large-padding-right: calc(var(--ti-common-space-base, 4px) * 10.5);
|
||||
--ti-alert-large-padding-right: var(--ti-common-space-4x);
|
||||
// large尺寸操作文本色
|
||||
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// large尺寸操作字号
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
// large尺寸图标字号
|
||||
--ti-alert-large-icon-font-size: var(--ti-common-font-size-5, 24px);
|
||||
// large尺寸图标顶部外边距
|
||||
--ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base, 4px) - 2px);
|
||||
--ti-alert-large-icon-margin-top: var(--ti-common-space-0);
|
||||
// large尺寸描述内容左内边距
|
||||
--ti-alert-large-content-padding-left: var(--ti-common-space-4x, 16px);
|
||||
--ti-alert-large-content-padding-left: var(--ti-common-space-2x);
|
||||
// 大尺寸关闭图标字号
|
||||
--ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
|
||||
|
||||
|
|
@ -106,9 +106,9 @@
|
|||
// warning类型背景色
|
||||
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
// warning类型关闭图标色
|
||||
--ti-alert-warning-close-icon-color: var(--ti-alert-warning-icon-color);
|
||||
--ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken);
|
||||
// warning类型悬浮关闭图标色
|
||||
--ti-alert-warning-close-hover-icon-color: var(--ti-alert-warning-icon-color);
|
||||
--ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
|
||||
// error类型边框色
|
||||
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
|
||||
// error类型图标色
|
||||
|
|
@ -118,9 +118,9 @@
|
|||
// error类型背景色
|
||||
--ti-alert-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
// error类型关闭图标色
|
||||
--ti-alert-error-close-icon-color: var(--ti-alert-error-icon-color);
|
||||
--ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken);
|
||||
// error类型悬浮关闭图标色
|
||||
--ti-alert-error-close-hover-icon-color: var(--ti-alert-error-icon-color);
|
||||
--ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
|
||||
// success类型边框色
|
||||
--ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc);
|
||||
// success类型图标色
|
||||
|
|
@ -130,9 +130,9 @@
|
|||
// success类型背景色
|
||||
--ti-alert-success-bg-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
// success类型关闭图标色
|
||||
--ti-alert-success-close-icon-color: var(--ti-alert-success-icon-color);
|
||||
--ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken);
|
||||
// success类型悬浮关闭图标色
|
||||
--ti-alert-success-close-hover-icon-color: var(--ti-alert-success-icon-color);
|
||||
--ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
|
||||
|
||||
// info类型边框色
|
||||
--ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa);
|
||||
|
|
@ -143,9 +143,9 @@
|
|||
// info类型背景色
|
||||
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// info类型关闭图标色
|
||||
--ti-alert-info-close-icon-color: var(--ti-alert-info-icon-color);
|
||||
--ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken);
|
||||
// info类型悬浮关闭图标色
|
||||
--ti-alert-info-close-hover-icon-color: var(--ti-alert-info-icon-color);
|
||||
--ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
|
||||
|
||||
// simple类型边框色
|
||||
--ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
|
||||
|
|
@ -160,5 +160,5 @@
|
|||
// simple类型悬浮关闭图标色
|
||||
--ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
|
||||
// 标题的上边距
|
||||
--ti-alert-title-margin-top: var(--ti-common-space-0);
|
||||
--ti-alert-title-margin-top: var(--ti-common-size-base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyAnchorOldTheme = {
|
||||
'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)',
|
||||
'ti-anchor-line-opacity': '0.08',
|
||||
'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-anchor-width': "'auto'"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const tinyAnchorSmbTheme = {
|
||||
'ti-anchor-width': 'var(--ti-common-size-40x)',
|
||||
'ti-anchor-text-color': 'var(--ti-common-color-text-secondary)',
|
||||
'ti-anchor-line-bg-color': 'var(--ti-common-scrollbar-thumb-bg-color)',
|
||||
'ti-anchor-link-active-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-anchor-line-opacity': '1'
|
||||
}
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
// 组件默认背景色
|
||||
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 组件宽度
|
||||
--ti-anchor-width: 'auto';
|
||||
--ti-anchor-width: var(--ti-common-size-40x);
|
||||
// 锚点默认文本色
|
||||
--ti-anchor-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-anchor-text-color: var(--ti-common-color-text-secondary);
|
||||
// dot类型线条背景色(new)
|
||||
--ti-anchor-line-bg-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-anchor-line-bg-color: var(--ti-common-scrollbar-thumb-bg-color);
|
||||
// dot类型线条透明度(hide)
|
||||
--ti-anchor-line-opacity: 0.08;
|
||||
--ti-anchor-line-opacity: 1;
|
||||
// dot类型圆点边框色(new)
|
||||
--ti-anchor-dot-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 锚点默认字号
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
// 竖向轨道宽度
|
||||
--ti-anchor-orbit-width: var(--ti-common-size-base, 4px);
|
||||
// 选中锚点文本色
|
||||
--ti-anchor-link-active-text-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
--ti-anchor-link-active-text-color: var(--ti-common-color-text-primary);
|
||||
// 选中锚点蒙层背景色
|
||||
--ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
|
||||
// 悬浮锚点文本色
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
export const tinyAutocompleteSmbTheme = {
|
||||
'ti-autocomplete-li-padding-horizontal': 'var(--ti-common-size-4x)'
|
||||
export const tinyAutocompleteOldTheme = {
|
||||
'ti-autocomplete-li-padding-horizontal': 'var(--ti-common-size-2x)'
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
// 下拉框背景色
|
||||
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 下拉框列表项横向填充长度
|
||||
--ti-autocomplete-li-padding-horizontal: var(--ti-common-size-2x);
|
||||
--ti-autocomplete-li-padding-horizontal: var(--ti-common-size-4x);
|
||||
// 下拉框列表项竖向填充长度
|
||||
--ti-autocomplete-li-padding-vertical: 5px;
|
||||
// 下拉框列表项的文本色
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
export const tinyBadgeOldTheme = {
|
||||
'ti-badge-margin-left': '4px',
|
||||
'ti-badge-border': '0',
|
||||
'ti-badge-bg-color': 'var(--ti-base-color-error-3, #f66f6a)',
|
||||
'ti-badge-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-badge-border-radius': '12px',
|
||||
'ti-badge-font-weight': 'var(--ti-common-font-weight-7, bold)',
|
||||
'ti-badge-line-height': 'var(--ti-common-size-5x, 20px)',
|
||||
'ti-badge-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-badge-size': 'var(--ti-common-size-5x, 20px)'
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
export const tinyBadgeSmbTheme = {
|
||||
'ti-badge-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-badge-line-height': 'calc(var(--ti-common-font-size-2) - 2px)',
|
||||
'ti-badge-bg-color': 'var(--ti-base-color-error)',
|
||||
'ti-badge-font-size': 'var(--ti-common-font-size-0)',
|
||||
'ti-badge-text-color': 'var(--ti-base-color-bg-7)',
|
||||
'ti-badge-border-radius': 'var(--ti-common-border-radius-4)',
|
||||
'ti-badge-border': 'var(--ti-common-border-weight-normal)',
|
||||
'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'ti-badge-margin-left': '0'
|
||||
}
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-badge() {
|
||||
--ti-badge-size: var(--ti-common-size-5x, 20px);
|
||||
--ti-badge-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-badge-line-height: var(--ti-common-size-5x, 20px);
|
||||
--ti-badge-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
--ti-badge-border-radius: 12px;
|
||||
--ti-badge-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-badge-bg-color: var(--ti-base-color-error-3, #f66f6a);
|
||||
--ti-badge-size: var(--ti-common-font-size-2);
|
||||
--ti-badge-font-size: var(--ti-common-font-size-0);
|
||||
--ti-badge-line-height: calc(var(--ti-common-font-size-2) - 2px);
|
||||
--ti-badge-font-weight: var(--ti-common-font-weight-normal);
|
||||
--ti-badge-border-radius: var(--ti-common-border-radius-4);
|
||||
--ti-badge-text-color: var(--ti-base-color-bg-7);
|
||||
--ti-badge-bg-color: var(--ti-base-color-error);
|
||||
--ti-badge-link-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-badge-active-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-badge-active-bg-color: var(--ti-common-color-light, #fff);
|
||||
|
|
@ -26,6 +26,6 @@
|
|||
--ti-badge-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
|
||||
--ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-badge-border: 0;
|
||||
--ti-badge-margin-left: 4px;
|
||||
--ti-badge-border: var(--ti-common-border-weight-normal);
|
||||
--ti-badge-margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
export const tinyBaseSelectOldTheme = {
|
||||
'ti-select-collapse-button-text-icon-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-select-tags-max-height': 'var(--ti-common-size-24x, 96px)',
|
||||
'ti-select-tags-height': 'calc(var(--ti-common-size-base) * 7)',
|
||||
'ti-select-tags-margin-left': 'var(--ti-common-space-1, 1px)',
|
||||
'ti-select-tags-margin-bottom': 'var(--ti-common-space-1, 1px)',
|
||||
'ti-select-tags-margin-right': 'var(--ti-common-space-1, 1px)',
|
||||
'ti-select-tags-margin-top': 'var(--ti-common-space-1, 1px)',
|
||||
'ti-select-tags-wrap-padding-bottom': 'calc(var(--ti-common-space-1, 1px) * 2)',
|
||||
'ti-select-tags-wrap-padding-top': 'calc(var(--ti-common-space-1, 1px) * 2)',
|
||||
'ti-select-tags-wrap-padding-left': 'calc(var(--ti-common-space-1, 1px) * 2)',
|
||||
'ti-select-input-caret-font-size': '10px',
|
||||
'ti-select-input-caret-hover-icon-color': 'var(--ti-common-color-icon-hover, #5e7ce0)',
|
||||
'ti-select-input-caret-icon-color': 'var(--ti-common-color-text-secondary, #575d6c)',
|
||||
'ti-select-input-icon-top-mini': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-select-input-icon-top-small': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-select-input-icon-top': '14px'
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
export const tinySelectSmbTheme = {
|
||||
'ti-select-input-caret-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-select-input-caret-hover-icon-color': 'var(--ti-common-color-icon-graybg-hover)',
|
||||
'ti-select-input-caret-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-select-tags-height': 'var(--ti-common-space-8x)',
|
||||
'ti-select-tags-wrap-padding-left': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-wrap-padding-top': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-wrap-padding-bottom': 'var(--ti-common-space-2)',
|
||||
'ti-select-input-icon-top-small': 'var(--ti-common-space-4x)',
|
||||
'ti-select-input-icon-top': 'var(--ti-common-space-4x)',
|
||||
'ti-select-tags-margin-left': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-margin-right': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-margin-top': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-margin-bottom': 'var(--ti-common-space-2)',
|
||||
'ti-select-tags-max-height': 'none',
|
||||
'ti-select-collapse-button-text-icon-color': 'var(--ti-common-color-text-link)',
|
||||
'ti-select-input-icon-top-mini': 'var(--ti-common-space-4x)'
|
||||
}
|
||||
|
|
@ -18,19 +18,19 @@
|
|||
// 选择器输入框字号(hide)
|
||||
--ti-select-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top: 14px;
|
||||
--ti-select-input-icon-top: var(--ti-common-space-4x);
|
||||
// 中型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-medium: var(--ti-common-space-5x, 20px);
|
||||
// 小型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-small: var(--ti-common-space-4x, 16px);
|
||||
--ti-select-input-icon-top-small: var(--ti-common-space-4x);
|
||||
// 迷你型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-mini: var(--ti-common-space-3x, 12px);
|
||||
--ti-select-input-icon-top-mini: var(--ti-common-space-4x);
|
||||
// 选择器输入框尾部图标的颜色
|
||||
--ti-select-input-caret-icon-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
--ti-select-input-caret-icon-color: var(--ti-common-color-icon-normal);
|
||||
// 选择器输入框尾部图标悬浮时的颜色
|
||||
--ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
--ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-graybg-hover);
|
||||
// 选择器输入框尾部图标的尺寸
|
||||
--ti-select-input-caret-font-size: 10px;
|
||||
--ti-select-input-caret-font-size: var(--ti-common-font-size-2);
|
||||
// 选择器输入框尾部关闭图标右侧外边距
|
||||
--ti-select-input-icon-close-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 选择器输入框尾部图标禁用时的颜色（hide）
|
||||
|
|
@ -46,25 +46,25 @@
|
|||
// 中型选择器输入框高度（hide）
|
||||
--ti-select-input-medium-height: var(--ti-common-size-42);
|
||||
// 选择器多选标签容器的左侧内边距
|
||||
--ti-select-tags-wrap-padding-left: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
--ti-select-tags-wrap-padding-left: var(--ti-common-space-2);
|
||||
// 选择器多选标签容器的顶部内边距
|
||||
--ti-select-tags-wrap-padding-top: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
--ti-select-tags-wrap-padding-top: var(--ti-common-space-2);
|
||||
// 选择器多选标签容器的底部内边距
|
||||
--ti-select-tags-wrap-padding-bottom: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
--ti-select-tags-wrap-padding-bottom: var(--ti-common-space-2);
|
||||
// 选择器多选标签容器的右侧内边距
|
||||
--ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 选择器多选标签顶部外边距
|
||||
--ti-select-tags-margin-top: var(--ti-common-space-1, 1px);
|
||||
--ti-select-tags-margin-top: var(--ti-common-space-2);
|
||||
// 选择器多选标签右侧外边距
|
||||
--ti-select-tags-margin-right: var(--ti-common-space-1, 1px);
|
||||
--ti-select-tags-margin-right: var(--ti-common-space-2);
|
||||
// 选择器多选标签底部外边距
|
||||
--ti-select-tags-margin-bottom: var(--ti-common-space-1, 1px);
|
||||
--ti-select-tags-margin-bottom: var(--ti-common-space-2);
|
||||
// 选择器多选标签左侧外边距
|
||||
--ti-select-tags-margin-left: var(--ti-common-space-1, 1px);
|
||||
--ti-select-tags-margin-left: var(--ti-common-space-2);
|
||||
// 选择器多选标签单行的高度
|
||||
--ti-select-tags-height: calc(var(--ti-common-size-base) * 7);
|
||||
--ti-select-tags-height: var(--ti-common-space-8x);
|
||||
// 选择器多选标签最大高度
|
||||
--ti-select-tags-max-height: var(--ti-common-size-24x, 96px);
|
||||
--ti-select-tags-max-height: none;
|
||||
// 选择器后缀图标显示状态
|
||||
--ti-select-suffix-display: 'inline-block';
|
||||
// 选择器右侧图标间距
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
// 选择器suffix字号
|
||||
--ti-select-suffix-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 收起按钮文本与图标色(hide)
|
||||
--ti-select-collapse-button-text-icon-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-select-collapse-button-text-icon-color: var(--ti-common-color-text-link);
|
||||
// 收起按钮图标左边距(hide)
|
||||
--ti-select-collapse-button-icon-margin-left: var(--ti-common-space-2, 2px);
|
||||
// 收起按钮字号(hide)
|
||||
|
|
|
|||
|
|
@ -15,41 +15,57 @@
|
|||
/* 基础色 */
|
||||
--ti-base-color-white: #fff; // 纯白
|
||||
--ti-base-color-transparent: transparent; // 透明色
|
||||
--ti-base-color-transparent-5: #0000000d; // smb 新增
|
||||
--ti-base-color-transparent-8: rgba(0, 0, 0, 0.08); // smb 新增
|
||||
--ti-base-color-transparent-15: rgba(0, 0, 0, 0.15); // smb 新增
|
||||
--ti-base-color-transparent-40: rgba(0, 0, 0, 0.4); // smb 新增
|
||||
--ti-base-color-transparent-50: #c2c2c280; // smb 新增
|
||||
--ti-base-bg-color-loading-transparent-50: rgba(255, 255, 255, 0.5); // smb 新增
|
||||
--ti-base-bg-color-disabled-transparent-5: rgba(0, 0, 0, 0.05); // smb 新增
|
||||
|
||||
// 文本色
|
||||
--ti-base-text-color-1: #f76360; // smb 新增
|
||||
--ti-base-text-color-2: #f2f2f2; // smb 新增
|
||||
--ti-base-font-family: 'Manrop', 'Manrope-Medium'; // smb 新增
|
||||
|
||||
/* 1.1品牌色*/
|
||||
/* 品牌主色*/
|
||||
--ti-base-color-brand-6: #5e7ce0; // 主色蓝
|
||||
--ti-base-color-brand: #191919; // 主色蓝
|
||||
--ti-base-color-brand-6: #191919; // smb 新增
|
||||
/* 主色衍生色*/
|
||||
--ti-base-color-brand-8: #344899; // 品牌色-8
|
||||
--ti-base-color-brand-7: #526ecc; // 品牌色-7
|
||||
--ti-base-color-brand-5: #7693f5; // 品牌色-5
|
||||
--ti-base-color-brand-9: #dbdbdb; // 品牌色-8
|
||||
--ti-base-color-brand-8: #deecff; // 品牌色-8
|
||||
--ti-base-color-brand-7: #b3d6ff; // 品牌色-7
|
||||
--ti-base-color-brand-5: #c2c2c2; // 品牌色-5
|
||||
--ti-base-color-brand-4: #96adfa; // 品牌色-4
|
||||
--ti-base-color-brand-3: #beccfa; // 品牌色-3
|
||||
--ti-base-color-brand-2: #e9edfa; // 品牌色-2
|
||||
--ti-base-color-brand-1: #f2f5fc; // 品牌色-1
|
||||
--ti-base-color-brand-3: #7693f5; // 品牌色-3
|
||||
--ti-base-color-brand-2: #1476ff; // 品牌色-2
|
||||
--ti-base-color-brand-1: #595959; // 品牌色-1
|
||||
|
||||
/* 1.2 中立色*/
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色*/
|
||||
--ti-base-color-common-9: #181818; // 中立色-9
|
||||
--ti-base-color-common-8: #282b33; // 中立色-8
|
||||
--ti-base-color-common-7: #252b3a; // 中立色-7
|
||||
--ti-base-color-common-6: #464c59; // 中立色-6
|
||||
--ti-base-color-common-5: #575d6c; // 中立色-5
|
||||
--ti-base-color-common-4: #5c6173; // 中立色-4
|
||||
--ti-base-color-common-3: #8a8e99; // 中立色-3
|
||||
--ti-base-color-common-2: #adb0b8; // 中立色-2
|
||||
--ti-base-color-common-1: #dfe1e6; // 中立色-1
|
||||
--ti-base-color-common-6: #dbdbdb; // 中立色-6
|
||||
--ti-base-color-common-5: #f0f0f0; // 中立色-5
|
||||
--ti-base-color-common-4: #dbdbdb; // 中立色-4
|
||||
--ti-base-color-common-3: #c2c2c2; // 中立色-3
|
||||
--ti-base-color-common-2: #808080; // 中立色-2
|
||||
--ti-base-color-common-1: #595959; // 中立色-1
|
||||
--ti-base-color-common: #191919; // smb 新增
|
||||
|
||||
/* 1.3 背景色*/
|
||||
--ti-base-color-bg-9: #b12220; // 背景-9
|
||||
--ti-base-color-bg-8: #c7000b; // 背景-8
|
||||
--ti-base-color-bg-7: #d64a52; // 背景-7
|
||||
--ti-base-color-bg-6: #eef0f5; // 背景-6
|
||||
--ti-base-color-bg-5: #f5f5f6; // 背景-5
|
||||
--ti-base-color-bg-4: #fafafa; // 背景-4
|
||||
--ti-base-color-bg-3: #ffffff; // 背景-3
|
||||
--ti-base-color-bg-2: #ffffff; // 背景-2
|
||||
--ti-base-color-bg-1: #ffffff; // 背景-1
|
||||
--ti-base-color-bg-7: #ffffff; // 背景-7
|
||||
--ti-base-color-bg-6: #f5f5f5; // 背景-6
|
||||
--ti-base-color-bg-5: #ffffff; // 背景-5
|
||||
--ti-base-color-bg-4: #595959; // 背景-4
|
||||
--ti-base-color-bg-3: #191919; // 背景-3
|
||||
--ti-base-color-bg-2: #fafafa; // 背景-2
|
||||
--ti-base-color-bg-1: #f0f0f0; // 背景-1
|
||||
--ti-base-color-bg: #f5f5f5; // smb 新增
|
||||
|
||||
/* 1.4 功能色*/
|
||||
--ti-base-color-error-4: #de504e; // 错误-4
|
||||
|
|
@ -62,26 +78,56 @@
|
|||
--ti-base-color-success-2: #acf2dc; // 成功-2
|
||||
--ti-base-color-success-1: #edfff9; // 成功-1
|
||||
|
||||
--ti-base-color-success-bg: #e6f2d5; // smb 新增
|
||||
--ti-base-color-success-border: #e6f2d5; // smb 新增
|
||||
--ti-base-color-success: #5cb300; // smb 新增
|
||||
--ti-base-color-success-text: #5cb300; // smb 新增
|
||||
|
||||
--ti-base-color-error-bg: #fce3e1; // smb 新增
|
||||
--ti-base-color-error-border: #fce3e1; // smb 新增
|
||||
--ti-base-color-error: #f23030; // smb 新增
|
||||
--ti-base-color-error-text: #f23030; // smb 新增
|
||||
|
||||
--ti-base-color-warn-bg: #ffebd1; // smb 新增
|
||||
--ti-base-color-warn-border: #ffebd1; // smb 新增
|
||||
--ti-base-color-warn: #ff8800; // smb 新增
|
||||
--ti-base-color-warn-text: #ff8800; // smb 新增
|
||||
|
||||
--ti-base-color-prompt-bg: #deecff; // smb 新增
|
||||
--ti-base-color-prompt-border: #deecff; // smb 新增
|
||||
--ti-base-color-prompt: #1476ff; // smb 新增
|
||||
--ti-base-color-prompt-text: #1476ff; // smb 新增
|
||||
|
||||
--ti-base-color-warn-5: #e37d29; // 告警-5
|
||||
--ti-base-color-warn-4: #fa9841; // 告警-4
|
||||
--ti-base-color-warn-3: #fac20a; // 告警-3
|
||||
--ti-base-color-warn-2: #ffd0a6; // 告警-2
|
||||
--ti-base-color-warn-1: #fff3e8; // 告警-1
|
||||
--ti-base-color-warn-1: #ffb700; // 告警-1
|
||||
|
||||
--ti-base-color-prompt-4: var(--ti-base-color-brand-7); // 提示-4
|
||||
--ti-base-color-prompt-3: var(--ti-base-color-brand-6); // 提示-3
|
||||
--ti-base-color-prompt-2: var(--ti-base-color-brand-3); // 提示-2
|
||||
--ti-base-color-prompt-1: #ebf6ff; // 提示-1
|
||||
|
||||
--ti-base-color-error-icon-from: #ff41a1; // smb 新增
|
||||
--ti-base-color-error-icon-to: #ff8a5b; // smb 新增
|
||||
--ti-base-color-warn-icon-from: #ff5541; // smb 新增
|
||||
--ti-base-color-warn-icon-to: #ffd347; // smb 新增
|
||||
|
||||
--ti-base-color-prompt-icon-from: #7769e8; // 渐变图标-提示-起始色*/
|
||||
--ti-base-color-prompt-icon-to: #58bbff; // 渐变图标-提示-终止色*/
|
||||
/* 状态图标色*/
|
||||
--ti-base-color-icon-info: #6cbfff; // 状态图标-常规
|
||||
--ti-base-color-icon-info: #1476ff; // 状态图标-常规
|
||||
|
||||
/* 1.5 图表色*/
|
||||
--ti-base-color-data-3: #a6dd82; // 图表数据色-3
|
||||
--ti-base-color-data-4: #f3689a; // 图表数据色-4
|
||||
--ti-base-color-data-5: #a97af8; // 图表数据色-5
|
||||
--ti-base-color-data-3: #6e51e0; // 图表数据色-3
|
||||
--ti-base-color-data-4: #5cb300; // 图表数据色-4
|
||||
--ti-base-color-data-5: #fcbe1e; // 图表数据色-5
|
||||
|
||||
--ti-base-color-data-2: #0bb8b2; // smb 新增
|
||||
--ti-base-color-data-6: #33bcf2; // smb 新增
|
||||
--ti-base-color-data-7: #ba53e6; // smb 新增
|
||||
--ti-base-color-data-8: #eb4696; // smb 新增
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加*/
|
||||
|
||||
|
|
@ -89,135 +135,140 @@
|
|||
* 2.1 基础色
|
||||
**/
|
||||
--ti-common-color-transparent: var(--ti-base-color-transparent);
|
||||
--ti-common-color-light: #fff;
|
||||
--ti-common-color-light: var(--ti-base-color-bg-5);
|
||||
--ti-common-color-dark: #000;
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
--ti-common-color-success: var(--ti-base-color-success-3); // 成功-图标色/状态图标-成功
|
||||
--ti-common-color-text-success: var(--ti-base-color-success-4); // 成功-文字色
|
||||
--ti-common-color-success-bg: var(--ti-base-color-success-1); // 成功-背景色
|
||||
--ti-common-color-success-border: var(--ti-base-color-success-2); // 成功-边框色
|
||||
--ti-common-color-success: var(--ti-base-color-success); // 成功-图标色/状态图标-成功
|
||||
--ti-common-color-text-success: var(--ti-base-color-success-text); // 成功-文字色
|
||||
--ti-common-color-success-bg: var(--ti-base-color-success-bg); // 成功-背景色
|
||||
--ti-common-color-success-border: var(--ti-base-color-success-border); // 成功-边框色
|
||||
|
||||
--ti-common-color-error: var(--ti-base-color-error-3); // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
--ti-common-color-error-text: var(--ti-base-color-error-4); // 错误-文字色
|
||||
--ti-common-color-error-bg: var(--ti-base-color-error-1); // 错误-背景色/校验背景色
|
||||
--ti-common-color-error-border: var(--ti-base-color-error-3); // 错误-校验边框色
|
||||
--ti-common-color-error-border-secondary: var(--ti-base-color-error-2); // 错误-alert边框色
|
||||
--ti-common-color-error: var(--ti-base-color-error); // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
--ti-common-color-error-text: var(--ti-base-color-error-text); // 错误-文字色
|
||||
--ti-common-color-error-bg: var(--ti-base-color-error-bg); // 错误-背景色/校验背景色
|
||||
--ti-common-color-error-border: var(--ti-base-color-error); // 错误-校验边框色
|
||||
--ti-common-color-error-border-secondary: var(--ti-base-color-error-border); // 错误-alert边框色
|
||||
|
||||
--ti-common-color-info: var(--ti-base-color-common-7); // 信息-图标色/状态图标-信息
|
||||
--ti-common-color-info-text: var(--ti-base-color-common-7); // 信息-文字色
|
||||
--ti-common-color-info-bg: rgba(51, 51, 51, 0.06); // 信息-背景色
|
||||
--ti-common-color-info-border: #d3d4d6; // 信息-边框色
|
||||
|
||||
--ti-common-color-warn: var(--ti-base-color-warn-4); // 告警-图标色/状态图标-警告
|
||||
--ti-common-color-warn-text: var(--ti-base-color-warn-5); // 告警-文字色
|
||||
--ti-common-color-warn-bg: var(--ti-base-color-warn-1); // 告警-背景色
|
||||
--ti-common-color-warn-border: var(--ti-base-color-warn-2); // 告警-边框色
|
||||
--ti-common-color-warn-secondary: var(--ti-base-color-warn-3); // 次要告警-图标色/状态图标-异常
|
||||
--ti-common-color-warn: var(--ti-base-color-warn); // 告警-图标色/状态图标-警告
|
||||
--ti-common-color-warn-text: var(--ti-base-color-warn-text); // 告警-文字色
|
||||
--ti-common-color-warn-bg: var(--ti-base-color-warn-bg); // 告警-背景色
|
||||
--ti-common-color-warn-border: var(--ti-base-color-warn-border); // 告警-边框色
|
||||
--ti-common-color-warn-secondary: var(--ti-base-color-warn-1); // 次要告警-图标色/状态图标-异常
|
||||
|
||||
--ti-common-color-prompt: var(--ti-base-color-prompt-3); // 提示-图标色
|
||||
--ti-common-color-prompt-text: var(--ti-base-color-prompt-4); // 提示-图标色
|
||||
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-1); // 提示-背景色
|
||||
--ti-common-color-prompt-border: var(--ti-base-color-prompt-2); // 提示-边框色
|
||||
--ti-common-color-prompt: var(--ti-base-color-prompt); // 提示-图标色
|
||||
--ti-common-color-prompt-text: var(--ti-base-color-prompt-text); // 提示-图标色
|
||||
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-bg); // 提示-背景色
|
||||
--ti-common-color-prompt-border: var(--ti-base-color-prompt-border); // 提示-边框色
|
||||
--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from); // 渐变图标-提示-起始色
|
||||
--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to); // 渐变图标-提示-终止色
|
||||
|
||||
--ti-common-color-error-icon-from: var(--ti-base-color-error-icon-from); // smb 新增
|
||||
--ti-common-color-error-icon-to: var(--ti-base-color-error-icon-to); // smb 新增
|
||||
--ti-common-color-warn-icon-from: var(--ti-base-color-warn-icon-from); // smb 新增
|
||||
--ti-common-color-warn-icon-to: var(--ti-base-color-warn-icon-to); // smb 新增
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
--ti-common-color-primary-normal: var(--ti-base-color-brand-6); // NewCssVar
|
||||
--ti-common-color-primary-hover: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-active: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-disabled: #a0cfff; // NewCssVar
|
||||
--ti-common-color-primary-normal: var(--ti-base-color-brand); // NewCssVar
|
||||
--ti-common-color-primary-hover: var(--ti-base-color-brand-1); // NewCssVar
|
||||
--ti-common-color-primary-active: var(--ti-base-color-brand-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-primary-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-success-normal: var(--ti-common-color-success); // NewCssVar
|
||||
--ti-common-color-success-hover: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-active: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-disabled: #a6c3b9; // NewCssVar
|
||||
--ti-common-color-success-normal: var(--ti-base-color-success); // NewCssVar
|
||||
--ti-common-color-success-hover: #b9e683; // NewCssVar
|
||||
--ti-common-color-success-active: #b9e683; // NewCssVar
|
||||
--ti-common-color-success-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-success-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-success-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-success-plain-disabled-bg-color: rgba(166, 195, 185, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-warning-normal: var(--ti-common-color-warn); // NewCssVar
|
||||
--ti-common-color-warning-hover: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-active: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-disabled: #d3c6a2; // NewCssVar
|
||||
--ti-common-color-warning-normal: var(--ti-base-color-warn); // NewCssVar
|
||||
--ti-common-color-warning-hover: #fcc98b; // NewCssVar
|
||||
--ti-common-color-warning-active: #fcc98b; // NewCssVar
|
||||
--ti-common-color-warning-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-warning-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-warning-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-warning-plain-disabled-bg-color: rgba(211, 198, 162, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-danger-normal: var(--ti-common-bg-primary); // NewCssVar
|
||||
--ti-common-color-danger-hover: var(--ti-common-bg-primary-hover); // NewCssVar
|
||||
--ti-common-color-danger-active: var(--ti-common-bg-primary-active); // NewCssVar
|
||||
--ti-common-color-danger-disabled: #d8bab5; // NewCssVar
|
||||
--ti-common-color-danger-normal: var(--ti-base-color-error); // NewCssVar
|
||||
--ti-common-color-danger-hover: #faa9a5; // NewCssVar
|
||||
--ti-common-color-danger-active: #faa9a5; // NewCssVar
|
||||
--ti-common-color-danger-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-danger-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-danger-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-danger-plain-disabled-bg-color: rgba(216, 186, 181, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-info-normal: var(--ti-base-color-common-7); // NewCssVar
|
||||
--ti-common-color-info-hover: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-active: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-disabled: #bfbfbf; // NewCssVar
|
||||
--ti-common-color-info-normal: var(--ti-base-color-common); // NewCssVar
|
||||
--ti-common-color-info-hover: var(--ti-base-color-common-1); // NewCssVar
|
||||
--ti-common-color-info-active: var(--ti-base-color-common-1); // NewCssVar
|
||||
--ti-common-color-info-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-info-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-info-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-info-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
--ti-common-color-text-primary: var(--ti-base-color-common-7); // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
--ti-common-color-text-secondary: var(--ti-base-color-common-5); // 二级文本色-次要信息
|
||||
--ti-common-color-text-weaken: var(--ti-base-color-common-3); // 三级文本色-弱化信息/说明文字
|
||||
--ti-common-color-text-disabled: var(--ti-base-color-common-2); // 文本禁用信息
|
||||
--ti-common-color-text-darkbg: var(--ti-base-color-common-2); // 深色背景下文本信息
|
||||
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-5); // 深色背景下文本信息禁用色
|
||||
--ti-common-color-text-link: var(--ti-base-color-brand-7); // 链接色
|
||||
--ti-common-color-text-link-hover: var(--ti-base-color-brand-8); // 链接悬浮色
|
||||
--ti-common-color-text-primary: var(--ti-base-color-common); // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
--ti-common-color-text-secondary: var(--ti-base-color-common-1); // 二级文本色-次要信息
|
||||
--ti-common-color-text-weaken: var(--ti-base-color-common-2); // 三级文本色-弱化信息/说明文字
|
||||
--ti-common-color-text-disabled: var(--ti-base-color-common-3); // 文本禁用信息
|
||||
--ti-common-color-text-darkbg: var(--ti-base-color-common-3); // 深色背景下文本信息
|
||||
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-1); // 深色背景下文本信息禁用色
|
||||
--ti-common-color-text-link: var(--ti-base-color-brand-2); // 链接色
|
||||
--ti-common-color-text-link-hover: var(--ti-base-color-brand-2); // 链接悬浮色
|
||||
--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4); // 深色背景链接色
|
||||
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-3); // 深色背景链接悬浮色
|
||||
--ti-common-color-text-highlight: var(--ti-base-color-brand-7); // 文本高亮色
|
||||
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-5); // 深色背景链接悬浮色
|
||||
--ti-common-color-text-highlight: var(--ti-base-color-brand-2); // 文本高亮色
|
||||
--ti-common-color-text-white: var(--ti-base-color-white); // 深色背景或图标上文字色
|
||||
--ti-common-color-text-gray: var(--ti-base-color-white); // 深色背景下的文本色，用于tip
|
||||
--ti-common-color-text-gray-disabled: var(--ti-base-color-common-4); // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
--ti-common-color-text-important: var(--ti-base-color-error-4); // 文本_金额
|
||||
--ti-common-color-text-gray: var(--ti-base-color-common); // 深色背景下的文本色，用于tip
|
||||
--ti-common-color-text-gray-disabled: var(--ti-base-color-brand-3); // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
--ti-common-color-text-important: var(--ti-base-color-common); // 文本_金额
|
||||
--ti-common-color-placeholder: var(--ti-base-color-common-2); // NewCssVar
|
||||
--ti-common-color-selected-text-color: var(--ti-common-color-light); // NewCssVar 组件或者组件下拉选中时文字的颜色
|
||||
--ti-common-color-selected-text-color: var(--ti-base-color-brand); // NewCssVar 组件或者组件下拉选中时文字的颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
--ti-common-color-icon-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-icon-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-disabled: var(--ti-base-color-common-2); // 图标禁用色/状态图标-禁用、停止
|
||||
--ti-common-color-icon: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-active: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-disabled: var(--ti-base-color-common-3); // 图标禁用色/状态图标-禁用、停止
|
||||
--ti-common-color-icon-white: var(--ti-base-color-white);
|
||||
|
||||
// 灰色背景下图标色
|
||||
--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-graybg-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-1);
|
||||
--ti-common-color-icon-graybg-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-graybg-active: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-3);
|
||||
|
||||
// 深底背景图标色
|
||||
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-5);
|
||||
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-3);
|
||||
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-3);
|
||||
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-3);
|
||||
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-1);
|
||||
|
||||
// 状态图标背景色
|
||||
--ti-common-color-icon-info: var(--ti-base-color-icon-info); // 状态图标-常规、信息提示
|
||||
|
|
@ -227,64 +278,71 @@
|
|||
**/
|
||||
|
||||
/* 基础背景色 各状态色*/
|
||||
--ti-common-color-bg-normal: var(--ti-base-color-bg-6); // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
--ti-common-color-bg-emphasize: var(--ti-base-color-brand-6); // 背景高亮色
|
||||
--ti-common-color-bg-disabled: var(--ti-base-color-bg-5); // 禁用背景色
|
||||
--ti-common-color-bg-hover: var(--ti-base-color-brand-8); // 主色背景悬浮色
|
||||
--ti-common-color-bg-gray: var(--ti-base-color-bg-4); // 新区域组件-悬浮背景色
|
||||
--ti-common-color-bg-secondary: var(--ti-base-color-common-2); // 开关组件-关闭状态-背景色
|
||||
--ti-common-color-bg-normal: var(--ti-base-color-bg); // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
--ti-common-color-bg-emphasize: var(--ti-base-color-brand); // 背景高亮色
|
||||
--ti-common-color-bg-disabled: var(--ti-base-color-bg-1); // 禁用背景色
|
||||
--ti-common-color-bg-hover: var(--ti-base-color-brand-1); // 主色背景悬浮色
|
||||
--ti-common-color-bg-gray: var(--ti-base-color-bg-2); // 新区域组件-悬浮背景色
|
||||
--ti-common-color-bg-secondary: var(--ti-base-color-common-3); // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件*/
|
||||
--ti-common-bg-primary: var(--ti-base-color-bg-8); // 重要按钮背景色
|
||||
--ti-common-bg-primary-hover: var(--ti-base-color-bg-7); // 重要按钮背景悬浮、focus色
|
||||
--ti-common-bg-primary-active: var(--ti-base-color-bg-9); // 重要按钮背景色按下色
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件 */
|
||||
--ti-common-color-bg-primary: var(--ti-base-color-bg-3); // smb 新增
|
||||
--ti-common-color-bg-primary-hover: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-color-bg-primary-active: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-bg-primary: var(--ti-common-color-bg-primary); // 重要按钮背景色
|
||||
--ti-common-bg-primary-hover: var(--ti-common-color-bg-primary-hover); // 重要按钮背景悬浮、focus色
|
||||
--ti-common-bg-primary-active: var(--ti-common-color-bg-primary-active); // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景*/
|
||||
/* 次要背景色，主要用于次要按钮场景 */
|
||||
--ti-common-color-bg-minor: var(--ti-base-color-bg-7); // smb 新增
|
||||
--ti-common-color-bg-minor-hover: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-color-bg-minor-active: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-bg-minor: var(--ti-base-color-bg-2); // 次要按钮背景色
|
||||
--ti-common-bg-minor-hover: var(--ti-base-color-bg-1); // 次要按钮背景悬浮、focus色
|
||||
--ti-common-bg-minor-active: var(--ti-base-color-bg-3); // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色*/
|
||||
--ti-common-color-bg-white-normal: var(--ti-base-color-white); // 白色背景，用于输入框背景
|
||||
--ti-common-color-bg-white-normal: var(--ti-base-color-bg-7); // 白色背景，用于输入框背景
|
||||
--ti-common-color-bg-white-emphasize: var(
|
||||
--ti-base-color-brand-1
|
||||
--ti-base-color-bg-1
|
||||
); // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色*/
|
||||
--ti-common-color-bg-light-normal: var(
|
||||
--ti-base-color-brand-2
|
||||
--ti-base-color-bg-1
|
||||
); // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-3); // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-7); // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色*/
|
||||
--ti-common-color-bg-dark-normal: var(--ti-base-color-common-6); // 一级tab页签背景色
|
||||
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-common-4); // 一级tab页签背景-悬浮色
|
||||
--ti-common-color-bg-dark-active: var(--ti-common-color-bg-normal); // 一级tab页签背景-激活/focus状态背景色
|
||||
--ti-common-color-bg-dark-deep: var(--ti-base-color-common-6); // tip、alert提示背景色
|
||||
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-1); // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
--ti-common-color-bg-dark-normal: var(--ti-base-color-bg-7); // 一级tab页签背景色
|
||||
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-bg-7); // 一级tab页签背景-悬浮色
|
||||
--ti-common-color-bg-dark-active: var(--ti-base-color-bg-7); // 一级tab页签背景-激活/focus状态背景色
|
||||
--ti-common-color-bg-dark-deep: var(--ti-base-color-white); // tip、alert提示背景色
|
||||
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-4); // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu*/
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-common-8); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9); // 顶部导航下拉背景色
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-bg-5); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-white); // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
--ti-common-color-selected-background: var(--ti-base-color-brand-6); // NewCssVar 组件或者组件下拉选中时的背景色
|
||||
--ti-common-color-hover-background: var(--ti-base-color-brand-1); // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
--ti-common-color-selected-background: var(--ti-base-color-bg); // NewCssVar 组件或者组件下拉选中时的背景色
|
||||
--ti-common-color-hover-background: var(--ti-base-color-bg); // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
--ti-common-color-bg-6: var(--ti-base-color-bg-6); // smb 新增
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
--ti-common-color-data-1: var(--ti-base-color-success-3); // 图表数据色-1
|
||||
--ti-common-color-data-2: var(--ti-base-color-icon-info); // 图表数据色-2
|
||||
--ti-common-color-data-1: var(--ti-base-color-icon-info); // 图表数据色-1
|
||||
--ti-common-color-data-2: var(--ti-base-color-data-2); // 图表数据色-2
|
||||
--ti-common-color-data-3: var(--ti-base-color-data-3); // 图表数据色-3
|
||||
--ti-common-color-data-4: var(--ti-base-color-data-4); // 图表数据色-4
|
||||
--ti-common-color-data-5: var(--ti-base-color-data-5); // 图表数据色-5
|
||||
--ti-common-color-data-6: var(--ti-base-color-warn-3); // 图表数据色-6
|
||||
--ti-common-color-data-7: var(--ti-base-color-warn-4); // 图表数据色-7
|
||||
--ti-common-color-data-8: var(--ti-base-color-error-3); // 图表数据色-8
|
||||
--ti-common-color-data-6: var(--ti-base-color-data-6); // 图表数据色-6
|
||||
--ti-common-color-data-7: var(--ti-base-color-data-7); // 图表数据色-7
|
||||
--ti-common-color-data-8: var(--ti-base-color-data-8); // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
|
|
@ -292,14 +350,17 @@
|
|||
*/
|
||||
|
||||
--ti-common-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
--ti-common-line-height-base: 12px; // NewCssVar 跟字号保持一致
|
||||
--ti-common-line-height-1: 14px; // NewCssVar
|
||||
--ti-common-line-height-2: 16px; // NewCssVar
|
||||
--ti-common-line-height-3: 18px; // NewCssVar
|
||||
--ti-common-line-height-4: 20px; // NewCssVar
|
||||
--ti-common-line-height-5: 24px; // NewCssVar
|
||||
--ti-common-line-height-6: 32px; // NewCssVar
|
||||
--ti-common-line-height-7: 36px; // NewCssVar
|
||||
--ti-common-line-height-base: 18px; // NewCssVar 跟字号保持一致
|
||||
--ti-common-line-height-1: 22px; // NewCssVar
|
||||
--ti-common-line-height-2: 24px; // NewCssVar
|
||||
--ti-common-line-height-3: 28px; // NewCssVar
|
||||
--ti-common-line-height-4: 30px; // NewCssVar
|
||||
--ti-common-line-height-5: 36px; // NewCssVar
|
||||
--ti-common-line-height-6: 48px; // NewCssVar
|
||||
--ti-common-line-height-7: 54px; // NewCssVar
|
||||
--ti-common-line-height-8: 60px; // NewCssVar
|
||||
--ti-common-line-height-9: 72px; // NewCssVar
|
||||
--ti-common-line-height-10: 84px; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
|
|
@ -315,34 +376,35 @@
|
|||
--ti-common-space-6x: calc(var(--ti-common-space-base) * 6); // 间距-6
|
||||
--ti-common-space-8x: calc(var(--ti-common-space-base) * 8); // 间距-7
|
||||
--ti-common-space-10x: calc(var(--ti-common-space-base) * 10); // 间距-8
|
||||
--ti-common-space-2: 2px; // smb 新增
|
||||
|
||||
/* 其他间距 */
|
||||
--ti-common-space-0: 0px; // 其他间距-1
|
||||
--ti-common-space-1: 1px; // 其他间距-2
|
||||
--ti-common-space-6: 6px; // 其他间距-3
|
||||
--ti-common-space-10: 10px; // 其他间距-4
|
||||
--ti-common-dropdown-gap: 2px; // NewCssVar 下拉面板距离上部输入框的间距
|
||||
--ti-common-dropdown-gap: 4px; // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
--ti-common-shadow-none: none; // NewCssVar 无阴影
|
||||
--ti-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 上
|
||||
--ti-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 下
|
||||
--ti-common-shadow-1-left: -1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 左
|
||||
--ti-common-shadow-1-right: 1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 右
|
||||
--ti-common-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 上
|
||||
--ti-common-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 下
|
||||
--ti-common-shadow-2-left: -2px 0 8px 0 rgba(238, 10, 10, 0.2); // 阴影-2 左
|
||||
--ti-common-shadow-2-right: 2px 0 8px 0 rgba(252, 5, 5, 0.2); // 阴影-2 右
|
||||
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 上
|
||||
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 下
|
||||
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 左
|
||||
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 右
|
||||
--ti-common-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 上
|
||||
--ti-common-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 下
|
||||
--ti-common-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 左
|
||||
--ti-common-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 右
|
||||
--ti-common-shadow-1-up: 0 -1px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 上
|
||||
--ti-common-shadow-1-down: 0 1px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 下
|
||||
--ti-common-shadow-1-left: -1px 0px3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 左
|
||||
--ti-common-shadow-1-right: 1px 0px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 右
|
||||
--ti-common-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 上
|
||||
--ti-common-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 下
|
||||
--ti-common-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 左
|
||||
--ti-common-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 右
|
||||
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 上
|
||||
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 下
|
||||
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 左
|
||||
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 右
|
||||
--ti-common-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 上
|
||||
--ti-common-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 下
|
||||
--ti-common-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 左
|
||||
--ti-common-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 右
|
||||
|
||||
/* 提示类阴影*/
|
||||
--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25); // 错误
|
||||
|
|
@ -359,7 +421,7 @@
|
|||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
--ti-common-font-size-base: 12px; // NewCssVar 正文-常规
|
||||
--ti-common-font-size-base: 14px; // NewCssVar 正文-常规
|
||||
--ti-common-font-size-1: 14px; // NewCssVar 标题-小
|
||||
--ti-common-font-size-2: 16px; // NewCssVar 标题-中
|
||||
--ti-common-font-size-3: 18px; // NewCssVar 标题-大
|
||||
|
|
@ -367,6 +429,11 @@
|
|||
--ti-common-font-size-5: 24px; // NewCssVar 字号-5
|
||||
--ti-common-font-size-6: 32px; // NewCssVar 字号-6
|
||||
--ti-common-font-size-7: 36px; // NewCssVar 字号-7
|
||||
--ti-common-font-size-0: 12px; // smb 新增
|
||||
--ti-common-font-size-8: 40px; // smb 新增
|
||||
--ti-common-font-size-9: 48px; // smb 新增
|
||||
--ti-common-font-size-10: 56px; // smb 新增
|
||||
--ti-common-line-number: 1.5; // smb 新增
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
|
|
@ -380,22 +447,24 @@
|
|||
--ti-common-font-weight-7: bold; // 粗体
|
||||
--ti-common-font-weight-8: 800; // 中黑
|
||||
--ti-common-font-weight-9: 900; // 黑体
|
||||
--ti-common-font-weight-bold: 700; // NewCssVar
|
||||
--ti-common-font-weight-bold: 600; // smb
|
||||
--ti-common-font-weight-light: 100; // smb
|
||||
--ti-common-font-weight-normal: 400; // smb
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
--ti-common-color-line-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-line-hover: var(--ti-base-color-common-5);
|
||||
--ti-common-color-line-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-line-disabled: var(--ti-base-color-common-1);
|
||||
--ti-common-color-line-dividing: var(--ti-base-color-common-1); //分割线颜色
|
||||
--ti-common-color-line-normal: var(--ti-base-color-common-3);
|
||||
--ti-common-color-line-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-line-active: var(--ti-base-color-common);
|
||||
--ti-common-color-line-disabled: var(--ti-base-color-common-4);
|
||||
--ti-common-color-line-dividing: var(--ti-base-color-common-5); //分割线颜色
|
||||
/* 虚线 */
|
||||
--ti-common-color-dash-line-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-dash-line-hover: var(--ti-base-color-brand-7);
|
||||
--ti-common-color-border: var(--ti-base-color-common-2); // NewCssVar 待整改后删除
|
||||
--ti-common-color-border-hover: var(--ti-base-color-common-5); // NewCssVar 待整改后删除
|
||||
--ti-common-color-dash-line-normal: var(--ti-base-color-common);
|
||||
--ti-common-color-dash-line-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-border: #999999; // NewCssVar 待整改后删除
|
||||
--ti-common-color-border-hover: var(--ti-base-color-brand); // NewCssVar 待整改后删除
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
|
|
@ -414,11 +483,18 @@
|
|||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
--ti-common-border-radius-normal: 2px; // 常规
|
||||
--ti-common-border-radius-0: 0px; // 直角
|
||||
--ti-common-border-radius-1: 4px; // 圆角-1
|
||||
--ti-common-border-radius-2: 8px; // 圆角-2
|
||||
--ti-common-border-radius-3: 50%; // 圆形
|
||||
--ti-common-border-radius-normal: var(--ti-common-border-radius-3); // 常规
|
||||
--ti-common-border-radius-0: 0; // 直角
|
||||
--ti-common-border-radius-1: 2px; // 圆角-1
|
||||
--ti-common-border-radius-2: 4px; // 圆角-2
|
||||
--ti-common-border-radius-3: 6px; // 圆形
|
||||
--ti-common-border-radius-4: 8px; // smb
|
||||
--ti-common-border-radius-5: 12px; // smb
|
||||
--ti-common-border-radius-6: 16px; // smb
|
||||
--ti-common-border-radius-7: 24px; // smb
|
||||
--ti-common-border-radius-8: 32px; // smb
|
||||
--ti-common-border-radius-9: 48px; // smb
|
||||
--ti-common-border-radius-10: 100px; // smb
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
|
|
@ -479,22 +555,46 @@
|
|||
--ti-common-size-auto: auto; // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
--ti-common-size-width-large: var(--ti-common-size-33x); // NewCssVar
|
||||
--ti-common-size-width-medium: var(--ti-common-size-30x); // NewCssVar
|
||||
--ti-common-size-width-normal: var(--ti-common-size-20x); // NewCssVar
|
||||
--ti-common-size-width-large: 152px; // NewCssVar
|
||||
--ti-common-size-width-medium: 120px; // NewCssVar
|
||||
--ti-common-size-width-normal: 104px; // NewCssVar
|
||||
--ti-common-size-width-small: 80px; // NewCssVar
|
||||
--ti-common-size-width-minor: 30px; // NewCssVar
|
||||
--ti-common-size-width-mini: 24px; // NewCssVar
|
||||
|
||||
--ti-common-size-height-large: var(--ti-common-size-12x); // NewCssVar
|
||||
--ti-common-size-height-medium: var(--ti-common-size-10x); // NewCssVar
|
||||
--ti-common-size-height-small: var(--ti-common-size-8x); // NewCssVar
|
||||
--ti-common-size-height-normal: var(--ti-common-size-7x); // NewCssVar
|
||||
--ti-common-size-height-mini: var(--ti-common-size-6x); // NewCssVar
|
||||
--ti-common-size-height-large: 48px; // NewCssVar
|
||||
--ti-common-size-height-medium: 40px; // NewCssVar
|
||||
--ti-common-size-height-small: 24px; // NewCssVar
|
||||
--ti-common-size-height-normal: 32px; // NewCssVar
|
||||
--ti-common-size-height-mini: 24px; // NewCssVar
|
||||
--ti-common-size-height-minor: 30px; // NewCssVar
|
||||
|
||||
/* 滚动条 */
|
||||
--ti-common-scrollbar-width: 8px;
|
||||
--ti-common-scrollbar-height: 8px;
|
||||
--ti-common-scrollbar-track-piece-bg-color: var(--ti-base-color-bg-4);
|
||||
--ti-common-scrollbar-thumb-bg-color: #bfbfbf;
|
||||
--ti-common-scrollbar-thumb-border-radius: 6px;
|
||||
--ti-common-scrollbar-thumb-hover-bg-color: #999999;
|
||||
--ti-common-scrollbar-thumb-active-bg-color: #999999;
|
||||
--ti-common-scrollbar-track-piece-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-common-scrollbar-thumb-bg-color: var(--ti-base-color-common-4);
|
||||
--ti-common-scrollbar-thumb-border-radius: 4px;
|
||||
--ti-common-scrollbar-thumb-hover-bg-color: var(--ti-base-color-common-4);
|
||||
--ti-common-scrollbar-thumb-active-bg-color: var(--ti-base-color-common-4);
|
||||
|
||||
// smb 新增
|
||||
--ti-base-box-shadow-1: 0px 2px 12px 0px #00000014;
|
||||
--ti-base-text-decoration-underline: underline; // smb
|
||||
--ti-base-display-block: block; // smb
|
||||
--ti-base-opacity-10: 1; // smb
|
||||
--ti-common-text-decoration-underline: var(--ti-base-text-decoration-underline);
|
||||
--ti-common-display-block: var(--ti-base-display-block);
|
||||
--ti-common-opacity-1: var(--ti-base-opacity-10);
|
||||
--ti-common-bg-color-active: var(--ti-base-bg-color-transparent-5);
|
||||
--ti-common-bg-color-hover-40: var(--ti-base-bg-color-transparent-40);
|
||||
--ti-common-bg-color-transparent-15: var(--ti-base-bg-color-transparent-15);
|
||||
--ti-common-bg-color-transparent-50: var(--ti-base-bg-color-transparent-50);
|
||||
--ti-common-bg-color-loading-transparent-50: var(--ti-base-bg-color-loading-transparent-50);
|
||||
--ti-common-bg-color-disabled-transparent-5: var(--ti-base-bg-color-disabled-transparent-5);
|
||||
--ti-common-text-color-active: var(--ti-base-text-color-1);
|
||||
--ti-common-box-shadow-popover: var(--ti-base-box-shadow-1);
|
||||
--ti-common-text-color-disabled: var(--ti-base-text-color-2);
|
||||
--ti-common-border-color-transparent-8: var(--ti-base-bg-color-transparent-8);
|
||||
--ti-common-input-font-family: var(--ti-base-font-family);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,500 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
/*基础变量定义*/
|
||||
:root {
|
||||
/* 基础色 */
|
||||
--ti-base-color-white: #fff; // 纯白
|
||||
--ti-base-color-transparent: transparent; // 透明色
|
||||
|
||||
/* 1.1品牌色*/
|
||||
/* 品牌主色*/
|
||||
--ti-base-color-brand-6: #5e7ce0; // 主色蓝
|
||||
/* 主色衍生色*/
|
||||
--ti-base-color-brand-8: #344899; // 品牌色-8
|
||||
--ti-base-color-brand-7: #526ecc; // 品牌色-7
|
||||
--ti-base-color-brand-5: #7693f5; // 品牌色-5
|
||||
--ti-base-color-brand-4: #96adfa; // 品牌色-4
|
||||
--ti-base-color-brand-3: #beccfa; // 品牌色-3
|
||||
--ti-base-color-brand-2: #e9edfa; // 品牌色-2
|
||||
--ti-base-color-brand-1: #f2f5fc; // 品牌色-1
|
||||
|
||||
/* 1.2 中立色*/
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色*/
|
||||
--ti-base-color-common-9: #181818; // 中立色-9
|
||||
--ti-base-color-common-8: #282b33; // 中立色-8
|
||||
--ti-base-color-common-7: #252b3a; // 中立色-7
|
||||
--ti-base-color-common-6: #464c59; // 中立色-6
|
||||
--ti-base-color-common-5: #575d6c; // 中立色-5
|
||||
--ti-base-color-common-4: #5c6173; // 中立色-4
|
||||
--ti-base-color-common-3: #8a8e99; // 中立色-3
|
||||
--ti-base-color-common-2: #adb0b8; // 中立色-2
|
||||
--ti-base-color-common-1: #dfe1e6; // 中立色-1
|
||||
|
||||
/* 1.3 背景色*/
|
||||
--ti-base-color-bg-9: #b12220; // 背景-9
|
||||
--ti-base-color-bg-8: #c7000b; // 背景-8
|
||||
--ti-base-color-bg-7: #d64a52; // 背景-7
|
||||
--ti-base-color-bg-6: #eef0f5; // 背景-6
|
||||
--ti-base-color-bg-5: #f5f5f6; // 背景-5
|
||||
--ti-base-color-bg-4: #fafafa; // 背景-4
|
||||
--ti-base-color-bg-3: #ffffff; // 背景-3
|
||||
--ti-base-color-bg-2: #ffffff; // 背景-2
|
||||
--ti-base-color-bg-1: #ffffff; // 背景-1
|
||||
|
||||
/* 1.4 功能色*/
|
||||
--ti-base-color-error-4: #de504e; // 错误-4
|
||||
--ti-base-color-error-3: #f66f6a; // 错误-3
|
||||
--ti-base-color-error-2: #ffbcba; // 错误-2
|
||||
--ti-base-color-error-1: #ffeeed; // 错误-1
|
||||
|
||||
--ti-base-color-success-4: #3ac295; // 成功-4
|
||||
--ti-base-color-success-3: #50d4ab; // 成功-3
|
||||
--ti-base-color-success-2: #acf2dc; // 成功-2
|
||||
--ti-base-color-success-1: #edfff9; // 成功-1
|
||||
|
||||
--ti-base-color-warn-5: #e37d29; // 告警-5
|
||||
--ti-base-color-warn-4: #fa9841; // 告警-4
|
||||
--ti-base-color-warn-3: #fac20a; // 告警-3
|
||||
--ti-base-color-warn-2: #ffd0a6; // 告警-2
|
||||
--ti-base-color-warn-1: #fff3e8; // 告警-1
|
||||
|
||||
--ti-base-color-prompt-4: var(--ti-base-color-brand-7); // 提示-4
|
||||
--ti-base-color-prompt-3: var(--ti-base-color-brand-6); // 提示-3
|
||||
--ti-base-color-prompt-2: var(--ti-base-color-brand-3); // 提示-2
|
||||
--ti-base-color-prompt-1: #ebf6ff; // 提示-1
|
||||
|
||||
--ti-base-color-prompt-icon-from: #7769e8; // 渐变图标-提示-起始色*/
|
||||
--ti-base-color-prompt-icon-to: #58bbff; // 渐变图标-提示-终止色*/
|
||||
/* 状态图标色*/
|
||||
--ti-base-color-icon-info: #6cbfff; // 状态图标-常规
|
||||
|
||||
/* 1.5 图表色*/
|
||||
--ti-base-color-data-3: #a6dd82; // 图表数据色-3
|
||||
--ti-base-color-data-4: #f3689a; // 图表数据色-4
|
||||
--ti-base-color-data-5: #a97af8; // 图表数据色-5
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加*/
|
||||
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
--ti-common-color-transparent: var(--ti-base-color-transparent);
|
||||
--ti-common-color-light: #fff;
|
||||
--ti-common-color-dark: #000;
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
--ti-common-color-success: var(--ti-base-color-success-3); // 成功-图标色/状态图标-成功
|
||||
--ti-common-color-text-success: var(--ti-base-color-success-4); // 成功-文字色
|
||||
--ti-common-color-success-bg: var(--ti-base-color-success-1); // 成功-背景色
|
||||
--ti-common-color-success-border: var(--ti-base-color-success-2); // 成功-边框色
|
||||
|
||||
--ti-common-color-error: var(--ti-base-color-error-3); // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
--ti-common-color-error-text: var(--ti-base-color-error-4); // 错误-文字色
|
||||
--ti-common-color-error-bg: var(--ti-base-color-error-1); // 错误-背景色/校验背景色
|
||||
--ti-common-color-error-border: var(--ti-base-color-error-3); // 错误-校验边框色
|
||||
--ti-common-color-error-border-secondary: var(--ti-base-color-error-2); // 错误-alert边框色
|
||||
|
||||
--ti-common-color-info: var(--ti-base-color-common-7); // 信息-图标色/状态图标-信息
|
||||
--ti-common-color-info-text: var(--ti-base-color-common-7); // 信息-文字色
|
||||
--ti-common-color-info-bg: rgba(51, 51, 51, 0.06); // 信息-背景色
|
||||
--ti-common-color-info-border: #d3d4d6; // 信息-边框色
|
||||
|
||||
--ti-common-color-warn: var(--ti-base-color-warn-4); // 告警-图标色/状态图标-警告
|
||||
--ti-common-color-warn-text: var(--ti-base-color-warn-5); // 告警-文字色
|
||||
--ti-common-color-warn-bg: var(--ti-base-color-warn-1); // 告警-背景色
|
||||
--ti-common-color-warn-border: var(--ti-base-color-warn-2); // 告警-边框色
|
||||
--ti-common-color-warn-secondary: var(--ti-base-color-warn-3); // 次要告警-图标色/状态图标-异常
|
||||
|
||||
--ti-common-color-prompt: var(--ti-base-color-prompt-3); // 提示-图标色
|
||||
--ti-common-color-prompt-text: var(--ti-base-color-prompt-4); // 提示-图标色
|
||||
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-1); // 提示-背景色
|
||||
--ti-common-color-prompt-border: var(--ti-base-color-prompt-2); // 提示-边框色
|
||||
--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from); // 渐变图标-提示-起始色
|
||||
--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to); // 渐变图标-提示-终止色
|
||||
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
--ti-common-color-primary-normal: var(--ti-base-color-brand-6); // NewCssVar
|
||||
--ti-common-color-primary-hover: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-active: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-disabled: #a0cfff; // NewCssVar
|
||||
--ti-common-color-primary-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-primary-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-success-normal: var(--ti-common-color-success); // NewCssVar
|
||||
--ti-common-color-success-hover: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-active: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-disabled: #a6c3b9; // NewCssVar
|
||||
--ti-common-color-success-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-success-plain-disabled-bg-color: rgba(166, 195, 185, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-warning-normal: var(--ti-common-color-warn); // NewCssVar
|
||||
--ti-common-color-warning-hover: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-active: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-disabled: #d3c6a2; // NewCssVar
|
||||
--ti-common-color-warning-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-warning-plain-disabled-bg-color: rgba(211, 198, 162, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-danger-normal: var(--ti-common-bg-primary); // NewCssVar
|
||||
--ti-common-color-danger-hover: var(--ti-common-bg-primary-hover); // NewCssVar
|
||||
--ti-common-color-danger-active: var(--ti-common-bg-primary-active); // NewCssVar
|
||||
--ti-common-color-danger-disabled: #d8bab5; // NewCssVar
|
||||
--ti-common-color-danger-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-danger-plain-disabled-bg-color: rgba(216, 186, 181, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-info-normal: var(--ti-base-color-common-7); // NewCssVar
|
||||
--ti-common-color-info-hover: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-active: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-disabled: #bfbfbf; // NewCssVar
|
||||
--ti-common-color-info-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-info-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
--ti-common-color-text-primary: var(--ti-base-color-common-7); // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
--ti-common-color-text-secondary: var(--ti-base-color-common-5); // 二级文本色-次要信息
|
||||
--ti-common-color-text-weaken: var(--ti-base-color-common-3); // 三级文本色-弱化信息/说明文字
|
||||
--ti-common-color-text-disabled: var(--ti-base-color-common-2); // 文本禁用信息
|
||||
--ti-common-color-text-darkbg: var(--ti-base-color-common-2); // 深色背景下文本信息
|
||||
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-5); // 深色背景下文本信息禁用色
|
||||
--ti-common-color-text-link: var(--ti-base-color-brand-7); // 链接色
|
||||
--ti-common-color-text-link-hover: var(--ti-base-color-brand-8); // 链接悬浮色
|
||||
--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4); // 深色背景链接色
|
||||
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-3); // 深色背景链接悬浮色
|
||||
--ti-common-color-text-highlight: var(--ti-base-color-brand-7); // 文本高亮色
|
||||
--ti-common-color-text-white: var(--ti-base-color-white); // 深色背景或图标上文字色
|
||||
--ti-common-color-text-gray: var(--ti-base-color-white); // 深色背景下的文本色，用于tip
|
||||
--ti-common-color-text-gray-disabled: var(--ti-base-color-common-4); // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
--ti-common-color-text-important: var(--ti-base-color-error-4); // 文本_金额
|
||||
--ti-common-color-placeholder: var(--ti-base-color-common-2); // NewCssVar
|
||||
--ti-common-color-selected-text-color: var(--ti-common-color-light); // NewCssVar 组件或者组件下拉选中时文字的颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
--ti-common-color-icon-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-icon-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-disabled: var(--ti-base-color-common-2); // 图标禁用色/状态图标-禁用、停止
|
||||
--ti-common-color-icon-white: var(--ti-base-color-white);
|
||||
|
||||
// 灰色背景下图标色
|
||||
--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-graybg-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-1);
|
||||
|
||||
// 深底背景图标色
|
||||
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-5);
|
||||
|
||||
// 状态图标背景色
|
||||
--ti-common-color-icon-info: var(--ti-base-color-icon-info); // 状态图标-常规、信息提示
|
||||
|
||||
/**
|
||||
* 2.6 背景色
|
||||
**/
|
||||
|
||||
/* 基础背景色 各状态色*/
|
||||
--ti-common-color-bg-normal: var(--ti-base-color-bg-6); // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
--ti-common-color-bg-emphasize: var(--ti-base-color-brand-6); // 背景高亮色
|
||||
--ti-common-color-bg-disabled: var(--ti-base-color-bg-5); // 禁用背景色
|
||||
--ti-common-color-bg-hover: var(--ti-base-color-brand-8); // 主色背景悬浮色
|
||||
--ti-common-color-bg-gray: var(--ti-base-color-bg-4); // 新区域组件-悬浮背景色
|
||||
--ti-common-color-bg-secondary: var(--ti-base-color-common-2); // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件*/
|
||||
--ti-common-bg-primary: var(--ti-base-color-bg-8); // 重要按钮背景色
|
||||
--ti-common-bg-primary-hover: var(--ti-base-color-bg-7); // 重要按钮背景悬浮、focus色
|
||||
--ti-common-bg-primary-active: var(--ti-base-color-bg-9); // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景*/
|
||||
--ti-common-bg-minor: var(--ti-base-color-bg-2); // 次要按钮背景色
|
||||
--ti-common-bg-minor-hover: var(--ti-base-color-bg-1); // 次要按钮背景悬浮、focus色
|
||||
--ti-common-bg-minor-active: var(--ti-base-color-bg-3); // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色*/
|
||||
--ti-common-color-bg-white-normal: var(--ti-base-color-white); // 白色背景，用于输入框背景
|
||||
--ti-common-color-bg-white-emphasize: var(
|
||||
--ti-base-color-brand-1
|
||||
); // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色*/
|
||||
--ti-common-color-bg-light-normal: var(
|
||||
--ti-base-color-brand-2
|
||||
); // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-3); // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色*/
|
||||
--ti-common-color-bg-dark-normal: var(--ti-base-color-common-6); // 一级tab页签背景色
|
||||
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-common-4); // 一级tab页签背景-悬浮色
|
||||
--ti-common-color-bg-dark-active: var(--ti-common-color-bg-normal); // 一级tab页签背景-激活/focus状态背景色
|
||||
--ti-common-color-bg-dark-deep: var(--ti-base-color-common-6); // tip、alert提示背景色
|
||||
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-1); // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu*/
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-common-8); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9); // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
--ti-common-color-selected-background: var(--ti-base-color-brand-6); // NewCssVar 组件或者组件下拉选中时的背景色
|
||||
--ti-common-color-hover-background: var(--ti-base-color-brand-1); // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
--ti-common-color-data-1: var(--ti-base-color-success-3); // 图表数据色-1
|
||||
--ti-common-color-data-2: var(--ti-base-color-icon-info); // 图表数据色-2
|
||||
--ti-common-color-data-3: var(--ti-base-color-data-3); // 图表数据色-3
|
||||
--ti-common-color-data-4: var(--ti-base-color-data-4); // 图表数据色-4
|
||||
--ti-common-color-data-5: var(--ti-base-color-data-5); // 图表数据色-5
|
||||
--ti-common-color-data-6: var(--ti-base-color-warn-3); // 图表数据色-6
|
||||
--ti-common-color-data-7: var(--ti-base-color-warn-4); // 图表数据色-7
|
||||
--ti-common-color-data-8: var(--ti-base-color-error-3); // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
* TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一
|
||||
*/
|
||||
|
||||
--ti-common-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
--ti-common-line-height-base: 12px; // NewCssVar 跟字号保持一致
|
||||
--ti-common-line-height-1: 14px; // NewCssVar
|
||||
--ti-common-line-height-2: 16px; // NewCssVar
|
||||
--ti-common-line-height-3: 18px; // NewCssVar
|
||||
--ti-common-line-height-4: 20px; // NewCssVar
|
||||
--ti-common-line-height-5: 24px; // NewCssVar
|
||||
--ti-common-line-height-6: 32px; // NewCssVar
|
||||
--ti-common-line-height-7: 36px; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
* 适用于组件中的margin、padding
|
||||
**/
|
||||
|
||||
/* 基础间距 */
|
||||
--ti-common-space-base: 4px;
|
||||
--ti-common-space-2x: calc(var(--ti-common-space-base) * 2); // 间距-2
|
||||
--ti-common-space-3x: calc(var(--ti-common-space-base) * 3); // 间距-3
|
||||
--ti-common-space-4x: calc(var(--ti-common-space-base) * 4); // 间距-4
|
||||
--ti-common-space-5x: calc(var(--ti-common-space-base) * 5); // 间距-5
|
||||
--ti-common-space-6x: calc(var(--ti-common-space-base) * 6); // 间距-6
|
||||
--ti-common-space-8x: calc(var(--ti-common-space-base) * 8); // 间距-7
|
||||
--ti-common-space-10x: calc(var(--ti-common-space-base) * 10); // 间距-8
|
||||
|
||||
/* 其他间距 */
|
||||
--ti-common-space-0: 0px; // 其他间距-1
|
||||
--ti-common-space-1: 1px; // 其他间距-2
|
||||
--ti-common-space-6: 6px; // 其他间距-3
|
||||
--ti-common-space-10: 10px; // 其他间距-4
|
||||
--ti-common-dropdown-gap: 2px; // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
--ti-common-shadow-none: none; // NewCssVar 无阴影
|
||||
--ti-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 上
|
||||
--ti-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 下
|
||||
--ti-common-shadow-1-left: -1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 左
|
||||
--ti-common-shadow-1-right: 1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 右
|
||||
--ti-common-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 上
|
||||
--ti-common-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 下
|
||||
--ti-common-shadow-2-left: -2px 0 8px 0 rgba(238, 10, 10, 0.2); // 阴影-2 左
|
||||
--ti-common-shadow-2-right: 2px 0 8px 0 rgba(252, 5, 5, 0.2); // 阴影-2 右
|
||||
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 上
|
||||
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 下
|
||||
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 左
|
||||
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 右
|
||||
--ti-common-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 上
|
||||
--ti-common-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 下
|
||||
--ti-common-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 左
|
||||
--ti-common-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 右
|
||||
|
||||
/* 提示类阴影*/
|
||||
--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25); // 错误
|
||||
--ti-common-shadow-warn: 0 1px 3px 0 rgba(204, 100, 20, 0.25); // 告警
|
||||
--ti-common-shadow-prompt: 0 1px 3px 0 rgba(70, 94, 184, 0.25); // 提示
|
||||
--ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25); // 成功
|
||||
|
||||
/**
|
||||
* 2.11 字体
|
||||
**/
|
||||
--ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
|
||||
'Microsoft JhengHei';
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
--ti-common-font-size-base: 12px; // NewCssVar 正文-常规
|
||||
--ti-common-font-size-1: 14px; // NewCssVar 标题-小
|
||||
--ti-common-font-size-2: 16px; // NewCssVar 标题-中
|
||||
--ti-common-font-size-3: 18px; // NewCssVar 标题-大
|
||||
--ti-common-font-size-4: 20px; // NewCssVar 字号-4
|
||||
--ti-common-font-size-5: 24px; // NewCssVar 字号-5
|
||||
--ti-common-font-size-6: 32px; // NewCssVar 字号-6
|
||||
--ti-common-font-size-7: 36px; // NewCssVar 字号-7
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
**/
|
||||
--ti-common-font-weight-1: 100; // 极细
|
||||
--ti-common-font-weight-2: 200; // 纤细
|
||||
--ti-common-font-weight-3: 300; // 细体
|
||||
--ti-common-font-weight-4: normal; // 常规
|
||||
--ti-common-font-weight-5: 500; // 中等
|
||||
--ti-common-font-weight-6: 600; // 半粗
|
||||
--ti-common-font-weight-7: bold; // 粗体
|
||||
--ti-common-font-weight-8: 800; // 中黑
|
||||
--ti-common-font-weight-9: 900; // 黑体
|
||||
--ti-common-font-weight-bold: 700; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
--ti-common-color-line-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-line-hover: var(--ti-base-color-common-5);
|
||||
--ti-common-color-line-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-line-disabled: var(--ti-base-color-common-1);
|
||||
--ti-common-color-line-dividing: var(--ti-base-color-common-1); //分割线颜色
|
||||
/* 虚线 */
|
||||
--ti-common-color-dash-line-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-dash-line-hover: var(--ti-base-color-brand-7);
|
||||
--ti-common-color-border: var(--ti-base-color-common-2); // NewCssVar 待整改后删除
|
||||
--ti-common-color-border-hover: var(--ti-base-color-common-5); // NewCssVar 待整改后删除
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
**/
|
||||
--ti-common-border-weight-normal: 1px; // 常规
|
||||
--ti-common-border-weight-1: 2px; // 较粗
|
||||
--ti-common-border-weight-2: 3px; // 粗
|
||||
|
||||
/**
|
||||
* 2.16 线样式
|
||||
**/
|
||||
--ti-common-border-style-dashed: dashed; // 虚线
|
||||
--ti-common-border-style-dotted: dotted; // 点线
|
||||
--ti-common-border-style-solid: solid; // 实线
|
||||
|
||||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
--ti-common-border-radius-normal: 2px; // 常规
|
||||
--ti-common-border-radius-0: 0px; // 直角
|
||||
--ti-common-border-radius-1: 4px; // 圆角-1
|
||||
--ti-common-border-radius-2: 8px; // 圆角-2
|
||||
--ti-common-border-radius-3: 50%; // 圆形
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
**/
|
||||
--ti-common-size-base: 4px; // 基础尺寸
|
||||
--ti-common-size-2x: calc(var(--ti-common-size-base) * 2); // 尺寸-2
|
||||
--ti-common-size-3x: calc(var(--ti-common-size-base) * 3); // 尺寸-3
|
||||
--ti-common-size-4x: calc(var(--ti-common-size-base) * 4); // 尺寸-4
|
||||
--ti-common-size-5x: calc(var(--ti-common-size-base) * 5); // 尺寸-5
|
||||
--ti-common-size-6x: calc(var(--ti-common-size-base) * 6); // 尺寸-6
|
||||
--ti-common-size-7x: calc(var(--ti-common-size-base) * 7); // 尺寸-7
|
||||
--ti-common-size-8x: calc(var(--ti-common-size-base) * 8); // 尺寸-8
|
||||
--ti-common-size-9x: calc(var(--ti-common-size-base) * 9); // 尺寸-9
|
||||
--ti-common-size-10x: calc(var(--ti-common-size-base) * 10); // 尺寸-10
|
||||
--ti-common-size-11x: calc(var(--ti-common-size-base) * 11); // 尺寸-11
|
||||
--ti-common-size-12x: calc(var(--ti-common-size-base) * 12); // 尺寸-12
|
||||
--ti-common-size-13x: calc(var(--ti-common-size-base) * 13); // 尺寸-13
|
||||
--ti-common-size-14x: calc(var(--ti-common-size-base) * 14); // 尺寸-14
|
||||
--ti-common-size-15x: calc(var(--ti-common-size-base) * 15); // 尺寸-15
|
||||
--ti-common-size-16x: calc(var(--ti-common-size-base) * 16); // 尺寸-16
|
||||
--ti-common-size-17x: calc(var(--ti-common-size-base) * 17); // 尺寸-17
|
||||
--ti-common-size-18x: calc(var(--ti-common-size-base) * 18); // 尺寸-18
|
||||
--ti-common-size-19x: calc(var(--ti-common-size-base) * 19); // 尺寸-19
|
||||
--ti-common-size-20x: calc(var(--ti-common-size-base) * 20); // 尺寸-20
|
||||
--ti-common-size-21x: calc(var(--ti-common-size-base) * 21); // 尺寸-21
|
||||
--ti-common-size-22x: calc(var(--ti-common-size-base) * 22); // 尺寸-22
|
||||
--ti-common-size-23x: calc(var(--ti-common-size-base) * 23); // 尺寸-23
|
||||
--ti-common-size-24x: calc(var(--ti-common-size-base) * 24); // 尺寸-24
|
||||
--ti-common-size-25x: calc(var(--ti-common-size-base) * 25); // 尺寸-25
|
||||
--ti-common-size-26x: calc(var(--ti-common-size-base) * 26); // 尺寸-26
|
||||
--ti-common-size-27x: calc(var(--ti-common-size-base) * 27); // 尺寸-27
|
||||
--ti-common-size-28x: calc(var(--ti-common-size-base) * 28); // 尺寸-28
|
||||
--ti-common-size-29x: calc(var(--ti-common-size-base) * 29); // 尺寸-29
|
||||
--ti-common-size-30x: calc(var(--ti-common-size-base) * 30); // 尺寸-30
|
||||
--ti-common-size-31x: calc(var(--ti-common-size-base) * 31); // 尺寸-31
|
||||
--ti-common-size-32x: calc(var(--ti-common-size-base) * 32); // 尺寸-32
|
||||
--ti-common-size-33x: calc(var(--ti-common-size-base) * 33); // 尺寸-33
|
||||
--ti-common-size-34x: calc(var(--ti-common-size-base) * 34); // 尺寸-34
|
||||
--ti-common-size-35x: calc(var(--ti-common-size-base) * 35); // 尺寸-35
|
||||
--ti-common-size-36x: calc(var(--ti-common-size-base) * 36); // 尺寸-36
|
||||
--ti-common-size-37x: calc(var(--ti-common-size-base) * 37); // 尺寸-37
|
||||
--ti-common-size-38x: calc(var(--ti-common-size-base) * 38); // 尺寸-38
|
||||
--ti-common-size-39x: calc(var(--ti-common-size-base) * 39); // 尺寸-39
|
||||
--ti-common-size-40x: calc(var(--ti-common-size-base) * 40); // 尺寸-40
|
||||
--ti-common-size-41x: calc(var(--ti-common-size-base) * 41); // 尺寸-41
|
||||
--ti-common-size-42x: calc(var(--ti-common-size-base) * 42); // 尺寸-42
|
||||
--ti-common-size-43x: calc(var(--ti-common-size-base) * 43); // 尺寸-43
|
||||
--ti-common-size-44x: calc(var(--ti-common-size-base) * 44); // 尺寸-44
|
||||
--ti-common-size-45x: calc(var(--ti-common-size-base) * 45); // 尺寸-45
|
||||
--ti-common-size-46x: calc(var(--ti-common-size-base) * 46); // 尺寸-46
|
||||
--ti-common-size-47x: calc(var(--ti-common-size-base) * 47); // 尺寸-47
|
||||
--ti-common-size-48x: calc(var(--ti-common-size-base) * 48); // 尺寸-48
|
||||
--ti-common-size-49x: calc(var(--ti-common-size-base) * 49); // 尺寸-49
|
||||
--ti-common-size-50x: calc(var(--ti-common-size-base) * 50); // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
--ti-common-size-0: 0px; // 其他尺寸-1
|
||||
--ti-common-size-auto: auto; // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
--ti-common-size-width-large: var(--ti-common-size-33x); // NewCssVar
|
||||
--ti-common-size-width-medium: var(--ti-common-size-30x); // NewCssVar
|
||||
--ti-common-size-width-normal: var(--ti-common-size-20x); // NewCssVar
|
||||
|
||||
--ti-common-size-height-large: var(--ti-common-size-12x); // NewCssVar
|
||||
--ti-common-size-height-medium: var(--ti-common-size-10x); // NewCssVar
|
||||
--ti-common-size-height-small: var(--ti-common-size-8x); // NewCssVar
|
||||
--ti-common-size-height-normal: var(--ti-common-size-7x); // NewCssVar
|
||||
--ti-common-size-height-mini: var(--ti-common-size-6x); // NewCssVar
|
||||
|
||||
/* 滚动条 */
|
||||
--ti-common-scrollbar-width: 8px;
|
||||
--ti-common-scrollbar-height: 8px;
|
||||
--ti-common-scrollbar-track-piece-bg-color: var(--ti-base-color-bg-4);
|
||||
--ti-common-scrollbar-thumb-bg-color: #bfbfbf;
|
||||
--ti-common-scrollbar-thumb-border-radius: 6px;
|
||||
--ti-common-scrollbar-thumb-hover-bg-color: #999999;
|
||||
--ti-common-scrollbar-thumb-active-bg-color: #999999;
|
||||
}
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
export const tinyBaseOldTheme = {
|
||||
'ti-common-scrollbar-thumb-active-bg-color': '#999999',
|
||||
'ti-common-scrollbar-thumb-hover-bg-color': '#999999',
|
||||
'ti-common-scrollbar-thumb-border-radius': '6px',
|
||||
'ti-common-scrollbar-thumb-bg-color': '#bfbfbf',
|
||||
'ti-common-scrollbar-track-piece-bg-color': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-scrollbar-height': '8px',
|
||||
'ti-common-scrollbar-width': '8px',
|
||||
'ti-common-size-height-mini': 'var(--ti-common-size-6x)',
|
||||
'ti-common-size-height-normal': 'var(--ti-common-size-7x)',
|
||||
'ti-common-size-height-small': 'var(--ti-common-size-8x)',
|
||||
'ti-common-size-height-medium': 'var(--ti-common-size-10x)',
|
||||
'ti-common-size-height-large': 'var(--ti-common-size-12x)',
|
||||
'ti-common-size-width-normal': 'var(--ti-common-size-20x)',
|
||||
'ti-common-size-width-medium': 'var(--ti-common-size-30x)',
|
||||
'ti-common-size-width-large': 'var(--ti-common-size-33x)',
|
||||
'ti-common-size-auto': 'auto',
|
||||
'ti-common-size-0': '0px',
|
||||
'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)',
|
||||
'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)',
|
||||
'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)',
|
||||
'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)',
|
||||
'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)',
|
||||
'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)',
|
||||
'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)',
|
||||
'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)',
|
||||
'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)',
|
||||
'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)',
|
||||
'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)',
|
||||
'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)',
|
||||
'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)',
|
||||
'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)',
|
||||
'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)',
|
||||
'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)',
|
||||
'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)',
|
||||
'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)',
|
||||
'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)',
|
||||
'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)',
|
||||
'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)',
|
||||
'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)',
|
||||
'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)',
|
||||
'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)',
|
||||
'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)',
|
||||
'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)',
|
||||
'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)',
|
||||
'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)',
|
||||
'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)',
|
||||
'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)',
|
||||
'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)',
|
||||
'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)',
|
||||
'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)',
|
||||
'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)',
|
||||
'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)',
|
||||
'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)',
|
||||
'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)',
|
||||
'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)',
|
||||
'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)',
|
||||
'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)',
|
||||
'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)',
|
||||
'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)',
|
||||
'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)',
|
||||
'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)',
|
||||
'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)',
|
||||
'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)',
|
||||
'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)',
|
||||
'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)',
|
||||
'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)',
|
||||
'ti-common-size-base': '4px',
|
||||
'ti-common-border-radius-3': '50%',
|
||||
'ti-common-border-radius-2': '8px',
|
||||
'ti-common-border-radius-1': '4px',
|
||||
'ti-common-border-radius-0': '0px',
|
||||
'ti-common-border-radius-normal': '2px',
|
||||
'ti-common-border-weight-1': '2px',
|
||||
'ti-common-border-weight-normal': '1px',
|
||||
'ti-common-color-border-hover': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-border': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-line-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-line-hover': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-line-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-font-weight-bold': '700',
|
||||
'ti-common-font-weight-6': '600',
|
||||
'ti-common-font-weight-4': 'normal',
|
||||
'ti-common-font-size-7': '36px',
|
||||
'ti-common-font-size-6': '32px',
|
||||
'ti-common-font-size-5': '24px',
|
||||
'ti-common-font-size-4': '20px',
|
||||
'ti-common-font-size-3': '18px',
|
||||
'ti-common-font-size-2': '16px',
|
||||
'ti-common-font-size-1': '14px',
|
||||
'ti-common-font-size-base': '12px',
|
||||
'ti-common-font-family':
|
||||
"'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',\n 'Microsoft JhengHei'",
|
||||
'ti-common-shadow-4-right': '8px 0 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-left': '-8px 0 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-down': '0 8px 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-up': '0 -8px 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-2-right': '2px 0 8px 0 rgba(252, 5, 5, 0.2)',
|
||||
'ti-common-shadow-2-left': '-2px 0 8px 0 rgba(238, 10, 10, 0.2)',
|
||||
'ti-common-shadow-2-down': '0 2px 8px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-2-up': '0 -2px 8px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-1-right': '1px 0px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-left': '-1px 0px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-down': '0 1px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-up': '0 -1px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-dropdown-gap': '2px',
|
||||
'ti-common-space-10': '10px',
|
||||
'ti-common-space-6': '6px',
|
||||
'ti-common-space-0': '0px',
|
||||
'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)',
|
||||
'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)',
|
||||
'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)',
|
||||
'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)',
|
||||
'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)',
|
||||
'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)',
|
||||
'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)',
|
||||
'ti-common-space-base': '4px',
|
||||
'ti-common-line-height-7': '36px',
|
||||
'ti-common-line-height-6': '32px',
|
||||
'ti-common-line-height-5': '24px',
|
||||
'ti-common-line-height-4': '20px',
|
||||
'ti-common-line-height-3': '18px',
|
||||
'ti-common-line-height-2': '16px',
|
||||
'ti-common-line-height-1': '14px',
|
||||
'ti-common-line-height-base': '12px',
|
||||
'ti-common-line-height-number': '1.5',
|
||||
'ti-common-color-data-8': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-data-7': 'var(--ti-base-color-warn-4)',
|
||||
'ti-common-color-data-6': 'var(--ti-base-color-warn-3)',
|
||||
'ti-common-color-data-5': 'var(--ti-base-color-data-5)',
|
||||
'ti-common-color-data-4': 'var(--ti-base-color-data-4)',
|
||||
'ti-common-color-data-3': 'var(--ti-base-color-data-3)',
|
||||
'ti-common-color-data-2': 'var(--ti-base-color-icon-info)',
|
||||
'ti-common-color-data-1': 'var(--ti-base-color-success-3)',
|
||||
'ti-common-color-hover-background': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-selected-background': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-common-9)',
|
||||
'ti-common-color-bg-navigation': 'var(--ti-base-color-common-8)',
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-common-6)',
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-common-color-bg-normal)',
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-common-6)',
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-bg-light-normal': 'var(\n --ti-base-color-brand-2\n )',
|
||||
'ti-common-color-bg-white-emphasize': 'var(\n --ti-base-color-brand-1\n )',
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-white)',
|
||||
'ti-common-bg-primary-active': 'var(--ti-base-color-bg-9)',
|
||||
'ti-common-bg-primary-hover': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-bg-primary': 'var(--ti-base-color-bg-8)',
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-bg-disabled': 'var(--ti-base-color-bg-5)',
|
||||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg-6)',
|
||||
'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)',
|
||||
'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-graybg-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-icon-disabled': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-selected-text-color': 'var(--ti-common-color-light)',
|
||||
'ti-common-color-placeholder': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-error-4)',
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)',
|
||||
'ti-common-color-text-link-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-text-link': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-disabled': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-secondary': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-text-primary': 'var(--ti-base-color-common-7)',
|
||||
'ti-common-color-info-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-info-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-info-disabled': '#bfbfbf',
|
||||
'ti-common-color-info-active': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-info-hover': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-info-normal': 'var(--ti-base-color-common-7)',
|
||||
'ti-common-color-danger-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-danger-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-danger-disabled': '#d8bab5',
|
||||
'ti-common-color-danger-active': 'var(--ti-common-bg-primary-active)',
|
||||
'ti-common-color-danger-hover': 'var(--ti-common-bg-primary-hover)',
|
||||
'ti-common-color-danger-normal': 'var(--ti-common-bg-primary)',
|
||||
'ti-common-color-warning-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-warning-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-warning-disabled': '#d3c6a2',
|
||||
'ti-common-color-warning-active': 'var(--ti-common-color-warn-secondary)',
|
||||
'ti-common-color-warning-hover': 'var(--ti-common-color-warn-secondary)',
|
||||
'ti-common-color-warning-normal': 'var(--ti-common-color-warn)',
|
||||
'ti-common-color-success-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-success-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-success-disabled': '#a6c3b9',
|
||||
'ti-common-color-success-active': 'var(--ti-common-color-success-border)',
|
||||
'ti-common-color-success-hover': 'var(--ti-common-color-success-border)',
|
||||
'ti-common-color-success-normal': 'var(--ti-common-color-success)',
|
||||
'ti-common-color-primary-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-primary-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-primary-disabled': '#a0cfff',
|
||||
'ti-common-color-primary-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-primary-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-prompt-icon-to': 'var(--ti-base-color-prompt-icon-to)',
|
||||
'ti-common-color-prompt-icon-from': 'var(--ti-base-color-prompt-icon-from)',
|
||||
'ti-common-color-prompt-border': 'var(--ti-base-color-prompt-2)',
|
||||
'ti-common-color-prompt-bg': 'var(--ti-base-color-prompt-1)',
|
||||
'ti-common-color-prompt-text': 'var(--ti-base-color-prompt-4)',
|
||||
'ti-common-color-prompt': 'var(--ti-base-color-prompt-3)',
|
||||
'ti-common-color-warn-secondary': 'var(--ti-base-color-warn-3)',
|
||||
'ti-common-color-warn-border': 'var(--ti-base-color-warn-2)',
|
||||
'ti-common-color-warn-bg': 'var(--ti-base-color-warn-1)',
|
||||
'ti-common-color-warn-text': 'var(--ti-base-color-warn-5)',
|
||||
'ti-common-color-warn': 'var(--ti-base-color-warn-4)',
|
||||
'ti-common-color-error-border-secondary': 'var(--ti-base-color-error-2)',
|
||||
'ti-common-color-error-border': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-error-bg': 'var(--ti-base-color-error-1)',
|
||||
'ti-common-color-error-text': 'var(--ti-base-color-error-4)',
|
||||
'ti-common-color-error': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-success-border': 'var(--ti-base-color-success-2)',
|
||||
'ti-common-color-success-bg': 'var(--ti-base-color-success-1)',
|
||||
'ti-common-color-text-success': 'var(--ti-base-color-success-4)',
|
||||
'ti-common-color-success': 'var(--ti-base-color-success-3)',
|
||||
'ti-common-color-dark': '#000',
|
||||
'ti-common-color-light': '#fff',
|
||||
'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
|
||||
'ti-base-color-data-5': '#a97af8',
|
||||
'ti-base-color-data-4': '#f3689a',
|
||||
'ti-base-color-data-3': '#a6dd82',
|
||||
'ti-base-color-icon-info': '#6cbfff',
|
||||
'ti-base-color-prompt-icon-to': '#58bbff',
|
||||
'ti-base-color-prompt-icon-from': '#7769e8',
|
||||
'ti-base-color-warn-1': '#fff3e8',
|
||||
'ti-base-color-bg-1': '#ffffff',
|
||||
'ti-base-color-bg-2': '#ffffff',
|
||||
'ti-base-color-bg-3': '#ffffff',
|
||||
'ti-base-color-bg-4': '#fafafa',
|
||||
'ti-base-color-bg-5': '#f5f5f6',
|
||||
'ti-base-color-bg-6': '#eef0f5',
|
||||
'ti-base-color-bg-7': '#d64a52',
|
||||
'ti-base-color-common-1': '#dfe1e6',
|
||||
'ti-base-color-common-2': '#adb0b8',
|
||||
'ti-base-color-common-3': '#8a8e99',
|
||||
'ti-base-color-common-4': '#5c6173',
|
||||
'ti-base-color-common-5': '#575d6c',
|
||||
'ti-base-color-common-6': '#464c59',
|
||||
'ti-base-color-brand-1': '#f2f5fc',
|
||||
'ti-base-color-brand-2': '#e9edfa',
|
||||
'ti-base-color-brand-3': '#beccfa',
|
||||
'ti-base-color-brand-4': '#96adfa',
|
||||
'ti-base-color-brand-5': '#7693f5',
|
||||
'ti-base-color-brand-7': '#526ecc',
|
||||
'ti-base-color-brand-8': '#344899',
|
||||
'ti-base-color-brand-6': '#5e7ce0'
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyBreadcrumbOldTheme = {
|
||||
'ti-breadcrumb-hover-text-decoration': 'none',
|
||||
'ti-breadcrumb-separator-width': 'calc(var(--ti-common-size-base, 4px) + 2px)',
|
||||
'ti-breadcrumb-text-color': 'var(--ti-common-color-text-weaken, #8a8e99)',
|
||||
'ti-breadcrumb-text-line-height': 'var(--ti-common-line-height-3, 18px)',
|
||||
'ti-breadcrumb-font-size': 'var(--ti-common-font-size-base, 12px)'
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const tinyBreadcrumbSmbTheme = {
|
||||
'ti-breadcrumb-text-color': '#191919',
|
||||
'ti-breadcrumb-font-size': 'var(--ti-common-font-size-base)',
|
||||
'ti-breadcrumb-text-line-height': '22px',
|
||||
'ti-breadcrumb-hover-text-decoration': 'underline',
|
||||
'ti-breadcrumb-separator-width': 'var(--ti-common-size-4x)'
|
||||
}
|
||||
|
|
@ -12,17 +12,17 @@
|
|||
|
||||
.component-css-vars-breadcrumb() {
|
||||
// 字号
|
||||
--ti-breadcrumb-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-breadcrumb-font-size: var(--ti-common-font-size-base);
|
||||
// 文本行高
|
||||
--ti-breadcrumb-text-line-height: var(--ti-common-line-height-3, 18px);
|
||||
--ti-breadcrumb-text-line-height: 22px;
|
||||
// 文本色
|
||||
--ti-breadcrumb-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
--ti-breadcrumb-text-color: #191919;
|
||||
// 字族
|
||||
--ti-breadcrumb-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 分隔符填充色
|
||||
--ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 分割箭头宽度
|
||||
--ti-breadcrumb-separator-width: calc(var(--ti-common-size-base, 4px) + 2px);
|
||||
--ti-breadcrumb-separator-width: var(--ti-common-size-4x);
|
||||
// 分隔图标的垂直外边距
|
||||
--ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 分隔图标的水平外边距
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
// 悬浮文本色
|
||||
--ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 悬浮文本下划线
|
||||
--ti-breadcrumb-hover-text-decoration: none;
|
||||
--ti-breadcrumb-hover-text-decoration: underline;
|
||||
// 当前节点字重
|
||||
--ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 当前节点文本色
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export const tinyBulletinBoardOldTheme = {
|
||||
'ti-bulletin-board-tabs-item-hover-text-color': 'var(--ti-base-color-brand-6, #5e7ce0)',
|
||||
'ti-bulletin-board-new-font-size': 'var(--ti-common-font-size-1, 14px)',
|
||||
'ti-bulletin-board-more-text-color': 'var(--ti-base-color-brand-6, #5e7ce0)',
|
||||
'ti-bulletin-board-new-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-bulletin-board-new-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-bulletin-board-new-bg-color': 'var(--ti-base-color-error-3, #f66f6a)',
|
||||
'ti-bulletin-board-item-margin-bottom': 'var(--ti-common-space-6x, 12px)',
|
||||
'ti-bulletin-board-new-font-family':
|
||||
"var(--ti-common-font-family, '宋体', cursive, Helvetica, Arial, 'microsoft yahei')",
|
||||
'ti-bulletin-board-new-margin-left': 'var(--ti-common-space-0, 0)',
|
||||
'ti-bulletin-board-new-padding-left': 'var(--ti-common-space-0, 0)',
|
||||
'ti-bulletin-board-contentr-padding-button': 'var(--ti-common-space-6x, 24px)',
|
||||
'ti-bulletin-board-contentr-padding-right': 'var(--ti-common-space-6x, 24px)',
|
||||
'ti-bulletin-board-tabs-item-text-padding-right': 'var(--ti-common-space-6x, 24px)',
|
||||
'ti-bulletin-board-item-title-font-weight': 'var(--ti-common-font-weight-5, 500)',
|
||||
'ti-bulletin-board-tabs-item-hover-text-font-weight': 'var(--ti-common-font-weight-5, 500)',
|
||||
'ti-bulletin-board-item-title-text-margin-bottom': 'var(--ti-common-dropdown-gap, 2px)',
|
||||
'ti-bulletin-board-item-title-text-color': 'var(--ti-common-color-dark, #000)'
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
export const tinyBulletinBoardSmbTheme = {
|
||||
'ti-bulletin-board-tabs-item-hover-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-bulletin-board-item-title-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-bulletin-board-more-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-bulletin-board-item-title-text-margin-bottom': 'var(--ti-common-space-2x)',
|
||||
'ti-bulletin-board-item-margin-bottom': 'var(--ti-common-space-6x)',
|
||||
'ti-bulletin-board-new-padding-left': 'var(--ti-common-size-base)',
|
||||
'ti-bulletin-board-new-font-family': 'PingFangSC ,PingFangSC-Regular',
|
||||
'ti-bulletin-board-tabs-item-text-padding-right': 'var(--ti-common-space-0)',
|
||||
'ti-bulletin-board-contentr-padding-right': 'var(--ti-common-space-0)',
|
||||
'ti-bulletin-board-new-margin-left': 'var(--ti-common-space-6)',
|
||||
'ti-bulletin-board-contentr-padding-button': 'var(--ti-common-space-0)',
|
||||
'ti-bulletin-board-new-font-size': 'var(--ti-common-font-size-0)',
|
||||
'ti-bulletin-board-item-title-font-weight': 'var(--ti-common-font-weight-bold)',
|
||||
'ti-bulletin-board-new-text-color': 'var(--ti-common-color-error-border)',
|
||||
'ti-bulletin-board-new-bg-color': 'var(--ti-common-color-error-border-secondary)',
|
||||
'ti-bulletin-board-new-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
'ti-bulletin-board-tabs-item-hover-text-font-weight': 'var(--ti-common-font-weight-bold)'
|
||||
}
|
||||
|
|
@ -14,29 +14,29 @@
|
|||
--ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px);
|
||||
--ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
--ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-bulletin-board-item-title-text-color: var(--ti-common-color-dark, #000);
|
||||
--ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-dropdown-gap, 2px);
|
||||
--ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-5, 500);
|
||||
--ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-5, 500);
|
||||
--ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-6x, 24px);
|
||||
--ti-bulletin-board-contentr-padding-right: var(--ti-common-space-6x, 24px);
|
||||
--ti-bulletin-board-contentr-padding-button: var(--ti-common-space-6x, 24px);
|
||||
--ti-bulletin-board-new-padding-left: var(--ti-common-space-0, 0);
|
||||
--ti-bulletin-board-new-margin-left: var(--ti-common-space-0, 0);
|
||||
--ti-bulletin-board-new-font-family: var(--ti-common-font-family, '宋体', cursive, Helvetica, Arial, 'microsoft yahei');
|
||||
--ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x, 12px);
|
||||
--ti-bulletin-board-item-title-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-space-2x);
|
||||
--ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-0);
|
||||
--ti-bulletin-board-contentr-padding-right: var(--ti-common-space-0);
|
||||
--ti-bulletin-board-contentr-padding-button: var(--ti-common-space-0);
|
||||
--ti-bulletin-board-new-padding-left: var(--ti-common-size-base);
|
||||
--ti-bulletin-board-new-margin-left: var(--ti-common-space-6);
|
||||
--ti-bulletin-board-new-font-family: PingFangSC ,PingFangSC-Regular;
|
||||
--ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x);
|
||||
--ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-bulletin-board-new-bg-color: var(--ti-base-color-error-3, #f66f6a);
|
||||
--ti-bulletin-board-new-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-bulletin-board-more-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-bulletin-board-new-bg-color: var(--ti-common-color-error-border-secondary);
|
||||
--ti-bulletin-board-new-text-color: var(--ti-common-color-error-border);
|
||||
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-1);
|
||||
--ti-bulletin-board-more-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-bulletin-board-new-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-bulletin-board-new-font-size: var(--ti-common-font-size-0);
|
||||
--ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-bulletin-board-tabs-item-hover-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-bulletin-board-tabs-item-hover-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
export const tinyButtonGroupOldTheme = {
|
||||
'ti-button-group-mini-line-height': '22px',
|
||||
'ti-button-group-mini-size': '24px',
|
||||
'ti-button-group-small-line-height': '30px',
|
||||
'ti-button-group-small-size': '32px',
|
||||
'ti-button-group-medium-line-height': '40px',
|
||||
'ti-button-group-medium-size': '42px',
|
||||
'ti-button-group-sup-icon-line-height': '18px',
|
||||
'ti-button-group-item-sup-position-top': 'calc(-1 * var(--ti-button-group-item-sup-height) / 2)',
|
||||
'ti-button-group-item-sup-height': 'var(--ti-common-size-4x, 16px)',
|
||||
'ti-button-group-mini-padding-horizontal': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-button-group-btn-padding-horizontal': 'calc(var(--ti-common-space-10, 10px) * 3)',
|
||||
'ti-button-group-item-li-margin-bottom': 'var(--ti-common-space-base, 4px)',
|
||||
'ti-button-group-item-active-disabled-bg-color': 'var(--ti-common-color-bg-dark-disabled, #dfe1e6)',
|
||||
'ti-button-group-item-btn-active-hover-bg-color': 'var(--ti-common-color-bg-light-emphasize, #beccfa)',
|
||||
'ti-button-group-item-active-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
|
||||
'ti-button-group-item-btn-hover-bg-color': 'var(--ti-common-color-bg-light-emphasize, #beccfa)',
|
||||
'ti-button-group-item-active-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-group-item-btn-disabled-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
|
||||
'ti-button-group-item-btn-width': 'var(--ti-common-size-width-normal, 80px)',
|
||||
'ti-button-group-item-btn-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-button-group-item-bg-color': 'var(--ti-common-color-bg-light-normal, #e9edfa)',
|
||||
'ti-button-group-left-border-radius': 'var(--ti-common-border-radius-0, 0px)',
|
||||
'ti-button-group-middle-border-radius': 'var(--ti-common-border-radius-0, 0px)',
|
||||
'ti-button-group-right-border-radius': 'var(--ti-common-border-radius-0, 0px)',
|
||||
'ti-button-group-mini-side-border-radius': 'var(--ti-common-border-radius-normal, 2px)'
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
export const tinyButtonGroupTheme = {
|
||||
'ti-button-group-item-li-margin-bottom': 'var(--ti-common-space-2)',
|
||||
'ti-button-group-right-border-radius': 'var(--ti-common-border-radius-normal)',
|
||||
'ti-button-group-middle-border-radius': 'var(--ti-common-border-radius-normal)',
|
||||
'ti-button-group-left-border-radius': 'var(--ti-common-border-radius-normal)',
|
||||
'ti-button-group-item-btn-text-color': 'var(--ti-common-color-text-secondary)',
|
||||
'ti-button-group-item-active-bg-color': 'var(--ti-common-color-prompt)',
|
||||
'ti-button-group-item-btn-hover-bg-color': '#DEECFF',
|
||||
'ti-button-group-item-btn-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-group-item-active-disabled-bg-color': 'var(--ti-common-color-bg-dark-disabled)',
|
||||
'ti-button-group-btn-padding-horizontal': 'var(--ti-common-space-6x)',
|
||||
'ti-button-group-mini-padding-horizontal': 'var(--ti-common-space-4x)',
|
||||
'ti-button-group-item-bg-color': 'var(--ti-common-color-bg-normal)',
|
||||
'ti-button-group-item-btn-active-hover-bg-color': 'var(--ti-common-color-prompt)',
|
||||
'ti-button-group-item-btn-width': 'var(--ti-common-size-auto)',
|
||||
'ti-button-group-item-active-disabled-text-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-button-group-item-sup-position-top': 'var(--ti-common-space-0)',
|
||||
'ti-button-group-item-sup-height': 'var(--ti-common-line-height-base)',
|
||||
'ti-button-group-mini-side-border-radius': 'var(--ti-button-group-mini-border-radius)',
|
||||
'ti-button-group-sup-icon-line-height': '22px',
|
||||
'ti-button-group-medium-size': '32px',
|
||||
'ti-button-group-medium-line-height': '30px',
|
||||
'ti-button-group-small-size': '28px',
|
||||
'ti-button-group-small-line-height': '26px',
|
||||
'ti-button-group-mini-size': '24px',
|
||||
'ti-button-group-mini-line-height': '22px'
|
||||
}
|
||||
|
|
@ -18,15 +18,15 @@
|
|||
// 按钮组圆角
|
||||
--ti-button-group-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 小尺寸按钮组左右端侧圆角
|
||||
--ti-button-group-mini-side-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-button-group-mini-side-border-radius: var(--ti-button-group-mini-border-radius);
|
||||
// 按钮组第一个按钮右侧圆角
|
||||
--ti-button-group-right-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
--ti-button-group-right-border-radius: var(--ti-common-border-radius-normal);
|
||||
// 小尺寸按钮组第一个按钮右侧圆角
|
||||
--ti-button-group-mini-right-border-radius: var(--ti-button-group-mini-border-radius, 0px);
|
||||
// 按钮组中间按钮圆角
|
||||
--ti-button-group-middle-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
--ti-button-group-middle-border-radius: var(--ti-common-border-radius-normal);
|
||||
// 按钮组最后一个按钮左侧圆角
|
||||
--ti-button-group-left-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
--ti-button-group-left-border-radius: var(--ti-common-border-radius-normal);
|
||||
// 小尺寸按钮组最后一个按钮左侧圆角
|
||||
--ti-button-group-mini-left-border-radius: var(--ti-button-group-mini-border-radius, 0px);
|
||||
// 默认插槽尾部按钮的左边框色
|
||||
|
|
@ -36,25 +36,25 @@
|
|||
// 禁用色（没有使用）
|
||||
--ti-button-group-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认按钮未选中项背景色
|
||||
--ti-button-group-item-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
|
||||
--ti-button-group-item-bg-color: var(--ti-common-color-bg-normal);
|
||||
// 按钮非选中项文本色
|
||||
--ti-button-group-item-btn-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-button-group-item-btn-text-color: var(--ti-common-color-text-secondary);
|
||||
// 按钮项宽度
|
||||
--ti-button-group-item-btn-width: var(--ti-common-size-width-normal, 80px);
|
||||
--ti-button-group-item-btn-width: var(--ti-common-size-auto);
|
||||
// 未指定尺寸的按钮项高度
|
||||
--ti-button-group-item-btn-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 按钮组默认字号
|
||||
--ti-button-group-item-btn-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 按钮项禁用背景色
|
||||
--ti-button-group-item-btn-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-button-group-item-btn-disabled-bg-color: #F0F0F0;
|
||||
// 按钮项禁用边框色
|
||||
--ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 按钮项禁用文本色
|
||||
--ti-button-group-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 按钮选中项禁用文本色(new)
|
||||
--ti-button-group-item-active-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-group-item-active-disabled-text-color: var(--ti-common-color-text-weaken);
|
||||
// 默认按钮项悬浮背景色
|
||||
--ti-button-group-item-btn-hover-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
|
||||
--ti-button-group-item-btn-hover-bg-color: #DEECFF;
|
||||
// 按钮项悬浮边框色
|
||||
--ti-button-group-item-btn-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 默认按钮非选中项悬浮文本色
|
||||
|
|
@ -66,25 +66,25 @@
|
|||
// 朴素按钮非选中项悬浮边框色
|
||||
--ti-button-group-item-btn-plain-border-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认按钮选中项背景色
|
||||
--ti-button-group-item-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
--ti-button-group-item-active-bg-color: var(--ti-common-color-prompt);
|
||||
// 默认按钮选中项悬浮背景色
|
||||
--ti-button-group-item-btn-active-hover-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
|
||||
--ti-button-group-item-btn-active-hover-bg-color: var(--ti-common-color-prompt);
|
||||
// 朴素按钮选中项文本颜色
|
||||
--ti-button-group-plain-active-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认按钮选中项禁用时背景色
|
||||
--ti-button-group-item-active-disabled-bg-color: var(--ti-common-color-bg-dark-disabled, #dfe1e6);
|
||||
--ti-button-group-item-active-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
|
||||
// 默认按钮选中项文本色
|
||||
--ti-button-group-item-active-text-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮右侧外边距
|
||||
--ti-button-group-item-li-margin-right: calc(var(--ti-common-space-base, 4px) / 2);
|
||||
// 默认按钮下侧外边距
|
||||
--ti-button-group-item-li-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
--ti-button-group-item-li-margin-bottom: var(--ti-common-space-2);
|
||||
// 默认按钮选中边框色
|
||||
--ti-button-group-item-active-border-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认按钮选中边框色
|
||||
--ti-button-group-active-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 默认按钮内间距
|
||||
--ti-button-group-btn-padding-horizontal: calc(var(--ti-common-space-10, 10px) * 3);
|
||||
--ti-button-group-btn-padding-horizontal: var(--ti-common-space-6x);
|
||||
// 按钮组按钮上间距
|
||||
--ti-button-group-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 按钮组各个按钮的上间距
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
// 无边框按钮组按钮禁用状态下背景色
|
||||
--ti-button-group-no-border-disabled-bg-color: var(--ti-common-color-light, #ffffff);
|
||||
// 小尺寸按钮内间距
|
||||
--ti-button-group-mini-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
--ti-button-group-mini-padding-horizontal: var(--ti-common-space-4x);
|
||||
// 小尺寸按钮圆角
|
||||
--ti-button-group-mini-border-radius: calc(var(--ti-common-border-radius-normal, 2px) - 2px);
|
||||
// 无边框按钮悬浮边框色
|
||||
|
|
@ -108,20 +108,20 @@
|
|||
// 选中按钮组按钮悬浮边框色
|
||||
--ti-button-group-no-border-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 按钮角标高度
|
||||
--ti-button-group-item-sup-height: var(--ti-common-size-4x, 16px);
|
||||
--ti-button-group-item-sup-height: var(--ti-common-line-height-base);
|
||||
// 按钮角标上边距(hide)
|
||||
--ti-button-group-item-sup-position-top: calc(-1 * var(--ti-button-group-item-sup-height) / 2);
|
||||
--ti-button-group-item-sup-position-top: var(--ti-common-space-0);
|
||||
// 按钮角标字体颜色
|
||||
--ti-button-group-item-sup-font-color: var(--ti-common-color-text-white, #fff);
|
||||
// 按钮角标字体大小
|
||||
--ti-button-group-item-sup-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// icon角标
|
||||
--ti-button-group-sup-icon-line-height: 18px;
|
||||
--ti-button-group-sup-icon-line-height: 22px;
|
||||
// 尺寸大小
|
||||
--ti-button-group-medium-size: 42px;
|
||||
--ti-button-group-medium-line-height: 40px;
|
||||
--ti-button-group-small-size: 32px;
|
||||
--ti-button-group-small-line-height: 30px;
|
||||
--ti-button-group-medium-size: 32px;
|
||||
--ti-button-group-medium-line-height: 30px;
|
||||
--ti-button-group-small-size: 28px;
|
||||
--ti-button-group-small-line-height: 26px;
|
||||
--ti-button-group-mini-size: 24px;
|
||||
--ti-button-group-mini-line-height: 22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
export const tinyButtonOldTheme = {
|
||||
'ti-button-only-icon-disabled-border-color': 'var(--ti-common-color-line-disabled, #dfe1e6)',
|
||||
'ti-button-only-icon-hover-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-only-icon-border-color': 'var(--ti-common-color-border, #adb0b8)',
|
||||
'ti-button-only-icon-border-radius': '2px',
|
||||
'ti-button-only-icon-padding-horizontal': '7px',
|
||||
'ti-button-only-icon-text-width': 'unset',
|
||||
'ti-button-only-icon-min-width': 'unset',
|
||||
'ti-button-only-icon-width': 'var(ti-common-size-width-minor, 30px)',
|
||||
'ti-button-icon-font-size': 'var(--ti-common-font-size-0, 12px)',
|
||||
'ti-button-text-size-mini-svg-height': '1em',
|
||||
'ti-button-text-size-mini-svg-width': '1em',
|
||||
'ti-button-text-size-mini-height': 'var(--ti-common-size-height-mini, 24px)',
|
||||
'ti-button-text-size-mini-min-width': 'var(--ti-common-size-16x, 64px)',
|
||||
'ti-button-text-size-small-svg-height': '1em',
|
||||
'ti-button-text-size-small-svg-width': '1em',
|
||||
'ti-button-text-size-small-height': 'var(--ti-common-size-height-small, 32px)',
|
||||
'ti-button-text-size-small-min-width': 'var(--ti-common-size-18x, 72px)',
|
||||
'ti-button-text-size-default-svg-height': '1em',
|
||||
'ti-button-text-size-default-svg-width': '1em',
|
||||
'ti-button-text-size-default-height': 'var(--ti-common-size-height-normal, 28px)',
|
||||
'ti-button-text-size-default-min-width': 'var(--ti-common-size-20x, 80px)',
|
||||
'ti-button-text-size-medium-svg-height': '1em',
|
||||
'ti-button-text-size-medium-svg-width': '1em',
|
||||
'ti-button-text-size-medium-height': 'var(--ti-common-size-height-medium, 40px)',
|
||||
'ti-button-text-size-medium-min-width': 'var(--ti-common-size-22x, 88px)',
|
||||
'ti-button-text-size-large-svg-height': '1em',
|
||||
'ti-button-text-size-large-svg-width': '1em',
|
||||
'ti-button-text-size-large-height': 'var(--ti-common-size-height-large, 48px)',
|
||||
'ti-button-text-size-large-min-width': 'var(--ti-common-size-24x, 96px)',
|
||||
'ti-button-size-normal-padding': 'var(--ti-common-space-2x, 8px)',
|
||||
'ti-button-danger-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-danger-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-danger-ghost-hover-border-color': 'var(--ti-common-color-danger-hover, #d64a52)',
|
||||
'ti-button-danger-ghost-hover-text-color': 'var(--ti-common-color-danger-hover, #d64a52)',
|
||||
'ti-button-danger-ghost-border-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-ghost-text-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-warning-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-warning-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-warning-ghost-hover-border-color': 'var(--ti-common-color-warning-active, #fac20a)',
|
||||
'ti-button-warning-ghost-hover-text-color': 'var(--ti-common-color-warning-active, #fac20a)',
|
||||
'ti-button-warning-ghost-border-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-ghost-text-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-info-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-info-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-info-ghost-hover-border-color': 'var(--ti-common-color-info-hover, #5c6173)',
|
||||
'ti-button-info-ghost-hover-text-color': 'var(--ti-common-color-info-hover, #5c6173)',
|
||||
'ti-button-info-ghost-border-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-ghost-text-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-success-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-success-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-success-ghost-hover-border-color': 'var(--ti-common-color-success-active, #acf2dc)',
|
||||
'ti-button-success-ghost-hover-text-color': 'var(--ti-common-color-success-active, #acf2dc)',
|
||||
'ti-button-success-ghost-border-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-ghost-text-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-primary-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-primary-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-primary-ghost-hover-border-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-button-primary-ghost-hover-text-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-button-primary-ghost-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-ghost-text-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-ghost-disabled-border-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-ghost-disabled-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-ghost-hover-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-info-plain-disabled-bg-color':
|
||||
'var(\n --ti-common-color-info-plain-disabled-bg-color,\n rgba(191, 191, 191, 0.1)\n )',
|
||||
'ti-button-info-plain-hover-border-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-plain-border-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-plain-hover-bg-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-plain-bg-color': 'var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06))',
|
||||
'ti-button-info-plain-hover-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-info-plain-text-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-disabled-border-color': 'var(--ti-common-color-info-disabled-border, #dfe1e6)',
|
||||
'ti-button-info-disabled-text-color': 'var(--ti-common-color-info-disabled-text, #adb0b8)',
|
||||
'ti-button-info-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-info-disabled-bg-color': 'var(--ti-common-color-info-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-info-active-bg-color': 'var(--ti-common-color-info-active, #5c6173)',
|
||||
'ti-button-info-hover-border-color': 'var(--ti-common-color-info-hover, #5c6173)',
|
||||
'ti-button-info-hover-bg-color': 'var(--ti-common-color-info-hover, #5c6173)',
|
||||
'ti-button-info-normal-border-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-info-normal-bg-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-button-danger-plain-disabled-border-color': 'var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-danger-plain-disabled-bg-color': 'var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-danger-plain-hover-border-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-plain-border-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-plain-hover-bg-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-plain-bg-color': 'var(--ti-common-color-error-bg, #ffeeed)',
|
||||
'ti-button-danger-plain-hover-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-danger-plain-text-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-disabled-border-color': 'var(--ti-common-color-danger-disabled-border, #dfe1e6)',
|
||||
'ti-button-danger-disabled-text-color': 'var(--ti-common-color-danger-disabled-text, #adb0b8)',
|
||||
'ti-button-danger-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-danger-disabled-bg-color': 'var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-danger-active-bg-color': 'var(--ti-common-color-danger-active, #b12220)',
|
||||
'ti-button-danger-hover-border-color': 'var(--ti-common-color-danger-hover, #d64a52)',
|
||||
'ti-button-danger-hover-bg-color': 'var(--ti-common-color-danger-hover, #d64a52)',
|
||||
'ti-button-danger-normal-border-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-danger-normal-bg-color': 'var(--ti-common-color-danger-normal, #c7000b)',
|
||||
'ti-button-warning-plain-disabled-bg-color':
|
||||
'var(\n --ti-common-color-warning-plain-disabled-bg-color,\n rgba(211, 198, 162, 0.1)\n )',
|
||||
'ti-button-warning-plain-hover-border-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-plain-border-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-plain-hover-bg-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-plain-bg-color': 'var(--ti-common-color-warn-bg, #fff3e8)',
|
||||
'ti-button-warning-plain-hover-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-warning-plain-text-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-disabled-border-color': 'var(--ti-common-color-warning-disabled-border, #dfe1e6)',
|
||||
'ti-button-warning-disabled-text-color': 'var(--ti-common-color-warning-disabled-text, #adb0b8)',
|
||||
'ti-button-warning-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-warning-disabled-bg-color': 'var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-warning-active-bg-color': 'var(--ti-common-color-warning-active, #fac20a)',
|
||||
'ti-button-warning-hover-bg-color': 'var(--ti-common-color-warning-hover, #fac20a)',
|
||||
'ti-button-warning-normal-border-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-warning-normal-bg-color': 'var(--ti-common-color-warning-normal, #fa9841)',
|
||||
'ti-button-success-plain-disabled-bg-color':
|
||||
'var(\n --ti-common-color-success-plain-disabled-bg-color,\n rgba(166, 195, 185, 0.1)\n )',
|
||||
'ti-button-success-plain-hover-border-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-plain-border-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-plain-hover-bg-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-plain-bg-color': 'var(--ti-common-color-success-bg, #edfff9)',
|
||||
'ti-button-success-plain-hover-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-success-plain-text-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-disabled-border-color': 'var(--ti-common-color-success-disabled-border, #dfe1e6)',
|
||||
'ti-button-success-disabled-text-color': 'var(--ti-common-color-success-disabled-text, #adb0b8)',
|
||||
'ti-button-success-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-success-disabled-bg-color': 'var(--ti-common-color-success-disabled-bgcolor, #f5f5f6)',
|
||||
'ti-button-success-active-bg-color': 'var(--ti-common-color-success-active, #acf2dc)',
|
||||
'ti-button-success-hover-border-color': 'var(--ti-common-color-success-hover, #acf2dc)',
|
||||
'ti-button-success-hover-bg-color': 'var(--ti-common-color-success-hover, #acf2dc)',
|
||||
'ti-button-success-normal-border-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-success-normal-bg-color': 'var(--ti-common-color-success-normal, #50d4ab)',
|
||||
'ti-button-primary-plain-disabled-bg-color':
|
||||
'var(\n --ti-common-color-primary-plain-disabled-bg-color,\n rgba(191, 191, 191, 0.1)\n )',
|
||||
'ti-button-primary-plain-hover-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-plain-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-plain-hover-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-plain-bg-color': 'var(--ti-common-color-prompt-bg, #ebf6ff)',
|
||||
'ti-button-primary-plain-hover-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-primary-plain-text-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-disabled-border-color': 'var(--ti-common-color-primary-disabled-border, #dfe1e6)',
|
||||
'ti-button-primary-disabled-text-color': 'var(--ti-common-color-primary-disabled-text, #adb0b8)',
|
||||
'ti-button-primary-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-button-primary-active-bg-color': 'var(--ti-common-color-primary-active, #7693f5)',
|
||||
'ti-button-primary-hover-border-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-button-primary-hover-bg-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-button-primary-normal-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-primary-normal-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-text-svg-padding-horizontal': 'var(--ti-common-size-2x, 8px)',
|
||||
'ti-button-text-has-svg-hover-text-color': 'var(--ti-common-color-text-link, #526ecc)',
|
||||
'ti-button-text-has-svg-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-button-text-has-svg-icon-margin-right': 'var(--ti-common-size-2x, 8px)',
|
||||
'ti-button-text-svg-disabled-fill-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-button-text-svg-hover-fill-color': 'var(--ti-button-text-color-hover)',
|
||||
'ti-button-text-svg-fill-color': 'var(--ti-common-color-text-secondary, #575d6c)',
|
||||
'ti-button-text-hover-border-radius': '0px',
|
||||
'ti-button-text-only-icon-hover-bg-color': 'transparent',
|
||||
'ti-button-text-hover-bg-color': 'transparent',
|
||||
'ti-button-text-svg-height': '1em',
|
||||
'ti-button-text-svg-width': '1em',
|
||||
'ti-button-text-hover-weight': 'var(--ti-common-font-weight-4, normal)',
|
||||
'ti-button-text-color-hover': 'var(--ti-common-color-text-link-hover, #344899)',
|
||||
'ti-button-text-hover-text-decoration': 'none',
|
||||
'ti-button-text-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-plain-disabled-border-color': 'var(--ti-common-color-line-disabled, #dfe1e6)',
|
||||
'ti-button-plain-border-color': 'var(--ti-common-color-border, #adb0b8)',
|
||||
'ti-button-normal-disabled-border-color': 'var(--ti-common-color-line-disabled, #dfe1e6)',
|
||||
'ti-button-normal-hover-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-button-normal-border-color': 'var(--ti-common-color-border, #adb0b8)',
|
||||
'ti-button-normal-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-button-size-mini-min-width': 'var(--ti-common-size-16x, 64px)',
|
||||
'ti-button-size-mini-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-button-size-small-margin-left': '8px',
|
||||
'ti-button-size-small-min-width': 'var(--ti-common-size-18x, 72px)',
|
||||
'ti-button-size-small-padding-horizontal': 'var(--ti-common-size-3x, 12px)',
|
||||
'ti-button-size-small-font-size': 'var(--ti-common-font-size-1, 14px)',
|
||||
'ti-button-size-medium-margin-left': '8px',
|
||||
'ti-button-size-medium-min-width': 'var(--ti-common-size-22x, 88px)',
|
||||
'ti-button-size-medium-padding-horizontal': 'var(--ti-common-size-7x, 28px)',
|
||||
'ti-button-size-large-margin-left': '8px',
|
||||
'ti-button-size-large-min-width': 'var(--ti-common-size-24x, 96px)',
|
||||
'ti-button-size-large-padding-horizontal': 'var(--ti-common-size-8x, 32px)',
|
||||
'ti-button-size-large-font-size': 'var(--ti-common-font-size-2, 16px)',
|
||||
'ti-button-size-normal-padding-horizontal': 'var(--ti-common-size-5x, 20px)',
|
||||
'ti-button-size-normal-min-width': 'var(--ti-common-size-width-normal, 80px)',
|
||||
'ti-button-loading-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-button-loading-bg-color': 'rgba(255, 255, 255, 0.35)',
|
||||
'ti-button-border-radius': 'var(--ti-common-border-radius-normal, 2px)'
|
||||
}
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
export const tinyButtonSmbTheme = {
|
||||
'ti-button-normal-text-color': '#191919',
|
||||
'ti-button-normal-border-color': '#595959',
|
||||
'ti-button-border-radius': '25px',
|
||||
'ti-button-text-color': 'var(--ti-common-color-text-highlight)',
|
||||
'ti-button-text-hover-weight': 'var(--ti-common-font-weight-4)',
|
||||
'ti-button-text-color-hover': 'var(--ti-common-color-text-highlight)',
|
||||
'ti-button-normal-disabled-border-color': 'transparent',
|
||||
'ti-common-color-primary-disabled-border': 'transparent',
|
||||
'ti-common-color-success-disabled-border': 'transparent',
|
||||
'ti-common-color-warning-disabled-border': 'transparent',
|
||||
'ti-common-color-danger-disabled-border': 'transparent',
|
||||
'ti-common-color-info-disabled-border': 'transparent',
|
||||
'ti-button-size-large-padding-horizontal': 'var(--ti-common-size-12x)',
|
||||
'ti-button-size-medium-padding-horizontal': 'var(--ti-common-size-8x)',
|
||||
'ti-button-size-normal-padding-horizontal': 'var(--ti-common-size-6x)',
|
||||
'ti-button-size-small-padding-horizontal': 'var(--ti-common-size-4x)',
|
||||
'ti-button-danger-plain-bg-color': 'transparent',
|
||||
'ti-button-size-large-min-width': 'var(--ti-common-size-31x)',
|
||||
'ti-button-size-medium-min-width': 'var(--ti-common-size-28x)',
|
||||
'ti-button-size-normal-min-width': 'var(--ti-common-size-24x)',
|
||||
'ti-button-size-small-min-width': 'var(--ti-common-size-18x)',
|
||||
'ti-button-danger-plain-disabled-border-color': 'transparent',
|
||||
'ti-button-normal-hover-border-color': '#C2C2C2',
|
||||
'ti-button-size-large-font-size': 'var(--ti-common-font-size-base)',
|
||||
'ti-button-size-mini-min-width': '24px',
|
||||
'ti-button-text-svg-width': '16px',
|
||||
'ti-button-text-svg-height': '16px',
|
||||
'ti-button-text-hover-bg-color': 'transparent',
|
||||
'ti-button-text-only-icon-hover-bg-color': '#0000000D',
|
||||
'ti-button-text-hover-border-radius': '4px',
|
||||
'ti-button-text-svg-fill-color': '#191919',
|
||||
'ti-button-text-svg-hover-fill-color': '#191919',
|
||||
'ti-button-text-has-svg-text-color': '#191919',
|
||||
'ti-button-text-has-svg-hover-text-color': '#191919',
|
||||
'ti-button-text-has-svg-icon-margin-right': '4px',
|
||||
'ti-button-text-svg-disabled-fill-color': '#C2C2C2',
|
||||
'ti-button-text-svg-padding-horizontal': '0px',
|
||||
'ti-button-size-small-font-size': '12px',
|
||||
'ti-button-loading-bg-color': 'rgba(255, 255, 255, 0.5)',
|
||||
'ti-button-loading-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-button-size-mini-font-size': '12px',
|
||||
'ti-button-size-large-margin-left': '16px',
|
||||
'ti-button-size-medium-margin-left': '16px',
|
||||
'ti-button-size-small-margin-left': '8px',
|
||||
'ti-button-text-size-large-min-width': '56px',
|
||||
'ti-button-text-size-large-height': '56px',
|
||||
'ti-button-text-size-large-svg-width': '48px',
|
||||
'ti-button-text-size-large-svg-height': '48px',
|
||||
'ti-button-text-size-medium-min-width': '40px',
|
||||
'ti-button-text-size-medium-height': '40px',
|
||||
'ti-button-text-size-medium-svg-width': '32px',
|
||||
'ti-button-text-size-medium-svg-height': '32px',
|
||||
'ti-button-text-size-default-min-width': '24px',
|
||||
'ti-button-text-size-default-height': '24px',
|
||||
'ti-button-text-size-default-svg-width': '16px',
|
||||
'ti-button-text-size-default-svg-height': '16px',
|
||||
'ti-button-text-size-small-min-width': '24px',
|
||||
'ti-button-text-size-small-height': '24px',
|
||||
'ti-button-text-size-small-svg-width': '16px',
|
||||
'ti-button-text-size-small-svg-height': '16px',
|
||||
'ti-button-text-size-mini-min-width': '24px',
|
||||
'ti-button-text-size-mini-height': '24px',
|
||||
'ti-button-text-size-mini-svg-width': '16px',
|
||||
'ti-button-text-size-mini-svg-height': '16px',
|
||||
'ti-button-text-hover-text-decoration': 'underline',
|
||||
'ti-button-only-icon-min-width': 'unset',
|
||||
'ti-button-icon-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-button-only-icon-width': 'var(--ti-common-size-8x)',
|
||||
'ti-button-only-icon-text-width': 'var(--ti-common-size-6x)',
|
||||
'ti-button-only-icon-padding-horizontal': '7px',
|
||||
'ti-button-only-icon-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
'ti-button-only-icon-border-color': '#c2c2c2',
|
||||
'ti-button-only-icon-hover-border-color': '#191919',
|
||||
'ti-button-only-icon-disabled-border-color': '#dbdbdb',
|
||||
'ti-button-ghost-disabled-text-color': '#c2c2c2',
|
||||
'ti-button-ghost-disabled-border-color': '#dbdbdb',
|
||||
'ti-button-ghost-hover-border-color': '#c2c2c2',
|
||||
'ti-button-size-normal-padding': 'var(--ti-common-space-6)',
|
||||
|
||||
'ti-button-primary-text-color': 'var(--ti-common-color-text-white)',
|
||||
'ti-button-primary-normal-bg-color': '#191919',
|
||||
'ti-button-primary-normal-border-color': '#191919',
|
||||
'ti-button-primary-hover-bg-color': '#595959',
|
||||
'ti-button-primary-hover-border-color': '#595959',
|
||||
'ti-button-primary-active-bg-color': '#191919',
|
||||
'ti-button-primary-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-primary-plain-text-color': '#191919',
|
||||
'ti-button-primary-plain-hover-text-color': '#191919',
|
||||
'ti-button-primary-plain-bg-color': 'var(--ti-common-color-bg-minor)',
|
||||
'ti-button-primary-plain-border-color': '#595959',
|
||||
'ti-button-primary-plain-hover-border-color': '#FFFFFF',
|
||||
'ti-button-primary-plain-hover-bg-color': 'var(--ti-common-color-bg-minor)',
|
||||
'ti-button-primary-plain-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-primary-disabled-border-color': '#F0F0F0',
|
||||
'ti-button-primary-ghost-text-color': '#191919',
|
||||
'ti-button-primary-ghost-hover-text-color': '#191919',
|
||||
'ti-button-primary-ghost-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-primary-ghost-border-color': '#595959',
|
||||
'ti-button-primary-ghost-hover-border-color': '#C2C2C2',
|
||||
'ti-button-primary-ghost-disabled-border-color': '#F0F0F0',
|
||||
|
||||
'ti-button-plain-border-color': '#C2C2C2',
|
||||
'ti-button-plain-hover-border-color': '#F5F5F5',
|
||||
'ti-button-plain-disabled-border-color': '#F0F0F0',
|
||||
|
||||
'ti-button-success-text-color': 'var(--ti-common-color-text-white)',
|
||||
'ti-button-success-normal-bg-color': '#5CB300',
|
||||
'ti-button-success-normal-border-color': '#5CB300',
|
||||
'ti-button-success-hover-bg-color': '#7DCC29',
|
||||
'ti-button-success-hover-border-color': '#7DCC29',
|
||||
'ti-button-success-active-bg-color': '#5CB300',
|
||||
'ti-button-success-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-success-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-success-plain-text-color': '#5CB300',
|
||||
'ti-button-success-plain-hover-text-color': '#5CB300',
|
||||
'ti-button-success-plain-bg-color': '#EDF7DF',
|
||||
'ti-button-success-plain-hover-bg-color': '#EDF7DF',
|
||||
'ti-button-success-plain-border-color': '#DAF2BB',
|
||||
'ti-button-success-plain-hover-border-color': '#EDF7DF',
|
||||
'ti-button-success-plain-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-success-disabled-border-color': '#F0F0F0',
|
||||
'ti-button-success-ghost-text-color': '#5CB300',
|
||||
'ti-button-success-ghost-hover-text-color': '#5CB300',
|
||||
'ti-button-success-ghost-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-success-ghost-border-color': '#5CB300',
|
||||
'ti-button-success-ghost-hover-border-color': '#DAF2BB',
|
||||
'ti-button-success-ghost-disabled-border-color': '#F0F0F0',
|
||||
|
||||
'ti-button-info-text-color': 'var(--ti-common-color-text-white)',
|
||||
'ti-button-info-normal-bg-color': '#1476FF',
|
||||
'ti-button-info-normal-border-color': '#1476FF',
|
||||
'ti-button-info-hover-bg-color': '#4191FA',
|
||||
'ti-button-info-hover-border-color': '#4191FA',
|
||||
'ti-button-info-active-bg-color': '#1476FF',
|
||||
'ti-button-info-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-info-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-info-plain-text-color': '#1476FF',
|
||||
'ti-button-info-plain-hover-text-color': '#1476FF',
|
||||
'ti-button-info-plain-bg-color': '#F0F7FF',
|
||||
'ti-button-info-plain-border-color': '#DEECFF',
|
||||
'ti-button-info-plain-hover-bg-color': '#F0F7FF',
|
||||
'ti-button-info-plain-hover-border-color': '#F0F7FF',
|
||||
'ti-button-info-plain-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-info-ghost-text-color': '#1476FF',
|
||||
'ti-button-info-ghost-hover-text-color': '#1476FF',
|
||||
'ti-button-info-ghost-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-info-ghost-border-color': '#1476FF',
|
||||
'ti-button-info-ghost-hover-border-color': '#FAFAFA',
|
||||
'ti-button-info-disabled-border-color': '#F0F0F0',
|
||||
'ti-button-info-ghost-disabled-border-color': '#F0F0F0',
|
||||
|
||||
'ti-button-warning-text-color': 'var(--ti-common-color-text-white)',
|
||||
'ti-button-warning-normal-bg-color': '#FF8800',
|
||||
'ti-button-warning-normal-border-color': '#FF8800',
|
||||
'ti-button-warning-hover-bg-color': '#FF9A2E',
|
||||
'ti-button-warning-hover-border-color': '#FF9A2E',
|
||||
'ti-button-warning-active-bg-color': '#FF8800',
|
||||
'ti-button-warning-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-warning-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-warning-plain-text-color': '#FF8800',
|
||||
'ti-button-warning-plain-hover-text-color': '#FF8800',
|
||||
'ti-button-warning-plain-bg-color': '#FFF4E8',
|
||||
'ti-button-warning-plain-hover-bg-color': '#FFF4E8',
|
||||
'ti-button-warning-plain-border-color': '#FFEBD1',
|
||||
'ti-button-warning-plain-hover-border-color': '#FFF4E8',
|
||||
'ti-button-warning-plain-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-warning-disabled-border-color': '#F0F0F0',
|
||||
'ti-button-warning-ghost-text-color': '#FF8800',
|
||||
'ti-button-warning-ghost-hover-text-color': '#FF8800',
|
||||
'ti-button-warning-ghost-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-warning-ghost-border-color': '#FF8800',
|
||||
'ti-button-warning-ghost-hover-border-color': '#FFEBD1',
|
||||
'ti-button-warning-ghost-disabled-border-color': '#F0F0F0',
|
||||
|
||||
'ti-button-danger-text-color': 'var(--ti-common-color-text-white)',
|
||||
'ti-button-danger-normal-bg-color': '#F23030',
|
||||
'ti-button-danger-normal-border-color': '#F23030',
|
||||
'ti-button-danger-hover-bg-color': '#F76360',
|
||||
'ti-button-danger-hover-border-color': '#F76360',
|
||||
'ti-button-danger-active-bg-color': '#F23030',
|
||||
'ti-button-danger-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-danger-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-danger-plain-text-color': '#F23030',
|
||||
'ti-button-danger-plain-hover-text-color': '#F23030',
|
||||
'ti-button-danger-plain-hover-bg-color': '#FFF1F0',
|
||||
'ti-button-danger-plain-border-color': '#FCE2E0',
|
||||
'ti-button-danger-plain-hover-border-color': '#FFF1F0',
|
||||
'ti-button-danger-plain-disabled-bg-color': '#F0F0F0',
|
||||
'ti-button-danger-disabled-border-color': '#F0F0F0',
|
||||
'ti-button-danger-ghost-text-color': '#F23030',
|
||||
'ti-button-danger-ghost-hover-text-color': '#F23030',
|
||||
'ti-button-danger-ghost-disabled-text-color': '#C2C2C2',
|
||||
'ti-button-danger-ghost-border-color': '#F23030',
|
||||
'ti-button-danger-ghost-hover-border-color': '#FCE2E0',
|
||||
'ti-button-danger-ghost-disabled-border-color': '#F0F0F0'
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.component-css-vars-button() {
|
||||
// 按钮圆角
|
||||
--ti-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-button-border-radius: 25px;
|
||||
// 按钮字号
|
||||
--ti-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 朴素类按钮禁用文本色(非默认)
|
||||
|
|
@ -22,70 +22,70 @@
|
|||
// 按钮边框样式
|
||||
--ti-button-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 按钮加载时背景色
|
||||
--ti-button-loading-bg-color: rgba(255, 255, 255, 0.35);
|
||||
--ti-button-loading-font-size: var(--ti-common-font-size-1);
|
||||
--ti-button-loading-bg-color: rgba(255, 255, 255, 0.5);
|
||||
--ti-button-loading-font-size: var(--ti-common-font-size-2);
|
||||
|
||||
// 默认按钮最小宽度
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-24x);
|
||||
// 默认按钮最大宽度
|
||||
--ti-button-size-normal-max-width: var(--ti-common-size-width-medium, 120px);
|
||||
// 默认按钮的高度
|
||||
--ti-button-size-normal-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 默认按钮水平内边距
|
||||
--ti-button-size-normal-padding-horizontal: var(--ti-common-size-5x, 20px);
|
||||
--ti-button-size-normal-padding-horizontal: var(--ti-common-size-6x);
|
||||
|
||||
// 超大按钮高度
|
||||
--ti-button-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
// 超大按钮字号
|
||||
--ti-button-size-large-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-button-size-large-font-size: var(--ti-common-font-size-base);
|
||||
// 超大按钮水平内边距
|
||||
--ti-button-size-large-padding-horizontal: var(--ti-common-size-8x, 32px);
|
||||
--ti-button-size-large-padding-horizontal: var(--ti-common-size-12x);
|
||||
// 超大按钮最小宽度
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-24x, 96px);
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-31x);
|
||||
// 超大按钮左侧外边距
|
||||
--ti-button-size-large-margin-left: 8px;
|
||||
--ti-button-size-large-margin-left: 16px;
|
||||
|
||||
// 中等按钮高度
|
||||
--ti-button-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 中等按钮字号
|
||||
--ti-button-size-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 中等按钮水平内边距
|
||||
--ti-button-size-medium-padding-horizontal: var(--ti-common-size-7x, 28px);
|
||||
--ti-button-size-medium-padding-horizontal: var(--ti-common-size-8x);
|
||||
// 中等按钮最小宽度
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-22x, 88px);
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-28x);
|
||||
// 中等按钮左侧外边距
|
||||
--ti-button-size-medium-margin-left: 8px;
|
||||
--ti-button-size-medium-margin-left: 16px;
|
||||
|
||||
// 小型按钮高度
|
||||
--ti-button-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 小型按钮字号
|
||||
--ti-button-size-small-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-button-size-small-font-size: 12px;
|
||||
// 小尺寸按钮水平内边距
|
||||
--ti-button-size-small-padding-horizontal: var(--ti-common-size-3x, 12px);
|
||||
--ti-button-size-small-padding-horizontal: var(--ti-common-size-4x);
|
||||
// 小尺寸按钮最小宽度
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-18x, 72px);
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-18x);
|
||||
// 小尺寸按钮左侧外边距
|
||||
--ti-button-size-small-margin-left: 8px;
|
||||
|
||||
// 迷你尺寸按钮高度
|
||||
--ti-button-size-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 迷你尺寸按钮字号
|
||||
--ti-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-button-size-mini-font-size: 12px;
|
||||
// 迷你尺寸按钮水平内边距
|
||||
--ti-button-size-mini-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
// 迷你尺寸按钮最小宽度
|
||||
--ti-button-size-mini-min-width: var(--ti-common-size-16x, 64px);
|
||||
--ti-button-size-mini-min-width: 24px;
|
||||
|
||||
// 默认按钮文本色
|
||||
--ti-button-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-button-normal-text-color: #191919;
|
||||
// 默认按钮边框色
|
||||
--ti-button-normal-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-button-normal-border-color: #595959;
|
||||
// 默认按钮背景色
|
||||
--ti-button-normal-background-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮悬浮文本色
|
||||
--ti-button-normal-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮悬浮边框色
|
||||
--ti-button-normal-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-normal-hover-border-color: #C2C2C2;
|
||||
// 默认按钮悬浮背景色
|
||||
--ti-button-normal-hover-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮点击瞬间文本色
|
||||
|
|
@ -97,227 +97,215 @@
|
|||
// 默认按钮禁用文本色
|
||||
--ti-button-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认按钮禁用边框色
|
||||
--ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
--ti-button-normal-disabled-border-color: transparent;
|
||||
// 禁用类默认按钮背景色
|
||||
--ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 默认 朴素 边框色
|
||||
--ti-button-plain-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-button-plain-border-color: #C2C2C2;
|
||||
// 默认 朴素 禁用边框色
|
||||
--ti-button-plain-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
--ti-button-plain-disabled-border-color: #F0F0F0;
|
||||
|
||||
// 文字按钮文本色
|
||||
--ti-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-text-color: var(--ti-common-color-text-highlight);
|
||||
// 文字按钮悬浮文本修饰(hide)
|
||||
--ti-button-text-hover-text-decoration: none;
|
||||
--ti-button-text-hover-text-decoration: underline;
|
||||
// 文字按钮悬浮文本色
|
||||
--ti-button-text-color-hover: var(--ti-common-color-text-link-hover, #344899);
|
||||
--ti-button-text-color-hover: var(--ti-common-color-text-highlight);
|
||||
// 文字按钮悬浮文本字重
|
||||
--ti-button-text-hover-weight: var(--ti-common-font-weight-4, normal);
|
||||
--ti-button-text-hover-weight: var(--ti-common-font-weight-4);
|
||||
// 文字按钮点击瞬间文本色
|
||||
--ti-button-text-color-active: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 文字按钮禁用文本色
|
||||
--ti-button-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 文字按钮图标宽度
|
||||
--ti-button-text-svg-width: 1em;
|
||||
--ti-button-text-svg-width: 16px;
|
||||
// 文字按钮图标高度
|
||||
--ti-button-text-svg-height: 1em;
|
||||
--ti-button-text-svg-height: 16px;
|
||||
// 文字按钮悬浮背景色
|
||||
--ti-button-text-hover-bg-color: transparent;
|
||||
// 文字按钮只有图标悬浮背景色
|
||||
--ti-button-text-only-icon-hover-bg-color: transparent;
|
||||
--ti-button-text-only-icon-hover-bg-color: #0000000D;
|
||||
// 文字按钮悬浮圆角
|
||||
--ti-button-text-hover-border-radius: 0px;
|
||||
--ti-button-text-hover-border-radius: 4px;
|
||||
// 文字按钮图标填充色
|
||||
--ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
--ti-button-text-svg-fill-color: #191919;
|
||||
// 文字按钮图标悬浮填充色
|
||||
--ti-button-text-svg-hover-fill-color: var(--ti-button-text-color-hover);
|
||||
--ti-button-text-svg-hover-fill-color: #191919;
|
||||
// 文字按钮禁用时图标填充色
|
||||
--ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-text-svg-disabled-fill-color: #C2C2C2;
|
||||
// 图标加文字按钮图标右侧外边距
|
||||
--ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x, 8px);
|
||||
--ti-button-text-has-svg-icon-margin-right: 4px;
|
||||
// 图标加文字按钮字体颜色
|
||||
--ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-button-text-has-svg-text-color: #191919;
|
||||
// 图标加文字按钮悬浮时字体颜色
|
||||
--ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
--ti-button-text-has-svg-hover-text-color: #191919;
|
||||
// 文字按钮只有svg时水平内边距
|
||||
--ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
--ti-button-text-svg-padding-horizontal: 0px;
|
||||
|
||||
// 主要按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-normal-bg-color: #191919;
|
||||
// 主要按钮的主题类边框色
|
||||
--ti-button-primary-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-normal-border-color: #191919;
|
||||
// 主题类主要按钮悬浮背景色
|
||||
--ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-button-primary-hover-bg-color: #595959;
|
||||
// 主题类主要按钮悬浮边框色
|
||||
--ti-button-primary-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-button-primary-hover-border-color: #595959;
|
||||
// 主要按钮点击瞬间背景色
|
||||
--ti-button-primary-active-bg-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
--ti-button-primary-active-bg-color: #191919;
|
||||
// 主要按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6);
|
||||
// 主题类主要按钮文本色
|
||||
--ti-button-primary-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-primary-text-color: var(--ti-common-color-text-white);
|
||||
// 禁用主题类主要按钮文本色
|
||||
--ti-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8);
|
||||
--ti-button-primary-disabled-text-color: #C2C2C2;
|
||||
// 禁用主题类主要按钮边框色
|
||||
--ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border, #dfe1e6);
|
||||
--ti-button-primary-disabled-border-color: #F0F0F0;
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-button-primary-plain-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-plain-text-color: #191919;
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-button-primary-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-primary-plain-hover-text-color: #191919;
|
||||
// 朴素类主要按钮背景色
|
||||
--ti-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
--ti-button-primary-plain-bg-color: var(--ti-common-color-bg-minor);
|
||||
// 朴素类主要按钮悬浮背景色
|
||||
--ti-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-plain-hover-bg-color: var(--ti-common-color-bg-minor);
|
||||
// 朴素类主要按钮边框色
|
||||
--ti-button-primary-plain-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-plain-border-color: #595959;
|
||||
// 朴素类主要按钮悬浮边框色
|
||||
--ti-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-plain-hover-border-color: #FFFFFF;
|
||||
// 禁用朴素类主要按钮背景色
|
||||
--ti-button-primary-plain-disabled-bg-color: var(
|
||||
--ti-common-color-primary-plain-disabled-bg-color,
|
||||
rgba(191, 191, 191, 0.1)
|
||||
);
|
||||
--ti-button-primary-plain-disabled-bg-color: #F0F0F0;
|
||||
|
||||
// 成功按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-button-success-normal-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-normal-bg-color: #5CB300;
|
||||
// 成功按钮的主题类边框色
|
||||
--ti-button-success-normal-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-normal-border-color: #5CB300;
|
||||
// 成功按钮悬浮背景色
|
||||
--ti-button-success-hover-bg-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
--ti-button-success-hover-bg-color: #7DCC29;
|
||||
// 成功按钮悬浮边框色
|
||||
--ti-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
--ti-button-success-hover-border-color: #7DCC29;
|
||||
// 成功按钮点击瞬间背景色
|
||||
--ti-button-success-active-bg-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
--ti-button-success-active-bg-color: #5CB300;
|
||||
// 成功按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-success-disabled-bg-color: #F0F0F0;
|
||||
// 成功按钮文本色
|
||||
--ti-button-success-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-success-text-color: var(--ti-common-color-text-white);
|
||||
// 禁用主题类成功按钮文本色
|
||||
--ti-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text, #adb0b8);
|
||||
--ti-button-success-disabled-text-color: #C2C2C2;
|
||||
// 禁用主题类成功按钮边框色
|
||||
--ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border, #dfe1e6);
|
||||
--ti-button-success-disabled-border-color: #F0F0F0;
|
||||
// 朴素类成功按钮文本色
|
||||
--ti-button-success-plain-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-plain-text-color: #5CB300;
|
||||
// 朴素类成功按钮悬浮文本色
|
||||
--ti-button-success-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-success-plain-hover-text-color: #5CB300;
|
||||
// 朴素类成功按钮背景色
|
||||
--ti-button-success-plain-bg-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
--ti-button-success-plain-bg-color: #EDF7DF;
|
||||
// 朴素类成功按钮悬浮背景色
|
||||
--ti-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-plain-hover-bg-color: #EDF7DF;
|
||||
// 朴素类成功按钮边框色
|
||||
--ti-button-success-plain-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-plain-border-color: #DAF2BB;
|
||||
// 朴素类成功按钮悬浮边框色
|
||||
--ti-button-success-plain-hover-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-plain-hover-border-color: #EDF7DF;
|
||||
// 禁用朴素类成功按钮背景色
|
||||
--ti-button-success-plain-disabled-bg-color: var(
|
||||
--ti-common-color-success-plain-disabled-bg-color,
|
||||
rgba(166, 195, 185, 0.1)
|
||||
);
|
||||
--ti-button-success-plain-disabled-bg-color: #F0F0F0;
|
||||
|
||||
// 警告按钮背景色|朴素类警告按钮悬浮背景色
|
||||
--ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-normal-bg-color: #FF8800;
|
||||
// 警告按钮的主题类边框色
|
||||
--ti-button-warning-normal-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-normal-border-color: #FF8800;
|
||||
// 警告按钮悬浮背景色
|
||||
--ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover, #fac20a);
|
||||
--ti-button-warning-hover-bg-color: #FF9A2E;
|
||||
// 警告按钮点击瞬间背景色
|
||||
--ti-button-warning-active-bg-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
--ti-button-warning-active-bg-color: #FF8800;
|
||||
// 警告按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-warning-disabled-bg-color: #F0F0F0;
|
||||
// 警告按钮文本色
|
||||
--ti-button-warning-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-warning-text-color: var(--ti-common-color-text-white);
|
||||
// 禁用警告按钮文本色
|
||||
--ti-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text, #adb0b8);
|
||||
--ti-button-warning-disabled-text-color: #C2C2C2;
|
||||
// 禁用主题类警告按钮边框色
|
||||
--ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border, #dfe1e6);
|
||||
--ti-button-warning-disabled-border-color: #F0F0F0;
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-button-warning-plain-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-plain-text-color: #FF8800;
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-button-warning-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-warning-plain-hover-text-color: #FF8800;
|
||||
// 朴素类警告按钮背景色
|
||||
--ti-button-warning-plain-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
--ti-button-warning-plain-bg-color: #FFF4E8;
|
||||
// 朴素类警告按钮悬浮背景色
|
||||
--ti-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-plain-hover-bg-color: #FFF4E8;
|
||||
// 朴素类警告按钮边框色
|
||||
--ti-button-warning-plain-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-plain-border-color: #FFEBD1;
|
||||
// 朴素类警告按钮悬浮边框色
|
||||
--ti-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-plain-hover-border-color: #FFF4E8;
|
||||
// 禁用朴素类警告按钮背景色
|
||||
--ti-button-warning-plain-disabled-bg-color: var(
|
||||
--ti-common-color-warning-plain-disabled-bg-color,
|
||||
rgba(211, 198, 162, 0.1)
|
||||
);
|
||||
--ti-button-warning-plain-disabled-bg-color: #F0F0F0;
|
||||
|
||||
// 危险按钮默认背景色|朴素类危险按钮边框色
|
||||
--ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-normal-bg-color: #F23030;
|
||||
// 危险按钮的主题类边框色
|
||||
--ti-button-danger-normal-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-normal-border-color: #F23030;
|
||||
// 危险按钮悬浮背景色
|
||||
--ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
--ti-button-danger-hover-bg-color: #F76360;
|
||||
// 危险按钮悬浮边框色
|
||||
--ti-button-danger-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
--ti-button-danger-hover-border-color: #F76360;
|
||||
// 危险按钮点击瞬间背景色
|
||||
--ti-button-danger-active-bg-color: var(--ti-common-color-danger-active, #b12220);
|
||||
--ti-button-danger-active-bg-color: #F23030;
|
||||
// 危险按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-danger-disabled-bg-color: #F0F0F0;
|
||||
// 危险按钮文本色
|
||||
--ti-button-danger-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-danger-text-color: var(--ti-common-color-text-white);
|
||||
// 禁用主题类危险按钮文本色
|
||||
--ti-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text, #adb0b8);
|
||||
--ti-button-danger-disabled-text-color: #C2C2C2;
|
||||
// 禁用主题类危险按钮边框色
|
||||
--ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border, #dfe1e6);
|
||||
--ti-button-danger-disabled-border-color: #F0F0F0;
|
||||
// 朴素类危险按钮文本色
|
||||
--ti-button-danger-plain-text-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-plain-text-color: #F23030;
|
||||
// 朴素类危险按钮悬浮文本色
|
||||
--ti-button-danger-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-danger-plain-hover-text-color: #F23030;
|
||||
// 朴素类危险按钮背景色
|
||||
--ti-button-danger-plain-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
--ti-button-danger-plain-bg-color: transparent;
|
||||
// 朴素类危险按钮悬浮背景色
|
||||
--ti-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-plain-hover-bg-color: #FFF1F0;
|
||||
// 朴素类危险按钮边框色
|
||||
--ti-button-danger-plain-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-plain-border-color: #FCE2E0;
|
||||
// 朴素类危险按钮悬浮边框色
|
||||
--ti-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-plain-hover-border-color: #FFF1F0;
|
||||
// 禁用朴素类危险按钮背景色
|
||||
--ti-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-danger-plain-disabled-bg-color: #F0F0F0;
|
||||
// 禁用朴素类危险按钮边框色
|
||||
--ti-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-danger-plain-disabled-border-color: transparent;
|
||||
|
||||
// 信息按钮背景色|朴素类信息按钮边框色
|
||||
--ti-button-info-normal-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-normal-bg-color: #1476FF;
|
||||
// 信息按钮的主题类边框色
|
||||
--ti-button-info-normal-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-normal-border-color: #1476FF;
|
||||
// 信息按钮悬浮背景色
|
||||
--ti-button-info-hover-bg-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
--ti-button-info-hover-bg-color: #4191FA;
|
||||
// 信息按钮悬浮边框色
|
||||
--ti-button-info-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
--ti-button-info-hover-border-color: #4191FA;
|
||||
// 信息按钮点击瞬间背景色
|
||||
--ti-button-info-active-bg-color: var(--ti-common-color-info-active, #5c6173);
|
||||
--ti-button-info-active-bg-color: #1476FF;
|
||||
// 信息按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor, #f5f5f6);
|
||||
--ti-button-info-disabled-bg-color: #F0F0F0;
|
||||
// 信息按钮文本色
|
||||
--ti-button-info-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-info-text-color: var(--ti-common-color-text-white);
|
||||
// 禁用信息按钮文本色
|
||||
--ti-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text, #adb0b8);
|
||||
--ti-button-info-disabled-text-color: #C2C2C2;
|
||||
// 禁用信息按钮边框色
|
||||
--ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border, #dfe1e6);
|
||||
--ti-button-info-disabled-border-color: #F0F0F0;
|
||||
// 朴素类信息按钮文本色
|
||||
--ti-button-info-plain-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-plain-text-color: #1476FF;
|
||||
// 朴素类信息按钮悬浮文本色
|
||||
--ti-button-info-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-button-info-plain-hover-text-color: #1476FF;
|
||||
// 朴素类信息按钮背景色
|
||||
--ti-button-info-plain-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
|
||||
--ti-button-info-plain-bg-color: #F0F7FF;
|
||||
// 朴素类信息按钮悬浮背景色
|
||||
--ti-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-plain-hover-bg-color: #F0F7FF;
|
||||
// 朴素类信息按钮边框色
|
||||
--ti-button-info-plain-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-plain-border-color: #DEECFF;
|
||||
// 朴素类信息按钮悬浮边框色
|
||||
--ti-button-info-plain-hover-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-plain-hover-border-color: #F0F7FF;
|
||||
// 禁用朴素类信息按钮背景色
|
||||
--ti-button-info-plain-disabled-bg-color: var(
|
||||
--ti-common-color-info-plain-disabled-bg-color,
|
||||
rgba(191, 191, 191, 0.1)
|
||||
);
|
||||
--ti-button-info-plain-disabled-bg-color: #F0F0F0;
|
||||
|
||||
// 默认类型幽灵按钮文本色
|
||||
--ti-button-ghost-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
|
|
@ -326,137 +314,137 @@
|
|||
// 默认类型幽灵按钮悬浮文本色
|
||||
--ti-button-ghost-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认类型幽灵按钮悬浮边框色
|
||||
--ti-button-ghost-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-ghost-hover-border-color: #c2c2c2;
|
||||
// 默认类型幽灵按钮禁用文本色
|
||||
--ti-button-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-ghost-disabled-text-color: #c2c2c2;
|
||||
// 默认类型幽灵按钮禁用边框色
|
||||
--ti-button-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-ghost-disabled-border-color: #dbdbdb;
|
||||
// 主要类型幽灵按钮文本色
|
||||
--ti-button-primary-ghost-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-ghost-text-color: #191919;
|
||||
// 主要类型幽灵按钮边框色
|
||||
--ti-button-primary-ghost-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-primary-ghost-border-color: #595959;
|
||||
// 主要类型幽灵按钮悬浮文本色
|
||||
--ti-button-primary-ghost-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-button-primary-ghost-hover-text-color: #191919;
|
||||
// 主要类型幽灵按钮悬浮边框色
|
||||
--ti-button-primary-ghost-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-button-primary-ghost-hover-border-color: #C2C2C2;
|
||||
// 主要类型幽灵按钮禁用文本色
|
||||
--ti-button-primary-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-primary-ghost-disabled-text-color: #C2C2C2;
|
||||
// 主要类型幽灵按钮禁用边框色
|
||||
--ti-button-primary-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-primary-ghost-disabled-border-color: #F0F0F0;
|
||||
// 成功类型幽灵按钮文本色
|
||||
--ti-button-success-ghost-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-ghost-text-color: #5CB300;
|
||||
// 成功类型幽灵按钮边框色
|
||||
--ti-button-success-ghost-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-button-success-ghost-border-color: #5CB300;
|
||||
// 成功类型幽灵按钮悬浮文本色
|
||||
--ti-button-success-ghost-hover-text-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
--ti-button-success-ghost-hover-text-color: #5CB300;
|
||||
// 成功类型幽灵按钮悬浮边框色
|
||||
--ti-button-success-ghost-hover-border-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
--ti-button-success-ghost-hover-border-color: #DAF2BB;
|
||||
// 成功类型幽灵按钮禁用文本色
|
||||
--ti-button-success-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-success-ghost-disabled-text-color: #C2C2C2;
|
||||
// 成功类型幽灵按钮禁用边框色
|
||||
--ti-button-success-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-success-ghost-disabled-border-color: #F0F0F0;
|
||||
// 信息类型幽灵按钮文本色
|
||||
--ti-button-info-ghost-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-ghost-text-color: #1476FF;
|
||||
// 信息类型幽灵按钮边框色
|
||||
--ti-button-info-ghost-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-button-info-ghost-border-color: #1476FF;
|
||||
// 信息类型幽灵按钮悬浮文本色
|
||||
--ti-button-info-ghost-hover-text-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
--ti-button-info-ghost-hover-text-color: #1476FF;
|
||||
// 信息类型幽灵按钮悬浮边框色
|
||||
--ti-button-info-ghost-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
--ti-button-info-ghost-hover-border-color: #FAFAFA;
|
||||
// 信息类型幽灵按钮禁用文本色
|
||||
--ti-button-info-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-info-ghost-disabled-text-color: #C2C2C2;
|
||||
// 信息类型幽灵按钮禁用边框色
|
||||
--ti-button-info-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-info-ghost-disabled-border-color: #F0F0F0;
|
||||
// 告警类型幽灵按钮文本色
|
||||
--ti-button-warning-ghost-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-ghost-text-color: #FF8800;
|
||||
// 告警类型幽灵按钮边框色
|
||||
--ti-button-warning-ghost-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
--ti-button-warning-ghost-border-color: #FF8800;
|
||||
// 告警类型幽灵按钮悬浮文本色
|
||||
--ti-button-warning-ghost-hover-text-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
--ti-button-warning-ghost-hover-text-color: #FF8800;
|
||||
// 告警类型幽灵按钮悬浮边框色
|
||||
--ti-button-warning-ghost-hover-border-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
--ti-button-warning-ghost-hover-border-color: #FFEBD1;
|
||||
// 告警类型幽灵按钮禁用文本色
|
||||
--ti-button-warning-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-warning-ghost-disabled-text-color: #C2C2C2;
|
||||
// 告警类型幽灵按钮禁用边框色
|
||||
--ti-button-warning-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-warning-ghost-disabled-border-color: #F0F0F0;
|
||||
// 危险类型幽灵按钮文本色
|
||||
--ti-button-danger-ghost-text-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-ghost-text-color: #F23030;
|
||||
// 危险类型幽灵按钮边框色
|
||||
--ti-button-danger-ghost-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
--ti-button-danger-ghost-border-color: #F23030;
|
||||
// 危险类型幽灵按钮悬浮文本色
|
||||
--ti-button-danger-ghost-hover-text-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
--ti-button-danger-ghost-hover-text-color: #F23030;
|
||||
// 危险类型幽灵按钮悬浮边框色
|
||||
--ti-button-danger-ghost-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
--ti-button-danger-ghost-hover-border-color: #FCE2E0;
|
||||
// 危险类型幽灵按钮禁用文本色
|
||||
--ti-button-danger-ghost-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-danger-ghost-disabled-text-color: #C2C2C2;
|
||||
// 危险类型幽灵按钮禁用边框色
|
||||
--ti-button-danger-ghost-disabled-border-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-button-danger-ghost-disabled-border-color: #F0F0F0;
|
||||
|
||||
// 按钮垂直内边距
|
||||
--ti-button-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 默认圆形按钮内边距
|
||||
--ti-button-size-normal-padding: var(--ti-common-space-2x, 8px);
|
||||
--ti-button-size-normal-padding: var(--ti-common-space-6);
|
||||
|
||||
// 纯文本按钮超大尺寸最小宽度
|
||||
--ti-button-text-size-large-min-width: var(--ti-common-size-24x, 96px);
|
||||
--ti-button-text-size-large-min-width: 56px;
|
||||
// 纯文本按钮超大尺寸高度
|
||||
--ti-button-text-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
--ti-button-text-size-large-height: 56px;
|
||||
// 纯文本按钮超大尺寸图标宽度
|
||||
--ti-button-text-size-large-svg-width: 1em;
|
||||
--ti-button-text-size-large-svg-width: 48px;
|
||||
// 纯文本按钮超大尺寸图标高度
|
||||
--ti-button-text-size-large-svg-height: 1em;
|
||||
--ti-button-text-size-large-svg-height: 48px;
|
||||
// 纯文本按钮水平内边距
|
||||
--ti-button-text-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 纯文本按钮中等尺寸最小宽度
|
||||
--ti-button-text-size-medium-min-width: var(--ti-common-size-22x, 88px);
|
||||
--ti-button-text-size-medium-min-width: 40px;
|
||||
// 纯文本按钮中等尺寸高度
|
||||
--ti-button-text-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
--ti-button-text-size-medium-height: 40px;
|
||||
// 纯文本按钮中等尺寸图标宽度
|
||||
--ti-button-text-size-medium-svg-width: 1em;
|
||||
--ti-button-text-size-medium-svg-width: 32px;
|
||||
// 纯文本按钮中等尺寸图标高度
|
||||
--ti-button-text-size-medium-svg-height: 1em;
|
||||
--ti-button-text-size-medium-svg-height: 32px;
|
||||
|
||||
// 纯文本按钮默认尺寸最小宽度
|
||||
--ti-button-text-size-default-min-width: var(--ti-common-size-20x, 80px);
|
||||
--ti-button-text-size-default-min-width: 24px;
|
||||
// 纯文本按钮默认尺寸高度
|
||||
--ti-button-text-size-default-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-button-text-size-default-height: 24px;
|
||||
// 纯文本按钮默认尺寸图标宽度
|
||||
--ti-button-text-size-default-svg-width: 1em;
|
||||
--ti-button-text-size-default-svg-width: 16px;
|
||||
// 纯文本按钮默认尺寸图标高度
|
||||
--ti-button-text-size-default-svg-height: 1em;
|
||||
--ti-button-text-size-default-svg-height: 16px;
|
||||
|
||||
// 纯文本按钮小尺寸最小宽度
|
||||
--ti-button-text-size-small-min-width: var(--ti-common-size-18x, 72px);
|
||||
--ti-button-text-size-small-min-width: 24px;
|
||||
// 纯文本按钮小尺寸高度
|
||||
--ti-button-text-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
--ti-button-text-size-small-height: 24px;
|
||||
// 纯文本按钮小尺寸图标宽度
|
||||
--ti-button-text-size-small-svg-width: 1em;
|
||||
--ti-button-text-size-small-svg-width: 16px;
|
||||
// 纯文本按钮小尺寸图标高度
|
||||
--ti-button-text-size-small-svg-height: 1em;
|
||||
--ti-button-text-size-small-svg-height: 16px;
|
||||
|
||||
// 纯文本按钮迷你尺寸最小宽度
|
||||
--ti-button-text-size-mini-min-width: var(--ti-common-size-16x, 64px);
|
||||
--ti-button-text-size-mini-min-width: 24px;
|
||||
// 纯文本按钮迷你尺寸高度
|
||||
--ti-button-text-size-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
--ti-button-text-size-mini-height: 24px;
|
||||
// 纯文本按钮迷你尺寸图标宽度
|
||||
--ti-button-text-size-mini-svg-width: 1em;
|
||||
--ti-button-text-size-mini-svg-width: 16px;
|
||||
// 纯文本按钮迷你尺寸图标高度
|
||||
--ti-button-text-size-mini-svg-height: 1em;
|
||||
--ti-button-text-size-mini-svg-height: 16px;
|
||||
|
||||
// 纯图标按钮最小宽度
|
||||
--ti-button-icon-font-size: var(--ti-common-font-size-0, 12px);
|
||||
--ti-button-icon-font-size: var(--ti-common-font-size-2);
|
||||
// 纯图标/文字按钮宽度
|
||||
--ti-button-only-icon-width: var(ti-common-size-width-minor, 30px);
|
||||
--ti-button-only-icon-width: var(--ti-common-size-8x);
|
||||
--ti-button-only-icon-min-width: unset;
|
||||
--ti-button-only-icon-text-width: unset;
|
||||
--ti-button-only-icon-text-width: var(--ti-common-size-6x);
|
||||
// 纯图标按钮水平内边距
|
||||
--ti-button-only-icon-padding-horizontal: 7px;
|
||||
// 纯图标按钮边框圆角
|
||||
--ti-button-only-icon-border-radius: 2px;
|
||||
--ti-button-only-icon-border-radius: var(--ti-common-border-radius-1);
|
||||
// 纯图标按钮边框颜色
|
||||
--ti-button-only-icon-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-button-only-icon-border-color: #c2c2c2;
|
||||
// 纯图标按钮悬浮时边框颜色
|
||||
--ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-button-only-icon-hover-border-color: #191919;
|
||||
// 纯图标按钮禁用时边框颜色
|
||||
--ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
--ti-button-only-icon-disabled-border-color: #dbdbdb;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
export const tinyCalendarViewOldTheme = {
|
||||
'ti-calendar-view-not-selected-hover-color': 'rgba(0,103,209,0.05)',
|
||||
'ti-calendar-view-is-selected-hover-color': 'rgba(0,103,209,0.1)',
|
||||
'ti-calendar-view-events-grey-item-color': '#8D959E',
|
||||
'ti-calendar-view-events-cyan-item-color': '#00A2B5',
|
||||
'ti-calendar-view-events-purple-item-color': '#745EF7',
|
||||
'ti-calendar-view-events-yellow-item-color': '#F36900',
|
||||
'ti-calendar-view-events-red-item-color': '#EB171F',
|
||||
'ti-calendar-view-events-green-item-color': '#00A874',
|
||||
'ti-calendar-view-events-blue-item-color': '#1890ff',
|
||||
'ti-calendar-view-events-item-font-weight': 'var(--ti-common-font-weight-4)',
|
||||
'ti-calendar-view-events-item-font-size': 'var(--ti-common-font-size-0)',
|
||||
'ti-calendar-view-header-right-svg-fill': 'unset',
|
||||
'ti-calendar-view-header-left-svg-fill': 'unset',
|
||||
'ti-calendar-view-tooltip-content-text-color': '#8d959e',
|
||||
'ti-calendar-view-tooltip-date-text-color': '#8d959e',
|
||||
'ti-calendar-view-tooltip-title-font-weight': 'var(--ti-common-font-weight-5)',
|
||||
'ti-calendar-view-tooltip-title-font-size': 'var(--ti-common-font-size-base)',
|
||||
'ti-calendar-view-day-selected-svg-top': '-6px',
|
||||
'ti-calendar-view-day-selected-svg-right': '-1px',
|
||||
'ti-calendar-view-day-selected-border-radius': 'var(--ti-common-space-2x, 8px)',
|
||||
'ti-calendar-view-header-main-text-color': '#161e26',
|
||||
'ti-calendar-view-radio-button-inner': 'var(--ti-common-color-text-white)',
|
||||
'ti-calendar-view-radio-active-inner-hover': '#0a0b0e',
|
||||
'ti-calendar-view-radio-active-inner': 'var(--ti-base-color-brand-6)',
|
||||
'ti-calendar-view-radio-active-fill': 'var(--ti-common-color-text-white)',
|
||||
'ti-calendar-view-tool-display': 'flex',
|
||||
'ti-calendar-view-tool-first-display': 'none',
|
||||
'ti-calendar-view-header-margin-bottom': 'var(--ti-common-space-3x, 12px)'
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const tinyCalendarViewSmbTheme = {
|
||||
'ti-calendar-view-header-margin-bottom': 'var(--ti-common-space-8x)',
|
||||
'ti-calendar-view-tool-first-display': 'flex',
|
||||
'ti-calendar-view-tool-display': 'none',
|
||||
'ti-calendar-view-radio-active-fill': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-radio-active-inner': 'var(--ti-common-color-bg-white-normal)',
|
||||
'ti-calendar-view-radio-active-inner-hover': 'var(--ti-common-color-bg-white-normal)',
|
||||
'ti-calendar-view-radio-button-inner': '#ebebeb',
|
||||
'ti-calendar-view-header-main-text-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-calendar-view-tooltip-title-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-calendar-view-tooltip-title-font-weight': 'var(--ti-common-font-weight-bold)',
|
||||
'ti-calendar-view-tooltip-content-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-tooltip-date-text-color': 'var(--ti-common-color-text-secondary)',
|
||||
'ti-calendar-view-day-selected-border-radius': 'unset',
|
||||
'ti-calendar-view-day-selected-svg-right': 'unset',
|
||||
'ti-calendar-view-day-selected-svg-top': 'unset',
|
||||
'ti-calendar-view-header-left-svg-fill': '#D8D8D8',
|
||||
'ti-calendar-view-header-right-svg-fill': '#D8D8D8',
|
||||
'ti-calendar-view-events-item-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-calendar-view-events-item-font-weight': 'var(--ti-common-font-weight-bold)',
|
||||
'ti-calendar-view-events-blue-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-green-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-red-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-yellow-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-purple-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-cyan-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-events-grey-item-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-calendar-view-is-selected-hover-color': 'rgba(240,248,255,0.7)',
|
||||
'ti-calendar-view-not-selected-hover-color': 'rgba(240,248,255,0.5)'
|
||||
}
|
||||
|
|
@ -12,38 +12,38 @@
|
|||
|
||||
.component-css-vars-calendar-view() {
|
||||
// header下边距
|
||||
--ti-calendar-view-header-margin-bottom: var(--ti-common-space-3x, 12px);
|
||||
--ti-calendar-view-header-margin-bottom: var(--ti-common-space-8x);
|
||||
// 占位
|
||||
--ti-calendar-view-tool-first-display: none;
|
||||
--ti-calendar-view-tool-display: flex;
|
||||
--ti-calendar-view-tool-first-display: flex;
|
||||
--ti-calendar-view-tool-display: none;
|
||||
// radio 填充
|
||||
--ti-calendar-view-radio-active-fill: var(--ti-common-color-text-white);
|
||||
--ti-calendar-view-radio-active-inner: var(--ti-base-color-brand-6);
|
||||
--ti-calendar-view-radio-active-inner-hover: #0a0b0e;
|
||||
--ti-calendar-view-radio-button-inner: var(--ti-common-color-text-white);
|
||||
--ti-calendar-view-header-main-text-color: #161e26;
|
||||
--ti-calendar-view-radio-active-fill: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-radio-active-inner: var(--ti-common-color-bg-white-normal);
|
||||
--ti-calendar-view-radio-active-inner-hover: var(--ti-common-color-bg-white-normal);
|
||||
--ti-calendar-view-radio-button-inner: #ebebeb;
|
||||
--ti-calendar-view-header-main-text-color: var(--ti-common-color-text-weaken);
|
||||
//选中
|
||||
--ti-calendar-view-day-selected-border-radius: var(--ti-common-space-2x, 8px);
|
||||
--ti-calendar-view-day-selected-svg-right: -1px;
|
||||
--ti-calendar-view-day-selected-svg-top: -6px;
|
||||
--ti-calendar-view-day-selected-border-radius: unset;
|
||||
--ti-calendar-view-day-selected-svg-right: unset;
|
||||
--ti-calendar-view-day-selected-svg-top: unset;
|
||||
// 提示
|
||||
--ti-calendar-view-tooltip-title-font-size: var(--ti-common-font-size-base);
|
||||
--ti-calendar-view-tooltip-title-font-weight: var(--ti-common-font-weight-5);
|
||||
--ti-calendar-view-tooltip-date-text-color: #8d959e;
|
||||
--ti-calendar-view-tooltip-content-text-color: #8d959e;
|
||||
--ti-calendar-view-tooltip-title-font-size: var(--ti-common-font-size-2);
|
||||
--ti-calendar-view-tooltip-title-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-calendar-view-tooltip-date-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-calendar-view-tooltip-content-text-color: var(--ti-common-color-text-primary);
|
||||
// 箭头
|
||||
--ti-calendar-view-header-left-svg-fill: unset;
|
||||
--ti-calendar-view-header-right-svg-fill: unset;
|
||||
--ti-calendar-view-header-left-svg-fill: #D8D8D8;
|
||||
--ti-calendar-view-header-right-svg-fill: #D8D8D8;
|
||||
// 日程
|
||||
--ti-calendar-view-events-item-font-size: var(--ti-common-font-size-0);
|
||||
--ti-calendar-view-events-item-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-calendar-view-events-blue-item-color: #1890ff;
|
||||
--ti-calendar-view-events-green-item-color: #00A874;
|
||||
--ti-calendar-view-events-red-item-color: #EB171F;
|
||||
--ti-calendar-view-events-yellow-item-color: #F36900;
|
||||
--ti-calendar-view-events-purple-item-color: #745EF7;
|
||||
--ti-calendar-view-events-cyan-item-color: #00A2B5;
|
||||
--ti-calendar-view-events-grey-item-color: #8D959E;
|
||||
--ti-calendar-view-is-selected-hover-color: rgba(0,103,209,0.1);
|
||||
--ti-calendar-view-not-selected-hover-color: rgba(0,103,209,0.05);
|
||||
--ti-calendar-view-events-item-font-size: var(--ti-common-font-size-1);
|
||||
--ti-calendar-view-events-item-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-calendar-view-events-blue-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-green-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-red-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-yellow-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-purple-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-cyan-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-events-grey-item-color: var(--ti-common-color-text-primary);
|
||||
--ti-calendar-view-is-selected-hover-color: rgba(240,248,255,0.7);
|
||||
--ti-calendar-view-not-selected-hover-color: rgba(240,248,255,0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export const tinyCalendarOldTheme = {
|
||||
'ti-calendar-text-color-primary': 'var(--ti-base-color-brand-6, #5e7ce0)'
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export const tinyCalendarSmbTheme = {
|
||||
'ti-calendar-text-color-primary': '#1890ff'
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
--ti-calendar-list-item-selected-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-calendar-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-calendar-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-calendar-text-color-primary: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-calendar-text-color-primary: #1890ff;
|
||||
--ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1);
|
||||
--ti-calendar-bg-color-success: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal, #fa9841);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export const tinyCardOldTheme = {
|
||||
'ti-card-title-mg-bottom': 'var(--ti-common-space-3x)',
|
||||
'ti-card-option-top-border-color': 'var(--ti-base-color-common-1)',
|
||||
'ti-card-option-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-card-option-text-color': 'var(--ti-base-color-common-9)',
|
||||
'ti-card-main-text-color': 'var(--ti-base-color-common-6)',
|
||||
'ti-card-main-font-size': 'var(--ti-common-font-size-base)',
|
||||
'ti-card-title-font-weight': 'var(--ti-common-font-weight-4)',
|
||||
'ti-card-title-text-color': 'var(--ti-base-color-common-9)',
|
||||
'ti-card-title-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-card-mini-body-padding': 'var(--ti-common-space-2x)',
|
||||
'ti-card-small-body-padding': 'var(--ti-common-space-3x)',
|
||||
'ti-card-medium-body-padding': 'var(--ti-common-space-3x)',
|
||||
'ti-card-large-body-padding': 'var(--ti-common-space-4x)',
|
||||
'ti-card-checked-border-color': 'var(--ti-common-color-line-active)',
|
||||
'ti-card-default-border-color': 'var(--ti-base-color-common-1)',
|
||||
'ti-card-large-border-radius': 'var(--ti-common-border-radius-2)',
|
||||
'ti-card-box-shadow': 'var(--ti-common-shadow-3-down)',
|
||||
'ti-card-bg-color': 'var(--ti-base-color-bg-1)'
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
export const tinyCardSmbTheme = {
|
||||
'ti-card-checked-border-color': 'var(--ti-common-color-text-highlight)',
|
||||
'ti-card-bg-color': 'var(--ti-common-color-bg-navigation)', // 白色背景
|
||||
'ti-card-box-shadow': 'none', // 无阴影
|
||||
'ti-card-default-border-color': 'var(--ti-common-color-light)', // 白色边框
|
||||
'ti-card-title-font-size': 'var(--ti-common-font-size-2)', // 标题字体
|
||||
'ti-card-title-text-color': 'var(--ti-common-color-selected-text-color)', // 标题字体色
|
||||
'ti-card-title-font-weight': 'bold', // 标题字重
|
||||
'ti-card-main-font-size': 'var(--ti-common-font-size-1)', // 正文字体
|
||||
'ti-card-main-text-color': 'var(--ti-common-color-text-weaken)', // 正文字体色
|
||||
'ti-card-option-top-border-color': 'var(--ti-common-color-primary-disabled)',
|
||||
'ti-card-option-text-color': 'var(--ti-common-color-selected-text-color)',
|
||||
'ti-card-option-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-card-large-body-padding': 'var(--ti-common-space-6x)',
|
||||
'ti-card-medium-body-padding': 'var(--ti-common-space-6x)',
|
||||
'ti-card-small-body-padding': 'var(--ti-common-space-4x)',
|
||||
'ti-card-mini-body-padding': 'var(--ti-common-space-3x)',
|
||||
'ti-card-large-border-radius': 'var(--ti-common-border-radius-4)',
|
||||
'ti-card-title-mg-bottom': 'var(--ti-common-space-4x)'
|
||||
}
|
||||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
.component-css-vars-amount() {
|
||||
// 卡片背景色
|
||||
--ti-card-bg-color: var(--ti-base-color-bg-1);
|
||||
--ti-card-bg-color: var(--ti-common-color-bg-navigation);
|
||||
// 卡片阴影
|
||||
--ti-card-box-shadow: var(--ti-common-shadow-3-down);
|
||||
--ti-card-box-shadow: none;
|
||||
|
||||
// 卡片最小宽度
|
||||
--ti-card-min-width: var(--ti-common-size-auto);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
--ti-card-mini-width: calc(var(--ti-common-size-base) * 54);
|
||||
|
||||
// 大尺寸卡片的圆角
|
||||
--ti-card-large-border-radius: var(--ti-common-border-radius-2);
|
||||
--ti-card-large-border-radius: var(--ti-common-border-radius-4);
|
||||
// 中尺寸卡片的圆角
|
||||
--ti-card-medium-border-radius: var(--ti-common-border-radius-2);
|
||||
// 小尺寸卡片的圆角
|
||||
|
|
@ -45,43 +45,43 @@
|
|||
// 危险状态的卡片的边框颜色
|
||||
--ti-card-danger-border-color: var(--ti-base-color-error-4);
|
||||
// 默认状态的卡片的边框颜色
|
||||
--ti-card-default-border-color: var(--ti-base-color-common-1);
|
||||
--ti-card-default-border-color: var(--ti-common-color-light);
|
||||
|
||||
// 选中状态的卡片的边框颜色
|
||||
--ti-card-checked-border-color: var(--ti-common-color-line-active);
|
||||
--ti-card-checked-border-color: var(--ti-common-color-text-highlight);
|
||||
// 禁用状态的卡片的背景颜色
|
||||
--ti-card-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
|
||||
// 大尺寸卡片的logo状态下，body区域的padding值
|
||||
--ti-card-large-body-padding: var(--ti-common-space-4x);
|
||||
--ti-card-large-body-padding: var(--ti-common-space-6x);
|
||||
// 中尺寸卡片的logo状态下，body区域的padding值
|
||||
--ti-card-medium-body-padding: var(--ti-common-space-3x);
|
||||
--ti-card-medium-body-padding: var(--ti-common-space-6x);
|
||||
// 小尺寸卡片的logo状态下，body区域的padding值
|
||||
--ti-card-small-body-padding: var(--ti-common-space-3x);
|
||||
--ti-card-small-body-padding: var(--ti-common-space-4x);
|
||||
// 迷你尺寸卡片的logo状态下，body区域的padding值
|
||||
--ti-card-mini-body-padding: var(--ti-common-space-2x);
|
||||
--ti-card-mini-body-padding: var(--ti-common-space-3x);
|
||||
|
||||
// 卡片的标题的字体大小
|
||||
--ti-card-title-font-size: var(--ti-common-font-size-1);
|
||||
--ti-card-title-font-size: var(--ti-common-font-size-2);
|
||||
// 卡片的标题的字体颜色
|
||||
--ti-card-title-text-color: var(--ti-base-color-common-9);
|
||||
--ti-card-title-text-color: var(--ti-common-color-selected-text-color);
|
||||
// 卡片的标题的字重
|
||||
--ti-card-title-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-card-title-font-weight: bold;
|
||||
// 卡片的正文的字体大小
|
||||
--ti-card-main-font-size: var(--ti-common-font-size-base);
|
||||
--ti-card-main-font-size: var(--ti-common-font-size-1);
|
||||
// 卡片的正文的字体颜色
|
||||
--ti-card-main-text-color: var(--ti-base-color-common-6);
|
||||
--ti-card-main-text-color: var(--ti-common-color-text-weaken);
|
||||
|
||||
// 卡片的选项的文本色
|
||||
--ti-card-option-text-color: var(--ti-base-color-common-9);
|
||||
--ti-card-option-text-color: var(--ti-common-color-selected-text-color);
|
||||
// 卡片的选项的文本大小
|
||||
--ti-card-option-font-size: var(--ti-common-font-size-1);
|
||||
--ti-card-option-font-size: var(--ti-common-font-size-2);
|
||||
// 卡片的选项的文本大小
|
||||
--ti-card-option-top-border-color: var(--ti-base-color-common-1);
|
||||
--ti-card-option-top-border-color: var(--ti-common-color-primary-disabled);
|
||||
// 卡片的选项禁用时的文本色
|
||||
--ti-card-option-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
// 卡片的'更多'的字体颜色
|
||||
--ti-card-footer-more-text-color: var(--ti-base-color-common-9);
|
||||
// 卡片标题下边距
|
||||
--ti-card-title-mg-bottom: var(--ti-common-space-3x);
|
||||
--ti-card-title-mg-bottom: var(--ti-common-space-4x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export const tinyCarouselItemOldTheme = {
|
||||
'ti-carousel-item-title-bg-color': 'rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export const tinyCarouselItemSmbTheme = {
|
||||
// SMB主题
|
||||
'ti-carousel-item-title-bg-color': 'var(--ti-common-color-bg-dark-disabled)'
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.component-css-vars-carousel-item() {
|
||||
--ti-carousel-item-title-height: var(--ti-common-size-height-small, 32px);
|
||||
--ti-carousel-item-title-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-carousel-item-title-bg-color: rgba(0, 0, 0, 0.3);
|
||||
--ti-carousel-item-title-bg-color: var(--ti-common-color-bg-dark-disabled);
|
||||
--ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-carousel-mask-bg-color: var(--ti-common-color-light, #fff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
export const tinyCarouselOldTheme = {
|
||||
'ti-carousel-arrow-hover-text-color': '#808080',
|
||||
'ti-carousel-hover-opacity': '0.6',
|
||||
'ti-carousel-opacity': '1',
|
||||
'ti-carousel-outside-button-active-bg-color': 'var(--ti-common-color-bg-dark-deep, #464c59)',
|
||||
'ti-carousel-indicator-active-border-radius': 'var(--ti-carousel-indicators-border-radius)',
|
||||
'ti-carousel-indicator-active-button-width': 'var(--ti-carousel-indicator-button-width)',
|
||||
'ti-carousel-indicator-active-background-color': 'var(--ti-base-color-transparent, transparent)',
|
||||
'ti-carousel-indicator-padding-horizontal': 'calc(var(--ti-common-space-1, 1px) * 2)',
|
||||
'ti-carousel-indicator-active-width': 'var(--ti-common-size-3x, 12px)',
|
||||
'ti-carousel-indicator-margin-right': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-carousel-indicator-button-bg-color': 'var(--ti-common-color-info-disabled, #bfbfbf)',
|
||||
'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-carousel-indicators-height': 'var(--ti-common-size-4x, 16px)',
|
||||
'ti-carousel-indicators-bg-color': 'rgba(3, 2, 2, 0.3)',
|
||||
'ti-carousel-arrow-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-carousel-arrow-bg-color': 'rgba(0, 0, 0, 0.3)',
|
||||
'ti-carousel-arrow-hover-bg-color': 'rgba(0, 0, 0, 0.6)',
|
||||
'ti-carousel-arrow-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-carousel-arrow-width': 'var(--ti-common-size-7x, 28px)',
|
||||
'ti-carousel-arrow-height': 'var(--ti-common-size-height-normal, 28px)'
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
export const tinyCarouselSmbTheme = {
|
||||
// SMB主题
|
||||
'ti-carousel-arrow-height': 'var(--ti-common-size-8x)',
|
||||
'ti-carousel-arrow-width': 'var(--ti-common-size-8x)',
|
||||
'ti-carousel-arrow-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-carousel-arrow-bg-color': '#F0F0F0',
|
||||
'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-carousel-arrow-text-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-carousel-arrow-hover-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-carousel-arrow-disabled-text-color': 'var(--ti-common-color-text-link-darkbg-hover)',
|
||||
'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-5x)',
|
||||
'ti-carousel-indicators-height': '8px',
|
||||
'ti-carousel-indicator-active-background-color': 'var(--ti-common-color-primary-active)',
|
||||
'ti-carousel-indicator-button-bg-color': 'var(--ti-common-color-text-secondary)',
|
||||
'ti-carousel-outside-button-active-bg-color': 'var(--ti-common-color-primary-active)',
|
||||
'ti-carousel-indicator-active-border-radius': 'var(--ti-common-space-base)',
|
||||
'ti-carousel-indicator-padding-horizontal': 'var(--ti-common-space-0)',
|
||||
'ti-carousel-indicator-margin-right': 'var(--ti-common-space-3x)',
|
||||
'ti-carousel-indicator-active-width': 'var(--ti-common-size-5x)',
|
||||
'ti-carousel-indicators-bg-color': 'none',
|
||||
'ti-carousel-opacity': '0.5',
|
||||
'ti-carousel-hover-opacity': '0.8',
|
||||
'ti-carousel-arrow-hover-bg-color': '#E6E6E6'
|
||||
}
|
||||
|
|
@ -12,67 +12,67 @@
|
|||
|
||||
.component-css-vars-carousel() {
|
||||
// 箭头按钮背景高度
|
||||
--ti-carousel-arrow-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-carousel-arrow-height: var(--ti-common-size-8x);
|
||||
// 箭头按钮背景宽度
|
||||
--ti-carousel-arrow-width: var(--ti-common-size-7x, 28px);
|
||||
--ti-carousel-arrow-width: var(--ti-common-size-8x);
|
||||
// 左右箭头的字号
|
||||
--ti-carousel-arrow-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-carousel-arrow-font-size: var(--ti-common-font-size-2);
|
||||
// 左右箭头按钮悬浮背景色
|
||||
--ti-carousel-arrow-hover-bg-color: rgba(0, 0, 0, 0.6);
|
||||
--ti-carousel-arrow-hover-bg-color: #E6E6E6;
|
||||
// 左右箭头按钮背景色
|
||||
--ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3);
|
||||
--ti-carousel-arrow-bg-color: #F0F0F0;
|
||||
// 左右箭头阴影(hide)
|
||||
--ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none, none);
|
||||
// 箭头正常颜色
|
||||
--ti-carousel-arrow-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-carousel-arrow-text-color: var(--ti-common-color-text-weaken);
|
||||
// 箭头点击瞬间文本色(hide)
|
||||
--ti-carousel-arrow-active-text-color: var(--ti-common-color-light, #fff);
|
||||
// 指示器盒子的背景色
|
||||
--ti-carousel-indicators-bg-color: rgba(3, 2, 2, 0.3);
|
||||
--ti-carousel-indicators-bg-color: none;
|
||||
// 指示器盒子的圆角大小
|
||||
--ti-carousel-indicators-border-radius: 13px;
|
||||
// 指示器盒子的高度
|
||||
--ti-carousel-indicators-height: var(--ti-common-size-4x, 16px);
|
||||
--ti-carousel-indicators-height: 8px;
|
||||
// 指示器圆角的背景色(hide)
|
||||
--ti-carousel-indicators-radius-bg-color: rgba(0, 0, 0, 0.3);
|
||||
// 幻灯片内的当前指示器图标色
|
||||
--ti-carousel-indicator-active-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-carousel-indicator-active-text-color: var(--ti-common-color-text-primary);
|
||||
// 指示器按钮宽度
|
||||
--ti-carousel-indicator-button-width: var(--ti-common-size-2x, 8px);
|
||||
// 指示器按钮高度
|
||||
--ti-carousel-indicator-button-height: var(--ti-common-size-2x, 8px);
|
||||
// 非当前指示器背景色
|
||||
--ti-carousel-indicator-button-bg-color: var(--ti-common-color-info-disabled, #bfbfbf);
|
||||
--ti-carousel-indicator-button-bg-color: var(--ti-common-color-text-secondary);
|
||||
// 指示器项右外边距
|
||||
--ti-carousel-indicator-margin-right: var(--ti-common-space-0, 0px);
|
||||
--ti-carousel-indicator-margin-right: var(--ti-common-space-3x);
|
||||
// 当前指示器右边距
|
||||
--ti-carousel-indicator-active-width: var(--ti-common-size-3x, 12px);
|
||||
--ti-carousel-indicator-active-width: var(--ti-common-size-5x);
|
||||
// 指示器项垂直内边距(hide)
|
||||
--ti-carousel-indicator-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 指示器项水平内边距
|
||||
--ti-carousel-indicator-padding-horizontal: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
--ti-carousel-indicator-padding-horizontal: var(--ti-common-space-0);
|
||||
// 当前指示器动画属性(hide)
|
||||
--ti-carousel-indicator-active-transition-property: none;
|
||||
// 当前指示器背景色
|
||||
--ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent, transparent);
|
||||
--ti-carousel-indicator-active-background-color: var(--ti-common-color-primary-active);
|
||||
// 当前指示器的宽度
|
||||
--ti-carousel-indicator-active-button-width: var(--ti-carousel-indicator-button-width);
|
||||
--ti-carousel-indicator-active-button-width: var(--ti-common-size-5x);
|
||||
// 当前指示器圆角
|
||||
--ti-carousel-indicator-active-border-radius: var(--ti-carousel-indicators-border-radius);
|
||||
--ti-carousel-indicator-active-border-radius: var(--ti-common-space-base);
|
||||
// 幻灯片外的指示器动画(hide)
|
||||
--ti-carousel-indicator-active-transition: none;
|
||||
// 幻灯片外的指示器默认背景色
|
||||
--ti-carousel-outside-button-bg-color: var(--ti-common-color-dark, #000);
|
||||
// 幻灯片外的当前指示器背景色
|
||||
--ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
|
||||
--ti-carousel-outside-button-active-bg-color: var(--ti-common-color-primary-active);
|
||||
// 标签按钮的字号(hide)
|
||||
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 正常透明度颜色
|
||||
--ti-carousel-opacity: 1;
|
||||
--ti-carousel-opacity: 0.5;
|
||||
// 幻灯片悬浮时的透明度(hide)
|
||||
--ti-carousel-hover-opacity: 0.6;
|
||||
--ti-carousel-hover-opacity: 0.8;
|
||||
// 箭头悬浮文本颜色(hide)
|
||||
--ti-carousel-arrow-hover-text-color: #808080;
|
||||
--ti-carousel-arrow-hover-text-color: var(--ti-common-color-text-primary);
|
||||
// 左侧箭头背景色
|
||||
--ti-carousel-arrow-left-bg-color: #f5f5f5;
|
||||
// 右侧箭头背景色
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export const tinyCascaderMenuOldTheme = {
|
||||
'ti-cascader-menu-width': '180px',
|
||||
'ti-cascader-menu-border-color': 'var(--ti-common-color-line-disabled, #dfe1e6)'
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export const tinyCascaderMenuSmbTheme = {
|
||||
'ti-cascader-menu-border-color': '#f5f5f5',
|
||||
'ti-cascader-menu-width': '159px'
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
// 下拉菜单文本色
|
||||
--ti-cascader-menu-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 下拉菜单边框色
|
||||
--ti-cascader-menu-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
--ti-cascader-menu-border-color: #f5f5f5;
|
||||
// 下拉菜单为空时的文本色
|
||||
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 下拉菜单列表垂直方向的内边距
|
||||
|
|
@ -26,5 +26,5 @@
|
|||
// 下拉菜单列表水平方向的外边距
|
||||
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单的宽度
|
||||
--ti-cascader-menu-width: 180px;
|
||||
--ti-cascader-menu-width: 159px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
export const tinyCascaderNodeOldTheme = {
|
||||
'ti-cascader-node-active-font-weight': 'normal',
|
||||
'ti-cascader-node-label-max-width': '360px',
|
||||
'ti-cascader-node-postfix-right': '10px',
|
||||
'ti-cascader-node-selectable-active-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)',
|
||||
'ti-cascader-node-label-padding-horizontal': 'var(--ti-common-space-10, 10px)',
|
||||
'ti-cascader-node-prefix-display': "'inline-block'",
|
||||
'ti-cascader-node-active-icon-color': 'var(--ti-common-color-icon-white, #fff)',
|
||||
'ti-cascader-node-disabled-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-cascader-node-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-cascader-node-icon-font-size': 'calc(var(--ti-common-font-size-1, 14px) - 4px)',
|
||||
'ti-cascader-node-disabled-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
|
||||
'ti-cascader-node-selectable-text-color': 'var(--ti-common-color-selected-text-color, #fff)',
|
||||
'ti-cascader-node-text-color': 'var(--ti-common-color-text-white, #fff)',
|
||||
'ti-cascader-node-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)'
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
export const tinyCascaderNodeSmbTheme = {
|
||||
'ti-cascader-node-label-padding-horizontal': 'var(--ti-common-space-0)',
|
||||
'ti-cascader-node-postfix-right': 'var(--ti-common-space-4x)',
|
||||
'ti-cascader-node-disabled-bg-color': 'var(--ti-common-color-bg-disabled)',
|
||||
'ti-cascader-node-disabled-icon-color': 'var(--ti-common-color-text-link-darkbg-hover)',
|
||||
'ti-cascader-node-label-max-width': 'calc(var(--ti-common-space-2) * 53 + 1px)',
|
||||
'ti-cascader-node-selectable-active-bg-color': 'var(--ti-common-color-bg-navigation)',
|
||||
'ti-cascader-node-active-font-weight': 'var(--ti-common-font-weight-bold)',
|
||||
'ti-cascader-node-hover-text-color': 'var(--ti-common-color-primary-normal)',
|
||||
'ti-cascader-node-prefix-display': 'none',
|
||||
'ti-cascader-node-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-cascader-node-text-color': 'var(--ti-common-color-primary-normal)',
|
||||
'ti-cascader-node-selectable-text-color': 'var(--ti-common-color-text-highlight)',
|
||||
'ti-cascader-node-icon-font-size': 'var(--ti-common-font-size-0)',
|
||||
'ti-cascader-menu-list-padding-vertical': 'var(--ti-common-space-2x)',
|
||||
'ti-cascader-node-active-icon-color': 'var(--ti-common-color-primary-normal)'
|
||||
}
|
||||
|
|
@ -14,39 +14,39 @@
|
|||
// 下拉列表子项的背景色
|
||||
--ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 下拉列表子项悬浮时的文本色
|
||||
--ti-cascader-node-hover-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
--ti-cascader-node-hover-text-color: var(--ti-common-color-primary-normal);
|
||||
// 下拉列表子项的文本色
|
||||
--ti-cascader-node-text-color: var(--ti-common-color-text-white, #fff);
|
||||
--ti-cascader-node-text-color: var(--ti-common-color-primary-normal);
|
||||
// 下拉列表子项选中后悬浮时的背景色
|
||||
--ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 下拉列表子项选中时的文本色
|
||||
--ti-cascader-node-selectable-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
--ti-cascader-node-selectable-text-color: var(--ti-common-color-text-highlight);
|
||||
// 下拉列表子项禁用状态时的文本色
|
||||
--ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 下拉列表子项禁用状态时的背景色
|
||||
--ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
// 下拉列表子项的icon图标的字体大小
|
||||
--ti-cascader-node-icon-font-size: calc(var(--ti-common-font-size-1, 14px) - 4px);
|
||||
--ti-cascader-node-icon-font-size: var(--ti-common-font-size-0);
|
||||
// 下拉列表子项的icon图标的色
|
||||
--ti-cascader-node-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--ti-cascader-node-icon-color: var(--ti-common-color-icon-normal);
|
||||
// 下拉列表子项禁用时的icon图标的色
|
||||
--ti-cascader-node-disabled-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--ti-cascader-node-disabled-icon-color: var(--ti-common-color-text-link-darkbg-hover);
|
||||
// 下拉列表子项的选中时icon图标的色
|
||||
--ti-cascader-node-active-icon-color: var(--ti-common-color-icon-white, #fff);
|
||||
--ti-cascader-node-active-icon-color: var(--ti-common-color-primary-normal);
|
||||
// 下拉列表子项的前缀display
|
||||
--ti-cascader-node-prefix-display: 'inline-block';
|
||||
--ti-cascader-node-prefix-display: none;
|
||||
// 下拉列表子项的标签的垂直方向的内边距
|
||||
--ti-cascader-node-label-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉列表子项的标签的水平方向的内边距
|
||||
--ti-cascader-node-label-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
--ti-cascader-node-label-padding-horizontal: var(--ti-common-space-0);
|
||||
// 下拉列表子项的单选按钮右侧外边距
|
||||
--ti-cascader-node-radio-margin-right: var(--ti-common-space-base, 4px);
|
||||
// 下拉列表子项聚焦时的背景色
|
||||
--ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-bg-navigation);
|
||||
// 下拉列表子项icon距离右侧距离
|
||||
--ti-cascader-node-postfix-right: 10px;
|
||||
--ti-cascader-node-postfix-right: var(--ti-common-space-4x);
|
||||
// 下拉列表子项最大宽度
|
||||
--ti-cascader-node-label-max-width: 360px;
|
||||
--ti-cascader-node-label-max-width: calc(var(--ti-common-space-2) * 53 + 1px);
|
||||
// 下拉列表子项高亮时字重
|
||||
--ti-cascader-node-active-font-weight: normal;
|
||||
--ti-cascader-node-active-font-weight: var(--ti-common-font-weight-bold);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
export const tinyCascaderPanelOldTheme = {
|
||||
'ti-cascader-panel-node-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-cascader-panel-node-label-padding-left': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-cascader-panel-node-label-padding-right': 'calc(var(--ti-common-space-8x, 32px) - 2px)'
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export const tinyCascaderPanelSmbTheme = {
|
||||
'ti-cascader-panel-node-label-padding-left': '16px',
|
||||
'ti-cascader-panel-node-label-padding-right': '16px',
|
||||
'ti-cascader-panel-node-border-radius': '0px'
|
||||
}
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
// 下拉菜单面板中子项的垂直方向的外边距
|
||||
--ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单面板中子项的标签的右侧内边距
|
||||
--ti-cascader-panel-node-label-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px);
|
||||
--ti-cascader-panel-node-label-padding-right: 16px;
|
||||
// 下拉菜单面板中子项的标签的左侧内边距
|
||||
--ti-cascader-panel-node-label-padding-left: var(--ti-common-space-5x, 20px);
|
||||
--ti-cascader-panel-node-label-padding-left: 16px;
|
||||
// 下拉菜单面板中子项的边框圆角
|
||||
--ti-cascader-panel-node-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-cascader-panel-node-border-radius: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyCascaderOldTheme = {
|
||||
'ti-cascader-close-hover-icon-color': 'var(--ti-common-color-border-hover, #575d6c)',
|
||||
'ti-cascader-dropdown-margin-bottom': 'calc(var(--ti-common-space-6, 6px) - 1px)',
|
||||
'ti-cascader-dropdown-margin-top': 'calc(var(--ti-common-space-6, 6px) - 1px)',
|
||||
'ti-cascader-list-text-color': 'var(--ti-common-color-text-secondary, #575d6c)',
|
||||
'ti-cascader-border-radius': 'var(--ti-common-border-radius-1, 4px)'
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const tinyCascaderSmbTheme = {
|
||||
'ti-cascader-list-text-color': '#191919',
|
||||
'ti-cascader-close-hover-icon-color': '#191919',
|
||||
'ti-cascader-border-radius': '6px',
|
||||
'ti-cascader-dropdown-margin-top': '4px',
|
||||
'ti-cascader-dropdown-margin-bottom': '4px'
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
// 聚焦时显示的边框色
|
||||
--ti-cascader-focus-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 边框圆角
|
||||
--ti-cascader-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
--ti-cascader-border-radius: 6px;
|
||||
// icon图标色
|
||||
--ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal, #adb0b8);
|
||||
// medium尺寸时的字体大小
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
// 输入框标签的icon图标悬浮时显示的背景色
|
||||
--ti-cascader-tag-icon-hover-bg-color: var(--ti-common-color-icon-graybg-normal, #adb0b8);
|
||||
// 下拉列表的文本色（没有生效）
|
||||
--ti-cascader-list-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
--ti-cascader-list-text-color: #191919;
|
||||
// 下拉列表子项的高度（没有生效）
|
||||
--ti-cascader-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 下拉列表子项悬浮时的背景色（没有生效）
|
||||
|
|
@ -70,9 +70,9 @@
|
|||
// 下拉框的右侧侧外边距
|
||||
--ti-cascader-dropdown-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉框的顶部外边距
|
||||
--ti-cascader-dropdown-margin-top: calc(var(--ti-common-space-6, 6px) - 1px);
|
||||
--ti-cascader-dropdown-margin-top: 4px;
|
||||
// 下拉框的底部外边距
|
||||
--ti-cascader-dropdown-margin-bottom: calc(var(--ti-common-space-6, 6px) - 1px);
|
||||
--ti-cascader-dropdown-margin-bottom: 4px;
|
||||
// 输入框标签左侧外边距
|
||||
--ti-cascader-tag-margin-left: var(--ti-common-space-6, 6px);
|
||||
// 输入框标签右侧外边距
|
||||
|
|
@ -114,5 +114,5 @@
|
|||
// 搜索框的字体大小（没有生效）
|
||||
--ti-cascader-search-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 输入框关闭图标hover时的颜色
|
||||
--ti-cascader-close-hover-icon-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
--ti-cascader-close-hover-icon-color: #191919;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
export const tinyCheckboxButtonOldTheme = {
|
||||
'ti-checkbox-button-left-border-radius': '0',
|
||||
'ti-checkbox-button-right-border-radius': '0',
|
||||
'ti-checkbox-button-mini-last-right-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-checkbox-button-mini-last-left-border-radius': '0',
|
||||
'ti-checkbox-button-mini-right-border-radius': '0',
|
||||
'ti-checkbox-button-mini-left-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-checkbox-button-mini-padding-horizontal': '12px',
|
||||
'ti-checkbox-button-margin-top': '8px',
|
||||
'ti-checkbox-button-checked-display': 'none',
|
||||
'ti-checkbox-button-small-font-size': 'var(--ti-common-font-size-base)',
|
||||
'ti-checkbox-button-size-medium-height': '44px',
|
||||
'ti-checkbox-button-size-small-height': '30px',
|
||||
'ti-checkbox-button-size-small-padding-horizontal': '15px',
|
||||
'ti-checkbox-button-size-mini-border-radius': '0',
|
||||
'ti-checkbox-button-size-mini-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-checkbox-button-mini-margin-horizontal': '2px',
|
||||
'ti-checkbox-button-margin-horizontal': '2px',
|
||||
'ti-checkbox-button-height': '24px',
|
||||
'ti-checkbox-button-padding-vertical': '5px',
|
||||
'ti-checkbox-button-border-radius': '0',
|
||||
'ti-checkbox-button-border-color-hover': '#c2c2c2',
|
||||
'ti-checkbox-button-border-color': '#e9edfa',
|
||||
'ti-checkbox-button-bg-color-hover': 'var(--ti-common-color-bg-hover, #344899)',
|
||||
'ti-checkbox-button-disabled-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
|
||||
'ti-checkbox-button-checked-border-color': 'var(--ti-common-color-line-active, #5e7ce0)',
|
||||
'ti-checkbox-button-hover-text-color': 'var(--ti-common-color-text-white, #fff)',
|
||||
'ti-checkbox-shadow-color': '#dfe1e6',
|
||||
'ti-checkbox-button-bg-color': 'var(--ti-common-color-bg-light-normal, #e9edfa)'
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
export const tinyCheckboxButtonSmbTheme = {
|
||||
'ti-checkbox-button-bg-color': '#fff',
|
||||
'ti-checkbox-button-bg-color-hover': '#fff',
|
||||
'ti-checkbox-button-hover-text-color': '#1476FF',
|
||||
'ti-checkbox-button-border-color': '#C2C2C2',
|
||||
'ti-checkbox-button-border-color-hover': '#1476FF',
|
||||
'ti-checkbox-button-right-border-radius': '6px',
|
||||
'ti-checkbox-button-left-border-radius': '6px',
|
||||
'ti-checkbox-button-border-radius': '6px',
|
||||
'ti-checkbox-button-mini-padding-horizontal': '16px',
|
||||
'ti-checkbox-button-padding-vertical': '1px',
|
||||
'ti-checkbox-button-height': '24px',
|
||||
'ti-checkbox-button-margin-horizontal': '4px',
|
||||
'ti-checkbox-button-mini-margin-horizontal': '2px',
|
||||
'ti-checkbox-button-size-mini-font-size': 'var(--ti-common-font-size-0)',
|
||||
'ti-checkbox-button-size-mini-border-radius': '4px',
|
||||
'ti-checkbox-button-size-small-padding-horizontal': 'var(--ti-common-space-6x)',
|
||||
'ti-checkbox-button-size-small-height': '28px',
|
||||
'ti-checkbox-button-size-medium-height': '40px',
|
||||
'ti-checkbox-button-checked-display': 'block',
|
||||
'ti-checkbox-button-disabled-bg-color': 'rgba(0,0,0,0.05)',
|
||||
'ti-checkbox-button-checked-disabled-bg-color': 'rgba(0,0,0,0.05)',
|
||||
'ti-checkbox-button-checked-disabled-border-color': '#dbdbdb',
|
||||
'ti-checkbox-button-checked-disabled-text-color': '#C2C2C2',
|
||||
'ti-checkbox-button-margin-top': '8px',
|
||||
'ti-checkbox-button-mini-left-border-radius': '4px',
|
||||
'ti-checkbox-button-mini-right-border-radius': '4px',
|
||||
'ti-checkbox-button-mini-last-left-border-radius': '4px',
|
||||
'ti-checkbox-button-mini-last-right-border-radius': '4px',
|
||||
'ti-checkbox-button-checked-border-color': '#1476FF',
|
||||
'ti-checkbox-shadow-color': 'transparent',
|
||||
'ti-checkbox-button-small-font-size': 'var(--ti-common-font-size-0)'
|
||||
}
|
||||
|
|
@ -12,21 +12,21 @@
|
|||
|
||||
.component-css-vars-checkbox-button() {
|
||||
// 按钮形式复选框背景色
|
||||
--ti-checkbox-button-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
|
||||
--ti-checkbox-button-bg-color: #fff;
|
||||
// 按钮形式复选框选中项左边框阴影色(水平方向首个除外)
|
||||
--ti-checkbox-shadow-color: #dfe1e6;
|
||||
--ti-checkbox-shadow-color: transparent;
|
||||
// 按钮形式复选框字号
|
||||
--ti-checkbox-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 按钮形式复选框未选中项悬浮文本色
|
||||
--ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white, #fff);
|
||||
--ti-checkbox-button-hover-text-color: #1476FF;
|
||||
// 按钮形式选中项边框色
|
||||
--ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
--ti-checkbox-button-checked-border-color: #1476FF;
|
||||
// 按钮形式复选框禁用文本色
|
||||
--ti-checkbox-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 按钮形式复选框垂直布局，选中项禁用时的背景色
|
||||
--ti-checkbox-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 按钮形式复选框禁用背景色
|
||||
--ti-checkbox-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-checkbox-button-disabled-bg-color: rgba(0,0,0,0.05);
|
||||
// 按钮形式复选框未选中项文本色
|
||||
--ti-checkbox-button-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 按钮形式复选框选中项文本色
|
||||
|
|
@ -34,57 +34,57 @@
|
|||
// 按钮形式复选框选中项背景色
|
||||
--ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 按钮形式复选框悬浮背景色
|
||||
--ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover, #344899);
|
||||
--ti-checkbox-button-bg-color-hover: #fff;
|
||||
// 按钮形式复选框边框色
|
||||
--ti-checkbox-button-border-color: #e9edfa;
|
||||
--ti-checkbox-button-border-color: #C2C2C2;
|
||||
// 按钮形式复选框悬浮默认边框色
|
||||
--ti-checkbox-button-border-color-hover: #c2c2c2;
|
||||
--ti-checkbox-button-border-color-hover: #1476FF;
|
||||
// 按钮组按钮圆角
|
||||
--ti-checkbox-button-border-radius: 0;
|
||||
--ti-checkbox-button-border-radius: 6px;
|
||||
// 按钮组禁用边框色
|
||||
--ti-checkbox-disabled-border-color: #dbdbdb;
|
||||
// 按钮组小尺寸垂直间距、
|
||||
--ti-checkbox-button-padding-vertical: 5px;
|
||||
--ti-checkbox-button-padding-vertical: 1px;
|
||||
// 按钮组按钮高度
|
||||
--ti-checkbox-button-height: 24px;
|
||||
// 按钮组按钮外边距
|
||||
--ti-checkbox-button-margin-horizontal: 2px;
|
||||
--ti-checkbox-button-margin-horizontal: 4px;
|
||||
// 按钮组小按钮外边距
|
||||
--ti-checkbox-button-mini-margin-horizontal: 2px;
|
||||
// 按钮组小按钮字号
|
||||
--ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-0);
|
||||
// 按钮组小按钮圆角
|
||||
--ti-checkbox-button-size-mini-border-radius: 0;
|
||||
--ti-checkbox-button-size-mini-border-radius: 4px;
|
||||
// 按钮组small按钮内间距
|
||||
--ti-checkbox-button-size-small-padding-horizontal: 15px;
|
||||
--ti-checkbox-button-size-small-padding-horizontal: var(--ti-common-space-6x);
|
||||
// 按钮组small按钮高度
|
||||
--ti-checkbox-button-size-small-height: 30px;
|
||||
--ti-checkbox-button-size-small-height: 28px;
|
||||
//按钮组mini按钮高度
|
||||
--ti-checkbox-button-size-mini-height: 24px;
|
||||
//按钮组medium按钮高度
|
||||
--ti-checkbox-button-size-medium-height: 44px;
|
||||
--ti-checkbox-button-size-medium-height: 40px;
|
||||
// 按钮组medium按钮字体
|
||||
--ti-checkbox-button-medium-font-size: var(--ti-common-font-size-1);
|
||||
// 按钮组default按钮字体
|
||||
--ti-checkbox-button-default-font-size: var(--ti-common-font-size-1);
|
||||
// 按钮组small按钮字体
|
||||
--ti-checkbox-button-small-font-size: var(--ti-common-font-size-base);
|
||||
--ti-checkbox-button-small-font-size: var(--ti-common-font-size-0);
|
||||
// 按钮组按钮默认情况下选中隐藏
|
||||
--ti-checkbox-button-checked-display: none;
|
||||
--ti-checkbox-button-checked-display: block;
|
||||
// 按钮组按钮上边距
|
||||
--ti-checkbox-button-margin-top: 8px;
|
||||
// 小尺寸按钮组按钮内间距
|
||||
--ti-checkbox-button-mini-padding-horizontal: 12px;
|
||||
--ti-checkbox-button-mini-padding-horizontal: 16px;
|
||||
// 小尺寸按钮左侧圆角
|
||||
--ti-checkbox-button-mini-left-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-checkbox-button-mini-left-border-radius: 4px;
|
||||
// 小尺寸按钮右侧圆角
|
||||
--ti-checkbox-button-mini-right-border-radius: 0;
|
||||
--ti-checkbox-button-mini-right-border-radius: 4px;
|
||||
// 小尺寸按钮组最后一个按钮顶部左侧圆角
|
||||
--ti-checkbox-button-mini-last-left-border-radius: 0;
|
||||
--ti-checkbox-button-mini-last-left-border-radius: 4px;
|
||||
// 小尺寸按钮组最后一个按钮右侧圆角
|
||||
--ti-checkbox-button-mini-last-right-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-checkbox-button-mini-last-right-border-radius: 4px;
|
||||
// 默认按钮组右侧按钮圆角
|
||||
--ti-checkbox-button-right-border-radius: 0;
|
||||
--ti-checkbox-button-right-border-radius: 6px;
|
||||
// 默认按钮组第一个按钮左侧按钮圆角
|
||||
--ti-checkbox-button-left-border-radius: 0;
|
||||
--ti-checkbox-button-left-border-radius: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
export const tinyCheckboxGroupOldTheme = {
|
||||
'ti-checkbox-group-last-child-border-radius': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-checkbox-group-1st-child-border-radius': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-checkbox-group-flex-wrap': 'wrap',
|
||||
'ti-checkbox-group-margin-bottom': 'var(--ti-common-space-2x, 8px)'
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export const tinyCheckboxGroupSmbTheme = {
|
||||
'ti-checkbox-group-margin-bottom': '16px',
|
||||
'ti-checkbox-group-flex-wrap': 'wrap',
|
||||
'ti-checkbox-group-1st-child-border-radius': '6px',
|
||||
'ti-checkbox-group-last-child-border-radius': '6px'
|
||||
}
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
|
||||
.component-css-vars-checkbox-group() {
|
||||
// 垂直复选框和行间距(hide)
|
||||
--ti-checkbox-group-margin-bottom: var(--ti-common-space-2x, 8px);
|
||||
--ti-checkbox-group-margin-bottom: 16px;
|
||||
// 默认换行
|
||||
--ti-checkbox-group-flex-wrap: wrap;
|
||||
// 按钮组按钮外边距
|
||||
--ti-checkbox-group-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 垂直按钮组第一个子元素边框圆角
|
||||
--ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0, 0px);
|
||||
--ti-checkbox-group-1st-child-border-radius: 6px;
|
||||
// 垂直按钮组最后一个子元素边框圆角
|
||||
--ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0, 0px);
|
||||
--ti-checkbox-group-last-child-border-radius: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
export const tinyCheckboxOldTheme = {
|
||||
'ti-checkbox-label-margin-right': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-checkbox-checkline-width': 'var(--ti-common-border-weight-1, 2px)',
|
||||
'ti-checkbox-outline-border-radius': 'var(--ti-common-border-radius-2)',
|
||||
'ti-checkbox-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-checkbox-border-color-checked-disabled': 'var(--ti-common-color-line-disabled, #dfe1e6)',
|
||||
'ti-checkbox-bg-color-checked-disabled': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
|
||||
'ti-checkbox-label-text-color-disabled': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-checkbox-icon-color-disabled': 'var(--ti-common-color-text-disabled, #adb0b8)',
|
||||
'ti-checkbox-bg-color-disable': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
|
||||
'ti-checkbox-icon-margin-top': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-checkbox-icon-margin-left': 'var(--ti-common-space-base, 4px)',
|
||||
'ti-checkbox-border-color-hover-checked': 'var(--ti-common-color-bg-hover, #344899)',
|
||||
'ti-checkbox-bg-color-hover-checked': 'var(--ti-common-color-bg-hover, #344899)',
|
||||
'ti-checkbox-border-color': 'var(--ti-common-color-line-normal, #adb0b8)',
|
||||
'ti-checkbox-border-color-checked': 'var(--ti-common-color-line-active, #5e7ce0)',
|
||||
'ti-checkbox-bg-color-checked': 'var(--ti-common-color-bg-emphasize, #5e7ce0)'
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
export const tinyCheckboxSmbTheme = {
|
||||
'ti-checkbox-border-radius': 'var(--ti-common-border-radius-2)',
|
||||
'ti-checkbox-outline-border-radius': 'var(--ti-common-border-radius-3)',
|
||||
'ti-checkbox-label-text-color-disabled': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-checkbox-bg-color-disable': 'var(--ti-common-color-bg-disabled)',
|
||||
'ti-checkbox-icon-color-disabled': '#fff',
|
||||
'ti-checkbox-bg-color-checked-disabled': '#dbdbdb',
|
||||
'ti-checkbox-border-color-checked-disabled': '#dbdbdb',
|
||||
'ti-checkbox-checkline-width': 'var(--ti-common-border-weight-normal)',
|
||||
'ti-checkbox-label-margin-right': 'var(--ti-common-space-6x)',
|
||||
'ti-checkbox-icon-margin-top': '1px',
|
||||
'ti-checkbox-icon-margin-left': '4.5px',
|
||||
'ti-checkbox-button-checked-bg-color': '#FFFFFF',
|
||||
'ti-checkbox-button-checked-text-color': '#1476FF',
|
||||
'ti-checkbox-button-text-color': '#595959',
|
||||
'ti-checkbox-button-bg-color-hover': '#FFFFFF',
|
||||
'ti-checkbox-button-hover-text-color': '#191919',
|
||||
'ti-checkbox-bg-color-checked': '#1476ff',
|
||||
'ti-checkbox-border-color-checked': '#1476FF',
|
||||
'ti-checkbox-bg-color-hover-checked': '#1476FF',
|
||||
'ti-checkbox-border-color-hover-checked': 'var(--ti-common-color-prompt)',
|
||||
'ti-checkbox-border-color': 'var(--ti-common-color-line-normal)'
|
||||
}
|
||||
|
|
@ -26,16 +26,16 @@
|
|||
// 默认复选框未选中项背景色
|
||||
--ti-checkbox-bg-color: var(--ti-common-color-transparent, transparent);
|
||||
// 默认复选框选中项背景色
|
||||
--ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
--ti-checkbox-bg-color-checked: #1476ff;
|
||||
// 默认复选框选中项边框色
|
||||
--ti-checkbox-border-color-checked: var(--ti-common-color-line-active, #5e7ce0);
|
||||
--ti-checkbox-border-color-checked: #1476FF;
|
||||
// 默认复选框未选中项边框色
|
||||
--ti-checkbox-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
--ti-checkbox-border-color: var(--ti-common-color-line-normal);
|
||||
|
||||
// 默认复选框选中项悬浮背景色 +
|
||||
--ti-checkbox-bg-color-hover-checked: var(--ti-common-color-bg-hover, #344899);
|
||||
--ti-checkbox-bg-color-hover-checked: #1476FF;
|
||||
// 默认复选框选中项悬浮边框色 +
|
||||
--ti-checkbox-border-color-hover-checked: var(--ti-common-color-bg-hover, #344899);
|
||||
--ti-checkbox-border-color-hover-checked: var(--ti-common-color-prompt);
|
||||
|
||||
// 默认复选框未选中项悬浮边框色
|
||||
--ti-checkbox-border-color-hover: var(--ti-common-color-line-active, #5e7ce0);
|
||||
|
|
@ -54,29 +54,29 @@
|
|||
// 默认复选框选中项图标宽度
|
||||
--ti-checkbox-icon-width: var(--ti-common-size-base, 4px);
|
||||
// 默认复选框对勾的左边距
|
||||
--ti-checkbox-icon-margin-left: var(--ti-common-space-base, 4px);
|
||||
--ti-checkbox-icon-margin-left: 4.5px;
|
||||
// 默认复选框对勾的顶边距
|
||||
--ti-checkbox-icon-margin-top: var(--ti-common-space-0, 0px);
|
||||
--ti-checkbox-icon-margin-top: 1px;
|
||||
// 默认复选框禁用时，未选中时背景色
|
||||
--ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled);
|
||||
// 默认复选框禁用时，选中项对勾颜色以及半选时中间方框颜色
|
||||
--ti-checkbox-icon-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-checkbox-icon-color-disabled: #fff;
|
||||
// 默认复选框未选中项禁用边框色
|
||||
--ti-checkbox-border-color-unchecked-disabled: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 默认复选框禁用时，label文本色
|
||||
--ti-checkbox-label-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-checkbox-label-text-color-disabled: var(--ti-common-color-text-disabled);
|
||||
// 默认复选框禁用时，选中项背景颜色
|
||||
--ti-checkbox-bg-color-checked-disabled: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-checkbox-bg-color-checked-disabled: #dbdbdb;
|
||||
// 默认复选框禁用时，选中项边框颜色
|
||||
--ti-checkbox-border-color-checked-disabled: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
--ti-checkbox-border-color-checked-disabled: #dbdbdb;
|
||||
|
||||
// 默认复选框边框圆角
|
||||
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-checkbox-border-radius: var(--ti-common-border-radius-2);
|
||||
// 默认复选框外边框圆角
|
||||
--ti-checkbox-outline-border-radius: var(--ti-common-border-radius-2);
|
||||
--ti-checkbox-outline-border-radius: var(--ti-common-border-radius-3);
|
||||
// 默认复选框边框圆角
|
||||
--ti-checkbox-checkline-width: var(--ti-common-border-weight-1, 2px);
|
||||
--ti-checkbox-checkline-width: var(--ti-common-border-weight-normal);
|
||||
|
||||
// 默认复选框的右侧外边距
|
||||
--ti-checkbox-label-margin-right: var(--ti-common-space-5x, 20px);
|
||||
--ti-checkbox-label-margin-right: var(--ti-common-space-6x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
export const tinyCollapseItemOldTheme = {
|
||||
'ti-collapse-item-title-right-fill': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-collapse-item-title-right-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-collapse-item-content-padding-bottom': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-collapse-item-content-padding-right': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-collapse-item-content-padding-left': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-collapse-item-content-padding-top': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-collapse-item-content-border-color-top': 'var(--ti-collapse-item-border-color)',
|
||||
'ti-collapse-item-content-border-color': 'var(--ti-common-color-transparent, transparent)',
|
||||
'ti-collapse-item-header-border-color-right': 'var(--ti-collapse-item-header-border-color)',
|
||||
'ti-collapse-item-header-border-color-left': 'var(--ti-collapse-item-header-border-color)',
|
||||
'ti-collapse-item-header-border-color': 'var(--ti-common-color-transparent, transparent)',
|
||||
'ti-collapse-item-header-bg-color': 'var(--ti-common-color-bg-white-emphasize, #f2f5fc)',
|
||||
'ti-collapse-item-header-padding-horizontal': 'var(--ti-common-space-4x, 16px)',
|
||||
'ti-collapse-item-header-padding-vertical': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-collapse-item-arrow-hover-text-color': 'var(--ti-common-color-info, #252b3a)',
|
||||
'ti-collapse-item-arrow-margin-right': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-collapse-item-wrap-bg-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-collapse-item-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-collapse-item-header-min-height': 'var(--ti-common-size-8x, 32px)',
|
||||
'ti-collapse-item-margin-top': 'var(--ti-common-space-2x, 8px)',
|
||||
'ti-collapse-item-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-collapse-item-border-length': 'var(--ti-common-border-weight-normal, 1px)',
|
||||
'ti-collapse-item-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)'
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
export const tinyCollapseItemSmbTheme = {
|
||||
'ti-collapse-item-border-radius': '0',
|
||||
'ti-collapse-item-header-padding-vertical': 'var(--ti-common-size-3x)',
|
||||
'ti-collapse-item-header-padding-horizontal': 'var(--ti-common-space-5x)',
|
||||
'ti-collapse-item-header-min-height': 'var(--ti-common-size-height-medium)',
|
||||
'ti-collapse-item-icon-color': '#808080',
|
||||
'ti-collapse-item-border-color': 'transparent',
|
||||
'ti-collapse-item-content-border-color': 'var(--ti-common-color-light)',
|
||||
'ti-collapse-item-content-border-color-top': 'var(--ti-common-color-light)',
|
||||
'ti-collapse-item-border-length': 'var(--ti-common-border-radius-0)',
|
||||
'ti-collapse-item-content-padding-top': 'var(--ti-common-space-6x)',
|
||||
'ti-collapse-item-content-padding-right': 'var(--ti-common-space-5x)',
|
||||
'ti-collapse-item-content-padding-bottom': 'var(--ti-common-space-6x)',
|
||||
'ti-collapse-item-content-padding-left': 'var(--ti-common-space-5x)',
|
||||
'ti-collapse-item-arrow-hover-text-color': 'var(--ti-base-color-brand)',
|
||||
'ti-collapse-item-header-border-color': 'var(--ti-base-color-common-5)',
|
||||
'ti-collapse-item-title-right-color': '#1476ff',
|
||||
'ti-collapse-item-title-right-fill': '#1476ff',
|
||||
'ti-collapse-item-header-bg-color': 'var(--ti-common-color-bg-white-normal)',
|
||||
'ti-collapse-item-wrap-bg-color': 'var(--ti-common-bg-minor)',
|
||||
'ti-collapse-item-header-border-color-left': 'var(--ti-common-color-light)',
|
||||
'ti-collapse-item-header-border-color-right': 'var(--ti-common-color-light)',
|
||||
'ti-collapse-item-margin-top': 'calc(var(--ti-common-space-0) - 2px )',
|
||||
'ti-collapse-item-arrow-margin-right': 'var(--ti-common-space-3x)'
|
||||
}
|
||||
|
|
@ -16,9 +16,9 @@
|
|||
// 面板背景色
|
||||
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 面板边框色
|
||||
--ti-collapse-item-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-collapse-item-border-color: transparent;
|
||||
// 面板边大小
|
||||
--ti-collapse-item-border-length: var(--ti-common-border-weight-normal, 1px);
|
||||
--ti-collapse-item-border-length: var(--ti-common-border-radius-0);
|
||||
// 面板左边框色
|
||||
--ti-collapse-item-border-color-left: var(--ti-collapse-item-border-color);
|
||||
// 面板右边框色
|
||||
|
|
@ -32,15 +32,15 @@
|
|||
// 面板禁用时上边框色
|
||||
--ti-collapse-item-disabled-border-color-top: var(--ti-collapse-item-border-color);
|
||||
// 面板圆角
|
||||
--ti-collapse-item-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-collapse-item-border-radius: 0;
|
||||
// 面板顶部外边距
|
||||
--ti-collapse-item-margin-top: var(--ti-common-space-2x, 8px);
|
||||
--ti-collapse-item-margin-top: calc(var(--ti-common-space-0) - 2px );
|
||||
// 面板头部最小高度
|
||||
--ti-collapse-item-header-min-height: var(--ti-common-size-8x, 32px);
|
||||
--ti-collapse-item-header-min-height: var(--ti-common-size-height-medium);
|
||||
// 面板头部向下箭头图标色
|
||||
--ti-collapse-item-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--ti-collapse-item-icon-color: #808080;
|
||||
// 面板内容背景色
|
||||
--ti-collapse-item-wrap-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-collapse-item-wrap-bg-color: var(--ti-common-bg-minor);
|
||||
// 面板禁用文本色
|
||||
--ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 面板禁用背景色
|
||||
|
|
@ -54,9 +54,9 @@
|
|||
// 面板头部箭头尺寸(hide)
|
||||
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 面板头部箭头右外边距
|
||||
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x, 12px);
|
||||
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x);
|
||||
// 面板头部向上箭头图标色|箭头悬浮色
|
||||
--ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info, #252b3a);
|
||||
--ti-collapse-item-arrow-hover-text-color: var(--ti-base-color-brand);
|
||||
// 面板头部箭头尺寸
|
||||
--ti-collapse-item-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 面板头部箭头旋转角度
|
||||
|
|
@ -66,37 +66,37 @@
|
|||
// 面板展开头部箭头图标色
|
||||
--ti-collapse-item-is-active-arrow-text-color: var(--ti-collapse-item-icon-color);
|
||||
// 面板头部垂直内边距
|
||||
--ti-collapse-item-header-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
--ti-collapse-item-header-padding-vertical: var(--ti-common-size-3x);
|
||||
// 面板头部水平内边距
|
||||
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-5x);
|
||||
// 面板头部背景色
|
||||
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
// 面板头部边框色
|
||||
--ti-collapse-item-header-border-color: var(--ti-common-color-transparent, transparent);
|
||||
--ti-collapse-item-header-border-color: var(--ti-base-color-common-5);
|
||||
// 面板头部左边框色
|
||||
--ti-collapse-item-header-border-color-left: var(--ti-collapse-item-header-border-color);
|
||||
--ti-collapse-item-header-border-color-left: var(--ti-common-color-light);
|
||||
// 面板头部右边框色
|
||||
--ti-collapse-item-header-border-color-right: var(--ti-collapse-item-header-border-color);
|
||||
--ti-collapse-item-header-border-color-right: var(--ti-common-color-light);
|
||||
// 面板内容边框色
|
||||
--ti-collapse-item-content-border-color: var(--ti-common-color-transparent, transparent);
|
||||
--ti-collapse-item-content-border-color: var(--ti-common-color-light);
|
||||
// 面板内容左边框色
|
||||
--ti-collapse-item-content-border-color-left: var(--ti-collapse-item-content-border-color);
|
||||
// 面板内容右边框色
|
||||
--ti-collapse-item-content-border-color-right: var(--ti-collapse-item-content-border-color);
|
||||
// 面板内容顶部边框色
|
||||
--ti-collapse-item-content-border-color-top: var(--ti-collapse-item-border-color);
|
||||
--ti-collapse-item-content-border-color-top: var(--ti-common-color-light);
|
||||
// 面板内容顶部内边距
|
||||
--ti-collapse-item-content-padding-top: var(--ti-common-space-3x, 12px);
|
||||
--ti-collapse-item-content-padding-top: var(--ti-common-space-6x);
|
||||
// 面板内容左内边距
|
||||
--ti-collapse-item-content-padding-left: var(--ti-common-space-4x, 16px);
|
||||
--ti-collapse-item-content-padding-left: var(--ti-common-space-5x);
|
||||
// 面板内容右内边距
|
||||
--ti-collapse-item-content-padding-right: var(--ti-common-space-4x, 16px);
|
||||
--ti-collapse-item-content-padding-right: var(--ti-common-space-5x);
|
||||
// 面板内容底部内边距
|
||||
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-6x);
|
||||
// 面板内容字号
|
||||
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 面板右侧标题颜色
|
||||
--ti-collapse-item-title-right-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-collapse-item-title-right-color: #1476ff;
|
||||
// 面板右侧图标颜色
|
||||
--ti-collapse-item-title-right-fill: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-collapse-item-title-right-fill: #1476ff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export const tinyColorSelectPanelSmbTheme = {
|
||||
'ti-color-select-panel-border-radius-xs': 'var(--ti-common-border-radius-4)',
|
||||
'ti-color-select-panel-border-radius-sm': 'var(--ti-common-border-radius-2)',
|
||||
'ti-color-select-panel-tools-line-height': 'var(--ti-common-size-height-medium)',
|
||||
'ti-color-select-panel-btn-margin': '8px',
|
||||
export const tinyColorSelectPanelOldTheme = {
|
||||
'ti-color-select-panel-collapse-color': 'var(--ti-common-color-primary-normal)',
|
||||
'ti-color-select-panel-btn-border-hover-color': 'var(--ti-common-color-border-hover)'
|
||||
'ti-color-select-panel-btn-margin': '9px',
|
||||
'ti-color-select-panel-tools-line-height': 'var(--ti-common-size-height-large)',
|
||||
'ti-color-select-panel-btn-border-hover-color': 'var(--ti-common-color-border-hover)',
|
||||
'ti-color-select-panel-border-radius-sm': 'var(--ti-common-border-radius-1, 4px)',
|
||||
'ti-color-select-panel-border-radius-xs': 'var(--ti-common-border-radius-normal, 2px)'
|
||||
}
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
// 弹出框边框厚度(hide)
|
||||
--ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 弹出框右侧色调框圆角
|
||||
--ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-4);
|
||||
// 历史记录展开框颜色块圆角
|
||||
--ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-1, 4px);
|
||||
--ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-2);
|
||||
// 无用(hide)
|
||||
--ti-color-select-panel-border-radius: var(--ti-common-border-radius-2, 8px);
|
||||
// 弹出框各元素快间隙(hide)
|
||||
|
|
@ -30,9 +30,9 @@
|
|||
// 弹窗按钮悬浮颜色
|
||||
--ti-color-select-panel-btn-border-hover-color: var(--ti-common-color-border-hover);
|
||||
// 颜色工具栏高度
|
||||
--ti-color-select-panel-tools-line-height: var(--ti-common-size-height-large);
|
||||
--ti-color-select-panel-tools-line-height: var(--ti-common-size-height-medium);
|
||||
// 弹窗按钮外边距
|
||||
--ti-color-select-panel-btn-margin: 9px;
|
||||
--ti-color-select-panel-btn-margin: 8px;
|
||||
// 弹窗折叠字体颜色
|
||||
--ti-color-select-panel-collapse-color: var(--ti-common-color-primary-normal);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
export const tinyDatePanelOldTheme = {
|
||||
'ti-picker-panel-link-btn-hover-border-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-picker-panel-link-btn-hover-bg-color': 'var(--ti-common-color-primary-hover, #7693f5)',
|
||||
'ti-picker-panel-link-btn-border-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-picker-panel-link-btn-text-color': 'var(--ti-common-color-light, #fff)',
|
||||
'ti-picker-panel-link-btn-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-picker-panel-footer-padding-verticals': 'var(--ti-common-space-6)',
|
||||
'ti-picker-panel-svg-fill': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-picker-panel-icon-btn-line-height': '30px',
|
||||
'ti-picker-panel-content-padding-right': '0',
|
||||
'ti-picker-panel-content-padding-left': '0',
|
||||
'ti-picker-panel-content-padding-top': '0',
|
||||
'ti-picker-panel-content-border-color': 'transparent',
|
||||
'ti-picker-panel-font-size': 'var(--ti-common-font-size-base, 12px)'
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
export const tinyDatePanelSmbTheme = {
|
||||
'ti-picker-panel-content-border-color': 'var(--ti-base-color-common-5, #f0f0f0)',
|
||||
'ti-picker-panel-content-padding-top': '12px',
|
||||
'ti-picker-panel-content-padding-left': '16px',
|
||||
'ti-picker-panel-content-padding-right': '16px',
|
||||
'ti-picker-panel-icon-btn-line-height': '20px',
|
||||
'ti-picker-panel-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-picker-panel-svg-fill': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-picker-panel-svg-hover-fill': 'var(--ti-common-color-text-primary)',
|
||||
'ti-picker-panel-footer-padding-verticals': '16px',
|
||||
'ti-picker-panel-link-btn-bg-color': 'var(--ti-common-color-bg-minor)',
|
||||
'ti-picker-panel-link-btn-hover-bg-color': 'var(--ti-common-color-bg-minor-hover)',
|
||||
'ti-picker-panel-link-btn-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-picker-panel-link-btn-border-color': 'var(--ti-common-color-bg-primary-hover)',
|
||||
'ti-picker-panel-link-btn-hover-border-color': 'var(--ti-common-color-line-normal)'
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
--ti-picker-panel-icon-color-btn-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
--ti-picker-panel-icon-color-btn-disabled: var(--ti-common-color-icon-disabled, #adb0b8);
|
||||
--ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
|
||||
--ti-picker-panel-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-picker-panel-font-size: var(--ti-common-font-size-2);
|
||||
--ti-picker-panel-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-picker-panel-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-picker-panel-selected-bg-color: #f2f2f3;
|
||||
|
|
@ -25,24 +25,24 @@
|
|||
--ti-picker-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-picker-panel-content-border-color: transparent;
|
||||
--ti-picker-panel-content-padding-top: 0;
|
||||
--ti-picker-panel-content-padding-left: 0;
|
||||
--ti-picker-panel-content-padding-right: 0;
|
||||
--ti-picker-panel-icon-btn-line-height: 30px;
|
||||
--ti-picker-panel-content-border-color: var(--ti-base-color-common-5, #f0f0f0);
|
||||
--ti-picker-panel-content-padding-top: 12px;
|
||||
--ti-picker-panel-content-padding-left: 16px;
|
||||
--ti-picker-panel-content-padding-right: 16px;
|
||||
--ti-picker-panel-icon-btn-line-height: 20px;
|
||||
--ti--picker-panel-footer-padding-verticals: 6px;
|
||||
// 无用(hide)
|
||||
--ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 无用(hide)
|
||||
--ti-picker-panel-shortcut-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// svg
|
||||
--ti-picker-panel-svg-fill: var(--ti-common-color-icon-normal);
|
||||
--ti-picker-panel-svg-fill: var(--ti-common-color-text-weaken);
|
||||
--ti--picker-panel-svg-hover-fill: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// footer btn
|
||||
--ti-picker-panel-footer-padding-verticals: var(--ti-common-space-6);
|
||||
--ti-picker-panel-link-btn-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-picker-panel-link-btn-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-picker-panel-link-btn-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
--ti-picker-panel-link-btn-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-picker-panel-link-btn-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
--ti-picker-panel-footer-padding-verticals: 16px;
|
||||
--ti-picker-panel-link-btn-bg-color: var(--ti-common-color-bg-minor);
|
||||
--ti-picker-panel-link-btn-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-picker-panel-link-btn-border-color: var(--ti-common-color-bg-primary-hover);
|
||||
--ti-picker-panel-link-btn-hover-bg-color: var(--ti-common-color-bg-minor-hover);
|
||||
--ti-picker-panel-link-btn-hover-border-color: var(--ti-common-color-line-normal);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyDatePickerOldTheme = {
|
||||
'ti-date-picker-header-margin-horizontals': 'var(--ti-common-space-3x)',
|
||||
'ti-date-picker-header-line-height': '32px',
|
||||
'ti-date-picker-header-label-hover-text-color': 'var(--ti-base-color-brand-7, #526ecc)',
|
||||
'ti-date-picker-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
|
||||
'ti-date-picker-width': '280px'
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const tinyDatePickerSmbTheme = {
|
||||
'ti-date-picker-width': '284px',
|
||||
'ti-date-picker-header-line-height': '20px',
|
||||
'ti-date-picker-header-label-hover-text-color': 'var(--ti-base-color-brand-2)',
|
||||
'ti-date-picker-border-color': 'transparent',
|
||||
'ti-date-picker-header-margin-horizontals': 'var(--ti-common-space-4x)'
|
||||
}
|
||||
|
|
@ -11,12 +11,12 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-date-picker() {
|
||||
--ti-date-picker-width: 280px;
|
||||
--ti-date-picker-width: 284px;
|
||||
--ti-date-picker-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-date-picker-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-date-picker-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-date-picker-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-date-picker-border-color: transparent;
|
||||
--ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
--ti-date-picker-current-border-radius: 0;
|
||||
--ti-date-picker-range-bg-color: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7, #526ecc);
|
||||
--ti-date-picker-header-line-height: 32px;
|
||||
--ti-date-picker-header-margin-horizontals: var(--ti-common-space-3x);
|
||||
--ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-picker-header-line-height: 20px;
|
||||
--ti-date-picker-header-margin-horizontals: var(--ti-common-space-4x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
export const tinyDateRangeOldTheme = {
|
||||
'ti-date-range-picker-header-margin-bottom': 'unset',
|
||||
'ti-date-range-picker-header-line-height': 'var(--ti-common-line-height-3)',
|
||||
'ti-date-range-picker-header-height': 'var(--ti-common-line-height-3)'
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const tinyDateRangeSmbTheme = {
|
||||
'ti-date-range-picker-header-height': 'calc(var(--ti-common-size-height-normal) + 2px)',
|
||||
'ti-date-range-picker-header-line-height': 'var(--ti-common-line-height-1)',
|
||||
'ti-date-range-picker-header-margin-bottom': 'var(--ti-common-space-3x)'
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-date-range-picker-time-header-icon-color: #303133;
|
||||
// header 高度
|
||||
--ti-date-range-picker-header-height: var(--ti-common-line-height-3);
|
||||
--ti-date-range-picker-header-line-height: var(--ti-common-line-height-3);
|
||||
--ti-date-range-picker-header-margin-bottom: unset;
|
||||
--ti-date-range-picker-header-height: calc(var(--ti-common-size-height-normal) + 2px);
|
||||
--ti-date-range-picker-header-line-height: var(--ti-common-line-height-1);
|
||||
--ti-date-range-picker-header-margin-bottom: var(--ti-common-space-3x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
export const tinyDateTableOldTheme = {
|
||||
'ti-date-table-week-height': 'var(--ti-common-size-height-normal)',
|
||||
'ti-date-table-td-row-disabled-border-radius': '0',
|
||||
'ti-date-table-td-disabled-border-radius': '0',
|
||||
'ti-date-table-tr-line-height': '32px',
|
||||
'ti-date-table-cell-selected-border-radius': '0',
|
||||
'ti-date-table-start-date-border-radius': '0',
|
||||
'ti-date-table-td-span-top': '5px',
|
||||
'ti-date-table-td-div-width': '36px',
|
||||
'ti-date-table-td-div-height': '24px',
|
||||
'ti-date-table-td-today-circle-border-width': '0',
|
||||
'ti-date-table-td-today-circle-border-color': 'transparent',
|
||||
'ti-date-table-td-today-border-radius': '0',
|
||||
'ti-date-table-td-today-height': '24px',
|
||||
'ti-date-table-td-today-width': '36px',
|
||||
'ti-date-table-border-radius-current-select': '0',
|
||||
'ti-date-table-bg-color-current-select': 'var(--ti-base-color-brand-6, #5e7ce0)',
|
||||
'ti-date-table-range-hover-bg-color': 'var(--ti-base-color-brand-2, #e9edfa)',
|
||||
'ti-date-table-range-bg-color': 'var(--ti-base-color-brand-2, #e9edfa)',
|
||||
'ti-date-table-hover-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)',
|
||||
'ti-date-table-week-bg-color-current-hover': 'var(--ti-base-color-brand-3, #beccfa)',
|
||||
'ti-date-table-week-bg-color-current-select': 'var(--ti-base-color-brand-2, #e9edfa)',
|
||||
'ti-date-table-td-today-border-color': 'var(--ti-base-color-brand-6, #5e7ce0)',
|
||||
'ti-date-table-td-border-radius': '0',
|
||||
'ti-date-table-td-span-height': '24px',
|
||||
'ti-date-table-td-span-width': '36px'
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
export const tinyDateTableSmbTheme = {
|
||||
'ti-date-table-border-radius-current-select': '14px',
|
||||
'ti-date-table-td-span-width': '28px',
|
||||
'ti-date-table-td-span-height': '28px',
|
||||
'ti-date-table-bg-color-current-select': 'var(--ti-base-color-brand-2)',
|
||||
'ti-date-table-week-bg-color-current-select': 'var(--ti-base-color-brand-8)',
|
||||
'ti-date-table-week-bg-color-current-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-date-table-td-today-width': 'calc(var(--ti-common-size-width-mini) + 4px)',
|
||||
'ti-date-table-td-today-height': 'calc(var(--ti-common-size-height-mini) + 4px)',
|
||||
'ti-date-table-td-today-border-radius': '13px',
|
||||
'ti-date-table-td-today-circle-border-color': 'var(--ti-base-color-brand)',
|
||||
'ti-date-table-td-today-circle-border-width': '1px',
|
||||
'ti-date-table-hover-bg-color': 'var(--ti-base-color-brand-8)',
|
||||
|
||||
'ti-date-table-range-bg-color': 'var(--ti-base-color-brand-8)',
|
||||
'ti-date-table-td-div-height': '28px',
|
||||
'ti-date-table-td-div-width': '28px',
|
||||
'ti-date-table-range-hover-bg-color': 'var(--ti-base-color-brand-8)',
|
||||
'ti-date-table-td-border-radius': '14px',
|
||||
'ti-date-table-td-span-top': '3px',
|
||||
'ti-date-table-start-date-border-radius': '14px',
|
||||
'ti-date-table-td-today-border-color': 'transparent',
|
||||
'ti-date-table-cell-selected-border-radius': '14px',
|
||||
'ti-date-table-week-height': 'var(--ti-common-size-height-normal)',
|
||||
'ti-date-table-tr-line-height': 'var(--ti-common-line-height-1)',
|
||||
'ti-date-table-td-disabled-border-radius': '50%',
|
||||
'ti-date-table-td-row-disabled-border-radius': 'unset'
|
||||
}
|
||||
|
|
@ -15,41 +15,41 @@
|
|||
--ti-date-table-td-height: 34px;
|
||||
--ti-date-table-td-padding-vertical: 4px;
|
||||
--ti-date-table-td-padding-horizontal: 0;
|
||||
--ti-date-table-td-span-width: 36px;
|
||||
--ti-date-table-td-span-height: 24px;
|
||||
--ti-date-table-td-span-width: 28px;
|
||||
--ti-date-table-td-span-height: 28px;
|
||||
--ti-date-table-th-text-color: var(--ti-base-color-common-2, #adb0b8);
|
||||
--ti-date-table-td-border-radius: 0;
|
||||
--ti-date-table-td-border-radius: 14px;
|
||||
--ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2, #adb0b8);
|
||||
// 选中日期文本色
|
||||
--ti-date-table-td-normal-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-date-table-td-range-bg-color: #f2f6fc;
|
||||
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-date-table-td-today-border-color: transparent;
|
||||
--ti-date-table-td-today-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-date-table-week-bg-color-current-select: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-table-week-bg-color-current-hover: var(--ti-base-color-brand-3, #beccfa);
|
||||
--ti-date-table-week-bg-color-current-select: var(--ti-base-color-brand-8);
|
||||
--ti-date-table-week-bg-color-current-hover: var(--ti-base-color-brand-8);
|
||||
--ti-date-table-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-date-table-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-date-table-hover-bg-color: var(--ti-base-color-brand-8);
|
||||
--ti-date-table-current-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-date-table-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-date-table-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
--ti-date-table-range-bg-color: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa);
|
||||
--ti-date-table-bg-color-current-select: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-date-table-range-bg-color: var(--ti-base-color-brand-8);
|
||||
--ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-8);
|
||||
--ti-date-table-bg-color-current-select: var(--ti-base-color-brand-2);
|
||||
--ti-date-table-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-date-table-border-radius-current-select: 0;
|
||||
--ti-date-table-td-today-width: 36px;
|
||||
--ti-date-table-td-today-height: 24px;
|
||||
--ti-date-table-td-today-border-radius: 0;
|
||||
--ti-date-table-td-today-circle-border-color: transparent;
|
||||
--ti-date-table-td-today-circle-border-width: 0;
|
||||
--ti-date-table-border-radius-current-select: 14px;
|
||||
--ti-date-table-td-today-width: calc(var(--ti-common-size-width-mini) + 4px);
|
||||
--ti-date-table-td-today-height: calc(var(--ti-common-size-height-mini) + 4px);
|
||||
--ti-date-table-td-today-border-radius: 13px;
|
||||
--ti-date-table-td-today-circle-border-color: var(--ti-base-color-brand);
|
||||
--ti-date-table-td-today-circle-border-width: 1px;
|
||||
|
||||
--ti-date-table-td-div-height: 24px;
|
||||
--ti-date-table-td-div-width: 36px;
|
||||
--ti-date-table-td-span-top: 5px;
|
||||
--ti-date-table-start-date-border-radius: 0;
|
||||
--ti-date-table-cell-selected-border-radius: 0;
|
||||
--ti-date-table-tr-line-height: 32px;
|
||||
--ti-date-table-td-disabled-border-radius: 0;
|
||||
--ti-date-table-td-row-disabled-border-radius: 0;
|
||||
--ti-date-table-td-div-height: 28px;
|
||||
--ti-date-table-td-div-width: 28px;
|
||||
--ti-date-table-td-span-top: 3px;
|
||||
--ti-date-table-start-date-border-radius: 14px;
|
||||
--ti-date-table-cell-selected-border-radius: 14px;
|
||||
--ti-date-table-tr-line-height: var(--ti-common-line-height-1);
|
||||
--ti-date-table-td-disabled-border-radius: 50%;
|
||||
--ti-date-table-td-row-disabled-border-radius: unset;
|
||||
--ti-date-table-week-height: var(--ti-common-size-height-normal);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
export const tinyDialogBoxOldTheme = {
|
||||
'ti-dialog-box-resize-icon-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-dialog-box-resize-icon-color-hover': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dialog-box-resize-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dialog-box-footer-align': 'center',
|
||||
'ti-dialog-box-drawer-divider-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
|
||||
'ti-dialog-box-drawer-padding-right': 'var(--ti-common-space-10x, 40px)',
|
||||
'ti-dialog-box-footer-margin-bottom': 'var(--ti-common-space-8x, 32px)',
|
||||
'ti-dialog-box-footer-padding-top': 'calc(var(--ti-common-space-base, 4px) * 7)',
|
||||
'ti-dialog-box-body-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-dialog-box-close-icon-color-hover': 'var(--ti-common-color-icon-hover, #5e7ce0)',
|
||||
'ti-dialog-box-close-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-dialog-box-close-icon-size': 'var(--ti-common-font-size-1, 14px)',
|
||||
'ti-dialog-box-head-title-font-size': 'var(--ti-common-font-size-3, 18px)',
|
||||
'ti-dialog-box-head-padding-bottom': 'calc(var(--ti-common-space-base, 4px) * 7)',
|
||||
'ti-dialog-box-shadow': 'var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2))',
|
||||
'ti-dialog-box-border-radius': 'var(--ti-common-border-radius-normal, 2px)'
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export const tinyDialogBoxSmbTheme = {
|
||||
'ti-dialog-box-drawer-padding-right': 'var(--ti-common-space-8x)',
|
||||
'ti-dialog-box-border-radius': 'var(--ti-common-border-radius-4)',
|
||||
'ti-dialog-box-shadow': 'var(--ti-common-shadow-4-down)',
|
||||
'ti-dialog-box-head-title-font-size': 'var(--ti-common-font-size-4)',
|
||||
'ti-dialog-box-head-padding-bottom': 'var(--ti-common-space-6x)',
|
||||
'ti-dialog-box-close-icon-size': 'var(--ti-common-font-size-5)',
|
||||
'ti-dialog-box-close-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dialog-box-close-icon-color-hover': 'var(--ti-common-color-icon-hover)',
|
||||
'ti-dialog-box-body-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-dialog-box-footer-btn-min-width': 'calc(var(--ti-common-space-base) * 24)',
|
||||
'ti-dialog-box-drawer-divider-border-color': 'transparent',
|
||||
'ti-dialog-box-footer-margin-bottom': 'var(--ti-common-space-8x)',
|
||||
'ti-dialog-box-footer-align': 'right',
|
||||
'ti-dialog-box-footer-padding-top': 'var(--ti-common-space-6x)',
|
||||
'ti-dialog-box-resize-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dialog-box-resize-icon-color-hover': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dialog-box-resize-icon-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-dialog-box-btn-tools-position-top': 'var(--ti-common-size-3x)',
|
||||
'ti-dialog-box-btn-tools-position-right': 'var(--ti-common-size-3x)'
|
||||
}
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
// 对话框背景色
|
||||
--ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 对话框圆角
|
||||
--ti-dialog-box-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-dialog-box-border-radius: var(--ti-common-border-radius-4);
|
||||
// 对话框阴影
|
||||
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
|
||||
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down);
|
||||
|
||||
// 头部边框色(hide)
|
||||
--ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
// 头部水平内边距
|
||||
--ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 头部下内边距
|
||||
--ti-dialog-box-head-padding-bottom: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
--ti-dialog-box-head-padding-bottom: var(--ti-common-space-6x);
|
||||
// 头部字号
|
||||
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-3, 18px);
|
||||
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-4);
|
||||
// 头部字重
|
||||
--ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 头部文本色
|
||||
|
|
@ -52,11 +52,11 @@
|
|||
// 关闭按钮圆角
|
||||
--ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 关闭按钮图标尺寸
|
||||
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-5);
|
||||
// 关闭按钮图标色
|
||||
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal);
|
||||
// 关闭按钮悬浮图标色
|
||||
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover);
|
||||
// 关闭按钮悬浮背景色
|
||||
--ti-dialog-box-btn-background-color-hover: none;
|
||||
// 关闭按钮与上边框的距离(hide)
|
||||
|
|
@ -67,18 +67,18 @@
|
|||
// 内容字号
|
||||
--ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 内容字体色
|
||||
--ti-dialog-box-body-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-dialog-box-body-text-color: var(--ti-common-color-text-primary);
|
||||
// 内容垂直内边距
|
||||
--ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 内容水平内边距
|
||||
--ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
|
||||
// 底部上内边距
|
||||
--ti-dialog-box-footer-padding-top: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
--ti-dialog-box-footer-padding-top: var(--ti-common-space-6x);
|
||||
// 底部水平内边距
|
||||
--ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 底部下内边距
|
||||
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px);
|
||||
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x);
|
||||
|
||||
// 抽屉最小宽度
|
||||
--ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
// 抽屉左内边距
|
||||
--ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉右内边距
|
||||
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-10x, 40px);
|
||||
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-8x);
|
||||
// 抽屉头部上内边距
|
||||
--ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉头部下内边距
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
// 抽屉底部右外边距
|
||||
--ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
|
||||
// 抽屉头部与底部边框颜色
|
||||
--ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-dialog-box-drawer-divider-border-color: transparent;
|
||||
// 抽屉边框圆角
|
||||
--ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px);
|
||||
// 弹窗布局模式(hide)
|
||||
|
|
@ -127,11 +127,11 @@
|
|||
// 弹窗垂直布局(hide)
|
||||
--ti-dialog-box-wrapper-align-items: normal;
|
||||
// 底部布局显示
|
||||
--ti-dialog-box-footer-align: center;
|
||||
--ti-dialog-box-footer-align: right;
|
||||
// 缩放按钮
|
||||
--ti-dialog-box-resize-icon-color: var(--ti-common-color-icon-normal);
|
||||
// 缩放按钮悬浮状态
|
||||
--ti-dialog-box-resize-icon-color-hover: var(--ti-common-color-icon-normal);
|
||||
// 缩放按钮大小
|
||||
--ti-dialog-box-resize-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-dialog-box-resize-icon-size: var(--ti-common-font-size-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyDividerOldTheme = {
|
||||
'ti-divider-vertical-opacity': '0.8',
|
||||
'ti-divider-horizontal-opacity': '0.8',
|
||||
'ti-divider-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
|
||||
'ti-divider-text-bg-color': 'var(--ti-base-color-bg-1, #ffffff)',
|
||||
'ti-divider-dividing-line': '1px solid var(--ti-common-color-border, #adb0b8)'
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const tinyDividerSmbTheme = {
|
||||
'ti-divider-dividing-line': 'var(--ti-common-color-bg-dark-disabled)',
|
||||
'ti-divider-horizontal-opacity': 0.5,
|
||||
'ti-divider-vertical-opacity': 0.5,
|
||||
'ti-divider-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-divider-text-bg-color': 'var(--ti-common-color-line-dividing)'
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
.component-css-vars-divider() {
|
||||
// 不开放(hide)
|
||||
--ti-divider-dividing-line: 1px solid var(--ti-common-color-border, #adb0b8);
|
||||
--ti-divider-dividing-line: var(--ti-common-color-bg-dark-disabled);
|
||||
// 文案背景色
|
||||
--ti-divider-text-bg-color: var(--ti-base-color-bg-1, #ffffff);
|
||||
--ti-divider-text-bg-color: var(--ti-common-color-line-dividing);
|
||||
// 文案文本色
|
||||
--ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
--ti-divider-text-color: var(--ti-common-color-text-primary);
|
||||
//分割线横向透明度
|
||||
--ti-divider-horizontal-opacity: 0.8;
|
||||
--ti-divider-horizontal-opacity: 0.5;
|
||||
//分割线纵向透明度
|
||||
--ti-divider-vertical-opacity: 0.8;
|
||||
--ti-divider-vertical-opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
export const tinyDrawerOldTheme = {
|
||||
'ti-drawer-padding-bottom': 'var(--ti-common-space-6x)',
|
||||
'ti-drawer-padding-top': 'var(--ti-common-space-6x)',
|
||||
'ti-drawer-divider-footer-border-color': 'var(--ti-drawer-divider-border-color, #dfe1e6)',
|
||||
'ti-drawer-footer-padding-top': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-drawer-divider-body-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-drawer-help-icon-color': 'var(--ti-common-color-info, #252b3a)',
|
||||
'ti-drawer-btn-position-right': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-drawer-btn-position-top': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-drawer-close-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-drawer-close-icon-size': 'var(--ti-common-font-size-1, 14px)',
|
||||
'ti-drawer-btn-height': 'var(--ti-drawer-btn-width)',
|
||||
'ti-drawer-btn-width': 'var(--ti-common-size-8x, 32px)',
|
||||
'ti-drawer-head-title-text-color': 'var(--ti-common-text-primary, #252b3a)',
|
||||
'ti-drawer-head-title-font-size': 'var(--ti-common-font-size-2, 16px)',
|
||||
'ti-drawer-header-padding-bottom': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-drawer-divider-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
|
||||
'ti-drawer-shadow': 'var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2))',
|
||||
'ti-drawer-mask-bg-color': 'rgba(0, 0, 0, 0.3)',
|
||||
'ti-drawer-padding-right': 'var(--ti-common-space-10x, 40px)'
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export const tinyDrawerSmbTheme = {
|
||||
'ti-drawer-mask-bg-color': 'rgba(0, 0, 0, 16%)',
|
||||
'ti-drawer-shadow': '0 8px 24px rgba(0, 0, 0, 30%)',
|
||||
'ti-drawer-head-title-font-size': 'var(--ti-common-font-size-4)',
|
||||
'ti-drawer-padding-right': 'var(--ti-common-space-8x)',
|
||||
'ti-drawer-footer-padding-top': 'var(--ti-common-space-6x)',
|
||||
'ti-drawer-divider-border-color': 'transparent',
|
||||
'ti-drawer-divider-body-border-color': 'var(--ti-common-color-line-dividing)',
|
||||
'ti-drawer-divider-footer-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-drawer-close-icon-size': 'var(--ti-common-font-size-5)',
|
||||
'ti-drawer-help-icon-color': 'var(--ti-common-color-icon)',
|
||||
'ti-drawer-close-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-drawer-head-title-text-color': 'var(--ti-common-color-text-gray)',
|
||||
'ti-drawer-header-padding-bottom': 'var(--ti-common-space-6x)',
|
||||
'ti-drawer-padding-top': '0px',
|
||||
'ti-drawer-padding-bottom': '0px',
|
||||
'ti-drawer-btn-position-top': 'var(--ti-common-space-5x)',
|
||||
'ti-drawer-btn-position-right': 'var(--ti-common-space-5x)',
|
||||
'ti-drawer-btn-width': 'var(--ti-common-size-width-mini)',
|
||||
'ti-drawer-btn-height': 'var(--ti-common-size-width-mini)'
|
||||
}
|
||||
|
|
@ -20,13 +20,13 @@
|
|||
// 左内边距
|
||||
--ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
|
||||
// 右内边距
|
||||
--ti-drawer-padding-right: var(--ti-common-space-10x, 40px);
|
||||
--ti-drawer-padding-right: var(--ti-common-space-8x);
|
||||
// 遮罩层背景色
|
||||
--ti-drawer-mask-bg-color: rgba(0, 0, 0, 0.3);
|
||||
--ti-drawer-mask-bg-color: rgba(0, 0, 0, 16%);
|
||||
// 阴影
|
||||
--ti-drawer-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
|
||||
--ti-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 30%);
|
||||
// 头部与底部边框颜色
|
||||
--ti-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
--ti-drawer-divider-border-color: transparent;
|
||||
// 边框圆角
|
||||
--ti-drawer-radius: var(--ti-common-space-0, 0);
|
||||
// 遮罩层背景色
|
||||
|
|
@ -35,41 +35,41 @@
|
|||
// 头部上内边距
|
||||
--ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 头部下内边距
|
||||
--ti-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
|
||||
--ti-drawer-header-padding-bottom: var(--ti-common-space-6x);
|
||||
// 头部左内边距
|
||||
--ti-drawer-header-padding-left: var(--ti-common-space-0, 0);
|
||||
// 头部右内边距
|
||||
--ti-drawer-body-padding-right: var(--ti-common-space-0, 0);
|
||||
// 头部字号
|
||||
--ti-drawer-head-title-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-drawer-head-title-font-size: var(--ti-common-font-size-4);
|
||||
// 头部文本色(hide)
|
||||
--ti-drawer-head-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 头部标题字重
|
||||
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 头部标题字体色
|
||||
--ti-drawer-head-title-text-color: var(--ti-common-text-primary, #252b3a);
|
||||
--ti-drawer-head-title-text-color: var(--ti-common-color-text-gray);
|
||||
// 关闭按钮宽度
|
||||
--ti-drawer-btn-width: var(--ti-common-size-8x, 32px);
|
||||
--ti-drawer-btn-width: var(--ti-common-size-width-mini);
|
||||
// 关闭按钮高度
|
||||
--ti-drawer-btn-height: var(--ti-drawer-btn-width);
|
||||
--ti-drawer-btn-height: var(--ti-common-size-width-mini);
|
||||
// 关闭按钮图标尺寸
|
||||
--ti-drawer-close-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-drawer-close-icon-size: var(--ti-common-font-size-5);
|
||||
// 关闭按钮圆角
|
||||
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 关闭按钮图标色
|
||||
--ti-drawer-close-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--ti-drawer-close-icon-color: var(--ti-common-color-icon-normal);
|
||||
// 关闭按钮悬浮图标色
|
||||
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 关闭按钮与上边框的距离(hide)
|
||||
--ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
|
||||
--ti-drawer-btn-position-top: var(--ti-common-space-5x);
|
||||
// 关闭按钮与右边框的距离(hide)
|
||||
--ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
|
||||
--ti-drawer-btn-position-right: var(--ti-common-space-5x);
|
||||
// 标题与帮助图标间距
|
||||
--ti-drawer-help-icon-margin-left: var(--ti-common-space-2x, 8px);
|
||||
// 帮助图标宽高
|
||||
--ti-drawer-help-icon-width-height: var(--ti-common-space-4x, 16px);
|
||||
// 帮助图标色
|
||||
--ti-drawer-help-icon-color: var(--ti-common-color-info, #252b3a);
|
||||
--ti-drawer-help-icon-color: var(--ti-common-color-icon);
|
||||
|
||||
// 内容上内边距
|
||||
--ti-drawer-body-padding-top: var(--ti-common-space-0, 0);
|
||||
|
|
@ -80,11 +80,11 @@
|
|||
// 内容右内边距
|
||||
--ti-drawer-header-padding-right: var(--ti-common-space-0, 0);
|
||||
// 内容底部边框色(hide)
|
||||
--ti-drawer-divider-body-border-color: var(--ti-common-color-transparent);
|
||||
--ti-drawer-divider-body-border-color: var(--ti-common-color-line-dividing);
|
||||
// 底部按钮对齐方式
|
||||
--ti-drawer-footer-justify-content: flex-end;
|
||||
// 底部上内边距
|
||||
--ti-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
|
||||
--ti-drawer-footer-padding-top: var(--ti-common-space-6x);
|
||||
// 底部下内边距
|
||||
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
|
||||
// 底部左内边距
|
||||
|
|
@ -98,9 +98,9 @@
|
|||
// 底部按钮间距
|
||||
--ti-drawer-divider-footer-button-margin-left: var(--ti-common-space-2x, 8px);
|
||||
// 底部边框色(hide)
|
||||
--ti-drawer-divider-footer-border-color: var(--ti-drawer-divider-border-color, #dfe1e6);
|
||||
--ti-drawer-divider-footer-border-color: var(--ti-common-color-transparent);
|
||||
// 内容区域上边距
|
||||
--ti-drawer-padding-top: var(--ti-common-space-6x);
|
||||
--ti-drawer-padding-top: 0px;
|
||||
// 内容区域下边距
|
||||
--ti-drawer-padding-bottom: var(--ti-common-space-6x);
|
||||
--ti-drawer-padding-bottom: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyDropTimesOldTheme = {
|
||||
'ti-drop-times-item-hover-bg-color': 'var(--ti-common-color-hover-background)',
|
||||
'ti-drop-times-item-selected-color': 'var(--ti-common-color-selected-text-color)',
|
||||
'ti-drop-times-item-selected-font-weight': 'var(--ti-common-font-weight-4)',
|
||||
'ti-drop-times-item-padding': '0 var(--ti-common-space-4x)',
|
||||
'ti-drop-times-item-font-size': 'var(--ti-common-font-size-0)'
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
export const tinyDropTimesSmbTheme = {
|
||||
'ti-drop-times-item-hover-bg-color': 'var(--ti-common-color-bg-disabled)',
|
||||
'ti-drop-times-item-selected-color': 'var(--ti-common-color-text-link)',
|
||||
'ti-drop-times-item-padding-horizontal': '16px',
|
||||
'ti-drop-times-item-font-size': '14px',
|
||||
'ti-drop-times-item-padding': '0 16px',
|
||||
'ti-drop-times-item-selected-font-weight': '500'
|
||||
}
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
|
||||
.component-css-vars-drop-times() {
|
||||
// 时间选择选项字号
|
||||
--ti-drop-times-item-font-size: var(--ti-common-font-size-0);
|
||||
--ti-drop-times-item-font-size: 14px;
|
||||
// 时间选择选项左右内边距
|
||||
--ti-drop-times-item-padding: 0 var(--ti-common-space-4x);
|
||||
--ti-drop-times-item-padding: 0 16px;
|
||||
// 时间选择选项字体字重
|
||||
--ti-drop-times-item-selected-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-drop-times-item-selected-font-weight: 500;
|
||||
// 时间选择选项字体色(选中项)
|
||||
--ti-drop-times-item-selected-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-drop-times-item-selected-color: var(--ti-common-color-text-link);
|
||||
// 时间选择选项悬浮背景色(选中项)
|
||||
--ti-drop-times-item-select-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
// 时间选择选项悬浮背景色
|
||||
--ti-drop-times-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-drop-times-item-hover-bg-color: var(--ti-common-color-bg-disabled);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
export const tinyDropdownItemOldTheme = {
|
||||
'ti-dropdown-item-expand-icon-size': '8px',
|
||||
'ti-dropdown-item-before-height': '6px',
|
||||
'ti-dropdown-item-before-bg-color': 'var(--ti-common-color-bg-white-normal, #fff)',
|
||||
'ti-dropdown-item-divided-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
|
||||
'ti-dropdown-item-content-bg-hover': 'var(--ti-common-color-bg-white-emphasize)',
|
||||
'ti-dropdown-item-content-text-hover': 'var(--ti-common-color-text-highlight)',
|
||||
'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-4, normal)',
|
||||
'ti-dropdown-item-content-margin-left': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-dropdown-item-expand-svg-margin-right': 'var(--ti-common-space-0, 0px)',
|
||||
'ti-dropdown-item-expand-svg-margin-left':
|
||||
'calc(\n -1 * (var(--ti-common-space-base, 4px) + var(--ti-dropdown-item-expand-icon-size))\n )',
|
||||
'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-icon-hover, #5e7ce0)',
|
||||
'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon-normal, #575d6c)',
|
||||
'ti-dropdown-item-max-width': 'var(--ti-common-size-33x, 132px)',
|
||||
'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-5x, 20px)',
|
||||
'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-6, 6px)',
|
||||
'ti-dropdown-item-active-text-color': 'var(--ti-common-color-text-white, #fff)',
|
||||
'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
|
||||
'ti-dropdown-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'ti-dropdown-item-text-color-selected': 'var(--ti-common-color-text-white, #fff)',
|
||||
'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-4, normal)',
|
||||
'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-selected-background, #5e7ce0)',
|
||||
'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-bg-white-emphasize, #f2f5fc)',
|
||||
'ti-dropdown-item-height': '30px'
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
export const tinyDropdownItemSmbTheme = {
|
||||
'ti-dropdown-item-expand-icon-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-0)',
|
||||
'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-4x)',
|
||||
'ti-dropdown-item-hover-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-dropdown-item-expand-svg-margin-left': 'var(--ti-common-space-0)',
|
||||
'ti-dropdown-item-expand-svg-margin-right': 'var(--ti-common-space-2x)',
|
||||
'ti-dropdown-item-content-margin-left': 'calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x))',
|
||||
'ti-dropdown-item-max-width': 'var(--ti-common-size-auto)',
|
||||
'ti-dropdown-item-height': 'var(--ti-common-size-height-normal)',
|
||||
'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon-normal)',
|
||||
'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-icon-hover)',
|
||||
'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-4)',
|
||||
'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-white-normal)',
|
||||
'ti-dropdown-item-active-text-color': '#1476FF',
|
||||
'ti-dropdown-item-content-text-hover': '#1476FF',
|
||||
'ti-dropdown-item-before-bg-color': 'transparent',
|
||||
'ti-dropdown-item-divided-border-color': 'var(--ti-common-color-line-dividing)',
|
||||
'ti-dropdown-item-content-bg-hover': 'transparent',
|
||||
'ti-dropdown-item-before-height': '0',
|
||||
'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-bg-white-normal)',
|
||||
'ti-dropdown-item-text-color-selected': '#1476FF',
|
||||
'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)',
|
||||
'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-bg-normal)'
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue