refactor(theme): [ip-address] refactor ip-address theme vars (#2222)
* refactor(theme): [ip-address] refactor ip-address theme vars * refactor(theme): [ip-address] refactor ip-address theme vars
This commit is contained in:
ajaxzheng
GitHub
parent
89288770ae
commit
fa1ef8bacc
|
|
@ -7,7 +7,7 @@ test('ipAddress 输入框大小', async ({ page }) => {
|
|||
const demo = page.locator('#size')
|
||||
const ipAddress = demo.locator('.tiny-ip-address__input')
|
||||
|
||||
await expect(ipAddress.first()).toHaveCSS('height', '42px')
|
||||
await expect(ipAddress.first()).toHaveCSS('height', '40px')
|
||||
await expect(ipAddress.nth(1)).toHaveCSS('height', '32px')
|
||||
await expect(ipAddress.nth(2)).toHaveCSS('height', '28px')
|
||||
await expect(ipAddress.nth(3)).toHaveCSS('height', '24px')
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
@ip-address-prefix-cls: ~'@{css-prefix}ip-address';
|
||||
|
||||
.@{ip-address-prefix-cls} {
|
||||
.component-css-vars-ip-address();
|
||||
.inject-IpAddress-vars();
|
||||
|
||||
width: var(--ti-ip-address-normal-width);
|
||||
width: var(--tv-IpAddress-normal-width);
|
||||
max-width: 100%;
|
||||
outline: 0;
|
||||
display: inline-table;
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
&__input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid var(--ti-ip-address-normal-border-color);
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
border-radius: var(--ti-ip-address-border-radius);
|
||||
background: var(--ti-ip-address-normal-bg-color);
|
||||
font-size: var(--ti-ip-address-font-size);
|
||||
border: 1px solid var(--tv-IpAddress-normal-border-color);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
border-radius: var(--tv-IpAddress-border-radius);
|
||||
background: var(--tv-IpAddress-normal-bg-color);
|
||||
font-size: var(--tv-IpAddress-font-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -44,22 +44,22 @@
|
|||
transition: border 0.3s;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
.input-readonly(@color: var(--ti-ip-address-border-color-hover));
|
||||
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color)); //placeholder属性兼容处理
|
||||
.input-readonly(@color: var(--tv-IpAddress-border-color-hover));
|
||||
.placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color)); //placeholder属性兼容处理
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--ti-ip-address-border-color-hover);
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color));
|
||||
border: 1px solid var(--tv-IpAddress-border-color-hover);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
.placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color));
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&[active] {
|
||||
border: 1px solid var(--ti-ip-address-border-color-focus);
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
border: 1px solid var(--tv-IpAddress-border-color-focus);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -70,13 +70,13 @@
|
|||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
border: 1px solid var(--ti-ip-address-disabled-border-color);
|
||||
color: var(--ti-ip-address-normal-disabled-text-color);
|
||||
background: var(--ti-ip-address-disabled-bg-color);
|
||||
border: 1px solid var(--tv-IpAddress-disabled-border-color);
|
||||
color: var(--tv-IpAddress-normal-disabled-text-color);
|
||||
background: var(--tv-IpAddress-disabled-bg-color);
|
||||
box-shadow: none;
|
||||
|
||||
.@{css-prefix}svg {
|
||||
fill: var(--ti-ip-address-normal-disabled-text-color);
|
||||
fill: var(--tv-IpAddress-normal-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,14 +87,14 @@
|
|||
align-items: center;
|
||||
|
||||
> input {
|
||||
font-size: var(--ti-ip-address-font-size);
|
||||
font-size: var(--tv-IpAddress-font-size);
|
||||
border: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background: none;
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
font-family: var(--ti-ip-address-normal-font-family);
|
||||
width: var(--ti-ip-address-input-width);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
font-family: var(--tv-IpAddress-normal-font-family);
|
||||
width: var(--tv-IpAddress-input-width);
|
||||
float: left;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -102,62 +102,60 @@
|
|||
&:active,
|
||||
&.active,
|
||||
&[active] {
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--ti-ip-address-normal-text-color);
|
||||
color: var(--tv-IpAddress-normal-text-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
color: var(--ti-ip-address-normal-disabled-text-color);
|
||||
color: var(--tv-IpAddress-normal-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
fill: var(--ti-ip-address-icon-color);
|
||||
width: var(--ti-ip-address-icon-size);
|
||||
height: var(--ti-ip-address-icon-size);
|
||||
fill: var(--tv-IpAddress-icon-color);
|
||||
width: var(--tv-IpAddress-icon-size);
|
||||
height: var(--tv-IpAddress-icon-size);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: var(--ti-ip-address-padding-horizontal);
|
||||
margin-right: var(--tv-IpAddress-padding-x);
|
||||
|
||||
> svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: var(--ti-ip-address-padding-horizontal);
|
||||
margin-left: var(--tv-IpAddress-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
&__ipv6-delimiter {
|
||||
width: var(--ti-ip-address-icon-width);
|
||||
width: var(--tv-IpAddress-icon-width);
|
||||
text-align: center;
|
||||
margin: 0 var(--ti-ip-address-ipv6-delimiter-margin-right);
|
||||
margin: 0 var(--tv-IpAddress-ipv6-delimiter-margin-right);
|
||||
}
|
||||
|
||||
&.medium li input {
|
||||
height: var(--ti--ip--address-medium-height);
|
||||
line-height: var(--ti--ip--address-medium-line-height);
|
||||
height: var(--tv-IpAddress-medium-height);
|
||||
}
|
||||
|
||||
&.default li input {
|
||||
height: var(--ti--ip--address-default-height);
|
||||
line-height: var(--ti--ip--address-default-line-height);
|
||||
height: var(--tv-IpAddress-default-height);
|
||||
}
|
||||
|
||||
&.small li input {
|
||||
height: var(--ti--ip--address-small-height);
|
||||
line-height: var(--ti--ip--address-small-line-height);
|
||||
height: var(--tv-IpAddress-small-height);
|
||||
}
|
||||
|
||||
&.mini li input {
|
||||
height: var(--ti--ip--address-mini-height);
|
||||
line-height: var(--ti--ip--address-mini-line-height);
|
||||
height: var(--tv-IpAddress-mini-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,50 +10,49 @@
|
|||
*
|
||||
*/
|
||||
|
||||
.component-css-vars-ip-address() {
|
||||
.inject-IpAddress-vars() {
|
||||
// IP地址输入框高度
|
||||
--ti-ip-address-normal-height: var(--ti-common-size-8x, 32px);
|
||||
--tv-IpAddress-normal-height: var(--tv-size-height-md);
|
||||
// IP地址输入框宽度
|
||||
--ti-ip-address-normal-width: calc(var(--ti-common-size-base, 4px) * 45.5);
|
||||
--tv-IpAddress-normal-width: 182px;
|
||||
// IP地址输入框默认水平内边距
|
||||
--ti-ip-address-padding-horizontal: var(--ti-common-space-3x, 12px);
|
||||
--tv-IpAddress-padding-x: var(--tv-space-lg);
|
||||
// Ip6单个内容左margin
|
||||
--ti-ip-address-ipv6-delimiter-margin-right: var(--ti-common-space-base, 4px);
|
||||
--tv-IpAddress-ipv6-delimiter-margin-right: var(--tv-space-sm);
|
||||
// IP地址输入框默认文本色
|
||||
--ti-ip-address-normal-text-color: var(--ti-common-color-info-normal, #191919);
|
||||
--tv-IpAddress-normal-text-color: var(--tv-color-text);
|
||||
// IP地址输入框图标文本色
|
||||
--ti-ip-address-icon-color: var(--ti-common-color-info-normal, #191919);
|
||||
--tv-IpAddress-icon-color: var(--tv-color-icon);
|
||||
// IP地址输入框图标尺寸
|
||||
--ti-ip-address-icon-size: calc(var(--ti-common-size-base, 4px) * 2.5);
|
||||
--tv-IpAddress-icon-size: 10px;
|
||||
// IP地址输入框禁用文本色
|
||||
--ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
|
||||
--tv-IpAddress-normal-disabled-text-color: var(--tv-color-text-disabled);
|
||||
// IP地址输入框默认边框色
|
||||
--ti-ip-address-normal-border-color: var(--ti-common-color-line-normal, #c2c2c2);
|
||||
--tv-IpAddress-normal-border-color: var(--tv-color-border);
|
||||
// IP地址输入框默认背景色
|
||||
--ti-ip-address-normal-bg-color: var(--ti-common-color-light, #ffffff);
|
||||
--tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary);
|
||||
// IP地址输入框圆角
|
||||
--ti-ip-address-border-radius: var(--ti-common-border-radius-normal, 6px);
|
||||
--tv-IpAddress-border-radius: var(--tv-border-radius-md);
|
||||
// IP地址输入框字号
|
||||
--ti-ip-address-font-size: var(--ti-common-font-size-1, 14px);
|
||||
--tv-IpAddress-font-size: var(--tv-font-size-md);
|
||||
// IP地址输入框字族
|
||||
--ti-ip-address-normal-font-family: "Manrop","Manrope-Medium";
|
||||
--tv-IpAddress-normal-font-family: var(--tv-font-family-1);
|
||||
// IP地址输入框聚焦边框色
|
||||
--ti-ip-address-border-color-focus: var(--ti-common-color-line-active, #191919);
|
||||
--tv-IpAddress-border-color-focus: var(--tv-color-border-active);
|
||||
// IP地址输入框悬浮边框色
|
||||
--ti-ip-address-border-color-hover: var(--ti-common-color-line-hover, #191919);
|
||||
--tv-IpAddress-border-color-hover: var(--tv-color-border-hover);
|
||||
// IP地址输入框禁用背景色
|
||||
--ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
|
||||
--tv-IpAddress-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
// IP地址输入框禁用边框色
|
||||
--ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
|
||||
--tv-IpAddress-disabled-border-color: var(--tv-color-border-disabled);
|
||||
// Ip地址输入框item宽度
|
||||
--ti-ip-address-input-width: var(--ti-common-size-8x, 32px);
|
||||
// 尺寸 高度及行高
|
||||
--ti--ip--address-medium-height: calc(var(--ti-common-size-height-medium));
|
||||
--ti--ip--address-medium-line-height: calc(var(--ti-common-line-height-5, 36px) + 2px);
|
||||
--ti--ip--address-default-height: calc(var(--ti-common-size-height-normal, 32px) - 2px);
|
||||
--ti--ip--address-default-line-height: var(--ti-common-line-height-4, 30px);
|
||||
--ti--ip--address-small-height: calc(var(--ti-common-size-height-minor, 30px) - 4px);
|
||||
--ti--ip--address-small-line-height: calc(var(--ti-common-line-height-3, 28px) - 2px);
|
||||
--ti--ip--address-mini-height: calc(var(--ti-common-size-height-mini, 24px) - 2px);
|
||||
--ti--ip--address-mini-line-height: calc(var(--ti-common-line-height-2, 24px) - 2px);
|
||||
--tv-IpAddress-input-width: 32px;
|
||||
// 大尺寸高度
|
||||
--tv-IpAddress-medium-height: calc(var(--tv-size-height-lg) - 2px);
|
||||
// 默认尺寸高度
|
||||
--tv-IpAddress-default-height: calc(var(--tv-size-height-md) - 2px);
|
||||
// 小尺寸高度
|
||||
--tv-IpAddress-small-height: calc(var(--tv-size-height-sm) - 2px);
|
||||
// 超小尺寸高度
|
||||
--tv-IpAddress-mini-height: calc(var(--tv-size-height-xs) - 2px);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue