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 demo = page.locator('#size')
const ipAddress = demo.locator('.tiny-ip-address__input') 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(1)).toHaveCSS('height', '32px')
await expect(ipAddress.nth(2)).toHaveCSS('height', '28px') await expect(ipAddress.nth(2)).toHaveCSS('height', '28px')
await expect(ipAddress.nth(3)).toHaveCSS('height', '24px') 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: ~'@{css-prefix}ip-address';
.@{ip-address-prefix-cls} { .@{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%; max-width: 100%;
outline: 0; outline: 0;
display: inline-table; display: inline-table;
@ -30,11 +30,11 @@
&__input { &__input {
position: relative; position: relative;
width: 100%; width: 100%;
border: 1px solid var(--ti-ip-address-normal-border-color); border: 1px solid var(--tv-IpAddress-normal-border-color);
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
border-radius: var(--ti-ip-address-border-radius); border-radius: var(--tv-IpAddress-border-radius);
background: var(--ti-ip-address-normal-bg-color); background: var(--tv-IpAddress-normal-bg-color);
font-size: var(--ti-ip-address-font-size); font-size: var(--tv-IpAddress-font-size);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -44,22 +44,22 @@
transition: border 0.3s; transition: border 0.3s;
outline: 0; outline: 0;
box-sizing: border-box; box-sizing: border-box;
.input-readonly(@color: var(--ti-ip-address-border-color-hover)); .input-readonly(@color: var(--tv-IpAddress-border-color-hover));
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color)); //placeholder属性兼容处理 .placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color)); //placeholder属性兼容处理
&:hover { &:hover {
cursor: pointer; cursor: pointer;
border: 1px solid var(--ti-ip-address-border-color-hover); border: 1px solid var(--tv-IpAddress-border-color-hover);
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color)); .placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color));
} }
&:focus, &:focus,
&:active, &:active,
&.active, &.active,
&[active] { &[active] {
border: 1px solid var(--ti-ip-address-border-color-focus); border: 1px solid var(--tv-IpAddress-border-color-focus);
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
} }
&:focus { &:focus {
@ -70,13 +70,13 @@
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
border: 1px solid var(--ti-ip-address-disabled-border-color); border: 1px solid var(--tv-IpAddress-disabled-border-color);
color: var(--ti-ip-address-normal-disabled-text-color); color: var(--tv-IpAddress-normal-disabled-text-color);
background: var(--ti-ip-address-disabled-bg-color); background: var(--tv-IpAddress-disabled-bg-color);
box-shadow: none; box-shadow: none;
.@{css-prefix}svg { .@{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; align-items: center;
> input { > input {
font-size: var(--ti-ip-address-font-size); font-size: var(--tv-IpAddress-font-size);
border: none; border: none;
text-align: center; text-align: center;
outline: none; outline: none;
background: none; background: none;
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
font-family: var(--ti-ip-address-normal-font-family); font-family: var(--tv-IpAddress-normal-font-family);
width: var(--ti-ip-address-input-width); width: var(--tv-IpAddress-input-width);
float: left; float: left;
padding: 0; padding: 0;
@ -102,62 +102,60 @@
&:active, &:active,
&.active, &.active,
&[active] { &[active] {
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
} }
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: var(--ti-ip-address-normal-text-color); color: var(--tv-IpAddress-normal-text-color);
} }
&.disabled, &.disabled,
&[disabled] { &[disabled] {
color: var(--ti-ip-address-normal-disabled-text-color); color: var(--tv-IpAddress-normal-disabled-text-color);
} }
} }
svg { svg {
vertical-align: middle; vertical-align: middle;
fill: var(--ti-ip-address-icon-color); fill: var(--tv-IpAddress-icon-color);
width: var(--ti-ip-address-icon-size); width: var(--tv-IpAddress-icon-size);
height: var(--ti-ip-address-icon-size); height: var(--tv-IpAddress-icon-size);
} }
&:last-child { &:last-child {
margin-right: var(--ti-ip-address-padding-horizontal); margin-right: var(--tv-IpAddress-padding-x);
> svg { > svg {
display: none; display: none;
} }
} }
&:first-child { &:first-child {
margin-left: var(--ti-ip-address-padding-horizontal); margin-left: var(--tv-IpAddress-padding-x);
} }
} }
&__ipv6-delimiter { &__ipv6-delimiter {
width: var(--ti-ip-address-icon-width); width: var(--tv-IpAddress-icon-width);
text-align: center; 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 { &.medium li input {
height: var(--ti--ip--address-medium-height); height: var(--tv-IpAddress-medium-height);
line-height: var(--ti--ip--address-medium-line-height);
} }
&.default li input { &.default li input {
height: var(--ti--ip--address-default-height); height: var(--tv-IpAddress-default-height);
line-height: var(--ti--ip--address-default-line-height);
} }
&.small li input { &.small li input {
height: var(--ti--ip--address-small-height); height: var(--tv-IpAddress-small-height);
line-height: var(--ti--ip--address-small-line-height);
} }
&.mini li input { &.mini li input {
height: var(--ti--ip--address-mini-height); height: var(--tv-IpAddress-mini-height);
line-height: var(--ti--ip--address-mini-line-height); }
}
} }
} }

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

@ -10,50 +10,49 @@
* *
*/ */
.component-css-vars-ip-address() { .inject-IpAddress-vars() {
// IP地址输入框高度 // IP地址输入框高度
--ti-ip-address-normal-height: var(--ti-common-size-8x, 32px); --tv-IpAddress-normal-height: var(--tv-size-height-md);
// IP地址输入框宽度 // IP地址输入框宽度
--ti-ip-address-normal-width: calc(var(--ti-common-size-base, 4px) * 45.5); --tv-IpAddress-normal-width: 182px;
// IP地址输入框默认水平内边距 // IP地址输入框默认水平内边距
--ti-ip-address-padding-horizontal: var(--ti-common-space-3x, 12px); --tv-IpAddress-padding-x: var(--tv-space-lg);
// Ip6单个内容左margin // 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地址输入框默认文本色 // IP地址输入框默认文本色
--ti-ip-address-normal-text-color: var(--ti-common-color-info-normal, #191919); --tv-IpAddress-normal-text-color: var(--tv-color-text);
// IP地址输入框图标文本色 // IP地址输入框图标文本色
--ti-ip-address-icon-color: var(--ti-common-color-info-normal, #191919); --tv-IpAddress-icon-color: var(--tv-color-icon);
// IP地址输入框图标尺寸 // IP地址输入框图标尺寸
--ti-ip-address-icon-size: calc(var(--ti-common-size-base, 4px) * 2.5); --tv-IpAddress-icon-size: 10px;
// IP地址输入框禁用文本色 // 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地址输入框默认边框色 // IP地址输入框默认边框色
--ti-ip-address-normal-border-color: var(--ti-common-color-line-normal, #c2c2c2); --tv-IpAddress-normal-border-color: var(--tv-color-border);
// IP地址输入框默认背景色 // IP地址输入框默认背景色
--ti-ip-address-normal-bg-color: var(--ti-common-color-light, #ffffff); --tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary);
// IP地址输入框圆角 // IP地址输入框圆角
--ti-ip-address-border-radius: var(--ti-common-border-radius-normal, 6px); --tv-IpAddress-border-radius: var(--tv-border-radius-md);
// IP地址输入框字号 // IP地址输入框字号
--ti-ip-address-font-size: var(--ti-common-font-size-1, 14px); --tv-IpAddress-font-size: var(--tv-font-size-md);
// IP地址输入框字族 // IP地址输入框字族
--ti-ip-address-normal-font-family: "Manrop","Manrope-Medium"; --tv-IpAddress-normal-font-family: var(--tv-font-family-1);
// IP地址输入框聚焦边框色 // 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地址输入框悬浮边框色 // 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地址输入框禁用背景色 // 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地址输入框禁用边框色 // 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宽度 // Ip地址输入框item宽度
--ti-ip-address-input-width: var(--ti-common-size-8x, 32px); --tv-IpAddress-input-width: 32px;
// 尺寸 高度及行高 // 大尺寸高度
--ti--ip--address-medium-height: calc(var(--ti-common-size-height-medium)); --tv-IpAddress-medium-height: calc(var(--tv-size-height-lg) - 2px);
--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); --tv-IpAddress-default-height: calc(var(--tv-size-height-md) - 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); --tv-IpAddress-small-height: calc(var(--tv-size-height-sm) - 2px);
--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); --tv-IpAddress-mini-height: calc(var(--tv-size-height-xs) - 2px);
--ti--ip--address-mini-line-height: calc(var(--ti-common-line-height-2, 24px) - 2px);
} }