feat(theme): Add default values for theme variables (#842)
This commit is contained in:
chenxi-20
GitHub
parent
deb2efab38
commit
dba4d6487c
|
|
@ -12,31 +12,31 @@
|
|||
|
||||
.component-css-vars-action-menu() {
|
||||
// 下拉触发源文本颜色
|
||||
--ti-action-menu-text-color: var(--ti-common-color-text-link);
|
||||
--ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 下拉触发源文本禁用色
|
||||
--ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 下拉触发源文本字号
|
||||
--ti-action-menu-font-size: var(--ti-common-font-size-base);
|
||||
--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);
|
||||
--ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 下拉菜单项悬浮背景色
|
||||
--ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent);
|
||||
--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);
|
||||
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 下拉菜单项顶部内边距
|
||||
--ti-action-menu-item-padding-top: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项右侧内边距
|
||||
--ti-action-menu-item-padding-right: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项底部内边距
|
||||
--ti-action-menu-item-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项右侧内边距
|
||||
--ti-action-menu-item-padding-left: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项图标顶部内边距
|
||||
--ti-action-menu-item-svg-margin-top: -2px;
|
||||
// 下拉菜单项图标右侧内边距
|
||||
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base);
|
||||
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单项图标底部部内边距
|
||||
--ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单项图标左侧内边距
|
||||
--ti-action-menu-item-svg-margin-left: var(--ti-common-space-0);
|
||||
--ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,115 +12,115 @@
|
|||
|
||||
.component-css-vars-alert() {
|
||||
// 默认字体
|
||||
--ti-alert-font-family: var(--ti-common-font-family);
|
||||
--ti-alert-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 描述字号
|
||||
--ti-alert-description-font-size: var(--ti-common-font-size-base);
|
||||
--ti-alert-description-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 默认关闭图标固定定位顶部距离(hide)
|
||||
--ti-alert-close-position-top:var(--ti-common-space-4x);
|
||||
--ti-alert-close-position-top:var(--ti-common-space-4x, 16px);
|
||||
// 默认关闭图标字号
|
||||
--ti-alert-close-font-size: var(--ti-common-font-size-base);
|
||||
--ti-alert-close-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 自定义关闭文字字号
|
||||
--ti-alert-close-text-font-size: var(--ti-common-font-size-base);
|
||||
--ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 组件圆角
|
||||
--ti-alert-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 标题文本色
|
||||
--ti-alert-title-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 标题字号
|
||||
--ti-alert-title-font-size: var(--ti-common-font-size-1);
|
||||
--ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 标题图标顶部外边距
|
||||
--ti-alert-icon-margin-top: var(--ti-common-space-1);
|
||||
--ti-alert-icon-margin-top: var(--ti-common-space-1, 1px);
|
||||
// 标题图标字号
|
||||
--ti-alert-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-alert-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 描述内容行高
|
||||
--ti-alert-description-line-height: var(--ti-common-line-height-number);
|
||||
--ti-alert-description-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 描述内容顶部内边距
|
||||
--ti-alert-normal-content-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-alert-normal-content-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 描述内容水平内边距
|
||||
--ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 描述内容提示内容顶部外边距
|
||||
--ti-alert-description-margin-top: var(--ti-common-space-base);
|
||||
--ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
|
||||
// 描述内容提示内容底部外边距
|
||||
--ti-alert-description-margin-bottom: var(--ti-common-space-base);
|
||||
--ti-alert-description-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
// 描述默认文本色
|
||||
--ti-alert-description-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 默认顶部内边距
|
||||
--ti-alert-normal-padding-top: var(--ti-common-space-3x);
|
||||
--ti-alert-normal-padding-top: var(--ti-common-space-3x, 12px);
|
||||
// 默认右内边距
|
||||
--ti-alert-normal-padding-right: var(--ti-common-space-4x);
|
||||
--ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
|
||||
// 默认底部内边距
|
||||
--ti-alert-normal-padding-bottom: var(--ti-common-space-3x);
|
||||
--ti-alert-normal-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
// 默认左内边距
|
||||
--ti-alert-normal-padding-left: var(--ti-common-space-4x);
|
||||
--ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// 默认垂直外边距
|
||||
--ti-alert-normal-margin-vertical: var(--ti-common-space-2x);
|
||||
--ti-alert-normal-margin-vertical: var(--ti-common-space-2x, 8px);
|
||||
// 默认水平外边距
|
||||
--ti-alert-normal-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// large尺寸顶部内边距
|
||||
--ti-alert-large-padding-top: calc(var(--ti-common-space-base) * 3.5);
|
||||
--ti-alert-large-padding-top: calc(var(--ti-common-space-base, 4px) * 3.5);
|
||||
// large尺寸底部内边距
|
||||
--ti-alert-large-padding-bottom: var(--ti-common-space-3x);
|
||||
--ti-alert-large-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
// large尺寸左内边距
|
||||
--ti-alert-large-padding-left: var(--ti-common-space-4x);
|
||||
--ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// large尺寸右内边距
|
||||
--ti-alert-large-padding-right: calc(var(--ti-common-space-base) * 10.5);
|
||||
--ti-alert-large-padding-right: calc(var(--ti-common-space-base, 4px) * 10.5);
|
||||
// large尺寸操作文本色
|
||||
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight);
|
||||
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// large尺寸操作字号
|
||||
--ti-alert-opration-font-size: var(--ti-common-font-size-base);
|
||||
--ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// large尺寸图标字号
|
||||
--ti-alert-large-icon-font-size: 21px;
|
||||
// large尺寸图标顶部外边距
|
||||
--ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base) - 2px);
|
||||
--ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base, 4px) - 2px);
|
||||
// large尺寸描述内容左内边距
|
||||
--ti-alert-large-content-padding-left: var(--ti-common-space-4x);
|
||||
--ti-alert-large-content-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// 大尺寸关闭图标字号
|
||||
--ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
|
||||
|
||||
// warning类型边框色
|
||||
--ti-alert-warning-border-color: var(--ti-common-color-warn-border);
|
||||
--ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6);
|
||||
// warning类型图标色
|
||||
--ti-alert-warning-icon-color: var(--ti-common-color-warn);
|
||||
--ti-alert-warning-icon-color: var(--ti-common-color-warn, #fa9841);
|
||||
// warning类型链接色(hide)
|
||||
--ti-alert-warning-link-text-color: var(--ti-common-color-warn-text);
|
||||
--ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #e37d29);
|
||||
// warning类型背景色
|
||||
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg);
|
||||
--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);
|
||||
// warning类型悬浮关闭图标色
|
||||
--ti-alert-warning-close-hover-icon-color: var(--ti-alert-warning-icon-color);
|
||||
// error类型边框色
|
||||
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary);
|
||||
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
|
||||
// error类型图标色
|
||||
--ti-alert-error-icon-color: var(--ti-common-color-error);
|
||||
--ti-alert-error-icon-color: var(--ti-common-color-error, #f66f6a);
|
||||
// error类型链接色(hide)
|
||||
--ti-alert-error-link-text-color: var(--ti-common-color-error-text);
|
||||
--ti-alert-error-link-text-color: var(--ti-common-color-error-text, #de504e);
|
||||
// error类型背景色
|
||||
--ti-alert-error-bg-color: var(--ti-common-color-error-bg);
|
||||
--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);
|
||||
// error类型悬浮关闭图标色
|
||||
--ti-alert-error-close-hover-icon-color: var(--ti-alert-error-icon-color);
|
||||
// success类型边框色
|
||||
--ti-alert-success-border-color: var(--ti-common-color-success-border);
|
||||
--ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc);
|
||||
// success类型图标色
|
||||
--ti-alert-success-icon-color: var(--ti-common-color-success);
|
||||
--ti-alert-success-icon-color: var(--ti-common-color-success, #50d4ab);
|
||||
// success类型链接色(hide)
|
||||
--ti-alert-success-link-text-color: var(--ti-common-color-text-success);
|
||||
--ti-alert-success-link-text-color: var(--ti-common-color-text-success, #3ac295);
|
||||
// success类型背景色
|
||||
--ti-alert-success-bg-color: var(--ti-common-color-success-bg);
|
||||
--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);
|
||||
// success类型悬浮关闭图标色
|
||||
--ti-alert-success-close-hover-icon-color: var(--ti-alert-success-icon-color);
|
||||
|
||||
// info类型边框色
|
||||
--ti-alert-info-border-color: var(--ti-common-color-prompt-border);
|
||||
--ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa);
|
||||
// info类型图标色
|
||||
--ti-alert-info-icon-color: var(--ti-common-color-prompt);
|
||||
--ti-alert-info-icon-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// info类型链接色(hide)
|
||||
--ti-alert-info-link-text-color: var(--ti-common-color-prompt-text);
|
||||
--ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #526ecc);
|
||||
// info类型背景色
|
||||
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg);
|
||||
--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);
|
||||
// info类型悬浮关闭图标色
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-amount() {
|
||||
--ti-amount-icon-color: var(--ti-base-color-brand-6);
|
||||
--ti-amount-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-amount-icon-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-amount-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,33 +12,33 @@
|
|||
|
||||
.component-css-vars-anchor() {
|
||||
// 组件默认背景色
|
||||
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 组件宽度
|
||||
--ti-anchor-width: 'auto';
|
||||
// 锚点默认文本色
|
||||
--ti-anchor-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-anchor-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 锚点默认字号
|
||||
--ti-anchor-font-size: var(--ti-common-font-size-1);
|
||||
--ti-anchor-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 选中锚点竖向轨道滑块背景色
|
||||
--ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 选中锚点竖向轨道滑块宽度
|
||||
--ti-anchor-orbit-skid-width: var(--ti-common-size-base);
|
||||
--ti-anchor-orbit-skid-width: var(--ti-common-size-base, 4px);
|
||||
// 竖向轨道宽度
|
||||
--ti-anchor-orbit-width: var(--ti-common-size-base);
|
||||
--ti-anchor-orbit-width: var(--ti-common-size-base, 4px);
|
||||
// 选中锚点文本色
|
||||
--ti-anchor-link-active-text-color: var(--ti-common-color-primary-active);
|
||||
--ti-anchor-link-active-text-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 选中锚点蒙层背景色
|
||||
--ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
|
||||
// 悬浮锚点文本色
|
||||
--ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active);
|
||||
--ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 锚点竖向轨道背景色
|
||||
--ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled);
|
||||
--ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 锚点左外边距
|
||||
--ti-anchor-link-margin-left: var(--ti-common-space-2x);
|
||||
--ti-anchor-link-margin-left: var(--ti-common-space-2x, 8px);
|
||||
// 锚点标题垂直内边距
|
||||
--ti-anchor-link-title-padding-vertical: var(--ti-common-space-1);
|
||||
--ti-anchor-link-title-padding-vertical: var(--ti-common-space-1, 1px);
|
||||
// 锚点标题右外边距
|
||||
--ti-anchor-link-title-padding-right: var(--ti-common-space-2x);
|
||||
--ti-anchor-link-title-padding-right: var(--ti-common-space-2x, 8px);
|
||||
// 锚点标题左外边距
|
||||
--ti-anchor-link-title-padding-left: var(--ti-common-space-10);
|
||||
--ti-anchor-link-title-padding-left: var(--ti-common-space-10, 10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
|
||||
.component-css-vars-autocomplete() {
|
||||
// 下拉框边框圆角
|
||||
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 下拉框边框色
|
||||
--ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent);
|
||||
--ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 下拉框背景色
|
||||
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 下拉框列表项的文本色
|
||||
--ti-autocomplete-li-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-autocomplete-li-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 下拉框列表项字号
|
||||
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base);
|
||||
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 下拉框列表项的悬浮背景色
|
||||
--ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 下拉框列表选中项的背景色
|
||||
--ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 下拉框列表选中项的文本色
|
||||
--ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 每项的分配者的边框色（没有效果）
|
||||
--ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark);
|
||||
--ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark, #000);
|
||||
// 下拉框列表项高度
|
||||
--ti-autocomplete-li-height: calc(var(--ti-common-size-7x) + 2px);
|
||||
--ti-autocomplete-li-height: calc(var(--ti-common-size-7x, 28px) + 2px);
|
||||
// 加载图标色（没有效果
|
||||
--ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-badge() {
|
||||
--ti-badge-size: var(--ti-common-size-5x);
|
||||
--ti-badge-font-size: var(--ti-common-font-size-base);
|
||||
--ti-badge-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-badge-size: var(--ti-common-size-5x, 20px);
|
||||
--ti-badge-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--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);
|
||||
--ti-badge-bg-color: var(--ti-base-color-error-3);
|
||||
--ti-badge-link-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-badge-active-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-badge-active-bg-color: var(--ti-common-color-light);
|
||||
--ti-badge-primary-bg-color: var(--ti-base-color-brand-6);
|
||||
--ti-badge-success-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-badge-warning-bg-color: var(--ti-common-color-warning-normal);
|
||||
--ti-badge-danger-bg-color: var(--ti-base-color-error-3);
|
||||
--ti-badge-info-bg-color: var(--ti-common-color-info-normal);
|
||||
--ti-badge-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-badge-bg-color: var(--ti-base-color-error-3, #f66f6a);
|
||||
--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);
|
||||
--ti-badge-primary-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-badge-success-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.component-css-vars-breadcrumb() {
|
||||
// 字号
|
||||
--ti-breadcrumb-font-size: var(--ti-common-font-size-base);
|
||||
--ti-breadcrumb-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 文本行高
|
||||
--ti-breadcrumb-text-line-height: var(--ti-common-line-height-3);
|
||||
--ti-breadcrumb-text-line-height: var(--ti-common-line-height-3, 18px);
|
||||
// 文本色
|
||||
--ti-breadcrumb-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-breadcrumb-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 字族
|
||||
--ti-breadcrumb-font-family: var(--ti-common-font-family);
|
||||
--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);
|
||||
--ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 分割箭头宽度
|
||||
--ti-breadcrumb-separator-width: calc(var(--ti-common-size-base) + 2px);
|
||||
--ti-breadcrumb-separator-width: calc(var(--ti-common-size-base, 4px) + 2px);
|
||||
// 分隔图标的垂直外边距
|
||||
--ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0);
|
||||
--ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 分隔图标的水平外边距
|
||||
--ti-breadcrumb-separator-margin-horizontal: var(--ti-common-space-base);
|
||||
--ti-breadcrumb-separator-margin-horizontal: var(--ti-common-space-base, 4px);
|
||||
// 悬浮文本色
|
||||
--ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 悬浮文本下划线
|
||||
--ti-breadcrumb-hover-text-decoration: none;
|
||||
// 当前节点字重
|
||||
--ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 当前节点文本色
|
||||
--ti-breadcrumb-selected-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-breadcrumb-selected-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 当前节点悬浮文本色
|
||||
--ti-breadcrumb-selected-hover-text-color: var(--ti-breadcrumb-selected-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-bulletin-board() {
|
||||
--ti-bulletin-board-title-font-size: var(--ti-common-font-size-3);
|
||||
--ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-bulletin-board-item-title-text-color: var(--ti-common-color-dark);
|
||||
--ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base);
|
||||
--ti-bulletin-board-new-bg-color: var(--ti-base-color-error-3);
|
||||
--ti-bulletin-board-new-text-color: var(--ti-common-color-light);
|
||||
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-bulletin-board-more-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5);
|
||||
--ti-bulletin-board-more-font-size: var(--ti-common-font-size-base);
|
||||
--ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-bulletin-board-tabs-item-hover-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border);
|
||||
--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-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-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-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-disabled-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.component-css-vars-button-group() {
|
||||
// 按钮组边框色
|
||||
--ti-button-group-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-button-group-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 按钮组边框厚度
|
||||
--ti-button-group-border-weight: 0;
|
||||
// 按钮组圆角
|
||||
--ti-button-group-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-button-group-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 按钮组第一个按钮右侧圆角
|
||||
--ti-button-group-right-border-radius: 0px;
|
||||
// 按钮组中间按钮圆角
|
||||
|
|
@ -24,63 +24,63 @@
|
|||
// 按钮组最后一个按钮左侧圆角
|
||||
--ti-button-group-left-border-radius: 0px;
|
||||
// 默认插槽尾部按钮的左边框色
|
||||
--ti-button-group-hover-border-color: var(--ti-common-color-line-active);
|
||||
--ti-button-group-hover-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 默认插槽按钮间分割线颜色
|
||||
--ti-button-group-info-border-color: var(--ti-common-color-light);
|
||||
--ti-button-group-info-border-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用色（没有使用）
|
||||
--ti-button-group-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-button-group-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认按钮未选中项背景色
|
||||
--ti-button-group-item-bg-color: #e9edfa;
|
||||
// 按钮非选中项文本色
|
||||
--ti-button-group-item-btn-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-button-group-item-btn-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 按钮项宽度
|
||||
--ti-button-group-item-btn-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-group-item-btn-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 未指定尺寸的按钮项高度
|
||||
--ti-button-group-item-btn-height: var(--ti-common-size-height-normal);
|
||||
--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);
|
||||
--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);
|
||||
--ti-button-group-item-btn-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 按钮项禁用边框色
|
||||
--ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border);
|
||||
--ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 按钮项禁用色
|
||||
--ti-button-group-item-btn-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-button-group-item-btn-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认按钮项悬浮背景色
|
||||
--ti-button-group-item-btn-hover-bg-color: #beccfa;
|
||||
// 按钮项悬浮边框色
|
||||
--ti-button-group-item-btn-hover-border-color: var(--ti-common-color-primary-hover);
|
||||
--ti-button-group-item-btn-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 默认按钮非选中项悬浮文本色
|
||||
--ti-button-group-item-btn-hover-text-color: var(--ti-button-group-item-btn-text-color);
|
||||
// 朴素按钮非选中项悬浮文本色
|
||||
--ti-button-group-item-btn-plain-text-color: var(--ti-common-color-text-link-hover);
|
||||
--ti-button-group-item-btn-plain-text-color: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 朴素按钮项悬浮背景色
|
||||
--ti-button-group-item-btn-plain-bg-color: var(--ti-common-color-prompt-bg);
|
||||
--ti-button-group-item-btn-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// 朴素按钮非选中项悬浮边框色
|
||||
--ti-button-group-item-btn-plain-border-color: var(--ti-common-color-bg-emphasize);
|
||||
--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);
|
||||
--ti-button-group-item-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认按钮选中项悬浮背景色
|
||||
--ti-button-group-item-btn-active-hover-bg-color: #beccfa;
|
||||
// 朴素按钮选中项文本颜色
|
||||
--ti-button-group-plain-active-text-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-button-group-plain-active-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认按钮选中项禁用时背景色
|
||||
--ti-button-group-item-active-disabled-bg-color: #dfe1e6;
|
||||
// 默认按钮选中项文本色
|
||||
--ti-button-group-item-active-text-color: var(--ti-common-color-light);
|
||||
--ti-button-group-item-active-text-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮右侧外边距
|
||||
--ti-button-group-item-li-margin-right: 2px;
|
||||
// 默认按钮下侧外边距
|
||||
--ti-button-group-item-li-margin-bottom: var(--ti-common-space-base);
|
||||
--ti-button-group-item-li-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
// 默认按钮选中边框色
|
||||
--ti-button-group-item-active-border-color: var(--ti-common-color-bg-emphasize);
|
||||
--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);
|
||||
--ti-button-group-active-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 默认按钮内间距
|
||||
--ti-button-group-btn-padding-horizontal: 30px;
|
||||
// 小尺寸按钮字号
|
||||
--ti-button-group-item-active-font-size: 14px;
|
||||
// 按钮组按钮上间距
|
||||
--ti-button-group-margin-top: var(--ti-common-space-0);
|
||||
--ti-button-group-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 按钮组各个按钮的上间距
|
||||
--ti-button-group-item-margin-top: 0;
|
||||
// 小尺寸按钮组按钮右间距
|
||||
|
|
@ -90,11 +90,11 @@
|
|||
// 无边框按钮悬浮按钮组背景色
|
||||
--ti-button-group-no-border-hover-bg-color: #beccfa;
|
||||
// 无边框按钮组按钮选中态悬浮背景色
|
||||
--ti-button-group-no-border-active-hover-bg-color: var(--ti-common-color-primary-hover);
|
||||
--ti-button-group-no-border-active-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 无边框按钮组按钮禁用状态下背景色
|
||||
--ti-button-group-no-border-disabled-bg-color: #ffffff;
|
||||
// 小尺寸按钮内间距
|
||||
--ti-button-group-mini-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-button-group-mini-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 小尺寸按钮圆角
|
||||
--ti-button-group-mini-border-radius: 0px;
|
||||
// 无边框按钮悬浮边框色
|
||||
|
|
@ -102,9 +102,9 @@
|
|||
// 选中按钮组按钮悬浮边框色
|
||||
--ti-button-group-no-border-border-color: transparent;
|
||||
// 按钮角标高度
|
||||
--ti-button-group-item-sup-height: var(--ti-common-size-4x);
|
||||
--ti-button-group-item-sup-height: var(--ti-common-size-4x, 16px);
|
||||
// 按钮角标字体颜色
|
||||
--ti-button-group-item-sup-font-color: var(--ti-common-color-text-white);
|
||||
--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);
|
||||
--ti-button-group-item-sup-font-size: var(--ti-common-font-size-base, 12px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,116 +12,116 @@
|
|||
|
||||
.component-css-vars-button() {
|
||||
// 按钮圆角
|
||||
--ti-button-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 按钮字号
|
||||
--ti-button-font-size: var(--ti-common-font-size-base);
|
||||
--ti-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 朴素类按钮禁用文本色(非默认)
|
||||
--ti-button-plain-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-button-plain-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 按钮边框尺寸
|
||||
--ti-button-border-width: var(--ti-common-border-weight-normal);
|
||||
--ti-button-border-width: var(--ti-common-border-weight-normal, 1px);
|
||||
// 按钮边框样式
|
||||
--ti-button-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-button-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 按钮加载时背景色
|
||||
--ti-button-loading-bg-color: rgba(255, 255, 255, 0.35);
|
||||
|
||||
// 默认按钮最小宽度
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 默认按钮最大宽度
|
||||
--ti-button-size-normal-max-width: var(--ti-common-size-width-medium);
|
||||
--ti-button-size-normal-max-width: var(--ti-common-size-width-medium, 120px);
|
||||
// 默认按钮的高度
|
||||
--ti-button-size-normal-height: var(--ti-common-size-height-normal);
|
||||
--ti-button-size-normal-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 默认按钮水平内边距
|
||||
--ti-button-size-normal-padding-horizontal: var(--ti-common-size-5x);
|
||||
--ti-button-size-normal-padding-horizontal: var(--ti-common-size-5x, 20px);
|
||||
// 默认按钮最小宽度
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-20x);
|
||||
--ti-button-size-normal-min-width: var(--ti-common-size-20x, 80px);
|
||||
|
||||
// 超大按钮的最小宽度
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 超大按钮高度
|
||||
--ti-button-size-large-height: var(--ti-common-size-height-large);
|
||||
--ti-button-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
// 超大按钮字号
|
||||
--ti-button-size-large-font-size: var(--ti-common-font-size-2);
|
||||
--ti-button-size-large-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 超大按钮水平内边距
|
||||
--ti-button-size-large-padding-horizontal: var(--ti-common-size-8x);
|
||||
--ti-button-size-large-padding-horizontal: var(--ti-common-size-8x, 32px);
|
||||
// 超大按钮最小宽度
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-24x);
|
||||
--ti-button-size-large-min-width: var(--ti-common-size-24x, 96px);
|
||||
// 超大按钮左侧外边距
|
||||
--ti-button-size-large-margin-left: 8px;
|
||||
|
||||
// 中等尺寸的最小宽度
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 中等按钮高度
|
||||
--ti-button-size-medium-height: var(--ti-common-size-height-medium);
|
||||
--ti-button-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 中等按钮字号
|
||||
--ti-button-size-medium-font-size: var(--ti-common-font-size-1);
|
||||
--ti-button-size-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 中等按钮水平内边距
|
||||
--ti-button-size-medium-padding-horizontal: var(--ti-common-size-7x);
|
||||
--ti-button-size-medium-padding-horizontal: var(--ti-common-size-7x, 28px);
|
||||
// 中等按钮最小宽度
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-22x);
|
||||
--ti-button-size-medium-min-width: var(--ti-common-size-22x, 88px);
|
||||
// 中等按钮左侧外边距
|
||||
--ti-button-size-medium-margin-left: 8px;
|
||||
|
||||
// 小尺寸的最小宽度
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 小型按钮高度
|
||||
--ti-button-size-small-height: var(--ti-common-size-height-small);
|
||||
--ti-button-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 小型按钮字号
|
||||
--ti-button-size-small-font-size: var(--ti-common-font-size-1);
|
||||
--ti-button-size-small-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 小尺寸按钮水平内边距
|
||||
--ti-button-size-small-padding-horizontal: var(--ti-common-size-3x);
|
||||
--ti-button-size-small-padding-horizontal: var(--ti-common-size-3x, 12px);
|
||||
// 小尺寸按钮最小宽度
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-18x);
|
||||
--ti-button-size-small-min-width: var(--ti-common-size-18x, 72px);
|
||||
// 小尺寸按钮左侧外边距
|
||||
--ti-button-size-small-margin-left: 8px;
|
||||
|
||||
// 迷你尺寸的最小宽度
|
||||
--ti-button-size-mini-min-width: var(--ti-common-size-width-normal);
|
||||
--ti-button-size-mini-min-width: var(--ti-common-size-width-normal, 80px);
|
||||
// 迷你尺寸按钮高度
|
||||
--ti-button-size-mini-height: var(--ti-common-size-height-mini);
|
||||
--ti-button-size-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 迷你尺寸按钮字号
|
||||
--ti-button-size-mini-font-size: var(--ti-common-font-size-base);
|
||||
--ti-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 迷你尺寸按钮水平内边距
|
||||
--ti-button-size-mini-padding-horizontal: var(--ti-common-size-2x);
|
||||
--ti-button-size-mini-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
// 迷你尺寸按钮最小宽度
|
||||
--ti-button-size-mini-min-width: var(--ti-common-size-16x);
|
||||
--ti-button-size-mini-min-width: var(--ti-common-size-16x, 64px);
|
||||
|
||||
// 默认按钮文本色
|
||||
--ti-button-normal-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-button-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 默认按钮边框色
|
||||
--ti-button-normal-border-color: var(--ti-common-color-border);
|
||||
--ti-button-normal-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 默认按钮背景色
|
||||
--ti-button-normal-background-color: var(--ti-common-color-light);
|
||||
--ti-button-normal-background-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮悬浮文本色
|
||||
--ti-button-normal-hover-text-color: var(--ti-common-color-primary-normal);
|
||||
--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);
|
||||
--ti-button-normal-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮悬浮背景色
|
||||
--ti-button-normal-hover-bg-color: var(--ti-common-color-light);
|
||||
--ti-button-normal-hover-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 默认按钮点击瞬间文本色
|
||||
--ti-button-normal-active-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-normal-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮点击瞬间边框色
|
||||
--ti-button-normal-active-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-normal-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 默认按钮点击瞬间背景色
|
||||
--ti-button-normal-active-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-button-normal-active-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 默认按钮禁用文本色
|
||||
--ti-button-normal-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--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);
|
||||
--ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 禁用类默认按钮背景色
|
||||
--ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
|
||||
// 文字按钮文本色
|
||||
--ti-button-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 文字按钮悬浮文本修饰(hide)
|
||||
--ti-button-text-hover-text-decoration: none;
|
||||
// 文字按钮悬浮文本色
|
||||
--ti-button-text-color-hover: var(--ti-common-color-text-link-hover);
|
||||
--ti-button-text-color-hover: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 文字按钮悬浮文本字重
|
||||
--ti-button-text-hover-weight: var(--ti-common-font-weight-4);
|
||||
--ti-button-text-hover-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 文字按钮点击瞬间文本色
|
||||
--ti-button-text-color-active: var(--ti-common-color-primary-active);
|
||||
--ti-button-text-color-active: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 文字按钮禁用文本色
|
||||
--ti-button-text-color-disabled: var(--ti-common-color-text-disabled);
|
||||
--ti-button-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 文字按钮图标宽度
|
||||
--ti-button-text-svg-width: 1em;
|
||||
// 文字按钮图标高度
|
||||
|
|
@ -135,233 +135,233 @@
|
|||
// 文字按钮悬浮圆角
|
||||
--ti-button-text-hover-border-radius: 0px;
|
||||
// 文字按钮图标填充色
|
||||
--ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary);
|
||||
--ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 文字按钮图标悬浮填充色
|
||||
--ti-button-text-svg-hover-fill-color: var(--ti-button-text-color-hover);
|
||||
// 文字按钮禁用时图标填充色
|
||||
--ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled);
|
||||
--ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 图标加文字按钮图标右侧外边距
|
||||
--ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x);
|
||||
--ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x, 8px);
|
||||
// 图标加文字按钮字体颜色
|
||||
--ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 图标加文字按钮悬浮时字体颜色
|
||||
--ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link);
|
||||
--ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 文字按钮只有svg时水平内边距
|
||||
--ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x);
|
||||
--ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
|
||||
// 主要按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主要按钮的主题类边框色
|
||||
--ti-button-primary-normal-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 主题类主要按钮悬浮背景色
|
||||
--ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover);
|
||||
--ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主题类主要按钮悬浮边框色
|
||||
--ti-button-primary-hover-border-color: var(--ti-common-color-primary-hover);
|
||||
--ti-button-primary-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主要按钮点击瞬间背景色
|
||||
--ti-button-primary-active-bg-color: var(--ti-common-color-primary-active);
|
||||
--ti-button-primary-active-bg-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 主要按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor);
|
||||
--ti-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6);
|
||||
// 主题类主要按钮文本色
|
||||
--ti-button-primary-text-color: var(--ti-common-color-light);
|
||||
--ti-button-primary-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类主要按钮文本色
|
||||
--ti-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text);
|
||||
--ti-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8);
|
||||
// 禁用主题类主要按钮边框色
|
||||
--ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border);
|
||||
--ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border, #dfe1e6);
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-button-primary-plain-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-plain-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-button-primary-plain-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-button-primary-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类主要按钮背景色
|
||||
--ti-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg);
|
||||
--ti-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// 朴素类主要按钮悬浮背景色
|
||||
--ti-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮边框色
|
||||
--ti-button-primary-plain-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-plain-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 朴素类主要按钮悬浮边框色
|
||||
--ti-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 禁用朴素类主要按钮背景色
|
||||
--ti-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color);
|
||||
--ti-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color, rgba(191, 191, 191, 0.1));
|
||||
|
||||
// 成功按钮的主题类背景色+朴素类文本边框色
|
||||
--ti-button-success-normal-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-normal-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功按钮的主题类边框色
|
||||
--ti-button-success-normal-border-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-normal-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功按钮悬浮背景色
|
||||
--ti-button-success-hover-bg-color: var(--ti-common-color-success-hover);
|
||||
--ti-button-success-hover-bg-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 成功按钮悬浮边框色
|
||||
--ti-button-success-hover-border-color: var(--ti-common-color-success-hover);
|
||||
--ti-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 成功按钮点击瞬间背景色
|
||||
--ti-button-success-active-bg-color: var(--ti-common-color-success-active);
|
||||
--ti-button-success-active-bg-color: var(--ti-common-color-success-active, #acf2dc);
|
||||
// 成功按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor);
|
||||
--ti-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor, #f5f5f6);
|
||||
// 成功按钮文本色
|
||||
--ti-button-success-text-color: var(--ti-common-color-light);
|
||||
--ti-button-success-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类成功按钮文本色
|
||||
--ti-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text);
|
||||
--ti-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text, #adb0b8);
|
||||
// 禁用主题类成功按钮边框色
|
||||
--ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border);
|
||||
--ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border, #dfe1e6);
|
||||
// 朴素类成功按钮文本色
|
||||
--ti-button-success-plain-text-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-plain-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮悬浮文本色
|
||||
--ti-button-success-plain-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-button-success-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类成功按钮背景色
|
||||
--ti-button-success-plain-bg-color: var(--ti-common-color-success-bg);
|
||||
--ti-button-success-plain-bg-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
// 朴素类成功按钮悬浮背景色
|
||||
--ti-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮边框色
|
||||
--ti-button-success-plain-border-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-plain-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 朴素类成功按钮悬浮边框色
|
||||
--ti-button-success-plain-hover-border-color: var(--ti-common-color-success-normal);
|
||||
--ti-button-success-plain-hover-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 禁用朴素类成功按钮背景色
|
||||
--ti-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color);
|
||||
--ti-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color, rgba(166, 195, 185, 0.1));
|
||||
|
||||
// 警告按钮背景色|朴素类警告按钮悬浮背景色
|
||||
--ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告按钮的主题类边框色
|
||||
--ti-button-warning-normal-border-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-normal-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告按钮悬浮背景色
|
||||
--ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover);
|
||||
--ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover, #fac20a);
|
||||
// 警告按钮悬浮边框色
|
||||
--ti-button-success-hover-border-color: var(--ti-common-color-success-hover);
|
||||
--ti-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 警告按钮点击瞬间背景色
|
||||
--ti-button-warning-active-bg-color: var(--ti-common-color-warning-active);
|
||||
--ti-button-warning-active-bg-color: var(--ti-common-color-warning-active, #fac20a);
|
||||
// 警告按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor);
|
||||
--ti-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6);
|
||||
// 警告按钮文本色
|
||||
--ti-button-warning-text-color: var(--ti-common-color-light);
|
||||
--ti-button-warning-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用警告按钮文本色
|
||||
--ti-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text);
|
||||
--ti-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text, #adb0b8);
|
||||
// 禁用主题类警告按钮边框色
|
||||
--ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border);
|
||||
--ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border, #dfe1e6);
|
||||
// 朴素类主要按钮文本色
|
||||
--ti-button-warning-plain-text-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-plain-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类主要按钮悬浮文本色
|
||||
--ti-button-warning-plain-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-button-warning-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类警告按钮背景色
|
||||
--ti-button-warning-plain-bg-color: var(--ti-common-color-warn-bg);
|
||||
--ti-button-warning-plain-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
// 朴素类警告按钮悬浮背景色
|
||||
--ti-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类警告按钮边框色
|
||||
--ti-button-warning-plain-border-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-plain-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 朴素类警告按钮悬浮边框色
|
||||
--ti-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal);
|
||||
--ti-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 禁用朴素类警告按钮背景色
|
||||
--ti-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color);
|
||||
--ti-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color, rgba(211, 198, 162, 0.1));
|
||||
|
||||
// 危险按钮默认背景色|朴素类危险按钮边框色
|
||||
--ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险按钮的主题类边框色
|
||||
--ti-button-danger-normal-border-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-normal-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 危险按钮悬浮背景色
|
||||
--ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover);
|
||||
--ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险按钮悬浮边框色
|
||||
--ti-button-danger-hover-border-color: var(--ti-common-color-danger-hover);
|
||||
--ti-button-danger-hover-border-color: var(--ti-common-color-danger-hover, #d64a52);
|
||||
// 危险按钮点击瞬间背景色
|
||||
--ti-button-danger-active-bg-color: var(--ti-common-color-danger-active);
|
||||
--ti-button-danger-active-bg-color: var(--ti-common-color-danger-active, #b12220);
|
||||
// 危险按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor);
|
||||
--ti-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
// 危险按钮文本色
|
||||
--ti-button-danger-text-color: var(--ti-common-color-light);
|
||||
--ti-button-danger-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用主题类危险按钮文本色
|
||||
--ti-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text);
|
||||
--ti-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text, #adb0b8);
|
||||
// 禁用主题类危险按钮边框色
|
||||
--ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border);
|
||||
--ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border, #dfe1e6);
|
||||
// 朴素类危险按钮文本色
|
||||
--ti-button-danger-plain-text-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-plain-text-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮悬浮文本色
|
||||
--ti-button-danger-plain-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-button-danger-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类危险按钮背景色
|
||||
--ti-button-danger-plain-bg-color: var(--ti-common-color-error-bg);
|
||||
--ti-button-danger-plain-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
// 朴素类危险按钮悬浮背景色
|
||||
--ti-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮边框色
|
||||
--ti-button-danger-plain-border-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-plain-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 朴素类危险按钮悬浮边框色
|
||||
--ti-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal);
|
||||
--ti-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal, #c7000b);
|
||||
// 禁用朴素类危险按钮背景色
|
||||
--ti-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor);
|
||||
--ti-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
// 禁用朴素类危险按钮边框色
|
||||
--ti-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor);
|
||||
--ti-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6);
|
||||
|
||||
// 信息按钮背景色|朴素类信息按钮边框色
|
||||
--ti-button-info-normal-bg-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-normal-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息按钮的主题类边框色
|
||||
--ti-button-info-normal-border-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-normal-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息按钮悬浮背景色
|
||||
--ti-button-info-hover-bg-color: var(--ti-common-color-info-hover);
|
||||
--ti-button-info-hover-bg-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息按钮悬浮边框色
|
||||
--ti-button-info-hover-border-color: var(--ti-common-color-info-hover);
|
||||
--ti-button-info-hover-border-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息按钮点击瞬间背景色
|
||||
--ti-button-info-active-bg-color: var(--ti-common-color-info-active);
|
||||
--ti-button-info-active-bg-color: var(--ti-common-color-info-active, #5c6173);
|
||||
// 信息按钮的禁用主题类背景色+禁用朴素类边框色
|
||||
--ti-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor);
|
||||
--ti-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor, #f5f5f6);
|
||||
// 信息按钮文本色
|
||||
--ti-button-info-text-color: var(--ti-common-color-light);
|
||||
--ti-button-info-text-color: var(--ti-common-color-light, #fff);
|
||||
// 禁用信息按钮文本色
|
||||
--ti-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text);
|
||||
--ti-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text, #adb0b8);
|
||||
// 禁用信息按钮边框色
|
||||
--ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border);
|
||||
--ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border, #dfe1e6);
|
||||
// 朴素类信息按钮文本色
|
||||
--ti-button-info-plain-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-plain-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮悬浮文本色
|
||||
--ti-button-info-plain-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-button-info-plain-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
// 朴素类信息按钮背景色
|
||||
--ti-button-info-plain-bg-color: var(--ti-common-color-info-bg);
|
||||
--ti-button-info-plain-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
|
||||
// 朴素类信息按钮悬浮背景色
|
||||
--ti-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮边框色
|
||||
--ti-button-info-plain-border-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-plain-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 朴素类信息按钮悬浮边框色
|
||||
--ti-button-info-plain-hover-border-color: var(--ti-common-color-info-normal);
|
||||
--ti-button-info-plain-hover-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 禁用朴素类信息按钮背景色
|
||||
--ti-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color);
|
||||
--ti-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color, rgba(191, 191, 191, 0.1));
|
||||
|
||||
// 按钮垂直内边距
|
||||
--ti-button-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-button-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 默认圆形按钮内边距
|
||||
--ti-button-size-normal-padding: var(--ti-common-space-2x);
|
||||
--ti-button-size-normal-padding: var(--ti-common-space-2x, 8px);
|
||||
|
||||
// 纯文本按钮超大尺寸最小宽度
|
||||
--ti-button-text-size-large-min-width: var(--ti-common-size-24x);
|
||||
--ti-button-text-size-large-min-width: var(--ti-common-size-24x, 96px);
|
||||
// 纯文本按钮超大尺寸高度
|
||||
--ti-button-text-size-large-height: var(--ti-common-size-height-large);
|
||||
--ti-button-text-size-large-height: var(--ti-common-size-height-large, 48px);
|
||||
// 纯文本按钮超大尺寸图标宽度
|
||||
--ti-button-text-size-large-svg-width: 1em;
|
||||
// 纯文本按钮超大尺寸图标高度
|
||||
--ti-button-text-size-large-svg-height: 1em;
|
||||
// 纯文本按钮水平内边距
|
||||
--ti-button-text-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-button-text-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 纯文本按钮中等尺寸最小宽度
|
||||
--ti-button-text-size-medium-min-width: var(--ti-common-size-22x);
|
||||
--ti-button-text-size-medium-min-width: var(--ti-common-size-22x, 88px);
|
||||
// 纯文本按钮中等尺寸高度
|
||||
--ti-button-text-size-medium-height: var(--ti-common-size-height-medium);
|
||||
--ti-button-text-size-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 纯文本按钮中等尺寸图标宽度
|
||||
--ti-button-text-size-medium-svg-width: 1em;
|
||||
// 纯文本按钮中等尺寸图标高度
|
||||
--ti-button-text-size-medium-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮默认尺寸最小宽度
|
||||
--ti-button-text-size-default-min-width: var(--ti-common-size-20x);
|
||||
--ti-button-text-size-default-min-width: var(--ti-common-size-20x, 80px);
|
||||
// 纯文本按钮默认尺寸高度
|
||||
--ti-button-text-size-default-height: var(--ti-common-size-height-normal);
|
||||
--ti-button-text-size-default-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 纯文本按钮默认尺寸图标宽度
|
||||
--ti-button-text-size-default-svg-width: 1em;
|
||||
// 纯文本按钮默认尺寸图标高度
|
||||
--ti-button-text-size-default-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮小尺寸最小宽度
|
||||
--ti-button-text-size-small-min-width: var(--ti-common-size-18x);
|
||||
--ti-button-text-size-small-min-width: var(--ti-common-size-18x, 72px);
|
||||
// 纯文本按钮小尺寸高度
|
||||
--ti-button-text-size-small-height: var(--ti-common-size-height-small);
|
||||
--ti-button-text-size-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 纯文本按钮小尺寸图标宽度
|
||||
--ti-button-text-size-small-svg-width: 1em;
|
||||
// 纯文本按钮小尺寸图标高度
|
||||
--ti-button-text-size-small-svg-height: 1em;
|
||||
|
||||
// 纯文本按钮迷你尺寸最小宽度
|
||||
--ti-button-text-size-small-min-width: var(--ti-common-size-16x);
|
||||
--ti-button-text-size-small-min-width: var(--ti-common-size-16x, 64px);
|
||||
// 纯文本按钮迷你尺寸高度
|
||||
--ti-button-text-size-small-height: var(--ti-common-size-height-mini);
|
||||
--ti-button-text-size-small-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 纯文本按钮迷你尺寸图标宽度
|
||||
--ti-button-text-size-small-svg-width: 1em;
|
||||
// 纯文本按钮迷你尺寸图标高度
|
||||
|
|
@ -374,9 +374,9 @@
|
|||
// 纯图标按钮边框圆角
|
||||
--ti-button-only-icon-border-radius: 2px;
|
||||
// 纯图标按钮边框颜色
|
||||
--ti-button-only-icon-border-color: var(--ti-common-color-border);
|
||||
--ti-button-only-icon-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 纯图标按钮悬浮时边框颜色
|
||||
--ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 纯图标按钮禁用时边框颜色
|
||||
--ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,30 +11,30 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-calendar() {
|
||||
--ti-calendar-bg-color: var(--ti-common-color-light);
|
||||
--ti-calendar-list-item-selected-text-color: var(--ti-common-color-light);
|
||||
--ti-calendar-hover-text-color: var(--ti-base-color-brand-5);
|
||||
--ti-calendar-border-color: var(--ti-common-color-border);
|
||||
--ti-calendar-text-color-primary: var(--ti-base-color-brand-6);
|
||||
--ti-calendar-bg-color: var(--ti-common-color-light, #fff);
|
||||
--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-background-color-primary: rgba(24, 144, 255, 0.1);
|
||||
--ti-calendar-bg-color-success: var(--ti-common-color-success-normal);
|
||||
--ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal);
|
||||
--ti-calendar-bg-color-danger: var(--ti-base-color-bg-8);
|
||||
--ti-calendar-text-color-info: var(--ti-common-color-info-normal);
|
||||
--ti-calendar-tool-width: var(--ti-common-size-width-normal);
|
||||
--ti-calendar-content-heard-font-size: var(--ti-common-font-size-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);
|
||||
--ti-calendar-bg-color-danger: var(--ti-base-color-bg-8, #c7000b);
|
||||
--ti-calendar-text-color-info: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-calendar-tool-width: var(--ti-common-size-width-normal, 80px);
|
||||
--ti-calendar-content-heard-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-calendar-selected-border-radius: var(--ti-common-radius-large);
|
||||
--ti-calendar-input-height: var(--ti-common-size-height-normal);
|
||||
--ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-calendar-input-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-calendar-input-height: var(--ti-common-size-height-minor);
|
||||
--ti-calendar-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-calendar-input-font-size: var(--ti-common-font-size-base);
|
||||
--ti-calendar-list-item-height: var(--ti-common-size-height-normal);
|
||||
--ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-calendar-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-calendar-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-calendar-list-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-card-item() {
|
||||
--ti-card-item-bg-color: var(--ti-common-color-light);
|
||||
--ti-card-item-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-card-item-border-color: #ccc;
|
||||
--ti-card-item-placeholder-bg-color: rgba(0, 0, 0, 0.05);
|
||||
--ti-card-item-placeholder-border-color: rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
--ti-card-item-remove-icon-color: rgba(0, 0, 0, 0.5);
|
||||
--ti-card-item-remove-icon-hover-bg-color: rgba(255, 255, 255, 0.8);
|
||||
--ti-card-item-remove-icon-hover-text-color: rgba(0, 0, 0, 0.7);
|
||||
--ti-card-item-header-font-size: var(--ti-common-font-size-1);
|
||||
--ti-card-item-header-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-card-item-header-text-color: #444;
|
||||
--ti-card-item-header-height: var(--ti-common-size-10x);
|
||||
--ti-card-item-header-title-border-color: var(--ti-common-color-bg-dark-deep);
|
||||
--ti-card-item-header-height: var(--ti-common-size-10x, 40px);
|
||||
--ti-card-item-header-title-border-color: var(--ti-common-color-bg-dark-deep, #464c59);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-card-layout() {
|
||||
--ti-card-bg-color: var(--ti-common-color-light);
|
||||
--ti-card-drop-border-color: var(--ti-base-color-brand-6);
|
||||
--ti-card-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-card-drop-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-card-template() {
|
||||
--ti-card-bg-color: var(--ti-common-color-light);
|
||||
--ti-card-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-card-tool-icon-size: 16px;
|
||||
--ti-card-tool-icon-color: var(--ti-base-color-brand-6);
|
||||
--ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5);
|
||||
--ti-card-tool-active-icon-color: var(--ti-common-color-primary-active);
|
||||
--ti-card-tool-selector-height: var(--ti-common-size-10x);
|
||||
--ti-card-tool-selector-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active);
|
||||
--ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-card-tool-icon-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-card-tool-active-icon-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
--ti-card-tool-selector-height: var(--ti-common-size-10x, 40px);
|
||||
--ti-card-tool-selector-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
--ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-card-header-height: 46px;
|
||||
--ti-card-header-border-color: var(--ti-common-color-border);
|
||||
--ti-card-header-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-card-header-title-font-size: var(--ti-common-font-size-1);
|
||||
--ti-card-header-title-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-card-header-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-card-header-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
--ti-card-header-title-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-card-header-title-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-carousel-item() {
|
||||
--ti-carousel-item-title-height: var(--ti-common-size-height-small);
|
||||
--ti-carousel-item-title-text-color: var(--ti-common-color-light);
|
||||
--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-span-font-size: var(--ti-common-font-size-base);
|
||||
--ti-carousel-mask-bg-color: var(--ti-common-color-light);
|
||||
--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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.component-css-vars-carousel() {
|
||||
// 箭头按钮背景高度
|
||||
--ti-carousel-arrow-height: var(--ti-common-size-height-normal);
|
||||
--ti-carousel-arrow-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 箭头按钮背景宽度
|
||||
--ti-carousel-arrow-width: var(--ti-common-size-7x);
|
||||
--ti-carousel-arrow-width: var(--ti-common-size-7x, 28px);
|
||||
// 左右箭头的字号
|
||||
--ti-carousel-arrow-font-size: var(--ti-common-font-size-base);
|
||||
--ti-carousel-arrow-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 左右箭头按钮悬浮背景色
|
||||
--ti-carousel-arrow-hover-bg-color: rgba(0, 0, 0, 0.6);
|
||||
// 左右箭头按钮背景色
|
||||
--ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3);
|
||||
// 左右箭头阴影(hide)
|
||||
--ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none);
|
||||
--ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none, none);
|
||||
// 箭头点击瞬间文本色(hide)
|
||||
--ti-carousel-arrow-active-text-color: var(--ti-common-color-light);
|
||||
--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-border-radius: 13px;
|
||||
// 指示器盒子的高度
|
||||
--ti-carousel-indicators-height: var(--ti-common-size-4x);
|
||||
--ti-carousel-indicators-height: var(--ti-common-size-4x, 16px);
|
||||
// 指示器圆角的背景色(hide)
|
||||
--ti-carousel-indicators-radius-bg-color: rgba(0, 0, 0, 0.3);
|
||||
// 幻灯片内的当前指示器图标色
|
||||
--ti-carousel-indicator-active-text-color: var(--ti-common-color-light);
|
||||
--ti-carousel-indicator-active-text-color: var(--ti-common-color-light, #fff);
|
||||
// 指示器按钮宽度
|
||||
--ti-carousel-indicator-button-width: var(--ti-common-size-2x);
|
||||
--ti-carousel-indicator-button-width: var(--ti-common-size-2x, 8px);
|
||||
// 指示器按钮高度
|
||||
--ti-carousel-indicator-button-height: var(--ti-common-size-2x);
|
||||
--ti-carousel-indicator-button-height: var(--ti-common-size-2x, 8px);
|
||||
// 非当前指示器背景色
|
||||
--ti-carousel-indicator-button-bg-color: var(--ti-common-color-info-disabled);
|
||||
--ti-carousel-indicator-button-bg-color: var(--ti-common-color-info-disabled, #bfbfbf);
|
||||
// 指示器项右外边距
|
||||
--ti-carousel-indicator-margin-right: var(--ti-common-space-0);
|
||||
--ti-carousel-indicator-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 当前指示器右边距
|
||||
--ti-carousel-indicator-active-width: var(--ti-common-size-3x);
|
||||
--ti-carousel-indicator-active-width: var(--ti-common-size-3x, 12px);
|
||||
// 指示器项垂直内边距(hide)
|
||||
--ti-carousel-indicator-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-carousel-indicator-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 指示器项水平内边距
|
||||
--ti-carousel-indicator-padding-horizontal: calc(var(--ti-common-space-1) * 2);
|
||||
--ti-carousel-indicator-padding-horizontal: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
// 当前指示器动画属性(hide)
|
||||
--ti-carousel-indicator-active-transition-property: none;
|
||||
// 当前指示器背景色
|
||||
--ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent);
|
||||
--ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent, transparent);
|
||||
// 当前指示器的宽度
|
||||
--ti-carousel-indicator-active-button-width: var(--ti-carousel-indicator-button-width);
|
||||
// 当前指示器圆角
|
||||
|
|
@ -60,11 +60,11 @@
|
|||
// 幻灯片外的指示器动画(hide)
|
||||
--ti-carousel-indicator-active-transition: none;
|
||||
// 幻灯片外的指示器默认背景色
|
||||
--ti-carousel-outside-button-bg-color: var(--ti-common-color-dark);
|
||||
--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);
|
||||
--ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
|
||||
// 标签按钮的字号(hide)
|
||||
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base);
|
||||
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 幻灯片悬浮时的透明度(hide)
|
||||
--ti-carousel-hover-opacity: 0.6;
|
||||
}
|
||||
|
|
@ -12,19 +12,19 @@
|
|||
|
||||
.component-css-vars-cascader-menu() {
|
||||
// 下拉菜单文本色
|
||||
--ti-cascader-menu-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-cascader-menu-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 下拉菜单边框色
|
||||
--ti-cascader-menu-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-cascader-menu-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 下拉菜单为空时的文本色
|
||||
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 下拉菜单列表垂直方向的内边距
|
||||
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单列表水平方向的内边距
|
||||
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单列表垂直方向的外边距
|
||||
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单列表水平方向的外边距
|
||||
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单的宽度
|
||||
--ti-cascader-menu-width: 180px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,37 +12,37 @@
|
|||
|
||||
.component-css-vars-cascader-node() {
|
||||
// 下拉列表子项的背景色
|
||||
--ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--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);
|
||||
--ti-cascader-node-hover-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 下拉列表子项的文本色
|
||||
--ti-cascader-node-text-color: var(--ti-common-color-text-white);
|
||||
--ti-cascader-node-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 下拉列表子项选中后悬浮时的背景色
|
||||
--ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--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);
|
||||
--ti-cascader-node-selectable-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 下拉列表子项禁用状态时的文本色
|
||||
--ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--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);
|
||||
--ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 下拉列表子项的icon图标的字体大小
|
||||
--ti-cascader-node-icon-font-size: calc(var(--ti-common-font-size-1) - 4px);
|
||||
--ti-cascader-node-icon-font-size: calc(var(--ti-common-font-size-1, 14px) - 4px);
|
||||
// 下拉列表子项的icon图标的色
|
||||
--ti-cascader-node-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-cascader-node-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 下拉列表子项禁用时的icon图标的色
|
||||
--ti-cascader-node-disabled-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-cascader-node-disabled-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 下拉列表子项的选中时icon图标的色
|
||||
--ti-cascader-node-active-icon-color: var(--ti-common-color-icon-white);
|
||||
--ti-cascader-node-active-icon-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 下拉列表子项的前缀display
|
||||
--ti-cascader-node-prefix-display: 'inline-block';
|
||||
// 下拉列表子项的标签的垂直方向的内边距
|
||||
--ti-cascader-node-label-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-cascader-node-label-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉列表子项的标签的水平方向的内边距
|
||||
--ti-cascader-node-label-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-cascader-node-label-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
// 下拉列表子项的单选按钮右侧外边距
|
||||
--ti-cascader-node-radio-margin-right: var(--ti-common-space-base);
|
||||
--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);
|
||||
--ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 下拉列表子项icon距离右侧距离
|
||||
--ti-cascader-node-postfix-right: 10px;
|
||||
// 下拉列表子项最大宽度
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@
|
|||
|
||||
.component-css-vars-cascader-panel() {
|
||||
// 下拉菜单面板的边框圆角
|
||||
--ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 下拉菜单面板的边框色
|
||||
--ti-cascader-panel-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-cascader-panel-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 下拉菜单面板的字体大小
|
||||
--ti-cascader-panel-font-size: var(--ti-common-font-size-base);
|
||||
--ti-cascader-panel-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 下拉菜单面板子项的高度
|
||||
--ti-cascader-panel-node-height: var(--ti-common-size-height-normal);
|
||||
--ti-cascader-panel-node-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 下拉菜单面板中子项的顶部外边距
|
||||
--ti-cascader-panel-node-margin-top: var(--ti-common-space-0);
|
||||
--ti-cascader-panel-node-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单面板中子项的垂直方向的外边距
|
||||
--ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0);
|
||||
--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) - 2px);
|
||||
--ti-cascader-panel-node-label-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px);
|
||||
// 下拉菜单面板中子项的标签的左侧内边距
|
||||
--ti-cascader-panel-node-label-padding-left: var(--ti-common-space-5x);
|
||||
--ti-cascader-panel-node-label-padding-left: var(--ti-common-space-5x, 20px);
|
||||
// 下拉菜单面板中子项的边框圆角
|
||||
--ti-cascader-panel-node-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-cascader-panel-node-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
|
||||
.component-css-vars-cascader() {
|
||||
// 字体大小
|
||||
--ti-cascader-font-size: var(--ti-common-font-size-1);
|
||||
--ti-cascader-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 悬浮时显示的边框色
|
||||
--ti-cascader-hover-border-color: var(--ti-common-color-line-hover);
|
||||
--ti-cascader-hover-border-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
// 聚焦时显示的边框色
|
||||
--ti-cascader-focus-border-color: var(--ti-common-color-line-active);
|
||||
--ti-cascader-focus-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 边框圆角
|
||||
--ti-cascader-border-radius: var(--ti-common-border-radius-1);
|
||||
--ti-cascader-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// icon图标色
|
||||
--ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal);
|
||||
--ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal, #adb0b8);
|
||||
// medium尺寸时的字体大小
|
||||
--ti-cascader-medium-font-size: var(--ti-common-font-size-1);
|
||||
--ti-cascader-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// medium尺寸时的行高
|
||||
--ti-cascader-medium-line-height: 36px;
|
||||
// small尺寸时的行高
|
||||
|
|
@ -32,85 +32,85 @@
|
|||
// small尺寸时的字体大小
|
||||
--ti-cascader-small-font-size: var(--ti-common-font-size-bas);
|
||||
// mini尺寸时的字体大小
|
||||
--ti-cascader-mini-font-size: var(--ti-common-font-size-base);
|
||||
--ti-cascader-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 禁用状态时的文本色
|
||||
--ti-cascader-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-cascader-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 下拉框背景色
|
||||
--ti-cascader-dropdown-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-cascader-dropdown-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 输入框标签背景色
|
||||
--ti-cascader-tag-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-cascader-tag-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 输入框标签的icon图标背景色
|
||||
--ti-cascader-tag-icon-bg-color: var(--ti-common-color-icon-graybg-disabled);
|
||||
--ti-cascader-tag-icon-bg-color: var(--ti-common-color-icon-graybg-disabled, #dfe1e6);
|
||||
// 输入框标签的icon图标色
|
||||
--ti-cascader-tag-icon-color: var(--ti-common-color-icon-white);
|
||||
--ti-cascader-tag-icon-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 输入框标签的icon图标悬浮时显示的背景色
|
||||
--ti-cascader-tag-icon-hover-bg-color: var(--ti-common-color-icon-graybg-normal);
|
||||
--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);
|
||||
--ti-cascader-list-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 下拉列表子项的高度（没有生效）
|
||||
--ti-cascader-item-height: var(--ti-common-size-height-normal);
|
||||
--ti-cascader-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 下拉列表子项悬浮时的背景色（没有生效）
|
||||
--ti-cascader-item-hover-bg-color: #f5f7fa;
|
||||
// 下拉列表子项选中时的文本色（没有生效）
|
||||
--ti-cascader-item-checked-text-color: var(--ti-base-color-primary-active);
|
||||
// 搜索后下拉列表无匹配数据的文本色
|
||||
--ti-cascader-empty-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-cascader-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 搜索框的文本色（没有生效）
|
||||
--ti-cascader-search-input-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-cascader-search-input-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 搜索框的占位符的文本色（没有生效）
|
||||
--ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 下拉框的阴影
|
||||
--ti-cascader-dropdown-box-shadow: var(--ti-common-box-shadow);
|
||||
// 多选模式输入框宽度
|
||||
--ti-cascader-width: '100%';
|
||||
// 下拉框的左侧外边距
|
||||
--ti-cascader-dropdown-margin-left: var(--ti-common-space-0);
|
||||
--ti-cascader-dropdown-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉框的右侧侧外边距
|
||||
--ti-cascader-dropdown-margin-right: var(--ti-common-space-0);
|
||||
--ti-cascader-dropdown-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉框的顶部外边距
|
||||
--ti-cascader-dropdown-margin-top: calc(var(--ti-common-space-6) - 1px);
|
||||
--ti-cascader-dropdown-margin-top: calc(var(--ti-common-space-6, 6px) - 1px);
|
||||
// 下拉框的底部外边距
|
||||
--ti-cascader-dropdown-margin-bottom: calc(var(--ti-common-space-6) - 1px);
|
||||
--ti-cascader-dropdown-margin-bottom: calc(var(--ti-common-space-6, 6px) - 1px);
|
||||
// 输入框标签左侧外边距
|
||||
--ti-cascader-tag-margin-left: var(--ti-common-space-6);
|
||||
--ti-cascader-tag-margin-left: var(--ti-common-space-6, 6px);
|
||||
// 输入框标签右侧外边距
|
||||
--ti-cascader-tag-margin-right: var(--ti-common-space-0);
|
||||
--ti-cascader-tag-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 输入框标签顶部外边距
|
||||
--ti-cascader-tag-margin-top: calc(var(--ti-common-space-1) + 1px);
|
||||
--ti-cascader-tag-margin-top: calc(var(--ti-common-space-1, 1px) + 1px);
|
||||
// 输入框标签底部外边距
|
||||
--ti-cascader-tag-margin-bottom: calc(var(--ti-common-space-1) + 1px);
|
||||
--ti-cascader-tag-margin-bottom: calc(var(--ti-common-space-1, 1px) + 1px);
|
||||
// 下拉框列表的左侧外边距（没有生效）
|
||||
--ti-cascader-list-margin-left: var(--ti-common-space-0);
|
||||
--ti-cascader-list-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的右侧外边距（没有生效）
|
||||
--ti-cascader-list-margin-right: var(--ti-common-space-0);
|
||||
--ti-cascader-list-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的顶部外边距（没有生效）
|
||||
--ti-cascader-list-margin-top: var(--ti-common-space-0);
|
||||
--ti-cascader-list-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的底部外边距（没有生效）
|
||||
--ti-cascader-list-margin-bottom: var(--ti-common-space-0);
|
||||
--ti-cascader-list-margin-bottom: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的左侧外边距（没有生效）
|
||||
--ti-cascader-list-padding-left: var(--ti-common-space-0);
|
||||
--ti-cascader-list-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的右侧外边距（没有生效）
|
||||
--ti-cascader-list-padding-right: var(--ti-common-space-0);
|
||||
--ti-cascader-list-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉框列表的顶部外边距（没有生效）
|
||||
--ti-cascader-list-padding-top: var(--ti-common-space-6);
|
||||
--ti-cascader-list-padding-top: var(--ti-common-space-6, 6px);
|
||||
// 下拉框列表的底部外边距（没有生效）
|
||||
--ti-cascader-list-padding-bottom: var(--ti-common-space-6);
|
||||
--ti-cascader-list-padding-bottom: var(--ti-common-space-6, 6px);
|
||||
// 搜索后下拉列表无匹配数据左侧外边距
|
||||
--ti-cascader-empty-margin-left: var(--ti-common-space-0);
|
||||
--ti-cascader-empty-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 搜索后下拉列表无匹配数据右侧外边距
|
||||
--ti-cascader-empty-margin-right: var(--ti-common-space-0);
|
||||
--ti-cascader-empty-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 搜索后下拉列表无匹配数据顶部外边距
|
||||
--ti-cascader-empty-margin-top: var(--ti-common-space-10);
|
||||
--ti-cascader-empty-margin-top: var(--ti-common-space-10, 10px);
|
||||
// 搜索后下拉列表无匹配数据底部外边距
|
||||
--ti-cascader-empty-margin-bottom: var(--ti-common-space-10);
|
||||
--ti-cascader-empty-margin-bottom: var(--ti-common-space-10, 10px);
|
||||
// 搜索框的左侧外边距（没有生效）
|
||||
--ti-cascader-search-input-margin-left: calc(var(--ti-common-space-1) + 1px);
|
||||
--ti-cascader-search-input-margin-left: calc(var(--ti-common-space-1, 1px) + 1px);
|
||||
// 搜索框的左侧内边距（没有生效）
|
||||
--ti-cascader-search-input-padding-left: var(--ti-common-space-2x);
|
||||
--ti-cascader-search-input-padding-left: var(--ti-common-space-2x, 8px);
|
||||
// 下拉列表子项的字体大小
|
||||
--ti-cascader-item-font-size: var(--ti-common-font-size-base);
|
||||
--ti-cascader-item-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 搜索框的字体大小（没有生效）
|
||||
--ti-cascader-search-input-font-size: var(--ti-common-font-size-base);
|
||||
--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);
|
||||
--ti-cascader-close-hover-icon-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
|
||||
.component-css-vars-chart-core() {
|
||||
--ti-chart-core-data-empty-text-color: #888;
|
||||
--ti-chart-core-data-empty-font-size: var(--ti-common-font-size-1);
|
||||
--ti-chart-core-data-empty-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-chart-core-data-empty-bg-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.component-css-vars-checkbox-button() {
|
||||
// 按钮形式复选框背景色
|
||||
--ti-checkbox-button-bg-color: var(--ti-common-color-bg-light-normal);
|
||||
--ti-checkbox-button-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
|
||||
// 按钮形式复选框选中项左边框阴影色(水平方向首个除外)
|
||||
--ti-checkbox-shadow-color: #dfe1e6;
|
||||
// 按钮形式复选框字号
|
||||
--ti-checkbox-button-font-size: var(--ti-common-font-size-base);
|
||||
--ti-checkbox-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 按钮形式复选框未选中项悬浮文本色
|
||||
--ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white);
|
||||
--ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 按钮形式选中项边框色
|
||||
--ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active);
|
||||
--ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 按钮形式复选框禁用文本色
|
||||
--ti-checkbox-button-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-checkbox-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 按钮形式复选框垂直布局，选中项禁用时的背景色
|
||||
--ti-checkbox-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-checkbox-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 按钮形式复选框禁用背景色
|
||||
--ti-checkbox-button-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-checkbox-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 按钮形式复选框未选中项文本色
|
||||
--ti-checkbox-button-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-checkbox-button-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 按钮形式复选框选中项文本色
|
||||
--ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white);
|
||||
--ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 按钮形式复选框选中项背景色
|
||||
--ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--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);
|
||||
--ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover, #344899);
|
||||
// 按钮形式复选框边框色
|
||||
--ti-checkbox-button-border-color: #e9edfa;
|
||||
// 按钮形式复选框悬浮默认边框色
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
// 按钮组小按钮外边距
|
||||
--ti-checkbox-button-mini-margin-horizontal: 2px;
|
||||
// 按钮组小按钮字号
|
||||
--ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-base);
|
||||
--ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 按钮组小按钮圆角
|
||||
--ti-checkbox-button-size-mini-border-radius: 0px;
|
||||
// 按钮组small按钮内间距
|
||||
|
|
@ -66,13 +66,13 @@
|
|||
// 小尺寸按钮组按钮内间距
|
||||
--ti-checkbox-button-mini-padding-horizontal: 12px;
|
||||
// 小尺寸按钮左侧圆角
|
||||
--ti-checkbox-button-mini-left-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-checkbox-button-mini-left-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 小尺寸按钮右侧圆角
|
||||
--ti-checkbox-button-mini-right-border-radius: 0px;
|
||||
// 小尺寸按钮组最后一个按钮顶部左侧圆角
|
||||
--ti-checkbox-button-mini-last-left-border-radius: 0px;
|
||||
// 小尺寸按钮组最后一个按钮右侧圆角
|
||||
--ti-checkbox-button-mini-last-right-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-checkbox-button-mini-last-right-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 默认按钮组右侧按钮圆角
|
||||
--ti-checkbox-button-right-border-radius: 0px;
|
||||
// 默认按钮组第一个按钮左侧按钮圆角
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
|
||||
.component-css-vars-checkbox-group() {
|
||||
// 垂直复选框和行间距(hide)
|
||||
--ti-checkbox-group-margin-bottom: var(--ti-common-space-2x);
|
||||
--ti-checkbox-group-margin-bottom: var(--ti-common-space-2x, 8px);
|
||||
// 默认换行
|
||||
--ti-checkbox-group-flex-wrap: wrap;
|
||||
// 按钮组按钮外边距
|
||||
--ti-checkbox-group-margin-top: var(--ti-common-space-0);
|
||||
--ti-checkbox-group-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 垂直按钮组第一个子元素边框圆角
|
||||
--ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0);
|
||||
--ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0, 0px);
|
||||
// 垂直按钮组最后一个子元素边框圆角
|
||||
--ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0);
|
||||
--ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0, 0px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,67 +12,67 @@
|
|||
|
||||
.component-css-vars-checkbox() {
|
||||
// 复选框宽度
|
||||
--ti-checkbox-width: var(--ti-common-size-4x);
|
||||
--ti-checkbox-width: var(--ti-common-size-4x, 16px);
|
||||
// 复选框高度
|
||||
--ti-checkbox-height: var(--ti-common-size-4x);
|
||||
--ti-checkbox-height: var(--ti-common-size-4x, 16px);
|
||||
// 默认复选框文本色
|
||||
--ti-checkbox-text-font-family: var(--ti-common-font-family);
|
||||
--ti-checkbox-text-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 默认复选框文本色
|
||||
--ti-checkbox-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-checkbox-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 默认复选框字号
|
||||
--ti-checkbox-font-size: var(--ti-common-font-size-base);
|
||||
--ti-checkbox-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 默认复选框未选中项背景色
|
||||
--ti-checkbox-bg-color: var(--ti-common-color-transparent);
|
||||
--ti-checkbox-bg-color: var(--ti-common-color-transparent, transparent);
|
||||
// 默认复选框选中项背景色
|
||||
--ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize);
|
||||
--ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 默认复选框选中项边框色
|
||||
--ti-checkbox-border-color-checked: var(--ti-common-color-line-active);
|
||||
--ti-checkbox-border-color-checked: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 默认复选框未选中项边框色
|
||||
--ti-checkbox-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-checkbox-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
|
||||
// 默认复选框选中项悬浮背景色 +
|
||||
--ti-checkbox-bg-color-hover-checked: var(--ti-common-color-bg-hover);
|
||||
--ti-checkbox-bg-color-hover-checked: var(--ti-common-color-bg-hover, #344899);
|
||||
// 默认复选框选中项悬浮边框色 +
|
||||
--ti-checkbox-border-color-hover-checked: var(--ti-common-color-bg-hover);
|
||||
--ti-checkbox-border-color-hover-checked: var(--ti-common-color-bg-hover, #344899);
|
||||
|
||||
// 默认复选框未选中项悬浮边框色
|
||||
--ti-checkbox-border-color-hover: var(--ti-common-color-line-active);
|
||||
--ti-checkbox-border-color-hover: var(--ti-common-color-line-active, #5e7ce0);
|
||||
|
||||
// 默认复选框字号(hide)
|
||||
--ti-checkbox-font-normal-line-height: var(--ti-common-line-height-base);
|
||||
--ti-checkbox-font-normal-line-height: var(--ti-common-line-height-base, 12px);
|
||||
// 默认复选框字号(hide)
|
||||
--ti-checkbox-font-medium-line-height: var(--ti-common-line-height-3);
|
||||
--ti-checkbox-font-medium-line-height: var(--ti-common-line-height-3, 18px);
|
||||
// 默认复选框字号(hide)
|
||||
--ti-checkbox-font-small-line-height: var(--ti-common-line-height-2);
|
||||
--ti-checkbox-font-small-line-height: var(--ti-common-line-height-2, 16px);
|
||||
// 默认复选框字号(hide)
|
||||
--ti-checkbox-font-mini-line-height: var(--ti-common-line-height-base);
|
||||
--ti-checkbox-font-mini-line-height: var(--ti-common-line-height-base, 12px);
|
||||
|
||||
// 默认复选框选中项图标高度
|
||||
--ti-checkbox-icon-height: var(--ti-common-size-2x);
|
||||
--ti-checkbox-icon-height: var(--ti-common-size-2x, 8px);
|
||||
// 默认复选框选中项图标宽度
|
||||
--ti-checkbox-icon-width: var(--ti-common-size-base);
|
||||
--ti-checkbox-icon-width: var(--ti-common-size-base, 4px);
|
||||
// 默认复选框对勾的左边距
|
||||
--ti-checkbox-icon-margin-left: var(--ti-common-space-base);
|
||||
--ti-checkbox-icon-margin-left: var(--ti-common-space-base, 4px);
|
||||
// 默认复选框对勾的顶边距
|
||||
--ti-checkbox-icon-margin-top: var(--ti-common-space-0);
|
||||
--ti-checkbox-icon-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 默认复选框禁用时，未选中时背景色
|
||||
--ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled);
|
||||
--ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 默认复选框禁用时，选中项对勾颜色以及半选时中间方框颜色
|
||||
--ti-checkbox-icon-color-disabled: var(--ti-common-color-text-disabled);
|
||||
--ti-checkbox-icon-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认复选框未选中项禁用边框色
|
||||
--ti-checkbox-border-color-unchecked-disabled: var(--ti-common-color-line-disabled);
|
||||
--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);
|
||||
--ti-checkbox-label-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 默认复选框禁用时，选中项背景颜色
|
||||
--ti-checkbox-bg-color-checked-disabled: var(--ti-common-color-bg-disabled);
|
||||
--ti-checkbox-bg-color-checked-disabled: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 默认复选框禁用时，选中项边框颜色
|
||||
--ti-checkbox-border-color-checked-disabled: var(--ti-common-color-line-disabled);
|
||||
--ti-checkbox-border-color-checked-disabled: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
|
||||
// 默认复选框边框圆角
|
||||
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 默认复选框边框圆角
|
||||
--ti-checkbox-checkline-width: var(--ti-common-border-weight-1);
|
||||
--ti-checkbox-checkline-width: var(--ti-common-border-weight-1, 2px);
|
||||
|
||||
// 默认复选框的右侧外边距
|
||||
--ti-checkbox-label-margin-right: var(--ti-common-space-5x);
|
||||
--ti-checkbox-label-margin-right: var(--ti-common-space-5x, 20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.component-css-vars-collapse-item() {
|
||||
// 面板默认文本色
|
||||
--ti-collapse-item-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-collapse-item-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 面板背景色
|
||||
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 面板边框色
|
||||
--ti-collapse-item-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-collapse-item-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 面板左边框色
|
||||
--ti-collapse-item-border-color-left: var(--ti-collapse-item-border-color);
|
||||
// 面板右边框色
|
||||
|
|
@ -30,33 +30,33 @@
|
|||
// 面板禁用时上边框色
|
||||
--ti-collapse-item-disabled-border-color-top: var(--ti-collapse-item-border-color);
|
||||
// 面板圆角
|
||||
--ti-collapse-item-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-collapse-item-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 面板顶部外边距
|
||||
--ti-collapse-item-margin-top: var(--ti-common-space-2x);
|
||||
--ti-collapse-item-margin-top: var(--ti-common-space-2x, 8px);
|
||||
// 面板头部最小高度
|
||||
--ti-collapse-item-header-min-height: var(--ti-common-size-8x);
|
||||
--ti-collapse-item-header-min-height: var(--ti-common-size-8x, 32px);
|
||||
// 面板头部向下箭头图标色
|
||||
--ti-collapse-item-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-collapse-item-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 面板内容背景色
|
||||
--ti-collapse-item-wrap-bg-color: var(--ti-common-color-light);
|
||||
--ti-collapse-item-wrap-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 面板禁用文本色
|
||||
--ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 面板禁用背景色
|
||||
--ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 面板头部字号
|
||||
--ti-collapse-item-header-font-size: var(--ti-common-font-size-base);
|
||||
--ti-collapse-item-header-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 面板头部字重
|
||||
--ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 面板头部的聚焦文本色(hide)
|
||||
--ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 面板头部箭头尺寸(hide)
|
||||
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base);
|
||||
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 面板头部箭头右外边距
|
||||
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x);
|
||||
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x, 12px);
|
||||
// 面板头部向上箭头图标色|箭头悬浮色
|
||||
--ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info);
|
||||
--ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info, #252b3a);
|
||||
// 面板头部箭头尺寸
|
||||
--ti-collapse-item-icon-font-size: var(--ti-common-font-size-2);
|
||||
--ti-collapse-item-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 面板头部箭头旋转角度
|
||||
--ti-collapse-item-arrow-transform: rotate(90deg);
|
||||
// 面板展开头部箭头旋转角度
|
||||
|
|
@ -64,19 +64,19 @@
|
|||
// 面板展开头部箭头图标色
|
||||
--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);
|
||||
--ti-collapse-item-header-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 面板头部水平内边距
|
||||
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-4x);
|
||||
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
// 面板头部背景色
|
||||
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 面板头部边框色
|
||||
--ti-collapse-item-header-border-color: var(--ti-common-color-transparent);
|
||||
--ti-collapse-item-header-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 面板头部左边框色
|
||||
--ti-collapse-item-header-border-color-left: var(--ti-collapse-item-header-border-color);
|
||||
// 面板头部右边框色
|
||||
--ti-collapse-item-header-border-color-right: var(--ti-collapse-item-header-border-color);
|
||||
// 面板内容边框色
|
||||
--ti-collapse-item-content-border-color: var(--ti-common-color-transparent);
|
||||
--ti-collapse-item-content-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 面板内容左边框色
|
||||
--ti-collapse-item-content-border-color-left: var(--ti-collapse-item-content-border-color);
|
||||
// 面板内容右边框色
|
||||
|
|
@ -84,13 +84,13 @@
|
|||
// 面板内容顶部边框色
|
||||
--ti-collapse-item-content-border-color-top: var(--ti-collapse-item-border-color);
|
||||
// 面板内容顶部内边距
|
||||
--ti-collapse-item-content-padding-top: var(--ti-common-space-3x);
|
||||
--ti-collapse-item-content-padding-top: var(--ti-common-space-3x, 12px);
|
||||
// 面板内容左内边距
|
||||
--ti-collapse-item-content-padding-left: var(--ti-common-space-4x);
|
||||
--ti-collapse-item-content-padding-left: var(--ti-common-space-4x, 16px);
|
||||
// 面板内容右内边距
|
||||
--ti-collapse-item-content-padding-right: var(--ti-common-space-4x);
|
||||
--ti-collapse-item-content-padding-right: var(--ti-common-space-4x, 16px);
|
||||
// 面板内容底部内边距
|
||||
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-3x);
|
||||
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
// 面板内容字号
|
||||
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base);
|
||||
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base, 12px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
.component-css-vars-colorpicker() {
|
||||
--ti-color-picker-background: var(--ti-common-color-transparent);
|
||||
--ti-color-picker-border-color: var(--ti-base-color-common-2);
|
||||
--ti-color-picker-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal);
|
||||
--ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1);
|
||||
--ti-color-picker-border-radius: var(--ti-common-border-radius-2);
|
||||
--ti-color-picker-spacing: var(--ti-common-space-base);
|
||||
--ti-color-picker-spacing-2x: var(--ti-common-space-2x);
|
||||
--ti-color-picker-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-color-picker-background: var(--ti-common-color-transparent, transparent);
|
||||
--ti-color-picker-border-color: var(--ti-base-color-common-2, #adb0b8);
|
||||
--ti-color-picker-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
--ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1, 4px);
|
||||
--ti-color-picker-border-radius: var(--ti-common-border-radius-2, 8px);
|
||||
--ti-color-picker-spacing: var(--ti-common-space-base, 4px);
|
||||
--ti-color-picker-spacing-2x: var(--ti-common-space-2x, 8px);
|
||||
--ti-color-picker-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
--ti-color-picker__select__wrapper-zindex: 1000;
|
||||
--ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
|
||||
// 超大尺寸高度
|
||||
--ti-color-picker-size-large-height: var(--ti-common-size-16x);
|
||||
--ti-color-picker-size-large-height: var(--ti-common-size-16x, 64px);
|
||||
// 超大尺寸宽度
|
||||
--ti-color-picker-size-large-width: var(--ti-common-size-16x);
|
||||
--ti-color-picker-size-large-width: var(--ti-common-size-16x, 64px);
|
||||
|
||||
// 中等尺寸高度
|
||||
--ti-color-picker-size-medium-height: var(--ti-common-size-12x);
|
||||
--ti-color-picker-size-medium-height: var(--ti-common-size-12x, 48px);
|
||||
// 中等尺寸最小宽度
|
||||
--ti-color-picker-size-medium-width: var(--ti-common-size-12x);
|
||||
--ti-color-picker-size-medium-width: var(--ti-common-size-12x, 48px);
|
||||
|
||||
// 小型高度
|
||||
--ti-color-picker-size-small-height: var(--ti-common-size-9x);
|
||||
--ti-color-picker-size-small-height: var(--ti-common-size-9x, 36px);
|
||||
// 小尺寸宽度
|
||||
--ti-color-picker-size-small-width: var(--ti-common-size-9x);
|
||||
--ti-color-picker-size-small-width: var(--ti-common-size-9x, 36px);
|
||||
|
||||
// 迷你尺寸按钮高度
|
||||
--ti-color-picker-size-mini-height: var(--ti-common-size-6x);
|
||||
--ti-color-picker-size-mini-height: var(--ti-common-size-6x, 24px);
|
||||
// 迷你尺寸宽度
|
||||
--ti-color-picker-size-mini-width: var(--ti-common-size-6x);
|
||||
--ti-color-picker-size-mini-width: var(--ti-common-size-6x, 24px);
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
.component-css-vars-color-select-panel() {
|
||||
--ti-color-select-panel-background: var(--ti-common-color-transparent);
|
||||
--ti-color-select-panel-border-color: var(--ti-base-color-common-2);
|
||||
--ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-normal);
|
||||
--ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-1);
|
||||
--ti-color-select-panel-border-radius: var(--ti-common-border-radius-2);
|
||||
--ti-color-select-panel-spacing: var(--ti-common-space-base);
|
||||
--ti-color-select-panel-spacing-2x: var(--ti-common-space-2x);
|
||||
--ti-color-select-panel-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-color-select-panel-background: var(--ti-common-color-transparent, transparent);
|
||||
--ti-color-select-panel-border-color: var(--ti-base-color-common-2, #adb0b8);
|
||||
--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-sm: var(--ti-common-border-radius-1, 4px);
|
||||
--ti-color-select-panel-border-radius: var(--ti-common-border-radius-2, 8px);
|
||||
--ti-color-select-panel-spacing: var(--ti-common-space-base, 4px);
|
||||
--ti-color-select-panel-spacing-2x: var(--ti-common-space-2x, 8px);
|
||||
--ti-color-select-panel-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
--ti-color-select-panel__wrapper-zindex: 10;
|
||||
--ti-color-select-panel__wrapper-bg: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-color-select-panel__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
}
|
||||
|
|
@ -12,27 +12,27 @@
|
|||
|
||||
.component-css-vars-crop() {
|
||||
// 弹窗裁剪框可滑动区域背景色(hide)
|
||||
--ti-crop-drag-box-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-crop-drag-box-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 弹窗裁剪框可滑动区域背景色
|
||||
--ti-crop-modal-bg-color: var(--ti-common-color-dark);
|
||||
--ti-crop-modal-bg-color: var(--ti-common-color-dark, #000);
|
||||
// 弹窗裁剪框轮廓色(hide)
|
||||
--ti-crop-view-box-outline-color: var(--ti-common-color-line-active);
|
||||
--ti-crop-view-box-outline-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 设置裁剪框在图片正中心加号背景色
|
||||
--ti-crop-center-bg-color: var(--ti-common-color-icon-graybg-disabled);
|
||||
--ti-crop-center-bg-color: var(--ti-common-color-icon-graybg-disabled, #dfe1e6);
|
||||
// 弹窗裁剪框蒙层背景色
|
||||
--ti-crop-face-bg-color: var(--ti-common-color-light);
|
||||
--ti-crop-face-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 弹窗裁剪框线条背景色
|
||||
--ti-crop-line-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-crop-line-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 弹窗裁剪框六个点背景色
|
||||
--ti-crop-point-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-crop-point-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 操作块高度(hide)
|
||||
--ti-crop-opration-height: var(--ti-common-size-height-normal);
|
||||
--ti-crop-opration-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 操作块背景色(hide)
|
||||
--ti-crop-opration-bg-color: rgba(55, 55, 55, 0.3);
|
||||
// 操作块文字背景色(hide)
|
||||
--ti-crop-opration-span-bg-color: rgba(0, 0, 0, 0.5);
|
||||
// 操作块文本色(hide)
|
||||
--ti-crop-opration-span-text-color: var(--ti-common-color-light);
|
||||
--ti-crop-opration-span-text-color: var(--ti-common-color-light, #fff);
|
||||
// 操作块文字悬浮背景色(hide)
|
||||
--ti-crop-opration-span-hover-bg-color: rgba(0, 0, 0, 0.8);
|
||||
// 模块遮罩背景色(hide)
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
// 关闭模块背景色(hide)
|
||||
--ti-crop-moda-close-bg-color: rgba(0, 0, 0, 0.5);
|
||||
// 关闭模块图标色(hide)
|
||||
--ti-crop-moda-close-icon-color: var(--ti-common-color-light);
|
||||
--ti-crop-moda-close-icon-color: var(--ti-common-color-light, #fff);
|
||||
// 无图片背景色(hide)
|
||||
--ti-crop-nopic-bg-color: rgba(0, 0, 0, 0.3);
|
||||
// 无图片提示色(hide)
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-picker-panel() {
|
||||
--ti-picker-panel-line-height: var(--ti-common-size-height-normal);
|
||||
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
|
||||
--ti-picker-panel-icon-color-btn: var(--ti-common-color-icon-normal);
|
||||
--ti-picker-panel-icon-color-btn-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-picker-panel-icon-color-btn-disabled: var(--ti-common-color-icon-disabled);
|
||||
--ti-picker-panel-line-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-picker-panel-icon-color-btn: var(--ti-common-color-icon-normal, #575d6c);
|
||||
--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);
|
||||
--ti-picker-panel-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-picker-panel-bg-color: var(--ti-common-color-light);
|
||||
--ti-picker-panel-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--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;
|
||||
--ti-picker-panel-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-picker-panel-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-picker-panel-shortcut-selected-background: var(--ti-common-color-selected-background);
|
||||
--ti-picker-panel-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--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-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
--ti-picker-panel-shortcut-selected-background: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,20 +12,20 @@
|
|||
|
||||
.component-css-vars-date-picker() {
|
||||
--ti-date-picker-width: 280px;
|
||||
--ti-date-picker-font-size: var(--ti-common-font-size-base);
|
||||
--ti-date-picker-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-date-picker-bg-color: var(--ti-common-color-light);
|
||||
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-date-picker-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--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-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);
|
||||
--ti-date-picker-selected-bg-color: #f2f2f3;
|
||||
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6);
|
||||
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
|
||||
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-date-picker-current-border-radius: 0;
|
||||
--ti-date-picker-range-bg-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7);
|
||||
--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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-date-range-picker() {
|
||||
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
|
||||
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-date-range-picker-time-header-icon-color: #303133;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,23 +17,23 @@
|
|||
--ti-date-table-td-padding-horizontal: 0;
|
||||
--ti-date-table-td-span-width: 36px;
|
||||
--ti-date-table-td-span-height: 24px;
|
||||
--ti-date-table-th-text-color: var(--ti-base-color-common-2);
|
||||
--ti-date-table-th-text-color: var(--ti-base-color-common-2, #adb0b8);
|
||||
--ti-date-table-td-border-radius: 0;
|
||||
--ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2);
|
||||
--ti-date-table-td-normal-text-color: var(--ti-common-color-light);
|
||||
--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);
|
||||
--ti-date-table-td-today-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-date-table-week-bg-color-current-select: var(--ti-base-color-brand-2);
|
||||
--ti-date-table-week-bg-color-current-hover: var(--ti-base-color-brand-3);
|
||||
--ti-date-table-font-size: var(--ti-common-font-size-base);
|
||||
--ti-date-table-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-date-table-current-border-color: var(--ti-base-color-brand-6);
|
||||
--ti-date-table-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-date-table-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-date-table-range-bg-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-2);
|
||||
--ti-date-table-bg-color-current-select: var(--ti-base-color-brand-6);
|
||||
--ti-date-table-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--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-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-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-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-date-table-border-radius-current-select: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-dept() {
|
||||
--ti-dept-label-font-size: var(--ti-common-font-size-base);
|
||||
--ti-dept-label-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-dept-label-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-dept-selected-info-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-dept-label-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-dept-label-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
--ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-dept-selected-info-bg-color: #f1f1f1;
|
||||
--ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-detail-page() {
|
||||
--ti-detail-page-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-detail-page-font-size: var(--ti-common-font-size-base);
|
||||
--ti-detail-page-header-font-size: var(--ti-common-font-size-1);
|
||||
--ti-detail-page-header-border-color: var(--ti-common-color-border);
|
||||
--ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5);
|
||||
--ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2);
|
||||
--ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-detail-page-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-detail-page-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-detail-page-header-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-detail-page-header-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-detail-dialog-header-bg-color: #f1f1f1;
|
||||
--ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-detail-dialog-active-bg-color: #e9f4fd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,114 +12,114 @@
|
|||
|
||||
.component-css-vars-dialog-box() {
|
||||
// 对话框背景色
|
||||
--ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 对话框圆角
|
||||
--ti-dialog-box-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-dialog-box-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 对话框阴影
|
||||
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down);
|
||||
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
|
||||
|
||||
// 头部边框色(hide)
|
||||
--ti-dialog-box-head-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 头部文本色(hide)
|
||||
--ti-dialog-box-head-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-dialog-box-head-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 头部上内边距
|
||||
--ti-dialog-box-head-padding-top: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-head-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 头部水平内边距
|
||||
--ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 头部下内边距
|
||||
--ti-dialog-box-head-padding-bottom: calc(var(--ti-common-space-base) * 7);
|
||||
--ti-dialog-box-head-padding-bottom: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
// 头部字号
|
||||
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-3);
|
||||
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-3, 18px);
|
||||
// 头部字重
|
||||
--ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 头部文本色
|
||||
--ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 头部底边框颜色
|
||||
--ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent);
|
||||
--ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent, transparent);
|
||||
// 头部字体图标色(hide)
|
||||
--ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 头部字体图标悬浮颜色(hide)
|
||||
--ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 头部主体色(hide)
|
||||
--ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 头部主体字号(hide)
|
||||
--ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1);
|
||||
--ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1, 14px);
|
||||
|
||||
// 关闭按钮宽度
|
||||
--ti-dialog-box-btn-width: var(--ti-common-size-8x);
|
||||
--ti-dialog-box-btn-width: var(--ti-common-size-8x, 32px);
|
||||
// 关闭按钮高度
|
||||
--ti-dialog-box-btn-height: var(--ti-dialog-box-btn-width);
|
||||
// 关闭按钮圆角
|
||||
--ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1);
|
||||
--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);
|
||||
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 关闭按钮图标色
|
||||
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 关闭按钮悬浮图标色
|
||||
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 关闭按钮悬浮背景色
|
||||
--ti-dialog-box-btn-background-color-hover: none;
|
||||
// 关闭按钮与上边框的距离(hide)
|
||||
--ti-dialog-box-btn-position-top: var(--ti-common-space-5x);
|
||||
--ti-dialog-box-btn-position-top: var(--ti-common-space-5x, 20px);
|
||||
// 关闭按钮与右边框的距离(hide)
|
||||
--ti-dialog-box-btn-position-right: var(--ti-common-space-5x);
|
||||
--ti-dialog-box-btn-position-right: var(--ti-common-space-5x, 20px);
|
||||
|
||||
// 内容字号
|
||||
--ti-dialog-box-body-font-size: var(--ti-common-font-size-base);
|
||||
--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);
|
||||
--ti-dialog-box-body-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 内容垂直内边距
|
||||
--ti-dialog-box-body-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 内容水平内边距
|
||||
--ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
|
||||
// 底部上内边距
|
||||
--ti-dialog-box-footer-padding-top: calc(var(--ti-common-space-base) * 7);
|
||||
--ti-dialog-box-footer-padding-top: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
// 底部水平内边距
|
||||
--ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 底部下内边距
|
||||
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px);
|
||||
|
||||
// 抽屉最小宽度
|
||||
--ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10) * 50);
|
||||
--ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
|
||||
// 抽屉最大宽度
|
||||
--ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10) * 100);
|
||||
--ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
|
||||
// 抽屉左内边距
|
||||
--ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉右内边距
|
||||
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-10x);
|
||||
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-10x, 40px);
|
||||
// 抽屉头部上内边距
|
||||
--ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉头部下内边距
|
||||
--ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x);
|
||||
--ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
|
||||
// 抽屉头部左内边距
|
||||
--ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 抽屉头部右内边距
|
||||
--ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 抽屉内容上内边距
|
||||
--ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px);
|
||||
// 抽屉内容下内边距
|
||||
--ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 抽屉内容左内边距
|
||||
--ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 抽屉内容右内边距
|
||||
--ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 抽屉底部文本对齐方式
|
||||
--ti-dialog-box-drawer-footer-text-align: right;
|
||||
// 抽屉底部上内边距
|
||||
--ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-5x);
|
||||
--ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
|
||||
// 抽屉底部下内边距
|
||||
--ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉底部左内边距
|
||||
--ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 抽屉底部右内边距
|
||||
--ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 抽屉底部左外边距
|
||||
--ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x);
|
||||
--ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
|
||||
// 抽屉底部右外边距
|
||||
--ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x);
|
||||
--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);
|
||||
--ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 抽屉边框圆角
|
||||
--ti-dialog-box-drawer-radius: var(--ti-common-space-0);
|
||||
--ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,37 +12,37 @@
|
|||
|
||||
.component-css-vars-dialog-select() {
|
||||
// 弹窗主体的顶部外边距
|
||||
--ti-dialog-box-body-margin-top: var(--ti-common-space-4x);
|
||||
--ti-dialog-box-body-margin-top: var(--ti-common-space-4x, 16px);
|
||||
// 弹窗主体的底部外边距
|
||||
--ti-dialog-box-body-margin-bottom: var(--ti-common-space-0);
|
||||
--ti-dialog-box-body-margin-bottom: var(--ti-common-space-0, 0px);
|
||||
// 选择主体的底部外边距
|
||||
--ti-dialog-select-body-margin-bottom: var(--ti-common-space-4x);
|
||||
--ti-dialog-select-body-margin-bottom: var(--ti-common-space-4x, 16px);
|
||||
// 树选择的右侧外边距
|
||||
--ti-dialog-select-tree-margin-right: var(--ti-common-space-2x);
|
||||
--ti-dialog-select-tree-margin-right: var(--ti-common-space-2x, 8px);
|
||||
// 选择主体的边框粗细
|
||||
--ti-dialog-select-body-box-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-dialog-select-body-box-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 选择主体的边框样式
|
||||
--ti-dialog-select-body-box-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-dialog-select-body-box-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 选择主题的边框颜色
|
||||
--ti-dialog-select-body-box-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-dialog-select-body-box-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 选择底部的水平方向内边距
|
||||
--ti-dialog-select-footer-padding-horizontal: var(--ti-common-space-6x);
|
||||
--ti-dialog-select-footer-padding-horizontal: var(--ti-common-space-6x, 24px);
|
||||
// 选择底部的垂直方向的内边距
|
||||
--ti-dialog-select-footer-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dialog-select-footer-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 分页的水平方向内边距
|
||||
--ti-dialog-select-pager-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-dialog-select-pager-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 分页的垂直方向内边距
|
||||
--ti-dialog-select-pager-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dialog-select-pager-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 分页的上一页按钮的左侧外边距
|
||||
--ti-dialog-select-pager-prev-margin-left: var(--ti-common-space-0);
|
||||
--ti-dialog-select-pager-prev-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 表格主体的底部边框
|
||||
--ti-dialog-select-grid-body-border-weight-bottom: var(--ti-common-space-0);
|
||||
--ti-dialog-select-grid-body-border-weight-bottom: var(--ti-common-space-0, 0px);
|
||||
// 树单选时右侧外边距
|
||||
--ti-dialog-select-tree-radio-margin-right: var(--ti-common-space-0);
|
||||
--ti-dialog-select-tree-radio-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 面板分割线的背景色
|
||||
--ti-dialog-select-split-bg-color: rgba(22, 30, 38, 0.2);
|
||||
// 面板分割线左侧内边距
|
||||
--ti-dialog-select-split-simple-padding-left: var(--ti-common-dropdown-gap);
|
||||
--ti-dialog-select-split-simple-padding-left: var(--ti-common-dropdown-gap, 2px);
|
||||
// 面板分割线右侧内边距
|
||||
--ti-dialog-select-split-simple-padding-right: var(--ti-common-dropdown-gap);
|
||||
--ti-dialog-select-split-simple-padding-right: var(--ti-common-dropdown-gap, 2px);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.component-css-vars-divider() {
|
||||
--ti-divider-dividing-line: 1px solid var(--ti-common-color-border);
|
||||
--ti-divider-text-bg: var(--ti-base-color-bg-1);
|
||||
--ti-divider-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-divider-dividing-line: 1px solid var(--ti-common-color-border, #adb0b8);
|
||||
--ti-divider-text-bg: var(--ti-base-color-bg-1, #ffffff);
|
||||
--ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,71 +12,71 @@
|
|||
|
||||
.component-css-vars-drawer() {
|
||||
// 最小宽度
|
||||
--ti-drawer-min-width: calc(var(--ti-common-space-10) * 50);
|
||||
--ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
|
||||
// 最大宽度
|
||||
--ti-drawer-max-width: calc(var(--ti-common-space-10) * 100);
|
||||
--ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
|
||||
// 背景色
|
||||
--ti-drawer-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 左内边距
|
||||
--ti-drawer-padding-left: var(--ti-common-space-8x);
|
||||
--ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
|
||||
// 右内边距
|
||||
--ti-drawer-padding-right: var(--ti-common-space-10x);
|
||||
--ti-drawer-padding-right: var(--ti-common-space-10x, 40px);
|
||||
// 阴影
|
||||
--ti-drawer-shadow: var(--ti-common-shadow-4-down);
|
||||
--ti-drawer-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
|
||||
// 头部与底部边框颜色
|
||||
--ti-drawer-divider-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 边框圆角
|
||||
--ti-drawer-radius: var(--ti-common-space-0);
|
||||
--ti-drawer-radius: var(--ti-common-space-0, 0px);
|
||||
|
||||
// 头部上内边距
|
||||
--ti-drawer-header-padding-top: var(--ti-common-space-8x);
|
||||
--ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 头部下内边距
|
||||
--ti-drawer-header-padding-bottom: var(--ti-common-space-5x);
|
||||
--ti-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
|
||||
// 头部左内边距
|
||||
--ti-drawer-header-padding-left: var(--ti-common-space-0);
|
||||
--ti-drawer-header-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 头部右内边距
|
||||
--ti-drawer-body-padding-right: var(--ti-common-space-0);
|
||||
--ti-drawer-body-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 头部字号
|
||||
--ti-drawer-head-title-font-size: var(--ti-common-font-size-2);
|
||||
--ti-drawer-head-title-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 头部文本色(hide)
|
||||
--ti-drawer-head-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-drawer-head-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 头部字重
|
||||
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 关闭按钮宽度
|
||||
--ti-drawer-btn-width: var(--ti-common-size-8x);
|
||||
--ti-drawer-btn-width: var(--ti-common-size-8x, 32px);
|
||||
// 关闭按钮高度
|
||||
--ti-drawer-btn-height: var(--ti-drawer-btn-width);
|
||||
// 关闭按钮图标尺寸
|
||||
--ti-drawer-close-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-drawer-close-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 关闭按钮圆角
|
||||
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1);
|
||||
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 关闭按钮悬浮图标色
|
||||
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 关闭按钮与上边框的距离(hide)
|
||||
--ti-drawer-btn-position-top: var(--ti-common-space-5x);
|
||||
--ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
|
||||
// 关闭按钮与右边框的距离(hide)
|
||||
--ti-drawer-btn-position-right: var(--ti-common-space-5x);
|
||||
--ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
|
||||
|
||||
// 内容上内边距
|
||||
--ti-drawer-body-padding-top: var(--ti-common-space-0);
|
||||
--ti-drawer-body-padding-top: var(--ti-common-space-0, 0px);
|
||||
// 内容下内边距
|
||||
--ti-drawer-body-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 内容左内边距
|
||||
--ti-drawer-body-padding-left: var(--ti-common-space-0);
|
||||
--ti-drawer-body-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 内容右内边距
|
||||
--ti-drawer-header-padding-right: var(--ti-common-space-0);
|
||||
--ti-drawer-header-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 底部文本对齐方式
|
||||
--ti-drawer-footer-text-align: right;
|
||||
// 底部上内边距
|
||||
--ti-drawer-footer-padding-top: var(--ti-common-space-5x);
|
||||
--ti-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
|
||||
// 底部下内边距
|
||||
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x);
|
||||
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
|
||||
// 底部左内边距
|
||||
--ti-drawer-footer-padding-left: var(--ti-common-space-0);
|
||||
--ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 底部右内边距
|
||||
--ti-drawer-footer-padding-right: var(--ti-common-space-0);
|
||||
--ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 底部左外边距
|
||||
--ti-drawer-footer-margin-left: var(--ti-common-space-8x);
|
||||
--ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
|
||||
// 底部右外边距
|
||||
--ti-drawer-footer-margin-right: var(--ti-common-space-10x);
|
||||
--ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,103 +14,103 @@
|
|||
// 下拉菜单项高度
|
||||
--ti-dropdown-item-height: 30px;
|
||||
// 下拉菜单项悬浮背景色
|
||||
--ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 下拉菜单非禁用项悬浮文本色
|
||||
--ti-dropdown-item-hover-text-color: var(--ti-common-color-text-highlight);
|
||||
--ti-dropdown-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 下拉菜单项点击瞬间背景色
|
||||
--ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 下拉菜单项点击瞬间文本色
|
||||
--ti-dropdown-item-active-text-color: var(--ti-common-color-text-white);
|
||||
--ti-dropdown-item-active-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 下拉菜单项禁用文本色
|
||||
--ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 下拉菜单项文本色
|
||||
--ti-dropdown-item-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-dropdown-item-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 下拉菜单项字号
|
||||
--ti-dropdown-item-font-size: var(--ti-common-font-size-base);
|
||||
--ti-dropdown-item-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 默认尺寸下拉菜单项的行高
|
||||
--ti-dropdown-item-line-height: var(--ti-common-line-height-number);
|
||||
--ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 下拉菜单项垂直内边距
|
||||
--ti-dropdown-item-padding-vertical: var(--ti-common-space-6);
|
||||
--ti-dropdown-item-padding-vertical: var(--ti-common-space-6, 6px);
|
||||
// 下拉菜单项水平内边距
|
||||
--ti-dropdown-item-padding-horizontal: var(--ti-common-space-5x);
|
||||
--ti-dropdown-item-padding-horizontal: var(--ti-common-space-5x, 20px);
|
||||
// 下拉菜单项边框圆角
|
||||
--ti-dropdown-item-border-radius: var(--ti-common-border-radius-0);
|
||||
--ti-dropdown-item-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
// 下拉菜单项最大宽度
|
||||
--ti-dropdown-item-max-width: var(--ti-common-size-33x);
|
||||
--ti-dropdown-item-max-width: var(--ti-common-size-33x, 132px);
|
||||
// 下拉项图标默认填充色
|
||||
--ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
//下拉项图标悬浮填充色
|
||||
--ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 下拉项图标激活时填充色
|
||||
--ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white);
|
||||
--ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white, #fff);
|
||||
// 下拉项图标禁用填充色
|
||||
--ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled);
|
||||
--ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled, #adb0b8);
|
||||
// 下拉项展开图标的左侧外边距
|
||||
--ti-dropdown-item-expand-svg-margin-left: calc(
|
||||
-1 * (var(--ti-common-space-base) + var(--ti-dropdown-item-expand-icon-size))
|
||||
-1 * (var(--ti-common-space-base, 4px) + var(--ti-dropdown-item-expand-icon-size))
|
||||
);
|
||||
// 下拉项展开图标的右侧外边距
|
||||
--ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 下拉项内容的左侧外边距
|
||||
--ti-dropdown-item-content-margin-left: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-content-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉项内容悬浮时的字重
|
||||
--ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4);
|
||||
--ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal);
|
||||
// 下拉项分割线尺寸
|
||||
--ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 下拉项分割线样式
|
||||
--ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 下拉项分割线颜色
|
||||
--ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 下拉项前置伪元素的填充色
|
||||
--ti-dropdown-item-before-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-dropdown-item-before-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 下拉项前置伪元素的垂直外边距
|
||||
--ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉项前置伪元素的水平外边距
|
||||
--ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 中尺寸下拉项前置伪元素的水平外边距
|
||||
--ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 小尺寸下拉项前置伪元素的水平外边距
|
||||
--ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 迷你尺寸下拉项前置伪元素的水平外边距
|
||||
--ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉项前置伪元素的高度
|
||||
--ti-dropdown-item-before-height: 6px; // TINY-TODO 等设计图出来再优化为变量
|
||||
// 中尺寸下拉项前置伪元素的高度
|
||||
--ti-dropdown-item-medium-before-height: 6px;
|
||||
// 小尺寸下拉项前置伪元素的高度
|
||||
--ti-dropdown-item-small-before-height: var(--ti-common-size-base);
|
||||
--ti-dropdown-item-small-before-height: var(--ti-common-size-base, 4px);
|
||||
// 迷你尺寸下拉项前置伪元素的高度
|
||||
--ti-dropdown-item-mini-before-height: 3px;
|
||||
// 中尺寸下拉菜单菜单项的行高
|
||||
--ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal);
|
||||
--ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 中尺寸下拉菜单菜单项的字号
|
||||
--ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1);
|
||||
--ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 中尺寸下拉菜单菜单项的垂直内边距
|
||||
--ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 中尺寸下拉菜单菜单项的水平内边距
|
||||
--ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x);
|
||||
--ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
// 中尺寸下拉菜单菜单项分割线的顶部外边距
|
||||
--ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6);
|
||||
--ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6, 6px);
|
||||
// 小尺寸下拉菜单菜单项的行高
|
||||
--ti-dropdown-item-small-line-height: var(--ti-common-line-height-5);
|
||||
--ti-dropdown-item-small-line-height: var(--ti-common-line-height-5, 24px);
|
||||
// 小尺寸下拉菜单菜单项的垂直内边距
|
||||
--ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 小尺寸下拉菜单菜单项的水平内边距
|
||||
--ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x);
|
||||
--ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
// 小尺寸下拉菜单菜单项的字号
|
||||
--ti-dropdown-item-small-font-size: var(--ti-common-font-size-base);
|
||||
--ti-dropdown-item-small-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 小尺寸下拉菜单菜单项分割线的顶部外边距
|
||||
--ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base);
|
||||
--ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base, 4px);
|
||||
// 迷你尺寸下拉菜单菜单项的行高
|
||||
--ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5);
|
||||
--ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5, 24px);
|
||||
// 迷你尺寸下拉菜单菜单项的垂直内边距
|
||||
--ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 迷你尺寸下拉菜单菜单项的水平内边距
|
||||
--ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
// 迷你尺寸下拉菜单菜单项的字号
|
||||
--ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base);
|
||||
--ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 迷你尺寸下拉菜单菜单项分割线的顶部外边距
|
||||
--ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1) * 3);
|
||||
--ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1, 1px) * 3);
|
||||
// 展开图标尺寸
|
||||
--ti-dropdown-item-expand-icon-size: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,29 +14,29 @@
|
|||
// 下拉菜单边框的宽度
|
||||
--ti-dropdown-menu-border-width: 0;
|
||||
// 下拉菜单边框的颜色
|
||||
--ti-dropdown-menu-border-color: var(--ti-common-color-light);
|
||||
--ti-dropdown-menu-border-color: var(--ti-common-color-light, #fff);
|
||||
// 下拉菜单弹框的阴影
|
||||
--ti-dropdown-menu-box-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-dropdown-menu-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
// 下拉菜单弹框的背景色
|
||||
--ti-dropdown-menu-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-dropdown-menu-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 下拉菜单弹框的圆角
|
||||
--ti-dropdown-menu-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-dropdown-menu-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 下拉菜单的最小宽度
|
||||
--ti-dropdown-menu-min-width: var(--ti-common-size-9x);
|
||||
--ti-dropdown-menu-min-width: var(--ti-common-size-9x, 36px);
|
||||
// 下拉菜单弹框与触发按钮的距离
|
||||
--ti-dropdown-menu-margin-vertical: var(--ti-common-space-base);
|
||||
--ti-dropdown-menu-margin-vertical: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单弹框的垂直内边距
|
||||
--ti-dropdown-menu-padding-vertical: var(--ti-common-space-base);
|
||||
--ti-dropdown-menu-padding-vertical: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单弹框的水平内边距
|
||||
--ti-dropdown-menu-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-menu-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单中尺寸的弹框垂直内边距
|
||||
--ti-dropdown-menu-medium-padding-vertical: var(--ti-common-space-6);
|
||||
--ti-dropdown-menu-medium-padding-vertical: var(--ti-common-space-6, 6px);
|
||||
// 下拉菜单中尺寸的弹框水平内边距
|
||||
--ti-dropdown-menu-medium-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-menu-medium-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单小尺寸的弹框垂直内边距
|
||||
--ti-dropdown-menu-small-padding-vertical: var(--ti-common-space-6);
|
||||
--ti-dropdown-menu-small-padding-vertical: var(--ti-common-space-6, 6px);
|
||||
// 下拉菜单小尺寸的弹框水平内边距
|
||||
--ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单弹框箭头的尺寸
|
||||
--ti-dropdown-menu-arrow-border-width: 6px;
|
||||
// 下拉菜单弹框箭头的底部外边距
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
// 下拉菜单弹框箭头的顶部外边距
|
||||
--ti-dropdown-menu-arrow-margin-top: 12px;
|
||||
// 下拉菜单弹框箭头的边框色
|
||||
--ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 下拉菜单弹框箭头的颜色
|
||||
--ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light);
|
||||
--ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #fff);
|
||||
// 下拉菜单弹框周边的填充色
|
||||
--ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent);
|
||||
--ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent);
|
||||
}
|
||||
|
|
@ -1,56 +1,56 @@
|
|||
.component-css-vars-dropdown() {
|
||||
// 下拉菜单触发元素的字号
|
||||
--ti-dropdown-font-size: var(--ti-common-font-size-base);
|
||||
--ti-dropdown-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 下拉菜单触发元素的文字颜色
|
||||
--ti-dropdown-text-color: var(--ti-common-color-text-link);
|
||||
--ti-dropdown-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 下拉菜单触发元素悬浮时的文字颜色
|
||||
--ti-dropdown-text-color-hover: var(--ti-common-color-text-link-hover);
|
||||
--ti-dropdown-text-color-hover: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 下拉菜单触发元素的行高
|
||||
--ti-dropdown-line-height: var(--ti-common-line-height-number);
|
||||
--ti-dropdown-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 下拉菜单触发元素的图标尺寸
|
||||
--ti-dropdown-icon-size: 10px;
|
||||
// 下拉菜单触发元素的图标颜色
|
||||
--ti-dropdown-icon-color: var(--ti-common-color-text-link);
|
||||
--ti-dropdown-icon-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 下拉菜单触发元素悬浮时的图标颜色
|
||||
--ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover);
|
||||
--ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover, #344899);
|
||||
// 下拉菜单触发元素按钮类型时图标颜色
|
||||
--ti-dropdown-button-icon-color: var(--ti-common-color-icon-white);
|
||||
--ti-dropdown-button-icon-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 下拉菜单触发元素按钮类型时图标尺寸
|
||||
--ti-dropdown-button-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-dropdown-button-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 下拉菜单触发元素的文本禁用色
|
||||
--ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled);
|
||||
--ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 下拉菜单触发源图标的左侧外边距
|
||||
--ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base);
|
||||
--ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜触发元素为按钮组时，下拉按钮的左侧内边距
|
||||
--ti-dropdown-caret-button-padding-left: var(--ti-common-space-base);
|
||||
--ti-dropdown-caret-button-padding-left: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单触发元素为按钮组时，下拉按钮的右侧侧内边距
|
||||
--ti-dropdown-caret-button-padding-right: var(--ti-common-space-base);
|
||||
--ti-dropdown-caret-button-padding-right: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单触发元素为按钮组时，下拉按钮的最小宽度
|
||||
--ti-dropdown-caret-button-min-width: var(--ti-common-size-6x);
|
||||
--ti-dropdown-caret-button-min-width: var(--ti-common-size-6x, 24px);
|
||||
// 下拉菜单触发元素为按钮组时，按钮之间分割线的颜色
|
||||
--ti-dropdown-caret-line-bg-color: var(--ti-common-color-light);
|
||||
--ti-dropdown-caret-line-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 下拉菜单触发元素为按钮组时，按钮之间分割线的顶部外边距
|
||||
--ti-dropdown-caret-line-margin-top: var(--ti-common-space-base);
|
||||
--ti-dropdown-caret-line-margin-top: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单触发元素为按钮组时，按钮之间分割线的底部外边距
|
||||
--ti-dropdown-caret-line-margin-bottom: var(--ti-common-space-base);
|
||||
--ti-dropdown-caret-line-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单触发元素为按钮组且悬浮时，按钮之间分割线的顶部外边距
|
||||
--ti-dropdown-caret-line-margin-top-hover: var(--ti-common-space-0);
|
||||
--ti-dropdown-caret-line-margin-top-hover: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单触发元素为按钮组且悬浮时，按钮之间分割线的底部外边距
|
||||
--ti-dropdown-caret-line-margin-bottom-hover: var(--ti-common-space-0);
|
||||
--ti-dropdown-caret-line-margin-bottom-hover: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单触发元素为按钮组时，按钮之间分割线的宽度
|
||||
--ti-dropdown-caret-line-width: var(--ti-common-border-weight-normal);
|
||||
--ti-dropdown-caret-line-width: var(--ti-common-border-weight-normal, 1px);
|
||||
// 下拉菜单触发元素为按钮组且默认类型时，按钮之间分割线的颜色
|
||||
--ti-dropdown-caret-line-bg-color-default: var(--ti-common-color-line-normal);
|
||||
--ti-dropdown-caret-line-bg-color-default: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 下拉菜单触发元素为按钮组且默认类型时，按钮之间分割线的悬浮色
|
||||
--ti-dropdown-caret-line-bg-color-default-hover: var(--ti-common-color-line-active);
|
||||
--ti-dropdown-caret-line-bg-color-default-hover: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 下拉菜单触发元素为按钮组时，图标的垂直外边距
|
||||
--ti-dropdown-caret-svg-margin-vertical: var(--ti-common-space-0);
|
||||
--ti-dropdown-caret-svg-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单触发元素为按钮组时，图标的水平外边距
|
||||
--ti-dropdown-caret-svg-margin-horizontal: var(--ti-common-space-base);
|
||||
--ti-dropdown-caret-svg-margin-horizontal: var(--ti-common-space-base, 4px);
|
||||
// 下拉菜单触发元素为按钮组时，图标的左侧内边距
|
||||
--ti-dropdown-caret-svg-padding-left: var(--ti-common-space-0);
|
||||
--ti-dropdown-caret-svg-padding-left: var(--ti-common-space-0, 0px);
|
||||
// 下拉菜单文字按钮的左侧内边距
|
||||
--ti-dropdown-title-button-padding-right: var(--ti-common-space-5x);
|
||||
--ti-dropdown-title-button-padding-right: var(--ti-common-space-5x, 20px);
|
||||
// 下拉菜单文字按钮的右侧内边距
|
||||
--ti-dropdown-title-button-padding-left: var(--ti-common-space-5x);
|
||||
--ti-dropdown-title-button-padding-left: var(--ti-common-space-5x, 20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,32 +11,32 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--ti-errortips-box-bg-color: var(--ti-common-color-light);
|
||||
--ti-errortips-box-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-errortips-body-text-color: #5a5e66;
|
||||
--ti-errortips-body-font-size: var(--ti-common-font-size-1);
|
||||
--ti-errortips-body-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-errortips-body-code-font-size: 100px;
|
||||
--ti-errortips-body-code-text-color: #9ac7ef;
|
||||
--ti-errortips-body-content-font-size: var(--ti-common-font-size-2);
|
||||
--ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8);
|
||||
--ti-errortips-sso-box-bg-color: var(--ti-common-color-light);
|
||||
--ti-errortips-body-content-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8, 800);
|
||||
--ti-errortips-sso-box-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-errortips-sso-body-text-color: #5a5e66;
|
||||
--ti-errortips-sso-body-font-size: var(--ti-common-font-size-1);
|
||||
--ti-errortips-sso-body-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-errortips-not-sso-bg-color: #dcdfe4;
|
||||
--ti-errortips-not-sso-body-bg-color: #f4f5f9;
|
||||
--ti-errortips-not-sso-body-border-color: #d4d5d7;
|
||||
--ti-errortips-not-sso-body-title-border-color: #b6babf;
|
||||
--ti-errortips-not-sso-body-title-font-size: var(--ti-common-font-size-4);
|
||||
--ti-errortips-not-sso-body-login-font-size: var(--ti-common-font-size-2);
|
||||
--ti-errortips-not-sso-body-title-font-size: var(--ti-common-font-size-4, 20px);
|
||||
--ti-errortips-not-sso-body-login-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-errortips-not-sso-body-text-color: #5a5e66;
|
||||
--ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5);
|
||||
--ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-errortips-not-sso-body-placeholder-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-errortips-not-sso-body-input-hover-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-errortips-not-sso-body-input-focus-text-color: var(--ti-common-color-border);
|
||||
--ti-errortips-not-sso-body-input-danger-border-color: var(--ti-base-color-bg-8);
|
||||
--ti-errortips-not-sso-body-button-text-color: var(--ti-common-color-light);
|
||||
--ti-errortips-not-sso-body-button-bg-color: var(--ti-base-color-brand-6);
|
||||
--ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-errortips-not-sso-body-button-hover-bg-color: var(--ti-base-color-brand-5);
|
||||
--ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-errortips-not-sso-body-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-errortips-not-sso-body-input-hover-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-errortips-not-sso-body-input-focus-text-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-errortips-not-sso-body-input-danger-border-color: var(--ti-base-color-bg-8, #c7000b);
|
||||
--ti-errortips-not-sso-body-button-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-errortips-not-sso-body-button-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-errortips-not-sso-body-button-hover-bg-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-errortips-not-sso-body-errmessage-text-color: #f00;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
|
||||
.component-css-vars-espace() {
|
||||
--ti-espace-font-size: 26px;
|
||||
--ti-espace-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-espace-hover-text-color: var(--ti-base-color-brand-5);
|
||||
--ti-espace-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-espace-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.component-css-vars-fall-menu() {
|
||||
// 菜单列表高度
|
||||
--ti-fall-menu-menu-height: var(--ti-common-size-height-large);
|
||||
--ti-fall-menu-menu-height: var(--ti-common-size-height-large, 48px);
|
||||
// 菜单背景色
|
||||
--ti-fall-menu-bg-color-normal: var(--ti-base-color-brand-6);
|
||||
--ti-fall-menu-bg-color-normal: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
// 菜单项悬浮背景色
|
||||
--ti-fall-menu-bg-color-hover: var(--ti-base-color-brand-5);
|
||||
--ti-fall-menu-bg-color-hover: var(--ti-base-color-brand-5, #7693f5);
|
||||
// 左右图标大小
|
||||
--ti-fall-menu-icon-font-size: var(--ti-common-font-size-base);
|
||||
--ti-fall-menu-icon-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 菜单项文本色
|
||||
--ti-fall-menu-slot-text-color: var(--ti-common-color-light);
|
||||
--ti-fall-menu-slot-text-color: var(--ti-common-color-light, #fff);
|
||||
// 悬浮下拉框背景色
|
||||
--ti-fall-menu-slot-bg-color: var(--ti-common-color-light);
|
||||
--ti-fall-menu-slot-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 菜单项字号
|
||||
--ti-fall-menu-title-font-size: var(--ti-common-font-size-2);
|
||||
--ti-fall-menu-title-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 下拉框标题文本色
|
||||
--ti-fall-menu-box-title-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-fall-menu-box-title-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 下拉框文本色
|
||||
--ti-fall-menu-box-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-fall-menu-box-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
// 下拉框标题字号
|
||||
--ti-fall-menu-box-font-size: var(--ti-common-font-size-1);
|
||||
--ti-fall-menu-box-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 下拉框标题高度
|
||||
--ti-fall-menu-box-title-height: var(--ti-common-size-height-small);
|
||||
--ti-fall-menu-box-title-height: var(--ti-common-size-height-small, 32px);
|
||||
// 下拉框内容高度
|
||||
--ti-fall-menu-box-content-height: 26px;
|
||||
// 下拉框悬浮文本色
|
||||
--ti-fall-menu-box-hover-text-color: var(--ti-common-color-primary-active);
|
||||
--ti-fall-menu-box-hover-text-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,26 +12,26 @@
|
|||
|
||||
.component-css-vars-floatbar() {
|
||||
// 浮动块边框色
|
||||
--ti-floatbar-border-color: var(--ti-common-color-border);
|
||||
--ti-floatbar-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 浮动块圆角
|
||||
--ti-floatbar-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-floatbar-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 浮动块字号
|
||||
--ti-floatbar-font-size: var(--ti-common-font-size-1);
|
||||
--ti-floatbar-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 浮动块背景色
|
||||
--ti-floatbar-list-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-floatbar-list-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 浮动块阴影:
|
||||
--ti-floatbar-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
|
||||
|
||||
// 列表项最小高度
|
||||
--ti-floatbar-list-item-min-height: var(--ti-common-size-10x);
|
||||
--ti-floatbar-list-item-min-height: var(--ti-common-size-10x, 40px);
|
||||
// 列表项最小宽度
|
||||
--ti-floatbar-list-item-min-width: var(--ti-common-size-20x);
|
||||
--ti-floatbar-list-item-min-width: var(--ti-common-size-20x, 80px);
|
||||
// 列表项行高
|
||||
--ti-floatbar-list-line-height: var(--ti-common-size-10x);
|
||||
--ti-floatbar-list-line-height: var(--ti-common-size-10x, 40px);
|
||||
// 列表项文本色
|
||||
--ti-floatbar-list-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-floatbar-list-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 列表项悬浮文本色
|
||||
--ti-floatbar-list-hover-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-floatbar-list-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 列表项悬浮背景色
|
||||
--ti-floatbar-list-hover-bg-color: rgba(24, 144, 255, 0.06);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.component-css-vars-form-item() {
|
||||
// 小型尺寸表单输入框左侧行高(hide)
|
||||
--ti-form-item-small-line-height: var(--ti-common-line-height-7);
|
||||
--ti-form-item-small-line-height: var(--ti-common-line-height-7, 36px);
|
||||
// 中等尺寸表单输入框左侧行高(hide)
|
||||
--ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7) + 6px);
|
||||
--ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7, 36px) + 6px);
|
||||
// 迷你尺寸表单输入框左侧行高(hide)
|
||||
--ti-form-item-mini-line-height: var(--ti-common-line-height-5);
|
||||
--ti-form-item-mini-line-height: var(--ti-common-line-height-5, 24px);
|
||||
// 表单输入框左侧文本行高
|
||||
--ti-form-item-label-line-height: var(--ti-common-size-height-normal);
|
||||
--ti-form-item-label-line-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 迷你尺寸表单的输入框高度
|
||||
--ti-form-item-input-mini-height: var(--ti-common-size-6x);
|
||||
--ti-form-item-input-mini-height: var(--ti-common-size-6x, 24px);
|
||||
// 小型尺寸表单的输入框高度
|
||||
--ti-form-item-input-small-height: var(--ti-common-size-9x);
|
||||
--ti-form-item-input-small-height: var(--ti-common-size-9x, 36px);
|
||||
// 中等尺寸表单的输入框高度
|
||||
--ti-form-item-input-medium-height: calc(var(--ti-common-size-base) * 10.5);
|
||||
--ti-form-item-input-medium-height: calc(var(--ti-common-size-base, 4px) * 10.5);
|
||||
// 表单输入框左侧字号
|
||||
--ti-form-item-label-font-size: var(--ti-common-font-size-1);
|
||||
--ti-form-item-label-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 表单输入框左侧文本色
|
||||
--ti-form-item-label-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-form-item-label-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
|
||||
// 表单校验错误时输入框提示字号
|
||||
--ti-form-item-error-font-size: var(--ti-common-font-size-base);
|
||||
--ti-form-item-error-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 表单校验错误时输入框提示文本色
|
||||
--ti-form-item-error-text-color: var(--ti-common-color-error);
|
||||
--ti-form-item-error-text-color: var(--ti-common-color-error, #f66f6a);
|
||||
// 表单校验错误时星号文本色
|
||||
--ti-form-item-error-star-text-color: var(--ti-common-color-error);
|
||||
--ti-form-item-error-star-text-color: var(--ti-common-color-error, #f66f6a);
|
||||
// 表单校验错误时输入框边框色
|
||||
--ti-form-item-error-border-color: var(--ti-common-color-error-border);
|
||||
--ti-form-item-error-border-color: var(--ti-common-color-error-border, #f66f6a);
|
||||
// 表单校验错误时输入框背景色
|
||||
--ti-form-item-error-bg-color: var(--ti-common-color-error-bg);
|
||||
--ti-form-item-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
|
||||
// 小型尺寸表单的行间距
|
||||
--ti-form-item-margin-bottom-default: var(--ti-common-space-5x);
|
||||
--ti-form-item-margin-bottom-default: var(--ti-common-space-5x, 20px);
|
||||
// 迷你尺寸表单的行间距
|
||||
--ti-form-item-margin-bottom-mini: var(--ti-common-space-2x);
|
||||
--ti-form-item-margin-bottom-mini: var(--ti-common-space-2x, 8px);
|
||||
// 小型尺寸表单的行间距
|
||||
--ti-form-item-margin-bottom-small: var(--ti-common-space-2x);
|
||||
--ti-form-item-margin-bottom-small: var(--ti-common-space-2x, 8px);
|
||||
// 中等尺寸表单的行间距
|
||||
--ti-form-item-margin-bottom-medium: var(--ti-common-space-3x);
|
||||
--ti-form-item-margin-bottom-medium: var(--ti-common-space-3x, 12px);
|
||||
// 表单校验错误时星号的显示(hide)
|
||||
--ti-form-item-error-star-display: inline-block;
|
||||
// 表单校验行内错误左侧外边距
|
||||
--ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base) * 2.5);
|
||||
--ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base, 4px) * 2.5);
|
||||
// 表单校验块级错误消息上侧内边距
|
||||
--ti-form-item-error-block-padding-top: var(--ti-common-space-2x);
|
||||
--ti-form-item-error-block-padding-top: var(--ti-common-space-2x, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
// 表单项垂直排列时的下边距(hide)
|
||||
--ti-form-item-label-top-margin-bottom: 16px;
|
||||
// 表单项垂直排列时的表单项标签行高(hide)
|
||||
--ti-form-item-label-top-label-line-height: var(--ti-common-size-height-normal);
|
||||
--ti-form-item-label-top-label-line-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 表单项垂直排列时的表单项标签高度(hide)
|
||||
--ti-form-item-label-top-label-height: var(--ti-common-size-height-normal);
|
||||
--ti-form-item-label-top-label-height: var(--ti-common-size-height-normal, 28px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,142 +12,142 @@
|
|||
|
||||
.component-css-vars-grid() {
|
||||
// 表格默认字体
|
||||
--ti-grid-font-family: var(--ti-common-font-family);
|
||||
--ti-grid-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 默认表头文本色
|
||||
--ti-grid-header-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-grid-header-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 默认表体文本色
|
||||
--ti-grid-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-grid-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 默认按钮图标悬浮色
|
||||
--ti-grid-icon-color: var(--ti-common-color-info-normal);
|
||||
--ti-grid-icon-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 表格亮色
|
||||
--ti-grid-light-color: var(--ti-common-color-light);
|
||||
--ti-grid-light-color: var(--ti-common-color-light, #fff);
|
||||
// 表格错误色
|
||||
--ti-grid-error-color: var(--ti-common-color-error-text);
|
||||
--ti-grid-error-color: var(--ti-common-color-error-text, #de504e);
|
||||
// 表格错误背景色
|
||||
--ti-grid-error-bg-color: var(--ti-common-color-error-bg);
|
||||
--ti-grid-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
// 表格成功色
|
||||
--ti-grid-success-color: var(--ti-common-color-success);
|
||||
--ti-grid-success-color: var(--ti-common-color-success, #50d4ab);
|
||||
// 表格警告色
|
||||
--ti-grid-warning-color: var(--ti-common-color-warn);
|
||||
--ti-grid-warning-color: var(--ti-common-color-warn, #fa9841);
|
||||
// 表格禁用色
|
||||
--ti-grid-disabled-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-grid-disabled-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 筛选弹框复选框边框色
|
||||
--ti-grid-normal-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-grid-normal-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 默认字号
|
||||
--ti-grid-font-size: var(--ti-common-font-size-base);
|
||||
--ti-grid-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 默认边框色
|
||||
--ti-grid-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-grid-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 行复选按钮圆角|筛选弹窗输入框圆角
|
||||
--ti-grid-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-grid-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 表格主体内容td边框颜色
|
||||
--ti-grid-body-td-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-grid-body-td-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
|
||||
// 表头x轴虚拟滚动元素边框颜色
|
||||
--ti-grid-header-repair-border-color: var(--ti-common-color-transparent);
|
||||
--ti-grid-header-repair-border-color: var(--ti-common-color-transparent, transparent);
|
||||
|
||||
// 表格内部单选按钮边框色
|
||||
--ti-grid-radio-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-grid-radio-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 表格单选框选中背景色
|
||||
--ti-grid-radio-bg-color-checked: var(--ti-grid-primary-color);
|
||||
|
||||
// 表格内部多选按钮边框色
|
||||
--ti-grid-checkbox-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-grid-checkbox-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 表格多选框选中背景色
|
||||
--ti-grid-checkbox-bg-color-checked: var(--ti-grid-primary-color);
|
||||
// 表格复选框字号
|
||||
--ti-grid-checkbox-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-grid-checkbox-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 表格内部多选按钮边框圆角
|
||||
--ti-grid-checkbox-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-grid-checkbox-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
|
||||
// 表格头部默认背景色
|
||||
--ti-grid-header-background-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-grid-header-background-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 新增行背景颜色
|
||||
--ti-grid-new-row-background-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-grid-new-row-background-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 表格主色调色
|
||||
--ti-grid-primary-color: var(--ti-common-color-primary-normal);
|
||||
--ti-grid-primary-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 表格主色调悬浮色
|
||||
--ti-grid-primary-hover-color: var(--ti-common-color-primary-hover);
|
||||
--ti-grid-primary-hover-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 表格主色调激活色
|
||||
--ti-grid-primary-active-color: var(--ti-common-color-primary-active);
|
||||
--ti-grid-primary-active-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 表格主色调禁用色(没有效果)
|
||||
--ti-grid-primary-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-grid-primary-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
|
||||
// 自定义表头列高度（没有效果）
|
||||
--ti-grid-custom-head-height: var(--ti-common-space-10x);
|
||||
--ti-grid-custom-head-height: var(--ti-common-space-10x, 40px);
|
||||
// 自定义内容列表高度（没有效果）
|
||||
--ti-grid-custom-body-list-height: var(--ti-common-size-height-small);
|
||||
--ti-grid-custom-body-list-height: var(--ti-common-size-height-small, 32px);
|
||||
// 表格列拖拽分割线背景颜色
|
||||
--ti-grid-header-resizable-bg-color: var(--ti-common-color-text-white);
|
||||
--ti-grid-header-resizable-bg-color: var(--ti-common-color-text-white, #fff);
|
||||
// 表格列拖拽分割线高度
|
||||
--ti-grid-header-resizable-line-height: 100%;
|
||||
|
||||
// (单选|复选)框禁用背景色
|
||||
--ti-grid-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-grid-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
|
||||
// 筛选弹框边框色
|
||||
--ti-grid-popup-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-grid-popup-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 简易筛选面板按钮组边距
|
||||
--ti-grid-filter-button-group-size: var(--ti-common-space-10);
|
||||
--ti-grid-filter-button-group-size: var(--ti-common-space-10, 10px);
|
||||
// 简易时间筛选面板标题颜色
|
||||
--ti-grid-filter-date-title-color: var(--ti-common-color-text-weaken);
|
||||
--ti-grid-filter-date-title-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 筛选面板字体颜色
|
||||
--ti-grid-filter-date-color: var(--ti-common-color-text-primary);
|
||||
--ti-grid-filter-date-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
|
||||
// 树表展开图标颜色
|
||||
--ti-grid-tree-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-grid-tree-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 树表展开图标悬浮颜色
|
||||
--ti-grid-tree-icon-hover-color: var(--ti-common-color-icon-hover);
|
||||
--ti-grid-tree-icon-hover-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
|
||||
// 行默认背景色
|
||||
--ti-grid-row-background-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-grid-row-background-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 斑马纹行背景色
|
||||
--ti-grid-row-striped-background-color: #fafafa;
|
||||
// 行悬浮默认背景色
|
||||
--ti-grid-row-hover-background-color: var(--ti-common-color-hover-background);
|
||||
--ti-grid-row-hover-background-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
|
||||
// 高亮悬停列悬浮表头背景色
|
||||
--ti-grid-column-hover-background-color: #d7effb;
|
||||
// 鼠标配置项双击表头选中当前列背景色
|
||||
--ti-grid-column-current-background-color: var(--ti-common-color-hover-background);
|
||||
--ti-grid-column-current-background-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 表头编辑图标色
|
||||
--ti-grid-column-icon-text-color: var(--ti-common-color-icon-normal);
|
||||
--ti-grid-column-icon-text-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 可编辑表格输入框高度
|
||||
--ti-grid-input-height: var(--ti-common-size-height-normal);
|
||||
--ti-grid-input-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 鼠标配置项选中项边框厚度
|
||||
--ti-grid-column-checked-border-width: var(--ti-common-border-weight-1);
|
||||
--ti-grid-column-checked-border-width: var(--ti-common-border-weight-1, 2px);
|
||||
// 表格加载中背景色
|
||||
--ti-grid-loading-background-color: rgba(0, 0, 0, 0.2);
|
||||
// 表格加载中图标长度尺寸
|
||||
--ti-grid-loading-width-size: var(--ti-common-size-10x);
|
||||
--ti-grid-loading-width-size: var(--ti-common-size-10x, 40px);
|
||||
// 表格加载中图标宽度尺寸
|
||||
--ti-grid-loading-height-size: var(--ti-common-size-10x);
|
||||
--ti-grid-loading-height-size: var(--ti-common-size-10x, 40px);
|
||||
// 单元格字体高度
|
||||
--ti-grid-line-height-number: var(--ti-common-line-height-number);
|
||||
--ti-grid-line-height-number: var(--ti-common-line-height-number, 1.5);
|
||||
|
||||
// 中等尺寸表头高度
|
||||
--ti-grid-medium-header-column-height: var(--ti-common-size-height-normal);
|
||||
--ti-grid-medium-header-column-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 默认尺寸表头高度
|
||||
--ti-grid-default-header-column-height: var(--ti-common-size-height-normal);
|
||||
--ti-grid-default-header-column-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 小尺寸表头高度
|
||||
--ti-grid-small-header-column-height: var(--ti-common-size-height-normal);
|
||||
--ti-grid-small-header-column-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 超小尺寸表头高度
|
||||
--ti-grid-mini-header-column-height: var(--ti-common-size-height-normal);
|
||||
--ti-grid-mini-header-column-height: var(--ti-common-size-height-normal, 28px);
|
||||
|
||||
// 中等尺寸表格单元格高度
|
||||
--ti-grid-medium-column-height: var(--ti-common-size-13x);
|
||||
--ti-grid-medium-column-height: var(--ti-common-size-13x, 52px);
|
||||
// 默认尺寸表格单元格高度
|
||||
--ti-grid-default-column-height: calc(var(--ti-common-space-10x) + 2px);
|
||||
--ti-grid-default-column-height: calc(var(--ti-common-space-10x, 40px) + 2px);
|
||||
// 小尺寸表格单元格高度
|
||||
--ti-grid-small-column-height: var(--ti-common-size-9x);
|
||||
--ti-grid-small-column-height: var(--ti-common-size-9x, 36px);
|
||||
// 超小尺寸表格单元格高度
|
||||
--ti-grid-mini-column-height: var(--ti-common-size-7x);
|
||||
--ti-grid-mini-column-height: var(--ti-common-size-7x, 28px);
|
||||
|
||||
// 默认单元格垂直内边距
|
||||
--ti-grid-td-padding-vertical: calc(var(--ti-common-space-1) * 2);
|
||||
--ti-grid-td-padding-vertical: calc(var(--ti-common-space-1, 1px) * 2);
|
||||
// 单元格水平内边距
|
||||
--ti-grid-td-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-grid-td-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 表头排序图标尺寸
|
||||
--ti-grid-header-icon-font-size: var(--ti-common-font-size-2);
|
||||
--ti-grid-header-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 表头排序图标尺寸缩放比例
|
||||
--ti-grid-column-icon-scale-size: 1;
|
||||
// 表格无数据背景图片
|
||||
|
|
|
|||
|
|
@ -1,110 +1,110 @@
|
|||
.component-css-vars-guide() {
|
||||
// 引导框箭头高度
|
||||
--ti-guide-arrow-height: var(--ti-common-size-4x);
|
||||
--ti-guide-arrow-height: var(--ti-common-size-4x, 16px);
|
||||
// 引导框箭头宽度
|
||||
--ti-guide-arrow-width: var(--ti-common-size-4x);
|
||||
--ti-guide-arrow-width: var(--ti-common-size-4x, 16px);
|
||||
// 引导框头部左上边框圆角
|
||||
--ti-guide-header-border-top-left-radius: var(--ti-common-border-radius-1);
|
||||
--ti-guide-header-border-top-left-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 引导框头部右上边框圆角
|
||||
--ti-guide-header-border-top-right-radius: var(--ti-common-border-radius-1);
|
||||
--ti-guide-header-border-top-right-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 引导框头部行高
|
||||
--ti-guide-header-line-height: var(--ti-common-line-height-6);
|
||||
--ti-guide-header-line-height: var(--ti-common-line-height-6, 32px);
|
||||
// 引导框头部左内边距
|
||||
--ti-guide-header-padding-left: var(--ti-common-space-6x);
|
||||
--ti-guide-header-padding-left: var(--ti-common-space-6x, 24px);
|
||||
// 引导框头部右内边距
|
||||
--ti-guide-header-padding-right: var(--ti-common-space-6x);
|
||||
--ti-guide-header-padding-right: var(--ti-common-space-6x, 24px);
|
||||
// 引导框头部顶部内边距
|
||||
--ti-guide-header-padding-top: var(--ti-common-space-6x);
|
||||
--ti-guide-header-padding-top: var(--ti-common-space-6x, 24px);
|
||||
// 引导框头部背景色
|
||||
--ti-guide-header-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-guide-header-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 引导框标题文本色
|
||||
--ti-guide-title-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-guide-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 引导框标题行高
|
||||
--ti-guide-title-line-height: var(--ti-common-line-height-6);
|
||||
--ti-guide-title-line-height: var(--ti-common-line-height-6, 32px);
|
||||
// 引导框标题字重
|
||||
--ti-guide-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-guide-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 引导框关闭按钮图标字号
|
||||
--ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5);
|
||||
--ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5, 24px);
|
||||
// 引导框关闭按钮图标宽度
|
||||
--ti-guide-cancel-icon-width: var(--ti-common-size-5x);
|
||||
--ti-guide-cancel-icon-width: var(--ti-common-size-5x, 20px);
|
||||
// 引导框关闭按钮图标高度
|
||||
--ti-guide-cancel-icon-height: var(--ti-common-size-5x);
|
||||
--ti-guide-cancel-icon-height: var(--ti-common-size-5x, 20px);
|
||||
// 引导框关闭按钮图标行高
|
||||
--ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4);
|
||||
--ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4, 20px);
|
||||
// 引导框关闭按钮图标颜色
|
||||
--ti-guide-cancel-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-guide-cancel-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 引导框关闭按钮图标字重
|
||||
--ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1);
|
||||
--ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1, 100);
|
||||
// 引导框关闭按钮图标顶部外边距
|
||||
--ti-guide-cancel-icon-margin-top: -6px;
|
||||
// 引导框关闭按钮图标悬浮色
|
||||
--ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover);
|
||||
--ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 引导框内容文本色
|
||||
--ti-guide-text-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-guide-text-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 引导框内容行高
|
||||
--ti-guide-text-line-height: var(--ti-common-line-height-4);
|
||||
--ti-guide-text-line-height: var(--ti-common-line-height-4, 20px);
|
||||
// 引导框内容字号
|
||||
--ti-guide-text-font-size: var(--ti-common-font-size-1);
|
||||
--ti-guide-text-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 引导框内容上内边距
|
||||
--ti-guide-text-padding-top: var(--ti-common-space-6x);
|
||||
--ti-guide-text-padding-top: var(--ti-common-space-6x, 24px);
|
||||
// 引导框内容水平内边距
|
||||
--ti-guide-text-padding-horizontal: var(--ti-common-space-6x);
|
||||
--ti-guide-text-padding-horizontal: var(--ti-common-space-6x, 24px);
|
||||
// 引导框内容底部内边距
|
||||
--ti-guide-text-padding-bottom: calc(var(--ti-common-space-base) * 5.5);
|
||||
--ti-guide-text-padding-bottom: calc(var(--ti-common-space-base, 4px) * 5.5);
|
||||
// 引导框内容滚动wrap左内边距
|
||||
--ti-guide-text-scrollbox-padding-right: var(--ti-common-space-2x);
|
||||
--ti-guide-text-scrollbox-padding-right: var(--ti-common-space-2x, 8px);
|
||||
// 引导框内容滚动条宽度
|
||||
--ti-guide-text-scrollbar-width: var(--ti-common-scrollbar-width);
|
||||
--ti-guide-text-scrollbar-width: var(--ti-common-scrollbar-width, 4px);
|
||||
// 引导框内容滚动条高度
|
||||
--ti-guide-text-scrollbar-height: var(--ti-common-scrollbar-height);
|
||||
--ti-guide-text-scrollbar-height: var(--ti-common-scrollbar-height, 4px);
|
||||
// 引导框内容滚动条圆角
|
||||
--ti-guide-text-scrollbar-border-radius: var(--ti-common-scrollbar-thumb-border-radius);
|
||||
--ti-guide-text-scrollbar-border-radius: var(--ti-common-scrollbar-thumb-border-radius, 6px);
|
||||
// 引导框内容滚动条边框色
|
||||
--ti-guide-text-scrollbar-border-color: var(--ti-common-scrollbar-thumb-active-bg-color);
|
||||
--ti-guide-text-scrollbar-border-color: var(--ti-common-scrollbar-thumb-active-bg-color, #999999);
|
||||
// 引导框底部右下圆角
|
||||
--ti-guide-footer-border-bottom-right-radius: var(--ti-common-border-radius-1);
|
||||
--ti-guide-footer-border-bottom-right-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 引导框底部左下圆角
|
||||
--ti-guide-footer-border-bottom-left-radius: var(--ti-common-border-radius-1);
|
||||
--ti-guide-footer-border-bottom-left-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 引导框底部左内边距
|
||||
--ti-guide-footer-padding-left: var(--ti-common-space-6x);
|
||||
--ti-guide-footer-padding-left: var(--ti-common-space-6x, 24px);
|
||||
// 引导框底部右内边距
|
||||
--ti-guide-footer-padding-right: var(--ti-common-space-6x);
|
||||
--ti-guide-footer-padding-right: var(--ti-common-space-6x, 24px);
|
||||
// 引导框底部底部内边距
|
||||
--ti-guide-footer-padding-bottom: var(--ti-common-space-6x);
|
||||
--ti-guide-footer-padding-bottom: var(--ti-common-space-6x, 24px);
|
||||
// 引导框进度条文本颜色
|
||||
--ti-guide-progress-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-guide-progress-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 引导框按钮默认样式文本色
|
||||
--ti-guide-button-text-color: var(--ti-common-color-text-white);
|
||||
--ti-guide-button-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 引导框按钮默认样式圆角
|
||||
--ti-guide-button-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-guide-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 引导框按钮默认样式背景色
|
||||
--ti-guide-button-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-guide-button-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 引导框按钮默认样式悬浮背景色
|
||||
--ti-guide-button-hover-bg-color: var(--ti-common-color-primary-hover);
|
||||
--ti-guide-button-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 引导框按钮默认样式聚焦背景色
|
||||
--ti-guide-button-focus-bg-color: var(--ti-common-color-primary-active);
|
||||
--ti-guide-button-focus-bg-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 引导框按钮默认样式激活背景色
|
||||
--ti-guide-button-active-bg-color: var(--ti-common-color-primary-active);
|
||||
--ti-guide-button-active-bg-color: var(--ti-common-color-primary-active, #7693f5);
|
||||
// 引导框按钮默认样式禁用背景色
|
||||
--ti-guide-button-disable-bg-color: var(--ti-common-color-primary-disabled-bgcolor);
|
||||
--ti-guide-button-disable-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6);
|
||||
// 引导框按钮默认样式禁用文本色
|
||||
--ti-guide-button-disable-text-color: var(--ti-common-color-primary-disabled-text);
|
||||
--ti-guide-button-disable-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8);
|
||||
// 引导框按钮透明样式文本色
|
||||
--ti-guide-button-secondary-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-guide-button-secondary-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 引导框按钮透明样式背景色
|
||||
--ti-guide-button-secondary-bg-color: var(--ti-common-color-light);
|
||||
--ti-guide-button-secondary-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 引导框按钮透明样式边框色
|
||||
--ti-guide-button-secondary-border-color: var(--ti-common-color-border);
|
||||
--ti-guide-button-secondary-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 引导框按钮透明样式悬浮边框色
|
||||
--ti-guide-button-secondary-hover-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-guide-button-secondary-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 引导框按钮透明样式聚焦边框色
|
||||
--ti-guide-button-secondary-focus-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-guide-button-secondary-focus-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 引导框按钮透明样式激活边框色
|
||||
--ti-guide-button-secondary-active-border-color: var(--ti-common-color-primary-normal);
|
||||
--ti-guide-button-secondary-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 引导框按钮透明样式禁用背景色
|
||||
--ti-guide-button-secondary-disabled-bg-color: var(--ti-common-color-light);
|
||||
--ti-guide-button-secondary-disabled-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 引导框按钮透明样式禁用文本色
|
||||
--ti-guide-button-secondary-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-guide-button-secondary-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 引导框按钮透明样式禁用边框色
|
||||
--ti-guide-button-secondary-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-guide-button-secondary-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-hrapprover() {
|
||||
--ti-hrapprover-error-border-color: var(--ti-base-color-bg-8);
|
||||
--ti-hrapprover-table-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-hrapprover-table-font-size: var(--ti-common-font-size-base);
|
||||
--ti-hrapprover-error-border-color: var(--ti-base-color-bg-8, #c7000b);
|
||||
--ti-hrapprover-table-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-hrapprover-table-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-hrapprover-tr-bg-color: #fafafa;
|
||||
--ti-hrapprover-tr-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-hrapprover-tr-odd-bg-color: var(--ti-common-color-light);
|
||||
--ti-hrapprover-th-height: var(--ti-common-size-height-small);
|
||||
--ti-hrapprover-thead-border-color: var(--ti-common-color-border);
|
||||
--ti-hrapprover-tr-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-hrapprover-tr-odd-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-hrapprover-th-height: var(--ti-common-size-height-small, 32px);
|
||||
--ti-hrapprover-thead-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-hrapprover-thead-bg-color: #f1f1f1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-image-viewer() {
|
||||
--ti-image-viewer-text-color: var(--ti-common-color-light);
|
||||
--ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light);
|
||||
--ti-image-viewer-close-font-size: var(--ti-common-font-size-4);
|
||||
--ti-image-viewer-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-image-viewer-close-font-size: var(--ti-common-font-size-4, 20px);
|
||||
--ti-image-viewer-close-bg-color: #606266;
|
||||
--ti-image-viewer-close-top: 40px;
|
||||
--ti-image-viewer-close-right: 40px;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
--ti-image-viewer-actions-height: 44px;
|
||||
--ti-image-viewer-actions-bottom: 30px;
|
||||
--ti-image-viewer-actions-inner-justify-content: space-around;
|
||||
--ti-image-viewer-next-font-size: var(--ti-common-font-size-5);
|
||||
--ti-image-viewer-next-font-size: var(--ti-common-font-size-5, 24px);
|
||||
--ti-image-viewer-next-width: 44px;
|
||||
--ti-image-viewer-next-height: 44px;
|
||||
--ti-image-viewer-mask-wrap-bg-color: none;
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
.component-css-vars-image() {
|
||||
// 图片错误字号
|
||||
--ti-image-error-font-size: var(--ti-common-font-size-1);
|
||||
--ti-image-error-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 图片错误色
|
||||
--ti-image-error-text-color: var(--ti-common-color-bg-secondary);
|
||||
--ti-image-error-text-color: var(--ti-common-color-bg-secondary, #adb0b8);
|
||||
// 图片错误背景色
|
||||
--ti-image-error-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-image-error-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,81 +12,81 @@
|
|||
|
||||
.component-css-vars-input() {
|
||||
// 输入框文本颜色
|
||||
--ti-input-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-input-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 输入框背景颜色
|
||||
--ti-input-bg-color: var(--ti-common-color-icon-white);
|
||||
--ti-input-bg-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 输入框字体大小
|
||||
--ti-input-font-size: var(--ti-common-font-size-base);
|
||||
--ti-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 输入框计数器字体大小
|
||||
--ti-input-count-font-size: var(--ti-common-font-size-base);
|
||||
--ti-input-count-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 输入框高度
|
||||
--ti-input-height: var(--ti-common-size-height-normal);
|
||||
--ti-input-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 输入框边框圆角
|
||||
--ti-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 输入框边框色
|
||||
--ti-input-border-color: var(--ti-common-color-border);
|
||||
--ti-input-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 输入框hover时边框色
|
||||
--ti-input-hover-border-color: var(--ti-common-color-border-hover);
|
||||
--ti-input-hover-border-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 输入框active时边框色
|
||||
--ti-input-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-input-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// icon颜色
|
||||
--ti-input-icon-color: var(--ti-common-color-border-hover);
|
||||
--ti-input-icon-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 输入框聚焦时icon颜色
|
||||
--ti-input-focus-icon-color: var(--ti-common-color-border-hover);
|
||||
--ti-input-focus-icon-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// suffix图标颜色
|
||||
--ti-input-suffix-icon-color: var(--ti-common-color-border-hover);
|
||||
--ti-input-suffix-icon-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 输入框占位符文本颜色
|
||||
--ti-input-placeholder-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 输入框disabled时的文本颜色
|
||||
--ti-input-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 输入框medium尺寸的高度
|
||||
--ti-input-medium-height: var(--ti-common-size-height-medium);
|
||||
--ti-input-medium-height: var(--ti-common-size-height-medium, 40px);
|
||||
// 输入框small尺寸的高度
|
||||
--ti-input-small-height: var(--ti-common-size-height-small);
|
||||
--ti-input-small-height: var(--ti-common-size-height-small, 32px);
|
||||
// 输入框mini尺寸的高度
|
||||
--ti-input-mini-height: var(--ti-common-size-height-mini);
|
||||
--ti-input-mini-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 输入框disabled时的背景颜色
|
||||
--ti-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 输入框disabled时的边框颜色
|
||||
--ti-input-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-input-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 输入框exceed时的文本颜色
|
||||
--ti-input-exceed-text-color: var(--ti-common-bg-primary);
|
||||
--ti-input-exceed-text-color: var(--ti-common-bg-primary, #c7000b);
|
||||
// 输入框的清除icon图标的文本颜色
|
||||
--ti-input-clear-text-color: var(--ti-common-color-icon-graybg-normal);
|
||||
--ti-input-clear-text-color: var(--ti-common-color-icon-graybg-normal, #adb0b8);
|
||||
// 输入框的icon图标的字体大小
|
||||
--ti-input-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-input-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 输入框的关闭icon图标的文本颜色
|
||||
--ti-input-icon-close-text-color: var(--ti-common-color-icon-graybg-active);
|
||||
--ti-input-icon-close-text-color: var(--ti-common-color-icon-graybg-active, #5e7ce0);
|
||||
// 输入框的清除icon图标hover时的文本颜色
|
||||
--ti-input-clear-text-color-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-input-clear-text-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 文本框计数器的颜色
|
||||
--ti-input-textarea-count-color: var(--ti-common-color-text-weaken);
|
||||
--ti-input-textarea-count-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 文本框垂直方向内边距
|
||||
--ti-input-textarea-padding-vertical: var(--ti-common-space-2x);
|
||||
--ti-input-textarea-padding-vertical: var(--ti-common-space-2x, 8px);
|
||||
// 文本框水平方向内边距
|
||||
--ti-input-textarea-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-input-textarea-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 输入框计数器的颜色
|
||||
--ti-input-count-color: var(--ti-common-color-text-weaken);
|
||||
--ti-input-count-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 输入框垂直方向内边距
|
||||
--ti-input-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-input-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 输入框水平方向内边距
|
||||
--ti-input-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-input-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 输入框配置suffix时的右侧内边距
|
||||
--ti-input-suffix-padding-right: calc(var(--ti-common-space-8x) - 2px);
|
||||
--ti-input-suffix-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px);
|
||||
// 输入框配置suffix时的左侧内边距
|
||||
--ti-input-suffix-padding-left: var(--ti-common-space-2x);
|
||||
--ti-input-suffix-padding-left: var(--ti-common-space-2x, 8px);
|
||||
// 输入框配置prefix时的右侧外边距
|
||||
--ti-input-prefix-padding-right: calc(var(--ti-common-space-8x) - 4px);
|
||||
--ti-input-prefix-padding-right: calc(var(--ti-common-space-8x, 32px) - 4px);
|
||||
// 输入框配置prefix时的左侧外边距
|
||||
--ti-input-prefix-padding-left: calc(var(--ti-common-space-8x) - 2px);
|
||||
--ti-input-prefix-padding-left: calc(var(--ti-common-space-8x, 32px) - 2px);
|
||||
// suffix图标的右侧边距
|
||||
--ti-input-suffix-right: var(--ti-common-space-2x);
|
||||
--ti-input-suffix-right: var(--ti-common-space-2x, 8px);
|
||||
// 计数器文本字数颜色
|
||||
--ti-input-count-textlength-color: var(--ti-common-color-text-weaken);
|
||||
--ti-input-count-textlength-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 输入框suffix的宽度
|
||||
--ti-input-suffix-icon-width: 1em;
|
||||
// 输入框suffix的高度
|
||||
--ti-input-suffix-icon-height: 1em;
|
||||
// 输入框placeholder颜色
|
||||
--ti-input-placeholder-color: var(--ti-common-color-placeholder);
|
||||
--ti-input-placeholder-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,39 +12,39 @@
|
|||
|
||||
.component-css-vars-ip-address() {
|
||||
// IP地址输入框高度
|
||||
--ti-ip-address-normal-height: var(--ti-common-size-7x);
|
||||
--ti-ip-address-normal-height: var(--ti-common-size-7x, 28px);
|
||||
// IP地址输入框宽度
|
||||
--ti-ip-address-normal-width: calc(var(--ti-common-size-base) * 40);
|
||||
--ti-ip-address-normal-width: calc(var(--ti-common-size-base, 4px) * 40);
|
||||
// IP地址输入框默认水平内边距
|
||||
--ti-ip-address-padding-horizontal: var(--ti-common-space-0);
|
||||
--ti-ip-address-padding-horizontal: var(--ti-common-space-0, 0px);
|
||||
// IP地址输入框默认文本色
|
||||
--ti-ip-address-normal-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-ip-address-normal-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// IP地址输入框图标文本色
|
||||
--ti-ip-address-icon-color: var(--ti-common-color-info-normal);
|
||||
--ti-ip-address-icon-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// IP地址输入框图标尺寸
|
||||
--ti-ip-address-icon-size: calc(var(--ti-common-size-base) * 2.5);
|
||||
--ti-ip-address-icon-size: calc(var(--ti-common-size-base, 4px) * 2.5);
|
||||
// IP地址输入框禁用文本色
|
||||
--ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// IP地址输入框默认边框色
|
||||
--ti-ip-address-normal-border-color: var(--ti-common-color-border);
|
||||
--ti-ip-address-normal-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// IP地址输入框默认背景色
|
||||
--ti-ip-address-normal-bg-color: var(--ti-common-color-light);
|
||||
--ti-ip-address-normal-bg-color: var(--ti-common-color-light, #fff);
|
||||
// IP地址输入框圆角
|
||||
--ti-ip-address-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-ip-address-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// IP地址输入框字号
|
||||
--ti-ip-address-font-size: var(--ti-common-font-size-base);
|
||||
--ti-ip-address-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// IP地址输入框字族
|
||||
--ti-ip-address-normal-font-family: var(--ti-common-font-family);
|
||||
--ti-ip-address-normal-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// IP地址输入框行高
|
||||
--ti-ip-address-line-height: var(--ti-common-line-height-2);
|
||||
--ti-ip-address-line-height: var(--ti-common-line-height-2, 16px);
|
||||
// IP地址输入框聚焦边框色
|
||||
--ti-ip-address-border-color-focus: var(--ti-common-color-line-active);
|
||||
--ti-ip-address-border-color-focus: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// IP地址输入框悬浮边框色
|
||||
--ti-ip-address-border-color-hover: var(--ti-common-color-line-hover);
|
||||
--ti-ip-address-border-color-hover: var(--ti-common-color-line-hover, #575d6c);
|
||||
// IP地址输入框禁用背景色
|
||||
--ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// IP地址输入框禁用边框色
|
||||
--ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// Ip地址输入框item宽度
|
||||
--ti-ip-address-input-width: var(--ti-common-size-8x);
|
||||
--ti-ip-address-input-width: var(--ti-common-size-8x, 32px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,23 +12,23 @@
|
|||
|
||||
.component-css-vars-link-menu() {
|
||||
// 收藏夹设置按钮图标色(和取消按钮文本色)
|
||||
--ti-link-menu-nav-item-text-color: var(--ti-base-color-brand-6);
|
||||
--ti-link-menu-nav-item-text-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
// 收藏夹菜单导航右边框色
|
||||
--ti-link-menu-nav-item-border-color: #c4c4c4;
|
||||
// 收藏夹菜单按钮文本色
|
||||
--ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8);
|
||||
// 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
|
||||
--ti-link-menu-btn-bg-color: var(--ti-common-color-light);
|
||||
--ti-link-menu-btn-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 收藏夹弹出框的输入框高度
|
||||
--ti-link-menu-input-height: var(--ti-common-size-height-normal);
|
||||
--ti-link-menu-input-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 收藏夹弹出框字号
|
||||
--ti-link-menu-input-font-size: var(--ti-common-font-size-base);
|
||||
--ti-link-menu-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 收藏夹弹出框输入框(和列表项非节点)的文本色
|
||||
--ti-link-menu-input-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-link-menu-input-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 收藏夹弹出框的输入框和取消按钮边框色
|
||||
--ti-link-menu-input-border-color: var(--ti-common-color-border);
|
||||
--ti-link-menu-input-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 收藏夹弹出框的输入框圆角
|
||||
--ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 收藏夹弹出框列表项的节点文本色
|
||||
--ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.component-css-vars-link() {
|
||||
// 链接字号
|
||||
--ti-link-font-size: var(--ti-common-font-size-1);
|
||||
--ti-link-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 链接字重
|
||||
--ti-link-font-weight: var(--ti-common-font-weight-5);
|
||||
--ti-link-font-weight: var(--ti-common-font-weight-5, 500);
|
||||
// 链接下划线色(hide)
|
||||
--ti-link-border-color: var(--ti-common-color-line-active);
|
||||
--ti-link-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 链接有图标时下划线宽度(hide)
|
||||
--ti-link-has-icon-underline-width: 100%;
|
||||
// 链接只有文字时下划线宽度(hide)
|
||||
|
|
@ -31,65 +31,65 @@
|
|||
--ti-link-svg-margin-right: 0px;
|
||||
|
||||
// 链接图标悬浮字重
|
||||
--ti-link-icon-hover-text-weight: var(--ti-common-font-weight-5);
|
||||
--ti-link-icon-hover-text-weight: var(--ti-common-font-weight-5, 500);
|
||||
|
||||
// 默认链接文本色
|
||||
--ti-link-default-text-color: var(--ti-common-color-info-text);
|
||||
--ti-link-default-text-color: var(--ti-common-color-info-text, #252b3a);
|
||||
// 默认链接悬浮下划线色
|
||||
--ti-link-default-border-color: var(--ti-common-color-line-active);
|
||||
--ti-link-default-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 默认链接悬浮文本色
|
||||
--ti-link-default-hover-text-color: var(--ti-common-color-text-link);
|
||||
--ti-link-default-hover-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 默认链接禁用文本色
|
||||
--ti-link-default-disabled-text-color: var(--ti-common-color-info-disabled);
|
||||
--ti-link-default-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
|
||||
// 默认链接悬浮下划线色
|
||||
--ti-link-default-hover-border-color: var(--ti-link-default-hover-text-color);
|
||||
|
||||
// 主要链接文本色
|
||||
--ti-link-primary-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-link-primary-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
|
||||
// 主要链接悬浮下划线色
|
||||
--ti-link-primary-border-color: var(--ti-common-color-line-active);
|
||||
--ti-link-primary-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 主要链接悬浮文本色
|
||||
--ti-link-primary-hover-text-color: var(--ti-common-color-primary-hover);
|
||||
--ti-link-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 主要链接禁用文本色
|
||||
--ti-link-primary-disabled-text-color: var(--ti-common-color-primary-disabled);
|
||||
--ti-link-primary-disabled-text-color: var(--ti-common-color-primary-disabled, #a0cfff);
|
||||
|
||||
// 危险链接文本色
|
||||
--ti-link-danger-text-color: var(--ti-common-bg-primary);
|
||||
--ti-link-danger-text-color: var(--ti-common-bg-primary, #c7000b);
|
||||
// 危险链接悬浮下划线色
|
||||
--ti-link-danger-border-color: var(--ti-common-bg-primary);
|
||||
--ti-link-danger-border-color: var(--ti-common-bg-primary, #c7000b);
|
||||
// 危险链接悬浮文本色
|
||||
--ti-link-danger-hover-text-color: var(--ti-common-bg-primary-hover);
|
||||
--ti-link-danger-hover-text-color: var(--ti-common-bg-primary-hover, #d64a52);
|
||||
// 危险链接禁用文本色
|
||||
--ti-link-danger-disabled-text-color: var(--ti-common-color-danger-disabled);
|
||||
--ti-link-danger-disabled-text-color: var(--ti-common-color-danger-disabled, #d8bab5);
|
||||
|
||||
// 成功链接文本色
|
||||
--ti-link-success-text-color: var(--ti-common-color-success-normal);
|
||||
--ti-link-success-text-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功链接悬浮下划线色
|
||||
--ti-link-success-border-color: var(--ti-common-color-success-normal);
|
||||
--ti-link-success-border-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 成功链接悬浮文本色
|
||||
--ti-link-success-hover-text-color: var(--ti-common-color-success-hover);
|
||||
--ti-link-success-hover-text-color: var(--ti-common-color-success-hover, #acf2dc);
|
||||
// 成功链接禁用文本色
|
||||
--ti-link-success-disabled-text-color: var(--ti-common-color-success-disabled);
|
||||
--ti-link-success-disabled-text-color: var(--ti-common-color-success-disabled, #a6c3b9);
|
||||
|
||||
// 警告链接文本色
|
||||
--ti-link-warning-text-color: var(--ti-common-color-warning-normal);
|
||||
--ti-link-warning-text-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告链接悬浮下划线色
|
||||
--ti-link-warning-border-color: var(--ti-common-color-warning-normal);
|
||||
--ti-link-warning-border-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// 警告链接悬浮文本色
|
||||
--ti-link-warning-hover-text-color: var(--ti-common-color-warning-hover);
|
||||
--ti-link-warning-hover-text-color: var(--ti-common-color-warning-hover, #fac20a);
|
||||
// 警告链接禁用文本色
|
||||
--ti-link-warning-disabled-text-color: var(--ti-common-color-warning-disabled);
|
||||
--ti-link-warning-disabled-text-color: var(--ti-common-color-warning-disabled, #d3c6a2);
|
||||
|
||||
// 信息链接文本色
|
||||
--ti-link-info-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-link-info-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息链接悬浮下划线色
|
||||
--ti-link-info-border-color: var(--ti-common-color-info-normal);
|
||||
--ti-link-info-border-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 信息链接悬浮文本色
|
||||
--ti-link-info-hover-text-color: var(--ti-common-color-info-hover);
|
||||
--ti-link-info-hover-text-color: var(--ti-common-color-info-hover, #5c6173);
|
||||
// 信息链接禁用文本色
|
||||
--ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled);
|
||||
--ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
|
||||
|
||||
// 带有图标的链接悬浮文本色
|
||||
--ti-link-has-svg-hover-text-color: var(--ti-common-color-text-link);
|
||||
--ti-link-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,39 +12,39 @@
|
|||
|
||||
.component-css-vars-loading() {
|
||||
// 加载图标文本色
|
||||
--ti-loading-text-color: var(--ti-common-color-icon-active);
|
||||
--ti-loading-text-color: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
// 加载背景色
|
||||
--ti-loading-mask-bg-color: var(--ti-common-bg-minor);
|
||||
--ti-loading-mask-bg-color: var(--ti-common-bg-minor, #ffffff);
|
||||
// 加载文本字号
|
||||
--ti-loading-text-font-size: var(--ti-common-font-size-1);
|
||||
--ti-loading-text-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 加载图标自定义加载图标顶部外边距
|
||||
--ti-loading-spinner-margin-top: calc(var(--ti-common-space-0) - 21px);
|
||||
--ti-loading-spinner-margin-top: calc(var(--ti-common-space-0, 0px) - 21px);
|
||||
// 加载图标文本垂直方向外边距
|
||||
--ti-loading-text-margin-vertical: calc(var(--ti-common-space-base) - 1px);
|
||||
--ti-loading-text-margin-vertical: calc(var(--ti-common-space-base, 4px) - 1px);
|
||||
// 加载图标文本水平方向外边距
|
||||
--ti-loading-text-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-loading-text-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 全屏加载图标small尺寸时的宽度
|
||||
--ti-loading-fullscreen-small-width: var(--ti-common-size-4x);
|
||||
--ti-loading-fullscreen-small-width: var(--ti-common-size-4x, 16px);
|
||||
// 全屏加载图标medium尺寸时的宽度
|
||||
--ti-loading-fullscreen-medium-width: var(--ti-common-size-8x);
|
||||
--ti-loading-fullscreen-medium-width: var(--ti-common-size-8x, 32px);
|
||||
// 全屏加载图标large尺寸时的宽度
|
||||
--ti-loading-fullscreen-large-width: var(--ti-common-size-10x);
|
||||
--ti-loading-fullscreen-large-width: var(--ti-common-size-10x, 40px);
|
||||
// 全屏加载图标small尺寸时的高度
|
||||
--ti-loading-fullscreen-small-height: var(--ti-common-size-4x);
|
||||
--ti-loading-fullscreen-small-height: var(--ti-common-size-4x, 16px);
|
||||
// 全屏加载图标medium尺寸时的高度
|
||||
--ti-loading-fullscreen-medium-height: var(--ti-common-size-8x);
|
||||
--ti-loading-fullscreen-medium-height: var(--ti-common-size-8x, 32px);
|
||||
// 全屏加载图标large尺寸时的高度
|
||||
--ti-loading-fullscreen-large-height: var(--ti-common-size-10x);
|
||||
--ti-loading-fullscreen-large-height: var(--ti-common-size-10x, 40px);
|
||||
// 默认加载图标small尺寸时的高度
|
||||
--ti-loading-spinner-small-height: var(--ti-common-size-4x);
|
||||
--ti-loading-spinner-small-height: var(--ti-common-size-4x, 16px);
|
||||
// 默认加载图标medium尺寸时的高度
|
||||
--ti-loading-spinner-medium-height: var(--ti-common-size-8x);
|
||||
--ti-loading-spinner-medium-height: var(--ti-common-size-8x, 32px);
|
||||
// 默认加载图标large尺寸时的高度
|
||||
--ti-loading-spinner-large-height: var(--ti-common-size-10x);
|
||||
--ti-loading-spinner-large-height: var(--ti-common-size-10x, 40px);
|
||||
// 默认加载图标small尺寸时的宽度
|
||||
--ti-loading-spinner-small-width: var(--ti-common-size-4x);
|
||||
--ti-loading-spinner-small-width: var(--ti-common-size-4x, 16px);
|
||||
// 默认加载图标medium尺寸时的宽度
|
||||
--ti-loading-spinner-medium-width: var(--ti-common-size-8x);
|
||||
--ti-loading-spinner-medium-width: var(--ti-common-size-8x, 32px);
|
||||
// 默认加载图标large尺寸时的宽度
|
||||
--ti-loading-spinner-large-width: var(--ti-common-size-10x);
|
||||
--ti-loading-spinner-large-width: var(--ti-common-size-10x, 40px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
|
||||
.component-css-vars-menubar() {
|
||||
--ti-menubar-title-font-size: var(--ti-common-font-size-base-normal);
|
||||
--ti-menubar-title-text-color: var(--ti-common-color-light);
|
||||
--ti-menubar-li-height: var(--ti-common-size-12x);
|
||||
--ti-menubar-menu-height: var(--ti-common-size-height-large);
|
||||
--ti-menubar-menu-font-size: var(--ti-common-font-size-1);
|
||||
--ti-menubar-submenu-normal-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-menubar-submenu-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-menubar-submenu-active-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-menubar-submenu-li-height: var(--ti-common-size-10x);
|
||||
--ti-menubar-bg-color-normal: var(--ti-common-color-bg-navigation);
|
||||
--ti-menubar-title-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-menubar-li-height: var(--ti-common-size-12x, 48px);
|
||||
--ti-menubar-menu-height: var(--ti-common-size-height-large, 48px);
|
||||
--ti-menubar-menu-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--ti-menubar-submenu-normal-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-menubar-submenu-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-menubar-submenu-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-menubar-submenu-li-height: var(--ti-common-size-10x, 40px);
|
||||
--ti-menubar-bg-color-normal: var(--ti-common-color-bg-navigation, #282b33);
|
||||
--ti-menubar-bg-color-active: #474c5e;
|
||||
--ti-menubar-dropdown-border-color: #c9ccda;
|
||||
--ti-menubar-dropdown-hover-border-color: #585f7f;
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.component-css-vars-milestone() {
|
||||
// 字号(不含旗子部分)
|
||||
--ti-milestone-font-size: var(--ti-common-font-size-base);
|
||||
--ti-milestone-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 节点实心显示光晕背景色
|
||||
--ti-milestone-bg-color: var(--ti-common-color-icon-white);
|
||||
--ti-milestone-bg-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 节点宽度
|
||||
--ti-milestone-icon-width: var(--ti-common-size-5x);
|
||||
--ti-milestone-icon-width: var(--ti-common-size-5x, 20px);
|
||||
// 节点高度
|
||||
--ti-milestone-icon-height: var(--ti-common-size-5x);
|
||||
--ti-milestone-icon-height: var(--ti-common-size-5x, 20px);
|
||||
// 未完成线路背景色
|
||||
--ti-milestone-line-bg-color: #dbdbdb;
|
||||
// 节点下方日期文本色
|
||||
--ti-milestone-status-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-milestone-status-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 提示行高(hide)
|
||||
--ti-milestone-flag-tip-line-height: var(--ti-common-line-height-4);
|
||||
--ti-milestone-flag-tip-line-height: var(--ti-common-line-height-4, 20px);
|
||||
// 提示背景色(hide)
|
||||
--ti-milestone-flag-tip-bg-color: var(--ti-common-color-bg-secondary);
|
||||
--ti-milestone-flag-tip-bg-color: var(--ti-common-color-bg-secondary, #adb0b8);
|
||||
// 提示圆角(hide)
|
||||
--ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 旗子圆角
|
||||
--ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1);
|
||||
--ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 旗子默认字号(hide)
|
||||
--ti-milestone-flag-content-font-size: var(--ti-common-font-size-1);
|
||||
--ti-milestone-flag-content-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 旗子文本色
|
||||
--ti-milestone-text-color: var(--ti-common-color-light);
|
||||
--ti-milestone-text-color: var(--ti-common-color-light, #fff);
|
||||
// 旗子字号
|
||||
--ti-milestone-flag-font-size: var(--ti-common-font-size-base);
|
||||
--ti-milestone-flag-font-size: var(--ti-common-font-size-base, 12px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,110 +12,110 @@
|
|||
|
||||
.component-css-vars-modal() {
|
||||
// 默认宽度
|
||||
--ti-modal-box-width: calc(var(--ti-common-space-10) * 40);
|
||||
--ti-modal-box-width: calc(var(--ti-common-space-10, 10px) * 40);
|
||||
// 模态框阴影
|
||||
--ti-modal-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
// 字体族(hide)
|
||||
--ti-modal-font-family: var(--ti-common-font-family);
|
||||
--ti-modal-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 背景色
|
||||
--ti-modal-box-background-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-modal-box-background-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 边框圆角
|
||||
--ti-modal-box-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-modal-box-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 边框色
|
||||
--ti-modal-border-color: transparent;
|
||||
// 图标尺寸
|
||||
--ti-modal-alert-icon-size: var(--ti-common-font-size-5);
|
||||
--ti-modal-alert-icon-size: var(--ti-common-font-size-5, 24px);
|
||||
|
||||
// 标题字号
|
||||
--ti-modal-header-font-size: var(--ti-common-font-size-3);
|
||||
--ti-modal-header-font-size: var(--ti-common-font-size-3, 18px);
|
||||
// 标题文本色
|
||||
--ti-modal-header-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-modal-header-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 标题字重
|
||||
--ti-modal-header-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-modal-header-font-weight: var(--ti-common-font-weight-bold, 700);
|
||||
// 标题上内边距
|
||||
--ti-modal-header-padding-top: var(--ti-common-space-8x);
|
||||
--ti-modal-header-padding-top: var(--ti-common-space-8x, 32px);
|
||||
// 标题水平内边距
|
||||
--ti-modal-header-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-modal-header-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 标题下内边距
|
||||
--ti-modal-header-padding-bottom: calc(var(--ti-common-space-base) * 7);
|
||||
--ti-modal-header-padding-bottom: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
|
||||
// 内容上内边距
|
||||
--ti-modal-body-padding-top: var(--ti-common-space-0);
|
||||
--ti-modal-body-padding-top: var(--ti-common-space-0, 0px);
|
||||
// 内容水平内边距
|
||||
--ti-modal-body-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-modal-body-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 内容下内边距
|
||||
--ti-modal-body-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-modal-body-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 内容字号
|
||||
--ti-modal-body-font-size: var(--ti-common-font-size-base);
|
||||
--ti-modal-body-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 内容文本色
|
||||
--ti-modal-body-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-modal-body-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 内容行高
|
||||
--ti-modal-body-line-height: var(--ti-common-line-height-number);
|
||||
--ti-modal-body-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
|
||||
// 底部上内边距
|
||||
--ti-modal-footer-padding-top: calc(var(--ti-common-space-base) * 7);
|
||||
--ti-modal-footer-padding-top: calc(var(--ti-common-space-base, 4px) * 7);
|
||||
// 底部水平内边距
|
||||
--ti-modal-footer-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-modal-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// 底部下内边距
|
||||
--ti-modal-footer-padding-bottom: var(--ti-common-space-8x);
|
||||
--ti-modal-footer-padding-bottom: var(--ti-common-space-8x, 32px);
|
||||
// 底部按钮圆角
|
||||
--ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 底部按钮最小宽度
|
||||
--ti-modal-footer-btn-min-width: var(--ti-common-size-16x);
|
||||
--ti-modal-footer-btn-min-width: var(--ti-common-size-16x, 64px);
|
||||
|
||||
// 信息提示弹窗标题下边距
|
||||
--ti-modal-notification-header-padding-bottom: var(--ti-common-space-3x);
|
||||
--ti-modal-notification-header-padding-bottom: var(--ti-common-space-3x, 12px);
|
||||
|
||||
// message字号
|
||||
--ti-modal-message-font-size: var(--ti-common-font-size-3);
|
||||
--ti-modal-message-font-size: var(--ti-common-font-size-3, 18px);
|
||||
// message阴影
|
||||
--ti-modal-message-box-shadow: var(--ti-modal-box-shadow);
|
||||
// message左内边距
|
||||
--ti-modal-message-padding-left: var(--ti-common-space-6x);
|
||||
--ti-modal-message-padding-left: var(--ti-common-space-6x, 24px);
|
||||
// message右内边距
|
||||
--ti-modal-message-padding-right: var(--ti-common-space-6x);
|
||||
--ti-modal-message-padding-right: var(--ti-common-space-6x, 24px);
|
||||
// message垂直内边距
|
||||
--ti-modal-message-padding-vertical: var(--ti-common-space-6x);
|
||||
--ti-modal-message-padding-vertical: var(--ti-common-space-6x, 24px);
|
||||
// message内容水平内边距(hide)
|
||||
--ti-modal-message-body-padding-horizontal: var(--ti-common-space-8x);
|
||||
--ti-modal-message-body-padding-horizontal: var(--ti-common-space-8x, 32px);
|
||||
// message状态图标尺寸
|
||||
--ti-modal-message-status-icon-size: var(--ti-common-font-size-2);
|
||||
--ti-modal-message-status-icon-size: var(--ti-common-font-size-2, 16px);
|
||||
// message状态图标右边距
|
||||
--ti-modal-message-status-icon-padding-right: var(--ti-common-space-2x);
|
||||
--ti-modal-message-status-icon-padding-right: var(--ti-common-space-2x, 8px);
|
||||
// message关闭图标尺寸
|
||||
--ti-modal-message-close-icon-size: var(--ti-common-space-4x);
|
||||
--ti-modal-message-close-icon-size: var(--ti-common-space-4x, 16px);
|
||||
// message图标父组件高度（hide)
|
||||
--ti-modal-message-icon-box-height: var(--ti-common-size-4x);
|
||||
--ti-modal-message-icon-box-height: var(--ti-common-size-4x, 16px);
|
||||
// message关闭图标左边距
|
||||
--ti-modal-message-close-icon-margin-left: var(--ti-common-space-3x);
|
||||
--ti-modal-message-close-icon-margin-left: var(--ti-common-space-3x, 12px);
|
||||
|
||||
// 基本提示图标色
|
||||
--ti-modal-primary-icon-color: var(--ti-common-color-prompt);
|
||||
--ti-modal-primary-icon-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// 成功提示图标色
|
||||
--ti-modal-success-icon-color: var(--ti-common-color-success);
|
||||
--ti-modal-success-icon-color: var(--ti-common-color-success, #50d4ab);
|
||||
// 错误提示图标色
|
||||
--ti-modal-error-icon-color: var(--ti-common-color-error);
|
||||
--ti-modal-error-icon-color: var(--ti-common-color-error, #f66f6a);
|
||||
// 警告提示图标色
|
||||
--ti-modal-warning-icon-color: var(--ti-common-color-warn);
|
||||
--ti-modal-warning-icon-color: var(--ti-common-color-warn, #fa9841);
|
||||
// 加载提示图标色
|
||||
--ti-modal-loading-icon-color: var(--ti-common-color-prompt);
|
||||
--ti-modal-loading-icon-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// 状态图标右边距
|
||||
--ti-modal-status-icon-padding-right: var(--ti-common-space-2x);
|
||||
--ti-modal-status-icon-padding-right: var(--ti-common-space-2x, 8px);
|
||||
|
||||
// 关闭按钮字号
|
||||
--ti-modal-close-btn-font-size: var(--ti-common-font-size-1);
|
||||
--ti-modal-close-btn-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 关闭按钮与上边框的距离(hide)
|
||||
--ti-modal-close-btn-top: var(--ti-common-space-5x);
|
||||
--ti-modal-close-btn-top: var(--ti-common-space-5x, 20px);
|
||||
// 关闭按钮内边距
|
||||
--ti-modal-close-btn-padding-horizontal-vertical: var(--ti-common-space-0);
|
||||
--ti-modal-close-btn-padding-horizontal-vertical: var(--ti-common-space-0, 0px);
|
||||
// 关闭按钮图标色
|
||||
--ti-modal-close-btn-icon-color: var(--ti-common-color-text-secondary);
|
||||
--ti-modal-close-btn-icon-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 关闭按钮悬浮图标色
|
||||
--ti-modal-close-btn-hover-icon-color: var(--ti-common-color-icon-hover);
|
||||
--ti-modal-close-btn-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 关闭按钮悬浮背景色
|
||||
--ti-modal-close-btn-background-color-hover: var(--ti-common-color-bg-white-normal);
|
||||
--ti-modal-close-btn-background-color-hover: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 关闭按钮与右边框的距离(hide)
|
||||
--ti-modal-close-btn-right: var(--ti-common-space-5x);
|
||||
--ti-modal-close-btn-right: var(--ti-common-space-5x, 20px);
|
||||
// 缩放按钮与右边框的距离(hide)
|
||||
--ti-modal-zoom-btn-right: var(--ti-common-space-10x);
|
||||
--ti-modal-zoom-btn-right: var(--ti-common-space-10x, 40px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-month-table() {
|
||||
--ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7);
|
||||
--ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7, #526ecc);
|
||||
--ti-month-table-td-range-bg-color: #f2f6fc;
|
||||
--ti-month-table-td-date-text-color: var(--ti-common-color-light);
|
||||
--ti-month-table-td-date-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-month-table-td-date-border-radius: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,77 +12,77 @@
|
|||
|
||||
.component-css-vars-nav-menu() {
|
||||
// 导航菜单栏高度
|
||||
--ti-nav-menu-height: var(--ti-common-size-height-large);
|
||||
--ti-nav-menu-height: var(--ti-common-size-height-large, 48px);
|
||||
// 导航菜单栏背景色
|
||||
--ti-nav-menu-bg-color: var(--ti-common-color-bg-navigation);
|
||||
--ti-nav-menu-bg-color: var(--ti-common-color-bg-navigation, #282b33);
|
||||
// 导航菜单栏字号
|
||||
--ti-nav-menu-item-font-size: var(--ti-common-font-size-2);
|
||||
--ti-nav-menu-item-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 导航菜单栏文本色
|
||||
--ti-nav-menu-item-text-color: var(--ti-common-color-light);
|
||||
--ti-nav-menu-item-text-color: var(--ti-common-color-light, #fff);
|
||||
// 导航菜单栏项悬浮背景色
|
||||
--ti-nav-menu-item-hover-bg-color: #474c5e;
|
||||
// 导航菜单栏项选中下划线宽度
|
||||
--ti-nav-menu-item-selected-underline-width: var(--ti-common-size-14x);
|
||||
--ti-nav-menu-item-selected-underline-width: var(--ti-common-size-14x, 56px);
|
||||
// 导航菜单栏项选中下划线高度
|
||||
--ti-nav-menu-item-selected-underline-height: calc(var(--ti-common-size-base) - 1);
|
||||
--ti-nav-menu-item-selected-underline-height: calc(var(--ti-common-size-base, 4px) - 1);
|
||||
// 导航菜单栏项选中下划线圆角
|
||||
--ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0);
|
||||
--ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
// 导航菜单栏项选中下划线固定定位底部距离(hide)
|
||||
--ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0);
|
||||
--ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0, 0px);
|
||||
// 导航菜单栏项选中下划线背景色
|
||||
--ti-nav-menu-item-selected-underline-bg-color: var(--ti-common-color-light);
|
||||
--ti-nav-menu-item-selected-underline-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 导航菜单设置图标大小
|
||||
--ti-nav-menu-setting-font-size: calc(var(--ti-common-size-base) * 5.5);
|
||||
--ti-nav-menu-setting-font-size: calc(var(--ti-common-size-base, 4px) * 5.5);
|
||||
// 导航菜单菜单栏下拉框阴影
|
||||
--ti-nav-menu-popmenu-box-shadow: 0 0 4px var(--ti-nav-menu-popmenu-border-color);
|
||||
// 导航菜单菜单栏下拉框选中文本色
|
||||
--ti-nav-menu-popmenu-selected-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-nav-menu-popmenu-selected-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 导航菜单菜单栏下拉框选中字重
|
||||
--ti-nav-menu-popmenu-selected-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-nav-menu-popmenu-selected-font-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 导航菜单菜单栏下拉框文本色
|
||||
--ti-nav-menu-popmenu-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-nav-menu-popmenu-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 导航菜单下拉框边框色
|
||||
--ti-nav-menu-popmenu-border-color: var(--ti-common-color-border);
|
||||
--ti-nav-menu-popmenu-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 导航菜单更多按钮展示的下拉框右边框色
|
||||
--ti-nav-menu-popmenu-more-menu-border-color-right: var(--ti-common-color-border);
|
||||
--ti-nav-menu-popmenu-more-menu-border-color-right: var(--ti-common-color-border, #adb0b8);
|
||||
// 导航菜单更多按钮展示的下拉框高度
|
||||
--ti-nav-menu-popmenu-more-item-height: var(--ti-common-space-10x);
|
||||
--ti-nav-menu-popmenu-more-item-height: var(--ti-common-space-10x, 40px);
|
||||
// 导航菜单更多按钮展示的下拉框列表项图标文本色
|
||||
--ti-nav-menu-popmenu-more-item-icon-color: var(--ti-common-color-info-normal);
|
||||
--ti-nav-menu-popmenu-more-item-icon-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 导航菜单更多按钮展示的下拉框列表项文本色
|
||||
--ti-nav-menu-popmenu-more-item-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-nav-menu-popmenu-more-item-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 导航菜单更多按钮展示的下拉框列表项图标悬浮文本色
|
||||
--ti-nav-menu-popmenu-more-item-hover-icon-color: var(--ti-common-color-primary-normal);
|
||||
--ti-nav-menu-popmenu-more-item-hover-icon-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 导航菜单更多按钮展示的下拉框列表项 悬浮 文本色
|
||||
--ti-nav-menu-popmenu-more-item-hover-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-nav-menu-popmenu-more-item-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 导航菜单更多按钮展示的下拉框列表项选中背景色
|
||||
--ti-nav-menu-popmenu-more-item-selected-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-nav-menu-popmenu-more-item-selected-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 导航菜单更多按钮展示的下拉框列表项选中分割线粗细
|
||||
--ti-nav-menu-popmenu-more-item-before-width: 0;
|
||||
// 导航菜单下拉框可点选项的 悬浮 背景色
|
||||
--ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 导航菜单下拉框非标题选项点击瞬间背景色
|
||||
--ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 导航菜单下拉框副菜单区域垂直内边距
|
||||
--ti-nav-menu-submenu-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-nav-menu-submenu-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 导航菜单下拉框副菜单区域水平内边距
|
||||
--ti-nav-menu-submenu-padding-horizontal: calc(var(--ti-common-space-base) * 21.5);
|
||||
--ti-nav-menu-submenu-padding-horizontal: calc(var(--ti-common-space-base, 4px) * 21.5);
|
||||
// 导航菜单下拉框标题底部内边距
|
||||
--ti-nav-menu-popmenu-node-title-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-nav-menu-popmenu-node-title-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 导航菜单下拉框标题顶部外边距
|
||||
--ti-nav-menu-popmenu-node-title-margin-top: var(--ti-common-space-0);
|
||||
--ti-nav-menu-popmenu-node-title-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 导航菜单下拉框标题右边外边距
|
||||
--ti-nav-menu-popmenu-node-title-margin-right: var(--ti-common-space-8x);
|
||||
--ti-nav-menu-popmenu-node-title-margin-right: var(--ti-common-space-8x, 32px);
|
||||
// 导航菜单下拉框标题底部外边距
|
||||
--ti-nav-menu-popmenu-node-title-margin-bottom: var(--ti-common-space-3x);
|
||||
--ti-nav-menu-popmenu-node-title-margin-bottom: var(--ti-common-space-3x, 12px);
|
||||
// 导航菜单下拉框标题左边外边距
|
||||
--ti-nav-menu-popmenu-node-title-margin-left: var(--ti-common-space-0);
|
||||
--ti-nav-menu-popmenu-node-title-margin-left: var(--ti-common-space-0, 0px);
|
||||
// 导航菜单下拉框标题底部边框宽度
|
||||
--ti-nav-menu-popmenu-title-border-weight-bottom: 0;
|
||||
// 导航菜单下拉框标题底部边框色
|
||||
--ti-nav-menu-popmenu-title-border-color-bottom: transparent;
|
||||
// 导航菜单下拉框标题字号
|
||||
--ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1);
|
||||
--ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 导航菜单下拉框非标题项字号
|
||||
--ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base);
|
||||
--ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base, 12px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,67 +12,67 @@
|
|||
|
||||
.component-css-vars-notify() {
|
||||
// 通知背景色
|
||||
--ti-notify-bg-color: var(--ti-common-color-prompt-bg);
|
||||
--ti-notify-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// info类型弹框背景色
|
||||
--ti-notify-info-bg-color: var(--ti-common-color-prompt-bg);
|
||||
--ti-notify-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
|
||||
// info类型弹框左侧图标色
|
||||
--ti-notify-info-icon-color: var(--ti-common-color-prompt);
|
||||
--ti-notify-info-icon-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// warning类型弹框背景色
|
||||
--ti-notify-warning-bg-color: var(--ti-common-color-warn-bg);
|
||||
--ti-notify-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
// warning类型弹框左侧图标色
|
||||
--ti-notify-warning-icon-color: var(--ti-common-color-warn);
|
||||
--ti-notify-warning-icon-color: var(--ti-common-color-warn, #fa9841);
|
||||
// error类型弹框背景色
|
||||
--ti-notify-error-bg-color: var(--ti-common-color-error-bg);
|
||||
--ti-notify-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
// error类型弹框左侧图标色
|
||||
--ti-notify-error-icon-color: var(--ti-common-color-error);
|
||||
--ti-notify-error-icon-color: var(--ti-common-color-error, #f66f6a);
|
||||
// success类型弹框背景色
|
||||
--ti-notify-success-bg-color: var(--ti-common-color-success-bg);
|
||||
--ti-notify-success-bg-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
// success类型弹框左侧图标色
|
||||
--ti-notify-success-icon-color: var(--ti-common-color-success);
|
||||
--ti-notify-success-icon-color: var(--ti-common-color-success, #50d4ab);
|
||||
// 通知文本色（没有效果）
|
||||
--ti-notify-text-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-notify-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 弹框圆角
|
||||
--ti-notify-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-notify-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 弹框文本色
|
||||
--ti-notify-title-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-notify-title-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 内容文本色
|
||||
--ti-notify-content-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-notify-content-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 弹框标题字号
|
||||
--ti-notify-title-font-size: var(--ti-common-font-size-1);
|
||||
--ti-notify-title-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 通知标题字重（没有效果）
|
||||
--ti-notify-title-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-notify-title-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
// 弹框标题顶部外边距
|
||||
--ti-notify-title-margin-top: var(--ti-common-space-0);
|
||||
--ti-notify-title-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 弹框标题水平外边距
|
||||
--ti-notify-title-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-notify-title-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 弹框标题底部外边距
|
||||
--ti-notify-title-margin-bottom: var(--ti-common-space-2x);
|
||||
--ti-notify-title-margin-bottom: var(--ti-common-space-2x, 8px);
|
||||
// 弹框内容字号(没有效果，优先级被覆盖)
|
||||
--ti-notify-content-font-size: var(--ti-common-font-size-1);
|
||||
--ti-notify-content-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 弹框文字顶部外边距
|
||||
--ti-notify-message-margin-top: var(--ti-common-space-0);
|
||||
--ti-notify-message-margin-top: var(--ti-common-space-0, 0px);
|
||||
// 弹框文字底部外边距
|
||||
--ti-notify-message-margin-bottom: var(--ti-common-space-0);
|
||||
--ti-notify-message-margin-bottom: var(--ti-common-space-0, 0px);
|
||||
// 弹框文字右外边距
|
||||
--ti-notify-message-margin-right: var(--ti-common-space-0);
|
||||
--ti-notify-message-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 弹框文字左外边距
|
||||
--ti-notify-message-margin-left: var(--ti-common-space-10);
|
||||
--ti-notify-message-margin-left: var(--ti-common-space-10, 10px);
|
||||
// 弹框左侧图标尺寸
|
||||
--ti-notify-icon-size: var(--ti-common-font-size-5);
|
||||
--ti-notify-icon-size: var(--ti-common-font-size-5, 24px);
|
||||
// 弹框关闭图标色
|
||||
--ti-notify-close-icon-color: var(--ti-base-color-common-7);
|
||||
--ti-notify-close-icon-color: var(--ti-base-color-common-7, #252b3a);
|
||||
// 弹框最大宽度
|
||||
--ti-notify-max-width: 400px;
|
||||
// 弹框阴影
|
||||
--ti-notify-box-shadow: var(--ti-common-shadow-4-down);
|
||||
--ti-notify-box-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
|
||||
// 弹框垂直方向内边距
|
||||
--ti-notify-padding-vertical: var(--ti-common-space-4x);
|
||||
--ti-notify-padding-vertical: var(--ti-common-space-4x, 16px);
|
||||
// 弹框水平方向内边距
|
||||
--ti-notify-padding-horizontal: var(--ti-common-space-4x);
|
||||
--ti-notify-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
// 关闭图标大小
|
||||
--ti-notify-close-icon-font-size: var(--ti-common-font-size-2);
|
||||
--ti-notify-close-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 关闭图标悬浮时颜色
|
||||
--ti-notify-close-hover-icon-color: var(--ti-base-color-common-7);
|
||||
--ti-notify-close-hover-icon-color: var(--ti-base-color-common-7, #252b3a);
|
||||
// 弹框为top-left方向时左边距
|
||||
--ti-notify-position-top-left: 10px;
|
||||
// 弹框为bottom-left方向时左边距
|
||||
|
|
|
|||
|
|
@ -12,92 +12,92 @@
|
|||
|
||||
.component-css-vars-numeric() {
|
||||
// 默认宽度
|
||||
--ti-numeric-input-width: calc(var(--ti-common-space-base) * 45);
|
||||
--ti-numeric-input-width: calc(var(--ti-common-space-base, 4px) * 45);
|
||||
// 默认高度
|
||||
--ti-numeric-input-normal-height: var(--ti-common-size-height-normal);
|
||||
--ti-numeric-input-normal-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 边框圆角
|
||||
--ti-numeric-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-numeric-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 边框默认色
|
||||
--ti-numeric-input-normal-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-numeric-input-normal-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 分隔线颜色
|
||||
--ti-numeric-input-dividing-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-numeric-input-dividing-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 分割线高度
|
||||
--ti-numeric-input-dividing-border-height: var(--ti-numeric-input-normal-height);
|
||||
// 禁用时分割线display(hide)
|
||||
--ti-numeric-input-dividing-border-display: 'block';
|
||||
// 输入框字号
|
||||
--ti-numeric-input-normal-font-size: var(--ti-common-font-size-base);
|
||||
--ti-numeric-input-normal-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 输入框字体色
|
||||
--ti-numeric-input-normal-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-numeric-input-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 默认背景色
|
||||
--ti-numeric-input-normal-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-numeric-input-normal-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 按钮默认宽度
|
||||
--ti-numeric-input-icon-width: calc(var(--ti-numeric-input-normal-height) - 1px);
|
||||
// 悬浮边框色
|
||||
--ti-numeric-input-normal-active-border-color: var(--ti-common-color-border-hover);
|
||||
--ti-numeric-input-normal-active-border-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 提示占位符文本色
|
||||
--ti-numeric-input-placeholder-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-numeric-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 按钮悬浮图标色
|
||||
--ti-numeric-input-icon-color-hover: var(--ti-common-color-icon-normal);
|
||||
--ti-numeric-input-icon-color-hover: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 按钮禁用图标色
|
||||
--ti-numeric-input-icon-color-disabled: var(--ti-common-color-icon-disabled);
|
||||
--ti-numeric-input-icon-color-disabled: var(--ti-common-color-icon-disabled, #adb0b8);
|
||||
// 聚焦时边框色
|
||||
--ti-numeric-input-border-color-active: var(--ti-common-color-line-active);
|
||||
--ti-numeric-input-border-color-active: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 图标大小
|
||||
--ti-numeric-input-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-numeric-input-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
|
||||
// 禁用文本色
|
||||
--ti-numeric-input-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-numeric-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 禁用背景色
|
||||
--ti-numeric-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-numeric-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 禁用时边框色
|
||||
--ti-numeric-input-border-color-disabled: var(--ti-common-color-line-disabled);
|
||||
--ti-numeric-input-border-color-disabled: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 按钮禁用时背景色
|
||||
--ti-numeric-input-btn-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-numeric-input-btn-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 按钮禁用时分隔线颜色
|
||||
--ti-numeric-input-btn-border-color-disabled: var(--ti-common-color-line-disabled);
|
||||
--ti-numeric-input-btn-border-color-disabled: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
|
||||
// medium尺寸宽度
|
||||
--ti-numeric-input-width-medium: calc(var(--ti-common-space-10) * 27);
|
||||
--ti-numeric-input-width-medium: calc(var(--ti-common-space-10, 10px) * 27);
|
||||
// medium尺寸高度
|
||||
--ti-numeric-input-height-medium: var(--ti-common-size-height-medium);
|
||||
--ti-numeric-input-height-medium: var(--ti-common-size-height-medium, 40px);
|
||||
// medium尺寸按钮宽度
|
||||
--ti-numeric-input-icon-width-medium: var(--ti-numeric-input-height-medium);
|
||||
// medium尺寸图标大小
|
||||
--ti-numeric-input-icon-size-medium: var(--ti-common-font-size-2);
|
||||
--ti-numeric-input-icon-size-medium: var(--ti-common-font-size-2, 16px);
|
||||
// medium尺寸分割线高度
|
||||
--ti-numeric-input-divider-height-medium: var(--ti-numeric-input-height-medium);
|
||||
|
||||
// small尺寸宽度
|
||||
--ti-numeric-input-width-small: var(--ti-common-size-50x);
|
||||
--ti-numeric-input-width-small: var(--ti-common-size-50x, 200px);
|
||||
// small尺寸高度
|
||||
--ti-numeric-input-height-small: var(--ti-common-size-9x);
|
||||
--ti-numeric-input-height-small: var(--ti-common-size-9x, 36px);
|
||||
// small尺寸按钮宽度
|
||||
--ti-numeric-input-icon-width-small: var(--ti-numeric-input-height-small);
|
||||
// small尺寸图标大小
|
||||
--ti-numeric-input-icon-size-small: var(--ti-common-font-size-1);
|
||||
--ti-numeric-input-icon-size-small: var(--ti-common-font-size-1, 14px);
|
||||
// small尺寸分割线高度
|
||||
--ti-numeric-input-divider-height-small: var(--ti-numeric-input-height-small);
|
||||
|
||||
// mini尺寸宽度
|
||||
--ti-numeric-input-width-mini: calc(var(--ti-common-space-10) * 13);
|
||||
--ti-numeric-input-width-mini: calc(var(--ti-common-space-10, 10px) * 13);
|
||||
// mini尺寸高度
|
||||
--ti-numeric-input-height-mini: var(--ti-common-size-6x);
|
||||
--ti-numeric-input-height-mini: var(--ti-common-size-6x, 24px);
|
||||
// mini尺寸按钮宽度
|
||||
--ti-numeric-input-icon-width-mini: var(--ti-numeric-input-height-mini);
|
||||
// mini尺寸图标大小
|
||||
--ti-numeric-input-icon-size-mini: var(--ti-common-font-size-base);
|
||||
--ti-numeric-input-icon-size-mini: var(--ti-common-font-size-base, 12px);
|
||||
// mini尺寸分割线高度
|
||||
--ti-numeric-input-divider-height-mini: var(--ti-numeric-input-height-mini);
|
||||
|
||||
// 单位内容宽度
|
||||
--ti-numeric-input-unit-width: calc(var(--ti-common-space-10) * 5);
|
||||
--ti-numeric-input-unit-width: calc(var(--ti-common-space-10, 10px) * 5);
|
||||
// 单位字体色
|
||||
--ti-numeric-input-unit-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-numeric-input-unit-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 单位字号
|
||||
--ti-numeric-input-unit-font-size: var(--ti-common-font-size-base);
|
||||
--ti-numeric-input-unit-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 单位左边框颜色
|
||||
--ti-numeric-input-unit-border-left-color: var(--ti-common-color-line-dividing);
|
||||
--ti-numeric-input-unit-border-left-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 单位背景色
|
||||
--ti-numeric-input-unit-bg-color: var(--ti-common-color-bg-gray);
|
||||
--ti-numeric-input-unit-bg-color: var(--ti-common-color-bg-gray, #fafafa);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
|
||||
.component-css-vars-option-group() {
|
||||
// 分组分割线填充色
|
||||
--ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 分组标题字号
|
||||
--ti-option-group-title-font-size: var(--ti-common-font-size-base);
|
||||
--ti-option-group-title-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 分组标题字体颜色
|
||||
--ti-option-group-title-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-option-group-title-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 分组标题行高
|
||||
--ti-option-group-title-line-height: var(--ti-common-line-height-number);
|
||||
--ti-option-group-title-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 分组标题水平方向外边距
|
||||
--ti-option-group-title-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-option-group-title-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
// 分组标题顶部外边距
|
||||
--ti-option-group-title-margin-top: var(--ti-common-space-2x);
|
||||
--ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px);
|
||||
// 分组分割线高度
|
||||
--ti-option-group-line-dividing-height: var(--ti-common-size-0);
|
||||
--ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px);
|
||||
// 分组底部内边距
|
||||
--ti-option-group-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-option-group-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.component-css-vars-option() {
|
||||
// 选择器下拉选项文本色
|
||||
--ti-option-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-option-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 选择器下拉选项字号
|
||||
--ti-option-font-size: var(--ti-common-font-size-base);
|
||||
--ti-option-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 选择器下拉选项高度
|
||||
--ti-option-height: 30px;
|
||||
// 选择器下拉选项行高
|
||||
--ti-option-line-height: var(--ti-common-line-height-number);
|
||||
--ti-option-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 选择器下拉选项禁用色
|
||||
--ti-option-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-option-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 选择器下拉选项圆角
|
||||
--ti-option-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-option-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 选择器下拉选项禁用背景色
|
||||
--ti-option-disabled-bg-color: var(--ti-common-color-light);
|
||||
--ti-option-disabled-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 选择器下拉选项背景色
|
||||
--ti-option-bg-color-selected: var(--ti-common-color-light);
|
||||
--ti-option-bg-color-selected: var(--ti-common-color-light, #fff);
|
||||
// 选择器下拉选项悬浮背景色
|
||||
--ti-option-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-option-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 选择器下拉选项选中项背景色
|
||||
--ti-option-hover-bg-color-selected: var(--ti-common-color-hover-background);
|
||||
--ti-option-hover-bg-color-selected: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 选择器下拉已选项悬浮背景色
|
||||
--ti-option-selected-bg-color-hover: var(--ti-common-color-selected-background);
|
||||
--ti-option-selected-bg-color-hover: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 选择器下拉选项选中背景色
|
||||
--ti-option-selected-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-option-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 选择器下拉选项选中字重
|
||||
--ti-option-selected-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-option-selected-font-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 选择下拉框选项已选色
|
||||
--ti-option-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-option-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 选择器下拉选项复选框悬浮色
|
||||
--ti-option-checkbox-border-color-hover: var(--ti-common-color-line-normal);
|
||||
--ti-option-checkbox-border-color-hover: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 选择器下拉选项复选框悬浮色
|
||||
--ti-option-checkbox-all-select-border-color-hover: var(--ti-common-color-line-normal);
|
||||
--ti-option-checkbox-all-select-border-color-hover: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 选择器选中下拉选项图标和文本色
|
||||
--ti-option-icon-color-selected: var(--ti-common-color-selected-background);
|
||||
--ti-option-icon-color-selected: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 选择下拉框选项垂直内边距
|
||||
--ti-option-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-option-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 选择下拉框选项水平内边距
|
||||
--ti-option-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-option-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
// 选择下拉框选项顶部外边距
|
||||
--ti-option-margin-top: var(--ti-common-size-0);
|
||||
--ti-option-margin-top: var(--ti-common-size-0, 0px);
|
||||
// 选择器下拉选项高亮文本色
|
||||
--ti-option-highlight-text-color: var(--ti-common-color-text-highlight);
|
||||
--ti-option-highlight-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 选择器下拉选项已选项高亮文本色
|
||||
--ti-option-highlight-selected-text-color: var(--ti-common-color-text-white);
|
||||
--ti-option-highlight-selected-text-color: var(--ti-common-color-text-white, #fff);
|
||||
}
|
||||
|
|
@ -12,96 +12,96 @@
|
|||
|
||||
.component-css-vars-pager() {
|
||||
// 分页默认文本色(不含前往按钮|页码项)
|
||||
--ti-pager-normal-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-pager-normal-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 分页页码选中项背景色
|
||||
--ti-pager-primary-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-pager-primary-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 分页页码选中项文字色
|
||||
--ti-pager-active-font-color: var(--ti-common-color-text-white);
|
||||
--ti-pager-active-font-color: var(--ti-common-color-text-white, #fff);
|
||||
// 分页页码选中项背景色
|
||||
--ti-pager-active-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-pager-active-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 自定义上下页按钮文本色
|
||||
--ti-pager-primary-text-color: var(--ti-common-color-text-link);
|
||||
--ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 分页跳转输入框激活颜色
|
||||
--ti-pager-primary-border-color: var(--ti-common-color-line-active);
|
||||
--ti-pager-primary-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 分页主色调悬浮色
|
||||
--ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover);
|
||||
--ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 分页页码选中字重
|
||||
--ti-pager-active-font-weight: var(--ti-common-font-weight-normal);
|
||||
// 分页禁用状态下字体颜色
|
||||
--ti-pager-disabled-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-pager-disabled-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 分页禁用状态下边框颜色
|
||||
--ti-pager-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-pager-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
|
||||
// 分页输入框和选项框边框色
|
||||
--ti-pager-input-border-color: var(--ti-common-color-border);
|
||||
--ti-pager-input-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 分页输入框和选择框悬浮边框色
|
||||
--ti-pager-input-hover-border-color: var(--ti-common-color-line-hover);
|
||||
--ti-pager-input-hover-border-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
// 分页输入框渐变结束点色值
|
||||
--ti-pager-input-stop-color: var(--ti-common-color-line-normal);
|
||||
--ti-pager-input-stop-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 分页输入框 光源的色
|
||||
--ti-pager-input-lighting-color: var(--ti-common-color-line-active);
|
||||
--ti-pager-input-lighting-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 分页输入框圆角
|
||||
--ti-pager-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-pager-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 分页选择框|输入框|前往按钮高度
|
||||
--ti-pager-input-height: var(--ti-common-size-height-mini);
|
||||
--ti-pager-input-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 分页输入框纵向内边距
|
||||
--ti-pager-input-padding-vertical: 10px;
|
||||
|
||||
// 分页字号(不含总条数项)
|
||||
--ti-pager-font-size: var(--ti-common-font-size-base);
|
||||
--ti-pager-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 分页前往按钮|页码项文本色
|
||||
--ti-pager-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-pager-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 分页下拉框按钮图标色
|
||||
--ti-pager-normal-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-pager-normal-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 分页页码项高度
|
||||
--ti-pager-height: var(--ti-common-size-height-mini);
|
||||
--ti-pager-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 分页页码项宽度
|
||||
--ti-pager-width: auto;
|
||||
// 分页页码项最小宽度
|
||||
--ti-pager-min-width: auto;
|
||||
// 分页输入框宽度
|
||||
--ti-pager-input-width: var(--ti-common-space-10x);
|
||||
--ti-pager-input-width: var(--ti-common-space-10x, 40px);
|
||||
// 分页页码项垂直内边距
|
||||
--ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 分页页码项水平内边距
|
||||
--ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-6);
|
||||
--ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-6, 6px);
|
||||
// 分页未选中页码项悬浮阴影
|
||||
--ti-pager-poplist-item-unchecked-box-shadow: none;
|
||||
|
||||
// 分页项圆角
|
||||
--ti-pager-li-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-pager-li-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 分页项边框颜色
|
||||
--ti-pager-li-border-color: var(--ti-common-color-transparent);
|
||||
--ti-pager-li-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 分页项悬浮颜色
|
||||
--ti-pager-li-item-hover-text-color: var(--ti-common-color-text-highlight);
|
||||
--ti-pager-li-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 分页项悬浮字重
|
||||
--ti-pager-li-item-hover-font-weight: var(--ti-common-font-weight-normal);
|
||||
|
||||
// 分页项默认悬浮背景色
|
||||
--ti-pager-poplist-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-pager-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 分页下拉框项|列表项悬浮文本色
|
||||
--ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight);
|
||||
--ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 分页下拉框选中项默认背景色
|
||||
--ti-pager-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-pager-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 分页下拉框项选中字体颜色
|
||||
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 分页页码项默认悬浮边框色
|
||||
--ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent);
|
||||
--ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 分页下拉框圆角
|
||||
--ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 分页下拉框顶部外边距
|
||||
--ti-pager-pop-body-margin-top: 4px;
|
||||
// 分页下拉项最小高度
|
||||
--ti-pager-poplist-item-min-height: 30px;
|
||||
|
||||
// 分页下一页文字禁用色
|
||||
--ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled);
|
||||
--ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 分页跳转输入框文字颜色
|
||||
--ti-pager-goto-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-pager-goto-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 分页跳转输入框边框悬浮颜色
|
||||
--ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover);
|
||||
--ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 分页跳转输入框文字颜色
|
||||
--ti-pager-goto-btn-text-hover-color: var(--ti-common-color-text-highlight);
|
||||
--ti-pager-goto-btn-text-hover-color: var(--ti-common-color-text-highlight, #526ecc);
|
||||
// 分页上一页左侧内边距
|
||||
--ti-pager-prev-padding-left: 6px;
|
||||
// 分页上一页右侧内边距
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
// 分页下一页左侧外边距
|
||||
--ti-pager-next-margin-left: 6px;
|
||||
// 分页上一页和下一页图标填充
|
||||
--ti-pager-btn-svg-fill-color: var(--ti-common-color-info-normal);
|
||||
--ti-pager-btn-svg-fill-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
|
||||
// 分页总条数字体大小
|
||||
--ti-pager-total-font-size: 12px;
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
// 分页总条数行高
|
||||
--ti-pager-total-line-height: 24px;
|
||||
// 分页总条数图标填充色
|
||||
--ti-pager-total-svg-fill-color: var(--ti-common-color-info-normal);
|
||||
--ti-pager-total-svg-fill-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 分页图标大小
|
||||
--ti-pager-svg-font-size: var(--ti-pager-font-size);
|
||||
|
||||
|
|
@ -136,13 +136,13 @@
|
|||
--ti-pager-dot-before-display: none;
|
||||
|
||||
// 分页前进和后退按钮悬浮背景色
|
||||
--ti-pager-prev-next-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-pager-prev-next-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 分页页码项右侧外边距
|
||||
--ti-pager-group-sizes-margin-right: 16px;
|
||||
// 分页页码选项框宽度
|
||||
--ti-pager-sizes-input-width: 78px;
|
||||
// 分页选择框悬浮文本色
|
||||
--ti-pager-sizes-input-hover-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-pager-sizes-input-hover-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 分页选择框右侧下拉按钮
|
||||
--ti-pager-input-btn-width: 24px;
|
||||
// 分页选择框右侧下拉按钮右距离
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-pbi() {
|
||||
--ti-pbi-font-size-base: var(--ti-common-font-size-base);
|
||||
--ti-pbi-font-size-base: var(--ti-common-font-size-base, 12px);
|
||||
--ti-pbi-selected-text-color: rgb(19, 143, 199);
|
||||
--ti-pbi-selected-bg-color: rgba(31, 158, 216, 0.12);
|
||||
--ti-pbi-list-border-color: #ccc;
|
||||
|
|
|
|||
|
|
@ -12,51 +12,51 @@
|
|||
|
||||
.component-css-vars-pop-upload() {
|
||||
// 上传按钮文字大小(hide)
|
||||
--ti-popupload-font-size: var(--ti-common-font-size-base);
|
||||
--ti-popupload-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 弹出框头部alert提示底部外边距
|
||||
--ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10);
|
||||
--ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10, 10px);
|
||||
// 弹出框表格高度
|
||||
--ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x) * 2);
|
||||
--ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x, 140px) * 2);
|
||||
// 弹出框表格字号
|
||||
--ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1);
|
||||
--ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 弹出框表格顶部外边距
|
||||
--ti-popupload-dialog-margin-top: var(--ti-common-space-10);
|
||||
--ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px);
|
||||
// 弹出框表格头部分割线颜色
|
||||
--ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 弹出框表格头部高度
|
||||
--ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small);
|
||||
--ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 32px);
|
||||
// 弹出框表格头部文本色
|
||||
--ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 弹出框表格头部字重
|
||||
--ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold, 700);
|
||||
// 弹出框表格头部背景色
|
||||
--ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal);
|
||||
--ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal, #eef0f5);
|
||||
// 弹出框表格头部item垂直内边距
|
||||
--ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 弹出框表格头部item水平内边距
|
||||
--ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 弹出框表格内容item垂直内边距
|
||||
--ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x);
|
||||
--ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x, 8px);
|
||||
// 弹出框表格内容item水平内边距
|
||||
--ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 弹出框表格内容item垂直外边距
|
||||
--ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0);
|
||||
--ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 弹出框表格内容item水平外边距
|
||||
--ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0);
|
||||
--ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0, 0px);
|
||||
// 弹出框表格内容item行高
|
||||
--ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4);
|
||||
--ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 20px);
|
||||
// 弹出框表格内容偶数行背景色
|
||||
--ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg);
|
||||
--ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
|
||||
// 弹出框表格底部内边距
|
||||
--ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10);
|
||||
--ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px);
|
||||
// 弹出框底部内边距
|
||||
--ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x);
|
||||
--ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x, 24px);
|
||||
// 弹出框已上传文件的删除图标色
|
||||
--ti-popupload-dialog-table-icon-color: var(--ti-common-color-icon-active);
|
||||
--ti-popupload-dialog-table-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
// 弹出框已上传文件的删除图标尺寸
|
||||
--ti-popupload-dialog-table-icon-size: var(--ti-common-size-4x);
|
||||
--ti-popupload-dialog-table-icon-size: var(--ti-common-size-4x, 16px);
|
||||
// 弹出框已上传文件的删除图标悬浮色
|
||||
--ti-popupload-dialog-table-icon-color-hover: var(--ti-common-bg-primary);
|
||||
--ti-popupload-dialog-table-icon-color-hover: var(--ti-common-bg-primary, #c7000b);
|
||||
// 弹出框已上传文件的删除图标悬浮尺寸
|
||||
--ti-popupload-dialog-table-icon-size-hover: var(--ti-common-size-4x);
|
||||
--ti-popupload-dialog-table-icon-size-hover: var(--ti-common-size-4x, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
|
||||
.component-css-vars-popconfirm() {
|
||||
// 提示弹窗字体行高
|
||||
--ti-popconfirm-popover-line-height: var(--ti-common-size-6x);
|
||||
--ti-popconfirm-popover-line-height: var(--ti-common-size-6x, 24px);
|
||||
// 底部按钮flex排列方式
|
||||
--ti-popconfirm-popover-footer-justify-content: flex-end;
|
||||
// 提示弹窗字体大小
|
||||
--ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base);
|
||||
--ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 提示弹窗字体颜色
|
||||
--ti-popconfirm-popover-footer-font-color: #161e26;
|
||||
// 提示弹窗容器垂直内边距
|
||||
--ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base);
|
||||
--ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base, 4px);
|
||||
// 提示弹窗图标大小
|
||||
--ti-popconfirm-popover-icon-width: var(--ti-common-size-6x);
|
||||
--ti-popconfirm-popover-icon-width: var(--ti-common-size-6x, 24px);
|
||||
// 提示弹窗图标上侧外边距
|
||||
--ti-popconfirm-popover-icon-margin-top: var(--ti-common-space-2x);
|
||||
--ti-popconfirm-popover-icon-margin-top: var(--ti-common-space-2x, 8px);
|
||||
// 提示弹窗底部按钮容器上侧外边距
|
||||
--ti-popconfirm-popover-footer-margin-top: var(--ti-common-space-4x);
|
||||
--ti-popconfirm-popover-footer-margin-top: var(--ti-common-space-4x, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.component-css-vars-popeditor() {
|
||||
// 弹出框标题底部边框色和输入框边框色
|
||||
--ti-popeditor-border-color: var(--ti-common-color-border);
|
||||
--ti-popeditor-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 输入框左内边距
|
||||
--ti-popeditor-input-padding-left: var(--ti-common-space-2x);
|
||||
--ti-popeditor-input-padding-left: var(--ti-common-space-2x, 8px);
|
||||
// 输入框右侧默认图标色
|
||||
--ti-popeditor-icon-color: var(--ti-common-color-icon-active);
|
||||
--ti-popeditor-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
// 输入框右侧禁用图标色
|
||||
--ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder);
|
||||
--ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 输入框右侧默认图标悬浮色
|
||||
--ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover);
|
||||
--ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 输入框右侧默认图标字号
|
||||
--ti-popeditor-icon-font-size: var(--ti-common-font-size-1);
|
||||
--ti-popeditor-icon-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 输入框右侧默认图标高度
|
||||
--ti-popeditor-icon-height: var(--ti-common-size-height-normal);
|
||||
--ti-popeditor-icon-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 输入框右侧默认图标行高
|
||||
--ti-popeditor-icon-line-height: var(--ti-popeditor-icon-height);
|
||||
// 弹出框头部标题选中文本色和边框色
|
||||
--ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active);
|
||||
--ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 弹出框头部标题高度
|
||||
--ti-popeditor-tabs-li-height: var(--ti-common-size-10x);
|
||||
--ti-popeditor-tabs-li-height: var(--ti-common-size-10x, 40px);
|
||||
// 弹出框头部标题选中文本字重
|
||||
--ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold);
|
||||
--ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold, 700);
|
||||
// 弹出框查询条件item底部外边距
|
||||
--ti-popeditor-search-item-margin-bottom: var(--ti-common-space-3x);
|
||||
--ti-popeditor-search-item-margin-bottom: var(--ti-common-space-3x, 12px);
|
||||
// 弹出框查询条件页脚垂直外边距
|
||||
--ti-popeditor-search-footer-margin-vertical: var(--ti-common-space-3x);
|
||||
--ti-popeditor-search-footer-margin-vertical: var(--ti-common-space-3x, 12px);
|
||||
// 弹出框查询条件页脚水平外边距
|
||||
--ti-popeditor-search-footer-margin-horizontal: auto;
|
||||
// 弹出编辑头部标签页文本色(hide)
|
||||
--ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 弹出表格头部标签页item垂直内边距
|
||||
--ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 弹出表格头部标签页item水平内边距
|
||||
--ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-5x);
|
||||
--ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-5x, 20px);
|
||||
// 弹出框表格垂直内边距
|
||||
--ti-popeditor-tabs-body-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-popeditor-tabs-body-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 弹出框表格水平内边距
|
||||
--ti-popeditor-tabs-body-padding-horizontal: var(--ti-common-space-base);
|
||||
--ti-popeditor-tabs-body-padding-horizontal: var(--ti-common-space-base, 4px);
|
||||
// 弹出表格内容顶部内边距
|
||||
--ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-3x);
|
||||
--ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-3x, 12px);
|
||||
// 弹出表格内容水平内边距
|
||||
--ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 弹出表格内容底部内边距
|
||||
--ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,39 +12,39 @@
|
|||
|
||||
.component-css-vars-popover() {
|
||||
// 弹框字体
|
||||
--ti-popover-font-family: var(--ti-common-font-family);
|
||||
--ti-popover-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 弹框背景色
|
||||
--ti-popover-bg-color: var(--ti-common-color-light);
|
||||
--ti-popover-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 弹框内容文本色
|
||||
--ti-popover-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-popover-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 弹框边框色
|
||||
--ti-popover-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-popover-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 弹框圆角
|
||||
--ti-popover-border-radius: var(--ti-common-border-radius-1);
|
||||
--ti-popover-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||
// 弹框内容字号
|
||||
--ti-popover-font-size: var(--ti-common-font-size-1);
|
||||
--ti-popover-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 弹框内容行高
|
||||
--ti-popover-line-height: 1.4;
|
||||
// 弹框标题文本色
|
||||
--ti-popover-title-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-popover-title-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 弹框标题字号
|
||||
--ti-popover-title-font-size: var(--ti-common-font-size-2);
|
||||
--ti-popover-title-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 弹出框小箭头边框厚度
|
||||
--ti-popover-arrow-border-width: calc(var(--ti-common-border-weight-2) * 2);
|
||||
--ti-popover-arrow-border-width: calc(var(--ti-common-border-weight-2, 3px) * 2);
|
||||
// 弹出框小箭头高度
|
||||
--ti-popover-arrow-height: var(--ti-popover-arrow-border-width);
|
||||
// 弹出框垂直外边距
|
||||
--ti-popover-placement-margin-vertical: var(--ti-common-space-3x);
|
||||
--ti-popover-placement-margin-vertical: var(--ti-common-space-3x, 12px);
|
||||
// 弹出框小箭头水平外边距(hide)
|
||||
--ti-popover-placement-margin-horizontal: var(--ti-common-space-3x);
|
||||
--ti-popover-placement-margin-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 弹框小箭头填充色
|
||||
--ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light);
|
||||
--ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light, #fff);
|
||||
// 弹框阴影
|
||||
--ti-popover-box-shadow: var(--ti-common-shadow-1-down);
|
||||
--ti-popover-box-shadow: var(--ti-common-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.1));
|
||||
// 弹框小箭头边框色
|
||||
--ti-popover-arrow-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-popover-arrow-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 弹框垂直内边距
|
||||
--ti-popover-padding-vertical: var(--ti-common-space-3x);
|
||||
--ti-popover-padding-vertical: var(--ti-common-space-3x, 12px);
|
||||
// 弹框水平内边距
|
||||
--ti-popover-padding-horizontal: var(--ti-common-space-4x);
|
||||
--ti-popover-padding-horizontal: var(--ti-common-space-4x, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@
|
|||
|
||||
.component-css-vars-progress() {
|
||||
// 进度条默认文本色
|
||||
--ti-progress-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-progress-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 进度条内层文本字号
|
||||
--ti-progress-text-font-size: var(--ti-common-font-size-base);
|
||||
--ti-progress-text-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 横向条未完成部分背景色
|
||||
--ti-progress-bar-outer-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-progress-bar-outer-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 横向条已完成部分背景色
|
||||
--ti-progress-bar-inner-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-progress-bar-inner-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 横向条内层文本色
|
||||
--ti-progress-bar-inner-text-color: var(--ti-common-color-light);
|
||||
--ti-progress-bar-inner-text-color: var(--ti-common-color-light, #fff);
|
||||
// 横向条右侧文字左外边距
|
||||
--ti-progress-bar-text-margin-left: var(--ti-common-space-2x);
|
||||
--ti-progress-bar-text-margin-left: var(--ti-common-space-2x, 8px);
|
||||
// success状态横向条已完成部分背景色
|
||||
--ti-progress-success-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-progress-success-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// warning状态横向条已完成部分背景色
|
||||
--ti-progress-warning-bg-color: var(--ti-common-color-warning-normal);
|
||||
--ti-progress-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841);
|
||||
// exception状态横向条已完成部分背景色
|
||||
--ti-progress-exception-bg-color: var(--ti-common-bg-primary);
|
||||
--ti-progress-exception-bg-color: var(--ti-common-bg-primary, #c7000b);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-radio-button() {
|
||||
--ti-radio-button-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-radio-button-hover-text-color: var(--ti-common-color-light);
|
||||
--ti-radio-button-border-color: var(--ti-common-color-border);
|
||||
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-radio-button-font-size: var(--ti-common-font-size-base);
|
||||
--ti-radio-button-bg-color: var(--ti-common-color-light);
|
||||
--ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6);
|
||||
--ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6);
|
||||
--ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6);
|
||||
--ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5);
|
||||
--ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5);
|
||||
--ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5);
|
||||
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5);
|
||||
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1);
|
||||
--ti-radio-button-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-radio-button-hover-text-color: var(--ti-common-color-light, #fff);
|
||||
--ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-radio-button-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,81 +12,81 @@
|
|||
|
||||
.component-css-vars-radio() {
|
||||
// 单选框默认文本色
|
||||
--ti-radio-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-radio-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 单选框字号
|
||||
--ti-radio-font-size: var(--ti-common-font-size-base);
|
||||
--ti-radio-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 带边框类单选框默认高度
|
||||
--ti-radio-bordered-height: var(--ti-common-size-10x);
|
||||
--ti-radio-bordered-height: var(--ti-common-size-10x, 40px);
|
||||
// 带边框类单选框圆角
|
||||
--ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 单选框默认边框色
|
||||
--ti-radio-bordered-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-radio-bordered-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 单选框默认禁用边框色
|
||||
--ti-radio-input-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-radio-input-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 单选框的选中状态时的边框色
|
||||
--ti-radio-bordered-checked-border-color: var(--ti-common-color-line-active);
|
||||
--ti-radio-bordered-checked-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 单选框的选中状态时的背景色
|
||||
--ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 单选框的带有边框时悬浮时的边框色
|
||||
--ti-radio-bordered-hover-border-color: var(--ti-common-color-line-active);
|
||||
--ti-radio-bordered-hover-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 单选框的带有边框时选中时的边框色
|
||||
--ti-radio-bordered-checked-hover-border-color: var(--ti-common-color-line-active);
|
||||
--ti-radio-bordered-checked-hover-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 单选框的带有边框时激活时的边框色
|
||||
--ti-radio-bordered-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-radio-bordered-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 单选框的禁用状态时的背景色
|
||||
--ti-radio-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-radio-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 单选框为选中且禁用状态时的背景色
|
||||
--ti-radio-input-checked-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-radio-input-checked-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 单选框为选中且禁用状态时的边框色
|
||||
--ti-radio-input-checked-disabled-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-radio-input-checked-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 单选框为输入框样式时禁用状态时的文本色
|
||||
--ti-radio-input-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-radio-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 单选框单选按钮的背景色
|
||||
--ti-radio-inner-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-radio-inner-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 单选框单选按钮选中时的背景色
|
||||
--ti-radio-inner-checked-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-radio-inner-checked-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 单选框单选按钮的尺寸
|
||||
--ti-radio-inner-size: var(--ti-common-size-2x);
|
||||
--ti-radio-inner-size: var(--ti-common-size-2x, 8px);
|
||||
// 单选框单选按钮为选中且禁用状态时的背景色
|
||||
--ti-radio-inner-checked-disabled-bg-color: var(--ti-common-color-bg-secondary);
|
||||
--ti-radio-inner-checked-disabled-bg-color: var(--ti-common-color-bg-secondary, #adb0b8);
|
||||
// 单选按钮为medium尺寸时的高度
|
||||
--ti-radio-medium-height: var(--ti-common-size-height-small);
|
||||
--ti-radio-medium-height: var(--ti-common-size-height-small, 32px);
|
||||
// 单选框单选按钮为medium尺寸时的高度
|
||||
--ti-radio-medium-inner-height: calc(var(--ti-common-size-3x) + 2px);
|
||||
--ti-radio-medium-inner-height: calc(var(--ti-common-size-3x, 12px) + 2px);
|
||||
// 单选框单选按钮为medium尺寸时的宽度
|
||||
--ti-radio-medium-inner-width: calc(var(--ti-common-size-3x) + 2px);
|
||||
--ti-radio-medium-inner-width: calc(var(--ti-common-size-3x, 12px) + 2px);
|
||||
// 单选按钮为small尺寸时的高度
|
||||
--ti-radio-small-height: var(--ti-common-size-8x);
|
||||
--ti-radio-small-height: var(--ti-common-size-8x, 32px);
|
||||
// 单选框单选按钮为small尺寸时的高度
|
||||
--ti-radio-small-inner-height: var(--ti-common-size-3x);
|
||||
--ti-radio-small-inner-height: var(--ti-common-size-3x, 12px);
|
||||
// 单选框单选按钮为small尺寸时的宽度
|
||||
--ti-radio-small-inner-width: var(--ti-common-size-3x);
|
||||
--ti-radio-small-inner-width: var(--ti-common-size-3x, 12px);
|
||||
// 单选按钮为mini尺寸时的高度
|
||||
--ti-radio-mini-height: var(--ti-common-size-7x);
|
||||
--ti-radio-mini-height: var(--ti-common-size-7x, 28px);
|
||||
// 单选框单选按钮为mini尺寸时的高度
|
||||
--ti-radio-mini-inner-height: var(--ti-common-size-3x);
|
||||
--ti-radio-mini-inner-height: var(--ti-common-size-3x, 12px);
|
||||
// 单选框单选按钮为mini尺寸时的宽度
|
||||
--ti-radio-mini-inner-width: var(--ti-common-size-3x);
|
||||
--ti-radio-mini-inner-width: var(--ti-common-size-3x, 12px);
|
||||
// 单选框单选按钮的边框圆角半径
|
||||
--ti-radio-inner-border-radius: 100%;
|
||||
// 单选框尺寸为mini时的带有边框时垂直方向的内边距
|
||||
--ti-radio-mini-bordered-padding-vertical: var(--ti-common-space-0);
|
||||
--ti-radio-mini-bordered-padding-vertical: var(--ti-common-space-0, 0px);
|
||||
// 单选框尺寸为mini时的带有边框时水平方向的内边距
|
||||
--ti-radio-mini-bordered-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-radio-mini-bordered-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 单选框的带有边框时垂直方向的内边距
|
||||
--ti-radio-bordered-padding-vertical: var(--ti-common-space-base);
|
||||
--ti-radio-bordered-padding-vertical: var(--ti-common-space-base, 4px);
|
||||
// 单选框的带有边框时水平方向的内边距
|
||||
--ti-radio-bordered-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-radio-bordered-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// 单选框的带有边框时左侧的外边距
|
||||
--ti-radio-mini-bordered-margin-left: var(--ti-common-space-10);
|
||||
--ti-radio-mini-bordered-margin-left: var(--ti-common-space-10, 10px);
|
||||
// 单选框单选按钮宽度
|
||||
--ti-radio-inner-width: var(--ti-common-size-4x);
|
||||
--ti-radio-inner-width: var(--ti-common-size-4x, 16px);
|
||||
// 单选框单选按钮宽度
|
||||
--ti-radio-inner-height: var(--ti-common-size-4x);
|
||||
--ti-radio-inner-height: var(--ti-common-size-4x, 16px);
|
||||
// 单选组每个选项之间的间距
|
||||
--ti-radio-margin-right: calc(var(--ti-common-space-8x) - 2px);
|
||||
--ti-radio-margin-right: calc(var(--ti-common-space-8x, 32px) - 2px);
|
||||
// 单选框单选按钮选中后悬浮时的背景色
|
||||
--ti-radio-inner-checked-hover-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-radio-inner-checked-hover-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 单选按钮底部外边距
|
||||
--ti-radio-button-margin-bottom: var(--ti-common-space-2x);
|
||||
--ti-radio-button-margin-bottom: var(--ti-common-space-2x, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.component-css-vars-rate() {
|
||||
// 图标右侧文本左外边距
|
||||
--ti-rate-text-margin-left: var(--ti-common-space-3x);
|
||||
--ti-rate-text-margin-left: var(--ti-common-space-3x, 12px);
|
||||
// 图标右侧文本字号
|
||||
--ti-rate-text-font-size: var(--ti-common-font-size-base);
|
||||
--ti-rate-text-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 图标下方提示文本字号
|
||||
--ti-rate-bottom-font-size: var(--ti-common-font-size-base);
|
||||
--ti-rate-bottom-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 图标下方提示文本上外边距
|
||||
--ti-rate-bottom-margin-top: var(--ti-common-space-2x);
|
||||
--ti-rate-bottom-margin-top: var(--ti-common-space-2x, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.component-css-vars-rich-text-editor() {
|
||||
--ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal);
|
||||
--ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover);
|
||||
--ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover);
|
||||
--ti-rich-text-editor-button-active: var(--ti-common-color-icon-active);
|
||||
--ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled);
|
||||
--ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-rich-text-edito-options-item-padding: var(--ti-common-space-6) var(--ti-common-space-5x);
|
||||
--ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover);
|
||||
--ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
--ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
--ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
--ti-rich-text-editor-button-active: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
--ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled, #adb0b8);
|
||||
--ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
--ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
--ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
--ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-rich-text-edito-options-item-padding: var(--ti-common-space-6, 6px) var(--ti-common-space-5x, 20px);
|
||||
--ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-roles() {
|
||||
--ti-roles-poplist-item-height: var(--ti-common-size-height-normal);
|
||||
--ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-roles-poplist-item-font-size: var(--ti-common-font-size-base);
|
||||
--ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-roles-poplist-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-roles-poplist-item-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-scroll-text() {
|
||||
--ti-scroll-text-height: var(--ti-common-size-height-small);
|
||||
--ti-scroll-text-height: var(--ti-common-size-height-small, 32px);
|
||||
--ti-scroll-text-bg-color: #f1f1f1;
|
||||
--ti-scroll-text-margin-vertical: 0;
|
||||
--ti-scroll-text-margin-horizontal: auto;
|
||||
|
|
|
|||
|
|
@ -12,74 +12,74 @@
|
|||
|
||||
.component-css-vars-search() {
|
||||
// 搜索框字号
|
||||
--ti-search-font-size: var(--ti-common-font-size-base);
|
||||
--ti-search-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 搜索框高度
|
||||
--ti-search-input-height: var(--ti-common-size-height-normal);
|
||||
--ti-search-input-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 搜索框左内边距
|
||||
--ti-search-input-padding-left: var(--ti-common-space-2x);
|
||||
--ti-search-input-padding-left: var(--ti-common-space-2x, 8px);
|
||||
// 搜索框边框色
|
||||
--ti-search-input-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-search-input-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 搜索框聚焦时边框色
|
||||
--ti-search-input-focus-border-color: var(--ti-common-color-line-active);
|
||||
--ti-search-input-focus-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 搜索框圆角
|
||||
--ti-search-input-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-search-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 搜索框文本色
|
||||
--ti-search-input-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-search-input-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 搜索框默认背景色
|
||||
--ti-search-input-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-search-input-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 搜索框分割线高度
|
||||
--ti-search-size-height-normal: var(--ti-common-size-height-normal);
|
||||
--ti-search-size-height-normal: var(--ti-common-size-height-normal, 28px);
|
||||
// 输入框提示占位文本色
|
||||
--ti-search-input-placeholder-color: var(--ti-common-color-placeholder);
|
||||
--ti-search-input-placeholder-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
|
||||
// 搜索按钮图标色
|
||||
--ti-search-input-btn-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-search-input-btn-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 搜索按钮悬浮图标色
|
||||
--ti-search-input-btn-hover-icon-color: var(--ti-common-color-icon-hover);
|
||||
--ti-search-input-btn-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 搜索按钮图标尺寸
|
||||
--ti-search-input-btn-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-search-input-btn-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 搜索按钮宽度(hide)
|
||||
--ti-search-input-btn-width: var(--ti-common-size-6x);
|
||||
--ti-search-input-btn-width: var(--ti-common-size-6x, 24px);
|
||||
// 搜索框按钮行高(hide)
|
||||
--ti-search-input-btn-line-height: var(--ti-search-input-height);
|
||||
// 搜索图标边框色(hide)
|
||||
--ti-search-icon-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-search-icon-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 搜索按钮图标与右边框距离(hide)
|
||||
--ti-search-input-btn-icon-position-right: var(--ti-common-space-10);
|
||||
--ti-search-input-btn-icon-position-right: var(--ti-common-space-10, 10px);
|
||||
// 左侧搜索按钮图标右外边距
|
||||
--ti-search-input-left-svg-margin-right: var(--ti-common-space-0);
|
||||
--ti-search-input-left-svg-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 左侧搜索按钮图标左外边距
|
||||
--ti-search-input-left-svg-margin-left: var(--ti-common-space-3x);
|
||||
--ti-search-input-left-svg-margin-left: var(--ti-common-space-3x, 12px);
|
||||
|
||||
// 迷你模式搜索图标色|下拉箭头图标色
|
||||
--ti-search-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-search-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 迷你搜索框宽度
|
||||
--ti-search-mini-width: var(--ti-search-input-height);
|
||||
// 迷你模式搜索按钮悬浮边框色
|
||||
--ti-search-line-hover-border-color: var(--ti-common-color-line-hover);
|
||||
--ti-search-line-hover-border-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
// 小型搜索框高度(hide)
|
||||
--ti-search-size-height-small: var(--ti-common-size-height-small);
|
||||
--ti-search-size-height-small: var(--ti-common-size-height-small, 32px);
|
||||
|
||||
// 分类搜索宽度
|
||||
--ti-search-selector-width: var(--ti-common-size-20x);
|
||||
--ti-search-selector-width: var(--ti-common-size-20x, 80px);
|
||||
// 下拉按钮和下拉框文本色
|
||||
--ti-search-selector-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-search-selector-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 搜索下拉框圆角
|
||||
--ti-search-selector-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-search-selector-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 搜索下拉框背景色
|
||||
--ti-search-selector-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-search-selector-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 搜索下拉框阴影
|
||||
--ti-search-selector-box-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-search-selector-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
// 搜索下拉框最小宽度
|
||||
--ti-search-selector-box-min-width: var(--ti-common-size-20x);
|
||||
--ti-search-selector-box-min-width: var(--ti-common-size-20x, 80px);
|
||||
// 搜索下拉框上外边距
|
||||
--ti-search-selector-margin-top: var(--ti-common-space-base);
|
||||
--ti-search-selector-margin-top: var(--ti-common-space-base, 4px);
|
||||
// 搜索下拉框最大高度
|
||||
--ti-search-selector-max-height: calc(var(--ti-common-space-10) * 30);
|
||||
--ti-search-selector-max-height: calc(var(--ti-common-space-10, 10px) * 30);
|
||||
// 搜索下拉框选项高度
|
||||
--ti-search-selector-list-height: var(--ti-common-size-height-normal);
|
||||
--ti-search-selector-list-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 下拉框选项悬浮背景色
|
||||
--ti-search-list-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-search-list-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 搜索下拉框选项水平内边距
|
||||
--ti-search-selector-list-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-search-selector-list-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,69 +12,69 @@
|
|||
|
||||
.component-css-vars-select-dropdown() {
|
||||
// 选择下拉框边框色
|
||||
--ti-select-dropdown-border-color: var(--ti-common-color-transparent);
|
||||
--ti-select-dropdown-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 选择下拉框边框的粗细
|
||||
--ti-select-dropdown-border-weight: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-border-weight: var(--ti-common-size-0, 0px);
|
||||
// 选择下拉框边框的样式
|
||||
--ti-select-dropdown-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-select-dropdown-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 选择下拉框边框圆角
|
||||
--ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 选择下拉框背景色
|
||||
--ti-select-dropdown-bg-color: var(--ti-common-color-light);
|
||||
--ti-select-dropdown-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 选择下拉框的阴影
|
||||
--ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down);
|
||||
--ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
|
||||
// 选择下拉框的顶部外边距
|
||||
--ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap);
|
||||
--ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap, 2px);
|
||||
// 下拉面板的最大高度
|
||||
--ti-select-dropdown-max-height: calc(248px - var(--ti-select-dropdown-padding-top) - var(--ti-select-dropdown-padding-bottom) + var(--ti-common-space-base));
|
||||
// 远程搜索数据为空时下拉框文本色（hide）
|
||||
--ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 下拉面板空数据提示文本字号
|
||||
--ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1);
|
||||
--ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 下拉面板空数据提示垂直内边距
|
||||
--ti-select-dropdown-empty-padding-horizontal: var(--ti-common-space-10);
|
||||
--ti-select-dropdown-empty-padding-horizontal: var(--ti-common-space-10, 10px);
|
||||
// 下拉面板空数据提示水平内边距
|
||||
--ti-select-dropdown-empty-padding-vertical: var(--ti-common-space-6);
|
||||
--ti-select-dropdown-empty-padding-vertical: var(--ti-common-space-6, 6px);
|
||||
// 下拉面板空数据图片宽度
|
||||
--ti-select-dropdown-empty-image-width: var(--ti-common-size-16x);
|
||||
--ti-select-dropdown-empty-image-width: var(--ti-common-size-16x, 64px);
|
||||
// 下拉面板空数据图片高度
|
||||
--ti-select-dropdown-empty-image-height: var(--ti-common-size-16x);
|
||||
--ti-select-dropdown-empty-image-height: var(--ti-common-size-16x, 64px);
|
||||
// 下拉面板空数据图片底部外边距
|
||||
--ti-select-dropdown-empty-image-margin-bottom: var(--ti-common-space-2x);
|
||||
--ti-select-dropdown-empty-image-margin-bottom: var(--ti-common-space-2x, 8px);
|
||||
// 下拉面板空数据提示文本行高
|
||||
--ti-select-dropdown-empty-line-height: var(--ti-common-line-height-number);
|
||||
--ti-select-dropdown-empty-line-height: var(--ti-common-line-height-number, 1.5);
|
||||
// 选择下拉框的顶部内边距
|
||||
--ti-select-dropdown-padding-top: var(--ti-common-size-base);
|
||||
--ti-select-dropdown-padding-top: var(--ti-common-size-base, 4px);
|
||||
// 选择下拉框的水平内边距
|
||||
--ti-select-dropdown-padding-horizontal: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-padding-horizontal: var(--ti-common-size-0, 0px);
|
||||
// 选择下拉框的底部内边距
|
||||
--ti-select-dropdown-padding-bottom: var(--ti-common-space-base);
|
||||
--ti-select-dropdown-padding-bottom: var(--ti-common-space-base, 4px);
|
||||
// 下拉面板搜索框背景色（hide）
|
||||
--ti-select-dropdown-search-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-select-dropdown-search-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 选择下拉框line背景色
|
||||
--ti-select-dropdown-line-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-select-dropdown-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 选择下拉框line垂直外边距
|
||||
--ti-select-dropdown-line-margin-vertical: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-line-margin-vertical: var(--ti-common-size-0, 0px);
|
||||
// 选择下拉框line水平外边距
|
||||
--ti-select-dropdown-line-margin-horizontal: var(--ti-common-space-2x);
|
||||
--ti-select-dropdown-line-margin-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 选择下拉框line高度
|
||||
--ti-select-dropdown-line-height: var(--ti-common-font-size-1);
|
||||
--ti-select-dropdown-line-height: var(--ti-common-font-size-1, 14px);
|
||||
// 选择下拉框line宽度
|
||||
--ti-select-dropdown-line-width: var(--ti-common-border-weight-normal);
|
||||
--ti-select-dropdown-line-width: var(--ti-common-border-weight-normal, 1px);
|
||||
// 选择下拉框悬浮图标色
|
||||
--ti-select-dropdown-svg-hover-bg-color: var(--ti-common-color-primary-normal);
|
||||
--ti-select-dropdown-svg-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 下拉面板搜索框顶部外边距
|
||||
--ti-select-dropdown-search-margin-top: calc(-1 * var(--ti-common-size-base));
|
||||
// 下拉面板搜索框底部外边距
|
||||
--ti-select-dropdown-search-margin-bottom: var(--ti-common-space-base);
|
||||
--ti-select-dropdown-search-margin-bottom: var(--ti-common-space-base, 4px);
|
||||
// 下拉面板搜索框左侧外边距
|
||||
--ti-select-dropdown-search-margin-left: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-search-margin-left: var(--ti-common-size-0, 0px);
|
||||
// 下拉面板搜索框右侧外边距
|
||||
--ti-select-dropdown-search-margin-right: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-search-margin-right: var(--ti-common-size-0, 0px);
|
||||
// 下拉面板搜索框的宽度
|
||||
--ti-select-dropdown-search-width: 100%;
|
||||
// 下拉面板搜索框的边框宽度
|
||||
--ti-select-dropdown-search-border-width: var(--ti-common-size-0);
|
||||
--ti-select-dropdown-search-border-width: var(--ti-common-size-0, 0px);
|
||||
// 下拉面板搜索框尾部图标显示状态
|
||||
--ti-select-dropdown-search-suffix-display: 'block';
|
||||
// 下拉面板搜索框头部图标显示状态
|
||||
|
|
@ -82,15 +82,15 @@
|
|||
// 下拉面板搜索框右侧内边距
|
||||
--ti-select-dropdown-search-input-padding-right: 54px;
|
||||
// 下拉面板搜索框左侧外边距
|
||||
--ti-select-dropdown-search-input-padding-left: var(--ti-common-space-2x);
|
||||
--ti-select-dropdown-search-input-padding-left: var(--ti-common-space-2x, 8px);
|
||||
// 面板可搜索的时候空数据容器顶部内边距
|
||||
--ti-select-dropdown-search-empty-padding-top: var(--ti-common-space-6);
|
||||
--ti-select-dropdown-search-empty-padding-top: var(--ti-common-space-6, 6px);
|
||||
// 面板可搜索的时候空数据容器底部内边距
|
||||
--ti-select-dropdown-search-empty-padding-bottom: var(--ti-common-space-6);
|
||||
--ti-select-dropdown-search-empty-padding-bottom: var(--ti-common-space-6, 6px);
|
||||
// 滚动容器的底部外边距
|
||||
--ti-select-dropdown-wrap-padding-bottom: var(--ti-common-space-0);
|
||||
--ti-select-dropdown-wrap-padding-bottom: var(--ti-common-space-0, 0px);
|
||||
// 下拉面板图标尺寸
|
||||
--ti-select-dropdown-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-select-dropdown-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 下拉面板图标颜色
|
||||
--ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
}
|
||||
|
|
@ -12,51 +12,51 @@
|
|||
|
||||
.component-css-vars-select() {
|
||||
// 输入框悬浮时的边框色(hide)
|
||||
--ti-select-inner-border-color-active: var(--ti-common-color-line-active);
|
||||
--ti-select-inner-border-color-active: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 可搜索输入框文本色
|
||||
--ti-select-input-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-select-input-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 选择器输入框字号(hide)
|
||||
--ti-select-input-font-size: var(--ti-common-font-size-base);
|
||||
--ti-select-input-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top: 14px;
|
||||
// 中型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-medium: var(--ti-common-space-5x);
|
||||
--ti-select-input-icon-top-medium: var(--ti-common-space-5x, 20px);
|
||||
// 小型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-small: var(--ti-common-space-4x);
|
||||
--ti-select-input-icon-top-small: var(--ti-common-space-4x, 16px);
|
||||
// 迷你型选择器尾部图标距离输入框的垂直距离
|
||||
--ti-select-input-icon-top-mini: var(--ti-common-space-3x);
|
||||
--ti-select-input-icon-top-mini: var(--ti-common-space-3x, 12px);
|
||||
// 选择器输入框尾部图标的颜色
|
||||
--ti-select-input-caret-icon-color: var(--ti-common-color-text-secondary);
|
||||
--ti-select-input-caret-icon-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 选择器输入框尾部图标悬浮时的颜色
|
||||
--ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-hover);
|
||||
--ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 选择器输入框尾部图标的尺寸
|
||||
--ti-select-input-caret-font-size: 10px;
|
||||
// 选择器输入框尾部关闭图标右侧外边距
|
||||
--ti-select-input-icon-close-margin-right: var(--ti-common-space-0);
|
||||
--ti-select-input-icon-close-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 选择器输入框尾部图标禁用时的颜色（hide）
|
||||
--ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 输入框禁用且悬浮时的边框色
|
||||
--ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled);
|
||||
--ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
|
||||
// 迷你型选择器输入框高度（hide）
|
||||
--ti-select-input-mini-height: var(--ti-common-size-6x);
|
||||
--ti-select-input-mini-height: var(--ti-common-size-6x, 24px);
|
||||
// 小型选择器输入框高度（hide）
|
||||
--ti-select-input-small-height: var(--ti-common-size-7x);
|
||||
--ti-select-input-small-height: var(--ti-common-size-7x, 28px);
|
||||
// 中型选择器输入框高度（hide）
|
||||
--ti-select-input-medium-height: var(--ti-common-size-42);
|
||||
// 选择器多选标签容器的左侧内边距
|
||||
--ti-select-tags-wrap-padding-left: var(--ti-common-space-1);
|
||||
--ti-select-tags-wrap-padding-left: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签容器的顶部内边距
|
||||
--ti-select-tags-wrap-padding-top: var(--ti-common-space-1);
|
||||
--ti-select-tags-wrap-padding-top: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签容器的底部内边距
|
||||
--ti-select-tags-wrap-padding-bottom: var(--ti-common-space-1);
|
||||
--ti-select-tags-wrap-padding-bottom: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签容器的右侧内边距
|
||||
--ti-select-tags-wrap-padding-right: var(--ti-common-space-0);
|
||||
--ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 选择器多选标签顶部外边距
|
||||
--ti-select-tags-margin-top: var(--ti-common-space-1);
|
||||
--ti-select-tags-margin-top: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签右侧外边距
|
||||
--ti-select-tags-margin-right: var(--ti-common-space-1);
|
||||
--ti-select-tags-margin-right: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签底部外边距
|
||||
--ti-select-tags-margin-bottom: var(--ti-common-space-1);
|
||||
--ti-select-tags-margin-bottom: var(--ti-common-space-1, 1px);
|
||||
// 选择器多选标签左侧外边距
|
||||
--ti-select-tags-margin-left: var(--ti-common-space-1);
|
||||
--ti-select-tags-margin-left: var(--ti-common-space-1, 1px);
|
||||
}
|
||||
|
|
@ -11,17 +11,17 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-selector() {
|
||||
--ti-selector-border-color: var(--ti-common-color-border);
|
||||
--ti-selector-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-selector-font-size: var(--ti-common-font-size-base);
|
||||
--ti-selector-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-selector-icon-size: var(--ti-common-size-4x);
|
||||
--ti-selector-icon-color: var(--ti-base-color-bg-5);
|
||||
--ti-selector-selected-icon-color: var(--ti-base-color-brand-6);
|
||||
--ti-selector-icon-hover-text-color: var(--ti-base-color-brand-5);
|
||||
--ti-selector-list-height: var(--ti-common-size-height-normal);
|
||||
--ti-selector-bg-color: var(--ti-common-color-light);
|
||||
--ti-selector-selected-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-selector-selected-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-selector-select-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-selector-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-selector-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-selector-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-selector-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-selector-icon-size: var(--ti-common-size-4x, 16px);
|
||||
--ti-selector-icon-color: var(--ti-base-color-bg-5, #f5f5f6);
|
||||
--ti-selector-selected-icon-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
--ti-selector-icon-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
|
||||
--ti-selector-list-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-selector-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-selector-selected-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
--ti-selector-selected-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
--ti-selector-select-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
// 组件待废弃，不整改里面的变量了
|
||||
.component-css-vars-slide-bar() {
|
||||
// 滚动块边框色
|
||||
--ti-slider-progress-box-border-color: var(--ti-common-color-light);
|
||||
--ti-slider-progress-box-border-color: var(--ti-common-color-light, #fff);
|
||||
// 滚动块悬浮时的边框色
|
||||
--ti-slider-progress-box-hover-border-color: rgba(153, 153, 153, 0.7);
|
||||
// 滚动块左右按钮色
|
||||
|
|
|
|||
|
|
@ -12,71 +12,71 @@
|
|||
|
||||
.component-css-vars-slider() {
|
||||
// 滑块线条默认背景色
|
||||
--ti-slider-bg-color: var(--ti-common-color-bg-light-normal);
|
||||
--ti-slider-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
|
||||
// 滑块线条高度
|
||||
--ti-slider-height: var(--ti-common-size-2x);
|
||||
--ti-slider-height: var(--ti-common-size-2x, 8px);
|
||||
// 滑块线条圆角
|
||||
--ti-slider-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-slider-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
|
||||
// 滑块进度条已完成部分的高度
|
||||
--ti-slider-range-height: var(--ti-common-size-4x);
|
||||
--ti-slider-range-height: var(--ti-common-size-4x, 16px);
|
||||
// 横向滑块进度条圆角
|
||||
--ti-slider-range-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-slider-range-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 滑块进度条背景色
|
||||
--ti-slider-range-bg-color: var(--ti-common-color-icon-hover);
|
||||
--ti-slider-range-bg-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 滑块进度条悬浮背景色
|
||||
--ti-slider-range-hover-bg-color: var(--ti-common-color-icon-hover);
|
||||
--ti-slider-range-hover-bg-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 滑块提示框top
|
||||
--ti-slider-range-top: calc(-1 * var(--ti-common-space-base));
|
||||
// 滑块进度条顶部外边距
|
||||
--ti-slider-range-margin-top: calc(-1 * var(--ti-common-space-base));
|
||||
|
||||
// 滑块点宽度
|
||||
--ti-slider-handle-width: var(--ti-common-size-5x);
|
||||
--ti-slider-handle-width: var(--ti-common-size-5x, 20px);
|
||||
// 滑块点高度
|
||||
--ti-slider-handle-height: var(--ti-common-size-7x);
|
||||
--ti-slider-handle-height: var(--ti-common-size-7x, 28px);
|
||||
// 滑块点背景色
|
||||
--ti-slider-handle-bg-color: linear-gradient(
|
||||
153deg,
|
||||
var(--ti-common-color-icon-white),
|
||||
var(--ti-common-color-bg-light-normal) 99%
|
||||
var(--ti-common-color-icon-white, #fff),
|
||||
var(--ti-common-color-bg-light-normal, #e9edfa) 99%
|
||||
);
|
||||
// 滑块点边框色
|
||||
--ti-slider-handle-border-color: var(--ti-common-color-line-active);
|
||||
--ti-slider-handle-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 滑块点圆角
|
||||
--ti-slider-handle-border-radius: calc(var(--ti-common-border-radius-2) + 2px);
|
||||
--ti-slider-handle-border-radius: calc(var(--ti-common-border-radius-2, 8px) + 2px);
|
||||
|
||||
// 滑块点悬浮文本色
|
||||
--ti-slider-handle-text-color-hover: var(--ti-common-color-bg-hover);
|
||||
--ti-slider-handle-text-color-hover: var(--ti-common-color-bg-hover, #344899);
|
||||
// 滑块点悬浮边框色
|
||||
--ti-slider-handle-border-color-hover: var(--ti-common-color-bg-hover);
|
||||
--ti-slider-handle-border-color-hover: var(--ti-common-color-bg-hover, #344899);
|
||||
// 滑块点阴影
|
||||
--ti-slider-handle-box-shadow: var(--ti-common-shadow-1-down);
|
||||
--ti-slider-handle-box-shadow: var(--ti-common-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.1));
|
||||
// 滑块点top
|
||||
--ti-slider-handle-top: calc(-1 * var(--ti-common-space-base));
|
||||
// 滑块点边框厚度
|
||||
--ti-slider-handle-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-slider-handle-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 滑块点图标的display(hide)
|
||||
--ti-slider-handle-icon-display: inline-block;
|
||||
// 滑块点图标色
|
||||
--ti-slider-handle-icon-fill-color: var(--ti-common-color-line-active);
|
||||
--ti-slider-handle-icon-fill-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 滑块点图标悬浮色
|
||||
--ti-slider-handle-icon-fill-color-hover: var(--ti-common-color-bg-hover);
|
||||
--ti-slider-handle-icon-fill-color-hover: var(--ti-common-color-bg-hover, #344899);
|
||||
// 滑块点的缩放值(hide)
|
||||
--ti-slider-handle-transform: scale(1);
|
||||
// 滑块点顶部外边距
|
||||
--ti-slider-handle-margin-top: calc(var(--ti-common-space-10) * -1);
|
||||
--ti-slider-handle-margin-top: calc(var(--ti-common-space-10, 10px) * -1);
|
||||
// 滑块点水平外边距
|
||||
--ti-slider-handle-margin-horizontal: calc(var(--ti-common-space-2x) * -1);
|
||||
--ti-slider-handle-margin-horizontal: calc(var(--ti-common-space-2x, 8px) * -1);
|
||||
// 滑块点底部外边距
|
||||
--ti-slider-handle-margin-bottom: var(--ti-common-space-0);
|
||||
--ti-slider-handle-margin-bottom: var(--ti-common-space-0, 0px);
|
||||
|
||||
// 滑块输入框高度
|
||||
--ti-slider-input-height: var(--ti-common-size-height-normal, 30px);
|
||||
// 滑块输入框宽度
|
||||
--ti-slider-input-width: var(--ti-common-size-10x);
|
||||
--ti-slider-input-width: var(--ti-common-size-10x, 40px);
|
||||
// 滑块输入框边框圆角
|
||||
--ti-slider-input-border-radius: calc(var(--ti-common-border-radius-normal) + 2px);
|
||||
--ti-slider-input-border-radius: calc(var(--ti-common-border-radius-normal, 2px) + 2px);
|
||||
// 滑块输入框边框色
|
||||
--ti-slider-input-border-color: var(--ti-common-color-border, #d9d9d9);
|
||||
// 滑块输入框文本色
|
||||
|
|
@ -85,18 +85,18 @@
|
|||
--ti-slider-input-bg-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
// 滑块活动时提示框背景色
|
||||
--ti-slider-tips-bg-color: var(--ti-common-color-bg-dark-normal);
|
||||
--ti-slider-tips-bg-color: var(--ti-common-color-bg-dark-normal, #464c59);
|
||||
// 滑块活动时提示框边框色
|
||||
--ti-slider-tips-border-color: var(--ti-common-color-bg-dark-normal);
|
||||
--ti-slider-tips-border-color: var(--ti-common-color-bg-dark-normal, #464c59);
|
||||
// 滑块活动时提示框文本色
|
||||
--ti-slider-tips-text-color: var(--ti-common-color-text-white);
|
||||
--ti-slider-tips-text-color: var(--ti-common-color-text-white, #fff);
|
||||
// 滑块活动时提示框左外边距
|
||||
--ti-slider-tips-margin-left: calc(var(--ti-common-space-6) / 2);
|
||||
--ti-slider-tips-margin-left: calc(var(--ti-common-space-6, 6px) / 2);
|
||||
|
||||
// 竖向滑块进度条顶部外边距
|
||||
--ti-slider-margin-vertical: calc(var(--ti-common-space-2x) * -1);
|
||||
--ti-slider-margin-vertical: calc(var(--ti-common-space-2x, 8px) * -1);
|
||||
// 竖向滑块右外边距
|
||||
--ti-slider-margin-right: var(--ti-common-space-0);
|
||||
--ti-slider-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 竖向滑块左外边距
|
||||
--ti-slider-margin-left: calc(var(--ti-common-space-6) * -1);
|
||||
--ti-slider-margin-left: calc(var(--ti-common-space-6, 6px) * -1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
|
||||
.component-css-vars-split() {
|
||||
// 分割面板字号
|
||||
--ti-split-pane-font-size: var(--ti-common-font-size-2);
|
||||
--ti-split-pane-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// 分割线背景色
|
||||
--ti-split-trigger-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-split-trigger-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 分割线圆点背景色
|
||||
--ti-split-trigger-bar-bg-color: var(--ti-common-color-icon-normal);
|
||||
--ti-split-trigger-bar-bg-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 分割线悬浮背景色
|
||||
--ti-split-trigger-hover-bg-color: var(--ti-split-trigger-bg-color);
|
||||
// 分割线圆点悬浮背景色
|
||||
--ti-split-trigger-bar-hover-bg-color: var(--ti-split-trigger-bar-bg-color);
|
||||
// 分割线条圆点盒子背景色
|
||||
--ti-split-trigger-bar-con-bg-color: var(--ti-common-color-light);
|
||||
--ti-split-trigger-bar-con-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 分割线和圆点尺寸
|
||||
--ti-split-trigger-size: var(--ti-common-size-base);
|
||||
--ti-split-trigger-size: var(--ti-common-size-base, 4px);
|
||||
// 水平分割线圆点左外边距
|
||||
--ti-split-trigger-bar-margin-left: var(--ti-common-space-base);
|
||||
--ti-split-trigger-bar-margin-left: var(--ti-common-space-base, 4px);
|
||||
// 水平分割线鼠标
|
||||
--ti-split-trigger-con-col-cursor: e-resize;
|
||||
// 垂直分割线圆点顶部外边距
|
||||
--ti-split-trigger-bar-margin-top: var(--ti-common-space-base);
|
||||
--ti-split-trigger-bar-margin-top: var(--ti-common-space-base, 4px);
|
||||
// 垂直分割线鼠标
|
||||
--ti-split-trigger-con-row-cursor: n-resize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,186 +12,186 @@
|
|||
|
||||
.component-css-vars-steps() {
|
||||
// 节点圆圈尺寸
|
||||
--ti-steps-circle-width-height: var(--ti-common-size-5x);
|
||||
--ti-steps-circle-width-height: var(--ti-common-size-5x, 20px);
|
||||
// 序号字号
|
||||
--ti-steps-number-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-number-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 节点内容字号
|
||||
--ti-steps-font-size-base: var(--ti-common-font-size-base);
|
||||
--ti-steps-font-size-base: var(--ti-common-font-size-base, 12px);
|
||||
// 节点内容悬浮字号
|
||||
--ti-steps-font-size-hover: var(--ti-common-font-weight-4);
|
||||
--ti-steps-font-size-hover: var(--ti-common-font-weight-4, normal);
|
||||
// 节点内容悬浮字体色
|
||||
--ti-steps-text-color-hover: var(--ti-common-color-primary-normal);
|
||||
--ti-steps-text-color-hover: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 序号圆圈大小
|
||||
--ti-steps-icon-size: var(--ti-common-size-5x);
|
||||
--ti-steps-icon-size: var(--ti-common-size-5x, 20px);
|
||||
// 步骤条字号(hide)
|
||||
--ti-steps-font-size-7: var(--ti-common-font-size-7);
|
||||
--ti-steps-font-size-7: var(--ti-common-font-size-7, 36px);
|
||||
// 节点间横线厚度
|
||||
--ti-steps-line-height: var(--ti-common-border-weight-normal);
|
||||
--ti-steps-line-height: var(--ti-common-border-weight-normal, 1px);
|
||||
// 节点间横线水平边距
|
||||
--ti-steps-line-margin-horizontal: var(--ti-common-space-2x);
|
||||
--ti-steps-line-margin-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 节点间横线最小宽度
|
||||
--ti-steps-line-min-width: var(--ti-common-space-4x);
|
||||
--ti-steps-line-min-width: var(--ti-common-space-4x, 16px);
|
||||
// 节点内容左边距
|
||||
--ti-steps-text-margin-left: var(--ti-common-space-base);
|
||||
--ti-steps-text-margin-left: var(--ti-common-space-base, 4px);
|
||||
// 节点间横线默认长度
|
||||
--ti-steps-line-width: var(--ti-common-size-16x);
|
||||
--ti-steps-line-width: var(--ti-common-size-16x, 64px);
|
||||
// 节点文本内容最大宽度
|
||||
--ti-steps-content-max-width: calc(var(--ti-common-space-10) * 25);
|
||||
--ti-steps-content-max-width: calc(var(--ti-common-space-10, 10px) * 25);
|
||||
// 节点文本内容上边距
|
||||
--ti-steps-content-margin-top: var(--ti-common-space-6);
|
||||
--ti-steps-content-margin-top: var(--ti-common-space-6, 6px);
|
||||
// 底部分割线厚度
|
||||
--ti-steps-bottom-divider-height: var(--ti-common-space-1);
|
||||
--ti-steps-bottom-divider-height: var(--ti-common-space-1, 1px);
|
||||
// 底部分割线与主体间距
|
||||
--ti-steps-bottom-divider-margin-top: var(--ti-common-space-4x);
|
||||
--ti-steps-bottom-divider-margin-top: var(--ti-common-space-4x, 16px);
|
||||
// 底部分割线的颜色
|
||||
--ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 描述信息最小宽度
|
||||
--ti-steps-description-min-width: calc(var(--ti-common-space-10) * 10);
|
||||
--ti-steps-description-min-width: calc(var(--ti-common-space-10, 10px) * 10);
|
||||
|
||||
// 活跃节点背景色
|
||||
--ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 活跃节点字重
|
||||
--ti-steps-active-font-weight: var(--ti-common-font-weight-4);
|
||||
--ti-steps-active-font-weight: var(--ti-common-font-weight-4, normal);
|
||||
// 活跃节点内容字体色
|
||||
--ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
|
||||
// 已完成节点文本色
|
||||
--ti-steps-done-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-steps-done-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 已完成节点线条色
|
||||
--ti-steps-line-active-bg-color: var(--ti-common-color-line-active);
|
||||
--ti-steps-line-active-bg-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 已完成节点边框色
|
||||
--ti-steps-done-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-steps-done-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 已完成节点图标(或文本)色
|
||||
--ti-steps-done-icon-color: var(--ti-common-color-icon-active);
|
||||
--ti-steps-done-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
// 已完成节点图标大小
|
||||
--ti-steps-done-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-steps-done-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 已完成节点背景色
|
||||
--ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
|
||||
// 未完成的线条色
|
||||
--ti-steps-line-bg-color: var(--ti-common-color-bg-secondary);
|
||||
--ti-steps-line-bg-color: var(--ti-common-color-bg-secondary, #adb0b8);
|
||||
// 未完成节点的背景色
|
||||
--ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 未完成节点序号图标色
|
||||
--ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal);
|
||||
--ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 未完成节点序号悬浮图标色
|
||||
--ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover);
|
||||
--ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
|
||||
// 未完成节点边框色
|
||||
--ti-steps-unselected-border-color: var(--ti-steps-unselected-icon-color);
|
||||
// 未完成节点悬浮边框色
|
||||
--ti-steps-unselected-hover-border-color: var(--ti-steps-unselected-hover-icon-color);
|
||||
// 未完成节点内容文本色
|
||||
--ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
|
||||
// 错误节点的背景色
|
||||
--ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 错误节点图标色
|
||||
--ti-steps-error-icon-color: var(--ti-common-color-error-text);
|
||||
--ti-steps-error-icon-color: var(--ti-common-color-error-text, #de504e);
|
||||
// 错误节点图标大小
|
||||
--ti-steps-error-icon-size: var(--ti-common-font-size-1);
|
||||
--ti-steps-error-icon-size: var(--ti-common-font-size-1, 14px);
|
||||
// 错误节点边框色
|
||||
--ti-steps-error-border-color: var(--ti-common-color-error-border);
|
||||
--ti-steps-error-border-color: var(--ti-common-color-error-border, #f66f6a);
|
||||
// 错误节点描述文本色
|
||||
--ti-steps-error-text-color: var(--ti-common-color-error-text);
|
||||
--ti-steps-error-text-color: var(--ti-common-color-error-text, #de504e);
|
||||
|
||||
// 禁用节点的背景色
|
||||
--ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 禁用节点序号文本色
|
||||
--ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled);
|
||||
--ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 禁用节点边框色
|
||||
--ti-steps-disabled-border-color: var(--ti-steps-disabled-icon-color);
|
||||
// 禁用节点描述文本色
|
||||
--ti-steps-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-steps-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
|
||||
// mini尺寸序号圆圈大小
|
||||
--ti-steps-mini-icon-size: var(--ti-common-font-size-5);
|
||||
--ti-steps-mini-icon-size: var(--ti-common-font-size-5, 24px);
|
||||
// mini尺寸序号字号
|
||||
--ti-steps-mini-number-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-mini-number-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// mini尺寸节点内容字号
|
||||
--ti-steps-mini-font-size-base: var(--ti-common-font-size-base);
|
||||
--ti-steps-mini-font-size-base: var(--ti-common-font-size-base, 12px);
|
||||
|
||||
// 向导步骤条边框色
|
||||
--ti-steps-advanced-border-color: var(--ti-common-color-line-normal);
|
||||
--ti-steps-advanced-border-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 向导步骤条未选中项文本色
|
||||
--ti-steps-advanced-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-steps-advanced-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 向导步骤条行高
|
||||
--ti-steps-advanced-line-height: var(--ti-common-size-7x);
|
||||
--ti-steps-advanced-line-height: var(--ti-common-size-7x, 28px);
|
||||
// 向导步骤条边框圆角
|
||||
--ti-steps-advanced-border-radius: calc(var(--ti-common-space-1) * 3);
|
||||
--ti-steps-advanced-border-radius: calc(var(--ti-common-space-1, 1px) * 3);
|
||||
// 向导步骤条未选中项背景色
|
||||
--ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 向导步骤条当前项和计数标记点的文本色
|
||||
--ti-steps-advanced-li-text-color: var(--ti-common-color-selected-text-color);
|
||||
--ti-steps-advanced-li-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
// 向导步骤条节点悬浮文本色
|
||||
--ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 向导步骤条节点悬浮背景色
|
||||
--ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
--ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
|
||||
// 向导步骤条字号
|
||||
--ti-steps-advanced-link-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-advanced-link-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 向导步骤条节点里的图标高度
|
||||
--ti-steps-advanced-dot-height: var(--ti-common-size-3x);
|
||||
--ti-steps-advanced-dot-height: var(--ti-common-size-3x, 12px);
|
||||
// 向导步骤条节点里的图标宽度
|
||||
--ti-steps-advanced-dot-width: var(--ti-common-size-3x);
|
||||
--ti-steps-advanced-dot-width: var(--ti-common-size-3x, 12px);
|
||||
// 向导步骤条计数标记点背景色
|
||||
--ti-steps-advanced-count-bg-color: var(--ti-common-bg-primary);
|
||||
--ti-steps-advanced-count-bg-color: var(--ti-common-bg-primary, #c7000b);
|
||||
// 向导步骤条计数标记点边框圆角
|
||||
--ti-steps-advanced-count-border-radius: var(--ti-common-space-10);
|
||||
--ti-steps-advanced-count-border-radius: var(--ti-common-space-10, 10px);
|
||||
// 向导步骤条计数标记点字号
|
||||
--ti-steps-advanced-count-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-advanced-count-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 向导步骤条计数标记点高度
|
||||
--ti-steps-advanced-count-height: calc(var(--ti-common-space-6) * 3);
|
||||
--ti-steps-advanced-count-height: calc(var(--ti-common-space-6, 6px) * 3);
|
||||
// 向导步骤条厚度(hide)
|
||||
--ti-steps-advanced-border-weight: calc(var(--ti-common-space-base) * 3.5);
|
||||
--ti-steps-advanced-border-weight: calc(var(--ti-common-space-base, 4px) * 3.5);
|
||||
// 时间线时间字号(hide)
|
||||
--ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 向导步骤条正在处理节点背景色(hide)
|
||||
--ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn);
|
||||
--ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn, #fa9841);
|
||||
// 向导步骤条待处理节点背景色(hide)
|
||||
--ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
// 向导步骤条已完成节点背景色(hide)
|
||||
--ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
|
||||
// 竖式步骤条节点左右字号
|
||||
--ti-steps-timeline-name-font-size: var(--ti-common-font-size-1);
|
||||
--ti-steps-timeline-name-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 竖式步骤条节点左侧时间预留宽度
|
||||
--ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x);
|
||||
--ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x, 100px);
|
||||
// 竖式步骤条线条上下间距
|
||||
--ti-steps-timeline-line-margin-vertical: 0;
|
||||
// 竖式步骤条线条背景色
|
||||
--ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 竖式步骤条线条左间距
|
||||
--ti-steps-timeline-vertical-line-margin-left: var(--ti-common-size-3x);
|
||||
--ti-steps-timeline-vertical-line-margin-left: var(--ti-common-size-3x, 12px);
|
||||
// 竖式步骤条线条右间距
|
||||
--ti-steps-timeline-vertical-line-margin-right: var(--ti-steps-timeline-vertical-line-margin-left);
|
||||
// 竖式步骤条圆点尺寸
|
||||
--ti-steps-timeline-dot-width: var(--ti-common-size-2x);
|
||||
--ti-steps-timeline-dot-width: var(--ti-common-size-2x, 8px);
|
||||
// 竖式步骤条圆点边框色
|
||||
--ti-steps-timeline-dot-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-steps-timeline-dot-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 竖式步骤条圆点背景色
|
||||
--ti-steps-timeline-dot-bg-color: var(--ti-common-color-line-dividing);
|
||||
--ti-steps-timeline-dot-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 竖式步骤条节点内容底部内边距
|
||||
--ti-steps-timeline-item-padding-bottom: var(--ti-common-size-5x);
|
||||
--ti-steps-timeline-item-padding-bottom: var(--ti-common-size-5x, 20px);
|
||||
// 竖式步骤条二级文本颜色
|
||||
--ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 竖式步骤条二级文本字号
|
||||
--ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 竖式步骤条标题与二级文本间距
|
||||
--ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base);
|
||||
--ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base, 4px);
|
||||
// 基本状态圆点颜色
|
||||
--ti-steps-timeline-dot-primary-bg-color: var(--ti-steps-timeline-dot-bg-color);
|
||||
// 成功状态圆点颜色
|
||||
--ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success);
|
||||
--ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success, #50d4ab);
|
||||
// 警告状态圆点颜色
|
||||
--ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn);
|
||||
--ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn, #fa9841);
|
||||
// 危险状态圆点颜色
|
||||
--ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error);
|
||||
--ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error, #f66f6a);
|
||||
// 信息状态圆点颜色
|
||||
--ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt);
|
||||
--ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
|
||||
// 时间信息字体色
|
||||
--ti-steps-time-text-color: var(--ti-common-color-text-weaken);
|
||||
--ti-steps-time-text-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 时间信息字号
|
||||
--ti-steps-time-font-size: var(--ti-common-font-size-base);
|
||||
--ti-steps-time-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 时间信息下边距
|
||||
--ti-steps-time-margin-bottom: var(--ti-common-space-6);
|
||||
--ti-steps-time-margin-bottom: var(--ti-common-space-6, 6px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,43 +12,43 @@
|
|||
|
||||
.component-css-vars-switch() {
|
||||
// 开关开启状态背景色
|
||||
--ti-switch-on-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
--ti-switch-on-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
|
||||
// 开关关闭状态背景色
|
||||
--ti-switch-off-bg-color: var(--ti-common-color-bg-secondary);
|
||||
--ti-switch-off-bg-color: var(--ti-common-color-bg-secondary, #adb0b8);
|
||||
// 开关关闭禁用状态背景色
|
||||
--ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
|
||||
--ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled, #dfe1e6);
|
||||
// 开关开启禁用状态背景色
|
||||
--ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize);
|
||||
--ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
|
||||
// 开关开启禁用状态边框色
|
||||
--ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize);
|
||||
--ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
|
||||
// 开关禁用状态文本色
|
||||
--ti-switch-disabled-text-color: var(--ti-common-color-info-disabled);
|
||||
--ti-switch-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
|
||||
// 开关禁用状态圆点色
|
||||
--ti-switch-disabled-dot-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-switch-disabled-dot-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 开关默认圆点色
|
||||
--ti-switch-dot-bg-color: var(--ti-common-color-light);
|
||||
--ti-switch-dot-bg-color: var(--ti-common-color-light, #fff);
|
||||
// 开关圆点尺寸
|
||||
--ti-switch-dot-size: var(--ti-common-size-4x);
|
||||
--ti-switch-dot-size: var(--ti-common-size-4x, 16px);
|
||||
// 开关圆点左边距(hide)
|
||||
--ti-switch-dot-position-left: var(--ti-common-space-1);
|
||||
--ti-switch-dot-position-left: var(--ti-common-space-1, 1px);
|
||||
// 开关圆点上边距(hide)
|
||||
--ti-switch-dot-position-top: var(--ti-common-space-1);
|
||||
--ti-switch-dot-position-top: var(--ti-common-space-1, 1px);
|
||||
// 开关圆点偏移量(hide)
|
||||
--ti-switch-dot-offset: calc(var(--ti-switch-dot-size) + var(--ti-switch-dot-position-left));
|
||||
// 开关文本色
|
||||
--ti-switch-text-color: var(--ti-common-color-light);
|
||||
--ti-switch-text-color: var(--ti-common-color-light, #fff);
|
||||
// 默认开关宽度
|
||||
--ti-switch-width: calc(var(--ti-common-size-base) * 9.5);
|
||||
--ti-switch-width: calc(var(--ti-common-size-base, 4px) * 9.5);
|
||||
// 开关高度
|
||||
--ti-switch-height: var(--ti-common-size-5x);
|
||||
--ti-switch-height: var(--ti-common-size-5x, 20px);
|
||||
// 开关圆角
|
||||
--ti-switch-border-radius: var(--ti-common-size-6x);
|
||||
--ti-switch-border-radius: var(--ti-common-size-6x, 24px);
|
||||
// 开关边框厚度
|
||||
--ti-switch-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-switch-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 开关字号
|
||||
--ti-switch-inner-font-size: 12px;
|
||||
// 开关左侧距离(hide)
|
||||
--ti-switch-inner-position-left: var(--ti-common-space-4x);
|
||||
--ti-switch-inner-position-left: var(--ti-common-space-4x, 16px);
|
||||
// 自定义文本开关宽度
|
||||
--ti-switch-text-width: calc(var(--ti-common-size-11x) + 1px);
|
||||
--ti-switch-text-width: calc(var(--ti-common-size-11x, 44px) + 1px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-table() {
|
||||
--ti-table-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-table-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
--ti-table-bg-color: #fafafa;
|
||||
--ti-table-odd-bg-color: var(--ti-common-color-light);
|
||||
--ti-table-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-table-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-table-odd-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-table-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
--ti-table-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
--ti-table-disabled-bg-color: #f1f1f1;
|
||||
--ti-table-nodata-text-color: #909399;
|
||||
--ti-table-td-height: var(--ti-common-size-height-medium);
|
||||
--ti-table-td-font-size: var(--ti-common-font-size-base);
|
||||
--ti-table-border-color: var(--ti-common-color-border);
|
||||
--ti-table-thead-bg-color: var(--ti-base-color-brand-1);
|
||||
--ti-table-icon-font-size: var(--ti-common-font-size-2);
|
||||
--ti-table-check-icon-color: var(--ti-base-color-brand-6);
|
||||
--ti-table-td-height: var(--ti-common-size-height-medium, 40px);
|
||||
--ti-table-td-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-table-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-table-thead-bg-color: var(--ti-base-color-brand-1, #f2f5fc);
|
||||
--ti-table-icon-font-size: var(--ti-common-font-size-2, 16px);
|
||||
--ti-table-check-icon-color: var(--ti-base-color-brand-6, #5e7ce0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,139 +12,139 @@
|
|||
|
||||
.component-css-vars-tabs() {
|
||||
// 标签栏选中项边框色(除bordercard类)
|
||||
--ti-tabs-header-font-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-tabs-header-font-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 标签栏选中项字重
|
||||
--ti-tabs-header-font-weight-active: var(--ti-common-font-weight-5);
|
||||
--ti-tabs-header-font-weight-active: var(--ti-common-font-weight-5, 500);
|
||||
// 标签栏(选中|悬浮)项文本色(除bordercard类)
|
||||
--ti-tabs-header-font-active-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-tabs-header-font-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 标签栏(更多选项|加号按钮)悬浮文本色
|
||||
--ti-tabs-header-text-color: var(--ti-common-color-primary-normal);
|
||||
--ti-tabs-header-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
// 标签栏边框色
|
||||
--ti-tabs-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-tabs-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
// 标签栏新增按钮高度
|
||||
--ti-tabs-new-height: calc(var(--ti-common-space-base) * 4.5);
|
||||
--ti-tabs-new-height: calc(var(--ti-common-space-base, 4px) * 4.5);
|
||||
// 标签栏新增按钮宽度
|
||||
--ti-tabs-new-width: calc(var(--ti-common-space-base) * 4.5);
|
||||
--ti-tabs-new-width: calc(var(--ti-common-space-base, 4px) * 4.5);
|
||||
// 标签栏新增按钮填充色
|
||||
--ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 标签栏更多文字悬浮文本色
|
||||
--ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover);
|
||||
--ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 标签页选项禁用色(hide)
|
||||
--ti-tabs-item-disabled-text-color: #b4bccc;
|
||||
// 标签页新增按钮圆角
|
||||
--ti-tabs-new-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tabs-new-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 标签页下拉框背景色(hide)
|
||||
--ti-tabs-dropdown-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-tabs-dropdown-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// 标签页下拉框圆角(hide)
|
||||
--ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 标签页下拉选项文本色(hide)
|
||||
--ti-tabs-dropdown-li-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-tabs-dropdown-li-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 标签页内容字号
|
||||
--ti-tabs-content-font-size: var(--ti-common-font-size-2);
|
||||
--ti-tabs-content-font-size: var(--ti-common-font-size-2, 16px);
|
||||
// card类型(无size属性)标签项高度
|
||||
--ti-tabs-height: var(--ti-common-size-10x);
|
||||
--ti-tabs-height: var(--ti-common-size-10x, 40px);
|
||||
// card类型未选中项文本色
|
||||
--ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// card类型选中项下边框色(hide)
|
||||
--ti-tabs-dropdown-li-border-color: #e6e6e6;
|
||||
// card类型选中项顶部块背景色
|
||||
--ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active);
|
||||
--ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// card类型samll尺寸标签栏高度
|
||||
--ti-tabs-small-height: var(--ti-common-size-9x);
|
||||
--ti-tabs-small-height: var(--ti-common-size-9x, 36px);
|
||||
// card类型标签项水平内边距
|
||||
--ti-tabs-item-padding-horizontal: var(--ti-common-space-3x);
|
||||
--ti-tabs-item-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
// card类型选中项底部小滑块厚度(hide)
|
||||
--ti-tabs-item-bottom-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-tabs-item-bottom-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// card类型选中项底部边框色
|
||||
--ti-tabs-item-bottom-border-color: var(--ti-common-color-light);
|
||||
--ti-tabs-item-bottom-border-color: var(--ti-common-color-light, #fff);
|
||||
// card类型选中项(不含下|左)边框厚度
|
||||
--ti-tabs-item-top-right-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-tabs-item-top-right-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// card类型选中项背景色
|
||||
--ti-tabs-item-card-active-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-tabs-item-card-active-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// card类型选中项圆角
|
||||
--ti-tabs-item-card-border-radius: var(--ti-common-border-radius-0);
|
||||
--ti-tabs-item-card-border-radius: var(--ti-common-border-radius-0, 0px);
|
||||
// card类型标签项默认上|右边框色
|
||||
--ti-tabs-item-card-border-color: var(--ti-common-color-transparent);
|
||||
--ti-tabs-item-card-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// card类型标签项悬浮字重
|
||||
--ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5);
|
||||
--ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5, 500);
|
||||
// bordercard类型选中项圆角
|
||||
--ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0 0;
|
||||
--ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0 0;
|
||||
// bordercard类型选中项文本色
|
||||
--ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary);
|
||||
--ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary, #252b3a);
|
||||
// bordercard类型选中项背景色
|
||||
--ti-tabs-dark-bg-color-active: var(--ti-common-color-bg-normal);
|
||||
--ti-tabs-dark-bg-color-active: var(--ti-common-color-bg-normal, #eef0f5);
|
||||
// bordercard类型非选中项悬浮文本色
|
||||
--ti-tabs-dark-text-color-hover: var(--ti-common-color-text-white);
|
||||
--ti-tabs-dark-text-color-hover: var(--ti-common-color-text-white, #fff);
|
||||
// bordercard类型非选中项悬浮背景色
|
||||
--ti-tabs-dark-bg-color-hover: var(--ti-common-color-bg-dark-emphasize);
|
||||
--ti-tabs-dark-bg-color-hover: var(--ti-common-color-bg-dark-emphasize, #5c6173);
|
||||
// bordercard类型非选中项文本色
|
||||
--ti-tabs-dark-text-color: var(--ti-common-color-text-darkbg);
|
||||
--ti-tabs-dark-text-color: var(--ti-common-color-text-darkbg, #adb0b8);
|
||||
// bordercard类型标签项上外边距
|
||||
--ti-tabs-dark-margin-top: calc(var(--ti-common-space-base) + 1px);
|
||||
--ti-tabs-dark-margin-top: calc(var(--ti-common-space-base, 4px) + 1px);
|
||||
// bordercard类型首个标签项左外边距
|
||||
--ti-tabs-dark-first-margin-left: var(--ti-common-space-5x);
|
||||
--ti-tabs-dark-first-margin-left: var(--ti-common-space-5x, 20px);
|
||||
// bordercard类型标签栏边框厚度
|
||||
--ti-tabs-dark-border-weight: var(--ti-common-size-0);
|
||||
--ti-tabs-dark-border-weight: var(--ti-common-size-0, 0px);
|
||||
// bordercard类型默认背景色
|
||||
--ti-tabs-header-dark-bg-color: var(--ti-common-color-bg-dark-normal);
|
||||
--ti-tabs-header-dark-bg-color: var(--ti-common-color-bg-dark-normal, #464c59);
|
||||
// bordercard类型标签项高度
|
||||
--ti-tabs-dark-item-height: calc(var(--ti-common-space-base) * 9.25);
|
||||
--ti-tabs-dark-item-height: calc(var(--ti-common-space-base, 4px) * 9.25);
|
||||
// 标签项超出时上下按钮尺寸[3.9.1新增]
|
||||
--ti-tabs-prev-next-btn-icon-size: var(--ti-common-font-size-base);
|
||||
--ti-tabs-prev-next-btn-icon-size: var(--ti-common-font-size-base, 12px);
|
||||
// 标签项默认右外边距
|
||||
--ti-tabs-item-margin-right: var(--ti-common-space-10x);
|
||||
--ti-tabs-item-margin-right: var(--ti-common-space-10x, 40px);
|
||||
// 标签项active边框样式(hide)
|
||||
--ti-tabs-item-active-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-tabs-item-active-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 标签项底部边框样式(hide)
|
||||
--ti-tabs-item-bottom-border-style: var(--ti-common-border-style-solid);
|
||||
--ti-tabs-item-bottom-border-style: var(--ti-common-border-style-solid, solid);
|
||||
// 横向标签栏字号
|
||||
--ti-tabs-item-font-size: var(--ti-common-font-size-1);
|
||||
--ti-tabs-item-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 纵向标签栏非选中项背景色
|
||||
--ti-tabs-header-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-tabs-header-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 纵向标签栏字号
|
||||
--ti-tabs-font-size-base: var(--ti-common-font-size-base);
|
||||
--ti-tabs-font-size-base: var(--ti-common-font-size-base, 12px);
|
||||
// 竖向标签项水平内边距
|
||||
--ti-tabs-item-vertical-padding-horizontal: var(--ti-common-space-5x);
|
||||
--ti-tabs-item-vertical-padding-horizontal: var(--ti-common-space-5x, 20px);
|
||||
// 选中标签项小滑块厚度(不含card类型)
|
||||
--ti-tabs-item-active-border-weight: var(--ti-common-border-weight-2);
|
||||
--ti-tabs-item-active-border-weight: var(--ti-common-border-weight-2, 3px);
|
||||
// 选中标签项小滑块边框色
|
||||
--ti-tabs-item-active-border-color: var(--ti-tabs-header-font-active-border-color);
|
||||
// 可关闭项关闭按钮悬浮背景色
|
||||
--ti-tabs-icon-close-hover-bg-color: var(--ti-common-bg-minor-hover);
|
||||
--ti-tabs-icon-close-hover-bg-color: var(--ti-common-bg-minor-hover, #ffffff);
|
||||
// 可关闭项关闭图标默认背景色
|
||||
--ti-tabs-icon-close-default-bg-color: var(--ti-common-color-transparent);
|
||||
--ti-tabs-icon-close-default-bg-color: var(--ti-common-color-transparent, transparent);
|
||||
// 可关闭项未选中项的关闭图标色
|
||||
--ti-tabs-icon-close-default-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-tabs-icon-close-default-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 可关闭项(选中项|未选中项悬浮)图标色
|
||||
--ti-tabs-icon-close-hover-text-color: var(--ti-common-color-icon-active);
|
||||
--ti-tabs-icon-close-hover-text-color: var(--ti-common-color-icon-active, #5e7ce0);
|
||||
// 可关闭项关闭图标尺寸
|
||||
--ti-tabs-icon-size-close: var(--ti-common-font-size-1);
|
||||
--ti-tabs-icon-size-close: var(--ti-common-font-size-1, 14px);
|
||||
// 可关闭项关闭图标垂直外边距(hide)
|
||||
--ti-tabs-icon-close-margin-vertical: var(--ti-common-space-0);
|
||||
--ti-tabs-icon-close-margin-vertical: var(--ti-common-space-0, 0px);
|
||||
// 可关闭项右外边距
|
||||
--ti-tabs-icon-close-margin-right: var(--ti-common-space-0);
|
||||
--ti-tabs-icon-close-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 可关闭项左外边距
|
||||
--ti-tabs-icon-close-margin-left: 5px;
|
||||
// 更多下拉框上外边距
|
||||
--ti-tabs-dropdown-more-margin-top: var(--ti-common-space-3x);
|
||||
--ti-tabs-dropdown-more-margin-top: var(--ti-common-space-3x, 12px);
|
||||
// 更多下拉框项悬浮背景色
|
||||
--ti-tabs-dropdown-more-item-hover-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-tabs-dropdown-more-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
// 更多下拉框项悬浮字重
|
||||
--ti-tabs-dropdown-more-item-hover-font-weight: var(--ti-common-font-weight-5);
|
||||
--ti-tabs-dropdown-more-item-hover-font-weight: var(--ti-common-font-weight-5, 500);
|
||||
// 头部更多按钮水平内边距
|
||||
--ti-tabs-more-icon-padding-horizontal: 8.5px;
|
||||
// 头部更多图标盒子高度
|
||||
--ti-tabs-more-icon-height: calc(var(--ti-common-size-base) * 10.25);
|
||||
--ti-tabs-more-icon-height: calc(var(--ti-common-size-base, 4px) * 10.25);
|
||||
// 头部更多图标尺寸[3.9.1新增]
|
||||
--ti-tabs-more-icon-size: var(--ti-common-font-size-2);
|
||||
--ti-tabs-more-icon-size: var(--ti-common-font-size-2, 16px);
|
||||
// 头部更多按钮左侧盒子阴影高度
|
||||
--ti-tabs-more-left-box-height: var(--ti-common-size-10x);
|
||||
--ti-tabs-more-left-box-height: var(--ti-common-size-10x, 40px);
|
||||
// 头部更多按钮左侧盒子阴影
|
||||
--ti-tabs-more-left-box-shadow: -3px 0px 4px 0px rgba(0, 0, 0, 0.08);
|
||||
// 内容垂直内边距
|
||||
--ti-tabs-content-padding-vertical: calc(var(--ti-common-space-base) * 3.75);
|
||||
--ti-tabs-content-padding-vertical: calc(var(--ti-common-space-base, 4px) * 3.75);
|
||||
// 内容水平内边距
|
||||
--ti-tabs-content-padding-horizontal: var(--ti-common-space-6x);
|
||||
--ti-tabs-content-padding-horizontal: var(--ti-common-space-6x, 24px);
|
||||
// buttoncard类型标签栏背景色
|
||||
--ti-tabs-button-card-nav-bg-color: rgba(0, 0, 0, 0.05);
|
||||
// buttoncard类型选项文本色
|
||||
|
|
@ -152,19 +152,19 @@
|
|||
// buttoncard类型选项悬浮文本色
|
||||
--ti-tabs-button-card-item-hover-text-color: #191919;
|
||||
// buttoncard类型选项字号
|
||||
--ti-tabs-button-card-item-font-size: var(--ti-common-font-size-1);
|
||||
--ti-tabs-button-card-item-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// buttoncard类型选项高度
|
||||
--ti-tabs-button-card-item-height: var(--ti-common-size-8x);
|
||||
--ti-tabs-button-card-item-height: var(--ti-common-size-8x, 32px);
|
||||
// buttoncard类型选中项背景色
|
||||
--ti-tabs-button-card-item-active-bg-color: var(--ti-common-color-bg-white-normal);
|
||||
--ti-tabs-button-card-item-active-bg-color: var(--ti-common-color-bg-white-normal, #fff);
|
||||
// buttoncard类型选中项文本色
|
||||
--ti-tabs-button-card-item-active-text-color: #191919;
|
||||
// buttoncard类型选中项边框色
|
||||
--ti-tabs-button-card-item-active-border-color: #191919;
|
||||
// buttoncard类型圆角
|
||||
--ti-tabs-button-card-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tabs-button-card-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// buttoncard类型选项水平内边距
|
||||
--ti-tabs-button-card-title-padding-horizontal: var(--ti-common-space-6x);
|
||||
--ti-tabs-button-card-title-padding-horizontal: var(--ti-common-space-6x, 24px);
|
||||
// buttoncard类型字重
|
||||
--ti-tabs-button-card-font-weight: var(--ti-common-font-weight-7);
|
||||
--ti-tabs-button-card-font-weight: var(--ti-common-font-weight-7, bold);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.component-css-vars-tag-group() {
|
||||
// 标签组右内边距
|
||||
--ti-tag-group-padding-right: var(--ti-common-space-8x);
|
||||
--ti-tag-group-padding-right: var(--ti-common-space-8x, 32px);
|
||||
// 标签组省略图标色
|
||||
--ti-tag-group-ellipsis-icon-color: var(--ti-common-color-primary-normal);
|
||||
--ti-tag-group-ellipsis-icon-color: var(--ti-common-color-primary-normal, #5e7ce0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,119 +12,119 @@
|
|||
|
||||
.component-css-vars-tag() {
|
||||
// 标签默认高度
|
||||
--ti-tag-height: calc(var(--ti-common-size-base) * 5.5);
|
||||
--ti-tag-height: calc(var(--ti-common-size-base, 4px) * 5.5);
|
||||
// 中等标签高度
|
||||
--ti-tag-medium-height: var(--ti-common-size-6x);
|
||||
--ti-tag-medium-height: var(--ti-common-size-6x, 24px);
|
||||
// 中等标签水平内边距
|
||||
--ti-tag-medium-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-tag-medium-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 中型标签圆角
|
||||
--ti-tag-medium-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tag-medium-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 小型标签高度
|
||||
--ti-tag-small-height: var(--ti-common-line-height-4);
|
||||
--ti-tag-small-height: var(--ti-common-line-height-4, 20px);
|
||||
// 小型标签水平内边距
|
||||
--ti-tag-small-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-tag-small-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 超小标签高度
|
||||
--ti-tag-mini-height: var(--ti-common-size-4x);
|
||||
--ti-tag-mini-height: var(--ti-common-size-4x, 16px);
|
||||
// 标签边框厚度
|
||||
--ti-tag-border-weight: var(--ti-common-border-weight-normal);
|
||||
--ti-tag-border-weight: var(--ti-common-border-weight-normal, 1px);
|
||||
// 标签圆角
|
||||
--ti-tag-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tag-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 小型|超小标签圆角
|
||||
--ti-tag-small-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tag-small-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 标签默认字号
|
||||
--ti-tag-font-size: var(--ti-common-font-size-base);
|
||||
--ti-tag-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 标签关闭按钮字号
|
||||
--ti-tag-close-font-size: var(--ti-common-font-size-1);
|
||||
--ti-tag-close-font-size: var(--ti-common-font-size-1, 14px);
|
||||
// 标签关闭按钮默认左外边距
|
||||
--ti-tag-close-margin-left: var(--ti-common-space-6);
|
||||
--ti-tag-close-margin-left: var(--ti-common-space-6, 6px);
|
||||
// 标签关闭按钮默认右外边距
|
||||
--ti-tag-close-margin-right: var(--ti-common-space-0);
|
||||
--ti-tag-close-margin-right: var(--ti-common-space-0, 0px);
|
||||
// 中型标签关闭按钮左外边距
|
||||
--ti-tag-close-medium-margin-left: var(--ti-common-space-6);
|
||||
--ti-tag-close-medium-margin-left: var(--ti-common-space-6, 6px);
|
||||
// 中等标签关闭按钮右外边距
|
||||
--ti-tag-close-medium-margin-right: var(--ti-common-space-0);
|
||||
--ti-tag-close-medium-margin-right: var(--ti-common-space-0, 0px);
|
||||
// (小型|超小)标签关闭按钮左外边距
|
||||
--ti-tag-close-small-margin-left: var(--ti-common-space-6);
|
||||
--ti-tag-close-small-margin-left: var(--ti-common-space-6, 6px);
|
||||
// (小型|超小)标签关闭按钮右外边距
|
||||
--ti-tag-close-small-margin-right: var(--ti-common-space-0);
|
||||
--ti-tag-close-small-margin-right: var(--ti-common-space-0, 0px);
|
||||
// light主题标签默认文本色
|
||||
--ti-tag-primary-text-color: var(--ti-common-color-text-secondary);
|
||||
--ti-tag-primary-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// light主题标签默认关闭图标色
|
||||
--ti-tag-primary-close-icon-color: var(--ti-common-color-text-secondary);
|
||||
--ti-tag-primary-close-icon-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// light主题标签默认关闭图标悬浮色
|
||||
--ti-tag-primary-close-hover-icon-color: var(--ti-common-color-text-secondary);
|
||||
--ti-tag-primary-close-hover-icon-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// light主题标签默认关闭按钮透明度(hide)
|
||||
--ti-tag-primary-close-opacity: 0.5;
|
||||
// light主题标签默认边框色
|
||||
--ti-tag-primary-border-color: var(--ti-common-color-bg-normal);
|
||||
--ti-tag-primary-border-color: var(--ti-common-color-bg-normal, #eef0f5);
|
||||
// light主题标签默认背景色
|
||||
--ti-tag-primary-background-color: var(--ti-common-color-bg-normal);
|
||||
--ti-tag-primary-background-color: var(--ti-common-color-bg-normal, #eef0f5);
|
||||
|
||||
// light主题警告类标签(文本|边框)色
|
||||
--ti-tag-warning-text-color: var(--ti-common-color-warn-text);
|
||||
--ti-tag-warning-text-color: var(--ti-common-color-warn-text, #e37d29);
|
||||
// light主题警告类标签边框色
|
||||
--ti-tag-warning-border-color: var(--ti-common-color-warn-border);
|
||||
--ti-tag-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6);
|
||||
// light主题警告类标签背景色
|
||||
--ti-tag-warning-background-color: var(--ti-common-color-warn-bg);
|
||||
--ti-tag-warning-background-color: var(--ti-common-color-warn-bg, #fff3e8);
|
||||
|
||||
// light主题危险类标签(文本|边框)色
|
||||
--ti-tag-danger-text-color: var(--ti-common-color-error-text);
|
||||
--ti-tag-danger-text-color: var(--ti-common-color-error-text, #de504e);
|
||||
// light主题危险类标签边框色
|
||||
--ti-tag-danger-border-color: var(--ti-common-color-error-border-secondary);
|
||||
--ti-tag-danger-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
|
||||
// (dark|light)主题危险类标签背景色
|
||||
--ti-tag-danger-background-color: var(--ti-common-color-error-bg);
|
||||
--ti-tag-danger-background-color: var(--ti-common-color-error-bg, #ffeeed);
|
||||
|
||||
// light主题成功类标签(文本|边框)色
|
||||
--ti-tag-success-text-color: var(--ti-common-color-text-success);
|
||||
--ti-tag-success-text-color: var(--ti-common-color-text-success, #3ac295);
|
||||
// light主题成功类标签边框色
|
||||
--ti-tag-success-border-color: var(--ti-common-color-success-border);
|
||||
--ti-tag-success-border-color: var(--ti-common-color-success-border, #acf2dc);
|
||||
// light主题成功类标签背景色
|
||||
--ti-tag-success-background-color: var(--ti-common-color-success-bg);
|
||||
--ti-tag-success-background-color: var(--ti-common-color-success-bg, #edfff9);
|
||||
|
||||
// light主题信息类标签(文本|边框)色
|
||||
--ti-tag-info-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-tag-info-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// light主题信息类标签边框色
|
||||
--ti-tag-info-border-color: var(--ti-common-color-info-border);
|
||||
--ti-tag-info-border-color: var(--ti-common-color-info-border, #d3d4d6);
|
||||
// light主题信息类标签背景色
|
||||
--ti-tag-info-background-color: var(--ti-common-color-info-bg);
|
||||
--ti-tag-info-background-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06));
|
||||
|
||||
// dark主题标签默认文本色
|
||||
--ti-tag-dark-text-color: var(--ti-common-color-light);
|
||||
--ti-tag-dark-text-color: var(--ti-common-color-light, #fff);
|
||||
// dark主题标签默认(背景|边框)色
|
||||
--ti-tag-dark-bg-color: var(--ti-common-color-prompt);
|
||||
--ti-tag-dark-bg-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// dark主题成功类标签(背景|边框)色
|
||||
--ti-tag-dark-success-bg-color: var(--ti-common-color-success);
|
||||
--ti-tag-dark-success-bg-color: var(--ti-common-color-success, #50d4ab);
|
||||
// dark主题警告类标签(背景|边框)色
|
||||
--ti-tag-dark-warning-bg-color: var(--ti-common-color-warn);
|
||||
--ti-tag-dark-warning-bg-color: var(--ti-common-color-warn, #fa9841);
|
||||
// dark主题危险类标签背景色
|
||||
--ti-tag-dark-danger-bg-color: var(--ti-common-color-error);
|
||||
--ti-tag-dark-danger-bg-color: var(--ti-common-color-error, #f66f6a);
|
||||
// dark主题信息类标签(背景|边框)色
|
||||
--ti-tag-dark-info-bg-color: var(--ti-common-color-info);
|
||||
--ti-tag-dark-info-bg-color: var(--ti-common-color-info, #252b3a);
|
||||
|
||||
// plain主题标签默认文本色
|
||||
--ti-tag-plain-text-color: var(--ti-common-color-prompt);
|
||||
--ti-tag-plain-text-color: var(--ti-common-color-prompt, #5e7ce0);
|
||||
// plain主题标签默认边框色
|
||||
--ti-tag-plain-border-color: var(--ti-common-color-prompt-border);
|
||||
--ti-tag-plain-border-color: var(--ti-common-color-prompt-border, #beccfa);
|
||||
// plain主题标签默认背景色
|
||||
--ti-tag-plain-background-color: var(--ti-common-color-light);
|
||||
--ti-tag-plain-background-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
// plain主题信息类标签文本色
|
||||
--ti-tag-plain-info-text-color: var(--ti-common-color-info);
|
||||
--ti-tag-plain-info-text-color: var(--ti-common-color-info, #252b3a);
|
||||
// plain主题信息类标签边框色
|
||||
--ti-tag-plain-info-border-color: var(--ti-common-color-info-border);
|
||||
--ti-tag-plain-info-border-color: var(--ti-common-color-info-border, #d3d4d6);
|
||||
|
||||
// plain主题成功类标签文本色
|
||||
--ti-tag-plain-success-text-color: var(--ti-common-color-success);
|
||||
--ti-tag-plain-success-text-color: var(--ti-common-color-success, #50d4ab);
|
||||
// plain主题成功类标签边框色
|
||||
--ti-tag-plain-success-border-color: var(--ti-common-color-success-border);
|
||||
--ti-tag-plain-success-border-color: var(--ti-common-color-success-border, #acf2dc);
|
||||
|
||||
// plain主题警告类标签文本色
|
||||
--ti-tag-plain-warning-text-color: var(--ti-common-color-warn);
|
||||
--ti-tag-plain-warning-text-color: var(--ti-common-color-warn, #fa9841);
|
||||
// plain主题警告类标签边框色
|
||||
--ti-tag-plain-warning-border-color: var(--ti-common-color-warn-border);
|
||||
--ti-tag-plain-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6);
|
||||
|
||||
// plain主题危险类标签文本色
|
||||
--ti-tag-plain-danger-text-color: var(--ti-common-color-error);
|
||||
--ti-tag-plain-danger-text-color: var(--ti-common-color-error, #f66f6a);
|
||||
// plain主题危险类标签边框色
|
||||
--ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary);
|
||||
--ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-tall-storage() {
|
||||
--ti-tall-storage-bg-color: var(--ti-common-color-light);
|
||||
--ti-tall-storage-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tall-storage-item-height: var(--ti-common-size-height-normal);
|
||||
--ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background);
|
||||
--ti-tall-storage-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-tall-storage-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-tall-storage-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
--ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,23 +12,23 @@
|
|||
|
||||
.component-css-vars-text-popup() {
|
||||
// 输入框圆角
|
||||
--ti-text-popup-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-text-popup-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 输入框高度
|
||||
--ti-text-popup-height: var(--ti-common-size-7x);
|
||||
--ti-text-popup-height: var(--ti-common-size-7x, 28px);
|
||||
// 输入框字号
|
||||
--ti-text-popup-font-size: var(--ti-common-font-size-base);
|
||||
--ti-text-popup-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 输入框字族
|
||||
--ti-text-popup-font-family: var(--ti-common-font-family);
|
||||
--ti-text-popup-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 输入框边框色
|
||||
--ti-text-popup-border-color: var(--ti-common-color-border);
|
||||
--ti-text-popup-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 输入框聚焦展开时阴影
|
||||
--ti-text-popup-box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3);
|
||||
// 输入框悬浮边框色
|
||||
--ti-text-popup-hover-border-color: var(--ti-common-color-line-hover);
|
||||
--ti-text-popup-hover-border-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
//输入框聚焦边框色
|
||||
--ti-text-popup-focus-border-color: var(--ti-common-color-line-active);
|
||||
--ti-text-popup-focus-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 输入框垂直内边距
|
||||
--ti-text-popup-padding-vertical: calc(var(--ti-common-space-2x) - 2px);
|
||||
--ti-text-popup-padding-vertical: calc(var(--ti-common-space-2x, 8px) - 2px);
|
||||
// 输入框水平内边距
|
||||
--ti-text-popup-padding-horizontal: calc(var(--ti-common-space-2x) + 2px);
|
||||
--ti-text-popup-padding-horizontal: calc(var(--ti-common-space-2x, 8px) + 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,49 +12,49 @@
|
|||
|
||||
.component-css-vars-textarea() {
|
||||
// 文本域文本颜色
|
||||
--ti-textarea-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-textarea-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 文本域背景颜色
|
||||
--ti-textarea-bg-color: var(--ti-common-color-icon-white);
|
||||
--ti-textarea-bg-color: var(--ti-common-color-icon-white, #fff);
|
||||
// 文本域字体大小
|
||||
--ti-textarea-font-size: var(--ti-common-font-size-base);
|
||||
--ti-textarea-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 文本域计数器字体大小
|
||||
--ti-textarea-count-font-size: var(--ti-common-font-size-base);
|
||||
--ti-textarea-count-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 文本域高度
|
||||
--ti-textarea-height: var(--ti-common-size-height-normal);
|
||||
--ti-textarea-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 文本域边框圆角
|
||||
--ti-textarea-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-textarea-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 文本域边框色
|
||||
--ti-textarea-border-color: var(--ti-common-color-border);
|
||||
--ti-textarea-border-color: var(--ti-common-color-border, #adb0b8);
|
||||
// 文本域内层hover时显示的边框颜色
|
||||
--ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover);
|
||||
--ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 文本域内层active时显示的边框颜色
|
||||
--ti-textarea-inner-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-textarea-inner-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 文本域占位符文本颜色
|
||||
--ti-textarea-placeholder-text-color: var(--ti-common-color-placeholder);
|
||||
--ti-textarea-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
|
||||
// 文本域disabled时的文本颜色
|
||||
--ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 文本域disabled时的背景颜色
|
||||
--ti-textarea-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
--ti-textarea-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
|
||||
// 文本域exceed时的文本颜色
|
||||
--ti-textarea-exceed-text-color: var(--ti-common-bg-primary);
|
||||
--ti-textarea-exceed-text-color: var(--ti-common-bg-primary, #c7000b);
|
||||
// 计数器的颜色
|
||||
--ti-textarea-count-color: var(--ti-common-color-text-weaken);
|
||||
--ti-textarea-count-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 文本框垂直方向内边距
|
||||
--ti-textarea-padding-vertical: var(--ti-common-space-2x);
|
||||
--ti-textarea-padding-vertical: var(--ti-common-space-2x, 8px);
|
||||
// 文本框水平方向内边距
|
||||
--ti-textarea-padding-horizontal: var(--ti-common-space-2x);
|
||||
--ti-textarea-padding-horizontal: var(--ti-common-space-2x, 8px);
|
||||
// 文本框右侧内边距
|
||||
--ti-textarea-padding-right: var(--ti-common-space-2x);
|
||||
--ti-textarea-padding-right: var(--ti-common-space-2x, 8px);
|
||||
// 文本框底部内边距
|
||||
--ti-textarea-padding-bottom: var(--ti-common-space-2x);
|
||||
--ti-textarea-padding-bottom: var(--ti-common-space-2x, 8px);
|
||||
// 计数器底部距离
|
||||
--ti-textarea-count-bottom: 5px;
|
||||
// 计数器右侧距离
|
||||
--ti-textarea-count-right: 16px;
|
||||
// 文本域hover时显示的边框颜色
|
||||
--ti-textarea-hover-border-color: var(--ti-common-color-border-hover);
|
||||
--ti-textarea-hover-border-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 文本域active时显示的边框颜色
|
||||
--ti-textarea-active-border-color: var(--ti-common-color-line-active);
|
||||
--ti-textarea-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 计数器宽度
|
||||
--ti-textarea-count-width: auto;
|
||||
// 文本域宽度
|
||||
|
|
@ -62,11 +62,11 @@
|
|||
// 计数器圆角
|
||||
--ti-textarea-count-border-radius: 0;
|
||||
// 计数器文本字数颜色
|
||||
--ti-textarea-count-text-length-color: var(--ti-common-color-text-weaken);
|
||||
--ti-textarea-count-text-length-color: var(--ti-common-color-text-weaken, #8a8e99);
|
||||
// 计数器右侧内边距
|
||||
--ti-textarea-count-padding-right: var(--ti-common-space-0);
|
||||
--ti-textarea-count-padding-right: var(--ti-common-space-0, 0px);
|
||||
// 文本框字体
|
||||
--ti-textarea-font-family: var(--ti-common-font-family);
|
||||
--ti-textarea-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
|
||||
// 计数器行高
|
||||
--ti-textarea-count-line-height: var(--ti-textarea-count-font-size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@
|
|||
--ti-time-panel-btn-bg-color: transparent;
|
||||
--ti-time-panel-btn-padding-vertical: 0;
|
||||
--ti-time-panel-btn-padding-horizontal: 5px;
|
||||
--ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-time-panel-btn-height: 28px;
|
||||
--ti-time-panel-btn-min-width: inherit;
|
||||
--ti-time-panel-btn-font-weight: 800;
|
||||
--ti-time-panel-btn-confirm-hover-bg-color: transparent;
|
||||
--ti-time-panel-footer-height: 36px;
|
||||
--ti-time-panel-btn-text-color: #303133;
|
||||
--ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7);
|
||||
--ti-time-panel-bg-color: var(--ti-common-color-light);
|
||||
--ti-time-panel-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-time-panel-border-color: var(--ti-common-color-line-dividing);
|
||||
--ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7, #526ecc);
|
||||
--ti-time-panel-bg-color: var(--ti-common-color-light, #fff);
|
||||
--ti-time-panel-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-time-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-time-range-picker() {
|
||||
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
|
||||
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1, 14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
|
||||
.component-css-vars-time-select() {
|
||||
// 时间选择选项高度
|
||||
--ti-time-select-item-height: var(--ti-common-size-height-normal);
|
||||
--ti-time-select-item-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 时间选择选项字体色
|
||||
--ti-time-select-item-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-time-select-item-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 时间选择选项字号
|
||||
--ti-time-select-item-font-size: var(--ti-common-font-size-base);
|
||||
--ti-time-select-item-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 时间选择选项行高
|
||||
--ti-time-select-item-line-height: var(--ti-common-size-height-normal);
|
||||
--ti-time-select-item-line-height: var(--ti-common-size-height-normal, 28px);
|
||||
// 时间选择选项左右内边距
|
||||
--ti-time-select-item-padding-horizontal: var(--ti-common-size-2x);
|
||||
--ti-time-select-item-padding-horizontal: var(--ti-common-size-2x, 8px);
|
||||
// 时间选择选项悬浮背景色
|
||||
--ti-time-select-item-hover-bg-color: var(--ti-common-color-selected-background);
|
||||
--ti-time-select-item-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0);
|
||||
// 时间选择选项禁用文本色
|
||||
--ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
|
||||
.component-css-vars-time-spinner() {
|
||||
--ti-time-spinner-arrow-text-color: #909399;
|
||||
--ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7);
|
||||
--ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7, #526ecc);
|
||||
--ti-time-spinner-item-active-text-color: #303133;
|
||||
--ti-time-spinner-item-font-weight: 700;
|
||||
--ti-time-spinner-item-bg-color: transparent;
|
||||
--ti-time-spinner-list-border-color: transparent;
|
||||
--ti-time-spinner-font-size: var(--ti-common-font-size-base);
|
||||
--ti-time-spinner-font-size: var(--ti-common-font-size-base, 12px);
|
||||
--ti-time-spinner-text-color: var(--ti-base-color-info-normal);
|
||||
--ti-time-spinner-bg-color: var(--ti-base-color-light);
|
||||
--ti-time-spinner-selected-bg-color: #f2f2f3;
|
||||
--ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled);
|
||||
--ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,22 +11,22 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-tip() {
|
||||
--ti-tips-normal-bg-color: var(--ti-common-color-bg-dark-deep);
|
||||
--ti-tips-normal-text-color: var(--ti-common-color-light);
|
||||
--ti-tips-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
|
||||
--ti-tips-normal-text-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
--ti-tips-error-bg-color: #ff7875;
|
||||
--ti-tips-error-text-color: var(--ti-common-color-light);
|
||||
--ti-tips-error-text-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
--ti-tips-succeed-bg-color: var(--ti-common-color-success-normal);
|
||||
--ti-tips-succeed-text-color: var(--ti-common-color-light);
|
||||
--ti-tips-succeed-bg-color: var(--ti-common-color-success-normal, #50d4ab);
|
||||
--ti-tips-succeed-text-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
--ti-tips-warning-bg-color: #fa8c16;
|
||||
--ti-tips-warning-text-color: var(--ti-common-color-light);
|
||||
--ti-tips-warning-text-color: var(--ti-common-color-light, #fff);
|
||||
|
||||
--ti-tips-infor-bg-color: var(--ti-common-color-border);
|
||||
--ti-tips-infor-text-color: var(--ti-common-color-info-normal);
|
||||
--ti-tips-infor-bg-color: var(--ti-common-color-border, #adb0b8);
|
||||
--ti-tips-infor-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
|
||||
--ti-tips-bg-color: #ff7875;
|
||||
--ti-tips-border-radius: var(--ti-common-border-radius-normal);
|
||||
--ti-tips-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
--ti-tips-height: 26px;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue