opentiny
/
tiny-vue
2
0
Fork 30
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

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 2024-10-10 19:05:05 -07:00 committed by GitHub
parent 89288770ae
commit fa1ef8bacc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 67 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/ip-address/size.spec.ts
View File

@ -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')

80
packages/theme/src/ip-address/index.less
View File

@ -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);
}
}
}

55
packages/theme/src/ip-address/vars.less
View File

@ -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);
}