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

refactor(radio): [radio] refactor radio theme (#2181) 

* refactor(radio): [radio] refactor radio theme

* test: fix e2e test

* test: fix e2e test
This commit is contained in:
ajaxzheng 2024-09-25 02:41:08 -07:00 committed by GitHub
parent 6cb0cda202
commit d567a94b7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 124 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/sites/demos/apis/radio.js
View File

@ -5,18 +5,6 @@ export default {
name: 'radio', name: 'radio',
type: 'component', type: 'component',
props: [ props: [
{
name: 'border',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示边框',
'en-US': 'Display Border'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'with-border',
mfDemo: ''
},
{ {
name: 'disabled', name: 'disabled',
type: 'boolean', type: 'boolean',
@ -79,18 +67,6 @@ export default {
mobileDemo: 'base', mobileDemo: 'base',
mfDemo: '' mfDemo: ''
}, },
{
name: 'size',
type: "'medium' | small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': 'radio 的尺寸，仅在 border 为真时有效',
'en-US': 'radio size. This parameter is valid only when border is set to true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'radio-size',
mfDemo: ''
},
{ {
name: 'tabindex', name: 'tabindex',
type: 'String', type: 'String',

22
examples/sites/demos/pc/app/radio/radio-size-composition-api.vue
View File

@ -19,32 +19,12 @@
<tiny-radio-button label="2">选项二</tiny-radio-button> <tiny-radio-button label="2">选项二</tiny-radio-button>
</tiny-radio-group> </tiny-radio-group>
</div> </div>
<div class="title mt-20">带边框尺寸：</div>
<tiny-radio-group v-model="value" size="medium">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
<div class="mt-20">
<tiny-radio-group v-model="value" size="small">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
</div>
<div class="mt-20">
<tiny-radio-group v-model="value" size="mini">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue' import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
const value = ref('1') const value = ref('1')
</script> </script>

3
examples/sites/demos/pc/app/radio/radio-size.spec.ts
View File

@ -7,10 +7,7 @@ test('尺寸设置', async ({ page }) => {
const demo = page.locator('#radio-size') const demo = page.locator('#radio-size')
const radioGroup = demo.locator('.tiny-radio-group') const radioGroup = demo.locator('.tiny-radio-group')
await expect(radioGroup.first()).toHaveCSS('width', '184px')
await expect(radioGroup.first()).toHaveCSS('height', '32px') await expect(radioGroup.first()).toHaveCSS('height', '32px')
await expect(radioGroup.nth(1)).toHaveCSS('width', '184px')
await expect(radioGroup.nth(1)).toHaveCSS('height', '28px') await expect(radioGroup.nth(1)).toHaveCSS('height', '28px')
await expect(radioGroup.nth(2)).toHaveCSS('width', '152px')
await expect(radioGroup.nth(2)).toHaveCSS('height', '24px') await expect(radioGroup.nth(2)).toHaveCSS('height', '24px')
}) })

23
examples/sites/demos/pc/app/radio/radio-size.vue
View File

@ -19,35 +19,14 @@
<tiny-radio-button label="2">选项二</tiny-radio-button> <tiny-radio-button label="2">选项二</tiny-radio-button>
</tiny-radio-group> </tiny-radio-group>
</div> </div>
<div class="title mt-20">带边框尺寸：</div>
<tiny-radio-group v-model="value" size="medium">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
<div class="mt-20">
<tiny-radio-group v-model="value" size="small">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
</div>
<div class="mt-20">
<tiny-radio-group v-model="value" size="mini">
<tiny-radio label="1" border>选项一</tiny-radio>
<tiny-radio label="2" border>选项二</tiny-radio>
</tiny-radio-group>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Radio, RadioButton, RadioGroup } from '@opentiny/vue' import { RadioButton, RadioGroup } from '@opentiny/vue'
export default { export default {
components: { components: {
TinyRadio: Radio,
TinyRadioButton: RadioButton, TinyRadioButton: RadioButton,
TinyRadioGroup: RadioGroup TinyRadioGroup: RadioGroup
}, },

14
examples/sites/demos/pc/app/radio/webdoc/radio.js
View File

@ -42,18 +42,6 @@ export default {
}, },
codeFiles: ['group-options.vue'] codeFiles: ['group-options.vue']
}, },
{
demoId: 'with-border',
name: {
'zh-CN': '带有边框',
'en-US': 'With borders'
},
desc: {
'zh-CN': '<p>可通过设置 <code>border</code> 属性，给单选框增加边框。</p>\n',
'en-US': '<p>You can set the <code>border</code> attribute to add a border to an option button. </p>\n'
},
codeFiles: ['with-border.vue']
},
{ {
demoId: 'dynamic-disable', demoId: 'dynamic-disable',
name: { name: {
@ -116,7 +104,7 @@ export default {
}, },
desc: { desc: {
'zh-CN': 'zh-CN':
'<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>\n', '<p>可对按钮形式的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>',
'en-US': 'en-US':
'<p>You can set the <code>size</code> attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini. </p>\n' '<p>You can set the <code>size</code> attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini. </p>\n'
}, },

14
examples/sites/demos/pc/app/radio/with-border-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<div>
<tiny-radio border v-model="value" label="1">日度</tiny-radio>
<tiny-radio border v-model="value" label="2">月度</tiny-radio>
<tiny-radio border v-model="value" label="3">年度</tiny-radio>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Radio as TinyRadio } from '@opentiny/vue'
const value = ref('1')
</script>

12
examples/sites/demos/pc/app/radio/with-border.spec.ts
View File

@ -1,12 +0,0 @@
import { test, expect } from '@playwright/test'
test('带有边框', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#with-border')
const bordered1 = page.locator('.is-bordered').nth(0)
const bordered2 = page.locator('.is-bordered').nth(1)
const bordered3 = page.locator('.is-bordered').nth(2)
await expect(bordered1).toBeVisible()
await expect(bordered2).toBeVisible()
await expect(bordered3).toBeVisible()
})

22
examples/sites/demos/pc/app/radio/with-border.vue
View File

@ -1,22 +0,0 @@
<template>
<div>
<tiny-radio border v-model="value" label="1">日度</tiny-radio>
<tiny-radio border v-model="value" label="2">月度</tiny-radio>
<tiny-radio border v-model="value" label="3">年度</tiny-radio>
</div>
</template>
<script>
import { Radio } from '@opentiny/vue'
export default {
components: {
TinyRadio: Radio
},
data() {
return {
value: '1'
}
}
}
</script>

82
packages/theme/src/radio-button/index.less
View File

@ -16,41 +16,25 @@
@radio-button-prefix-cls: ~'@{css-prefix}radio-button'; @radio-button-prefix-cls: ~'@{css-prefix}radio-button';
.@{radio-button-prefix-cls} { .@{radio-button-prefix-cls} {
.component-css-vars-radio-button(); .inject-RadioButton-vars();
border-radius: var(--tv-RadioButton-border-radius);
border-radius: var(--ti-radio-button-border-radius);
&:first-child &__inner {
border-radius: var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius);
}
&:first-child &__orig-radio:checked + &__inner {
box-shadow: none;
}
&:last-child &__inner {
border-radius: var(--ti-radio-button-child-right-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-left-border-radius) var(--ti-radio-button-child-right-border-radius);
}
&:first-child:last-child &__inner {
border-radius: var(--ti-radio-button-border-radius);
}
&, &,
&__inner { &__inner {
display: inline-block; display: inline-block;
position: relative; position: relative;
outline: 0; outline: 0;
margin-right: var(--ti-radio-button-margin-right); margin-right: 2px;
} }
&__inner { &__inner {
color: var(--ti-radio-button-text-color); color: var(--tv-RadioButton-text-color);
font-size: var(--ti-radio-button-font-size); font-size: var(--tv-RadioButton-font-size);
background: var(--ti-radio-button-bg-color); background: var(--tv-RadioButton-bg-color);
border: 1px solid var(--ti-radio-button-border-color); border: 1px solid var(--tv-RadioButton-border-color);
padding: var(--ti-radio-button-padding-verticals) 24px; padding: 5px 24px;
font-weight: 500; font-weight: 500;
border-radius: var(--ti-radio-button-border-radius); border-radius: var(--tv-RadioButton-border-radius);
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -66,8 +50,7 @@
} }
&:hover { &:hover {
color: var(--ti-radio-button-hover-text-color); background-color: var(--tv-RadioButton-checked-hover-bg-color);
background-color: var(--ti-radio-button-checked-hover-bg-color);
outline: 0; outline: 0;
} }
@ -89,21 +72,15 @@
&:checked { &:checked {
& + .@{radio-button-prefix-cls}__inner { & + .@{radio-button-prefix-cls}__inner {
color: #fff; color: #fff;
background-color: var(--ti-radio-button-checked-normal-bg-color); background-color: var(--tv-RadioButton-checked-bg-color);
box-shadow: var(--ti-radio-button-checked-normal-box-shadow);
&:hover {
background-color: var(--ti-radio-button-checked-hover-bg-color);
box-shadow: var(--ti-radio-button-checked-hover-box-shadow);
}
} }
} }
&:disabled { &:disabled {
& + .@{radio-button-prefix-cls}__inner { & + .@{radio-button-prefix-cls}__inner {
color: var(--ti-radio-button-disabled-text-color); color: var(--tv-RadioButton-disabled-text-color);
border-color: var(--ti-radio-button-border-color); border-color: var(--tv-RadioButton-border-color);
background-color: var(--ti-radio-button-disabled-bg-color); background-color: var(--tv-RadioButton-disabled-bg-color);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
cursor: not-allowed; cursor: not-allowed;
@ -112,19 +89,17 @@
&:disabled:checked { &:disabled:checked {
& + .@{radio-button-prefix-cls}__inner { & + .@{radio-button-prefix-cls}__inner {
background-color: var(--ti-radio-button-checked-disabled-bg-color); background-color: var(--tv-RadioButton-checked-disabled-bg-color);
color: var(--ti-radio-button-disabled-checked-text-color); color: var(--tv-RadioButton-disabled-checked-text-color);
} }
} }
} }
&--default &__inner { &--default &__inner {
font-size: var(--ti-radio-button-medium-font-size);
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: var(--tv-RadioButton-size-height-md);
padding: 5px 24px; padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round { &.is-round {
padding: 10px 20px; padding: 10px 20px;
@ -132,12 +107,10 @@
} }
&--medium &__inner { &--medium &__inner {
font-size: var(--ti-radio-button-medium-font-size);
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: var(--tv-RadioButton-size-height-md);
padding: 5px 24px; padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round { &.is-round {
padding: 10px 20px; padding: 10px 20px;
@ -145,12 +118,11 @@
} }
&--small &__inner { &--small &__inner {
font-size: var(--ti-radio-button-font-size); font-size: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 28px; height: var(--tv-RadioButton-size-height-sm);
padding: 5px 24px; padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round { &.is-round {
padding: 9px 15px; padding: 9px 15px;
@ -158,24 +130,20 @@
} }
&--mini &__inner { &--mini &__inner {
font-size: var(--ti-radio-button-font-size); font-size: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 24px; height: var(--tv-RadioButton-size-height-xs);
padding: 3px 16px; padding: 3px 16px;
border-radius: var(--ti-radio-button-margin-right); border-radius: 4px;
&.is-round { &.is-round {
padding: 7px 15px; padding: 7px 15px;
} }
} }
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
}
&.is-active.is-disabled { &.is-active.is-disabled {
color: var(--ti-radio-button-active-disabled-color); color: var(--tv-RadioButton-disabled-checked-text-color);
background-color: var(--ti-radio-button-active-disabled-bg-color);; background-color: var(--tv-RadioButton-checked-disabled-bg-color);
} }
} }

49
packages/theme/src/radio-button/vars.less
View File

@ -10,26 +10,31 @@
* *
*/ */
.component-css-vars-radio-button() { .inject-RadioButton-vars() {
--ti-radio-button-text-color: var(--ti-common-color-text-secondary); // 单选框按钮文本色
--ti-radio-button-hover-text-color: var(--ti-common-color-bg-emphasize); --tv-RadioButton-text-color: var(--tv-color-text);
--ti-radio-button-border-radius: var(--ti-common-space-6); // 单选框按钮圆角
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px); --tv-RadioButton-border-radius: var(--tv-border-radius-md);
--ti-radio-button-bg-color: var(--ti-common-color-bg-normal); // 单选框按钮字体大小
--ti-radio-button-checked-normal-bg-color: #1476FF; --tv-RadioButton-font-size: var(--tv-font-size-md);
--ti-radio-button-checked-normal-box-shadow: #1476FF; // 单选框按钮背景色
--ti-radio-button-checked-hover-bg-color: var(--ti-common-color-prompt-bg); --tv-RadioButton-bg-color: var(--tv-color-bg);
--ti-radio-button-checked-hover-box-shadow: #1293ff; // 单选框按钮选中背景色
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); --tv-RadioButton-checked-bg-color: var(--tv-color-bg-active-control);
--ti-radio-button-disabled-checked-text-color: var(--ti-common-color-text-weaken); // 单选框按钮悬浮背景色
--ti-radio-button-disabled-bg-color: var(--ti-common-color-bg-disabled); --tv-RadioButton-checked-hover-bg-color: var(--tv-color-bg-hover-1);
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px); // 单选框按钮禁用文本色
--ti-radio-button-margin-right: var(--ti-common-space-2); --tv-RadioButton-disabled-text-color: var(--tv-color-text-disabled);
--ti-radio-button-border-left: 0; // 单选框按钮选中状态禁用文本色
--ti-radio-button-child-left-border-radius: var(--ti-common-space-6); --tv-RadioButton-disabled-checked-text-color: var(--tv-color-text-weaken);
--ti-radio-button-child-right-border-radius: var(--ti-common-space-6); // 单选框按钮禁用背景色
--ti-radio-button-padding-verticals: 5px; --tv-RadioButton-disabled-bg-color: var(--tv-color-bg-disabled);
--ti-radio-button-active-disabled-color: var(--ti-common-color-text-weaken); // 单选框按钮选中状态禁用背景色
--ti-radio-button-active-disabled-bg-color: var(--ti-common-color-bg-dark-disabled); --tv-RadioButton-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
--ti-radio-button-checked-disabled-bg-color: var(--ti-common-color-bg-dark-disabled); // 单选框按钮中等尺寸
--tv-RadioButton-size-height-md: var(--tv-size-height-md);
// 单选框按钮小型尺寸
--tv-RadioButton-size-height-sm: var(--tv-size-height-sm);
// 单选框按钮超小尺寸
--tv-RadioButton-size-height-xs: var(--tv-size-height-xs);
} }

24
packages/theme/src/radio-group/index.less
View File

@ -19,7 +19,7 @@
@radio-prefix-cls: ~'@{css-prefix}radio'; @radio-prefix-cls: ~'@{css-prefix}radio';
.@{radio-group-prefix-cls} { .@{radio-group-prefix-cls} {
.component-css-vars-radio-group(); .inject-RadioGroup-vars();
display: inline-flex; display: inline-flex;
@ -31,31 +31,13 @@
margin-right: 0; margin-right: 0;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: var(--ti-radio-group-margin-bottom); margin-bottom: var(--tv-RadioGroup-margin-bottom);
} }
} }
.@{radio-button-prefix-cls} { .@{radio-button-prefix-cls} {
display: block; display: block;
margin-bottom: var(--ti-radio-button-margin-bottom); margin-bottom: var(--tv-RadioGroup-button-margin-bottom);
border-radius: var(--ti-radio-button-border-radius);
&:first-child .@{radio-button-prefix-cls}__inner {
border-radius: var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius);
}
&:last-child .@{radio-button-prefix-cls}__inner {
border-radius: var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-bottom-border-radius) var(--ti-radio-button-top-border-radius) var(--ti-radio-button-top-border-radius);
}
&.is-active .@{radio-button-prefix-cls}__inner {
box-shadow: none;
border-color: var(--ti-radio-button-checked-normal-border-color);
}
&.is-active.is-disabled .@{radio-button-prefix-cls}__inner {
border-color: var(--ti-radio-input-checked-disabled-border-color);
}
} }
} }
} }

12
packages/theme/src/radio-group/vars.less
View File

@ -9,10 +9,8 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
* *
*/ */
.component-css-vars-radio-group() {
--ti-radio-group-margin-bottom: 16px; .inject-RadioGroup-vars() {
--ti-radio-button-border-radius: 6px; --tv-RadioGroup-margin-bottom: 16px;
--ti-radio-button-margin-bottom: 2px; --tv-RadioGroup-button-margin-bottom: 2px;
--ti-radio-button-top-border-radius: 6px; }
--ti-radio-button-bottom-border-radius: 6px;
}

145
packages/theme/src/radio/index.less
View File

@ -17,11 +17,10 @@
@radio-prefix-cls: ~'@{css-prefix}radio'; @radio-prefix-cls: ~'@{css-prefix}radio';
.@{radio-prefix-cls} { .@{radio-prefix-cls} {
.component-css-vars-radio(); .inject-radio-vars();
color: var(--ti-radio-text-color); color: var(--tv-Radio-text-color);
font-weight: 500; margin-right: var(--tv-Radio-margin-right);
margin-right: var(--ti-radio-margin-right);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -33,66 +32,50 @@
} }
&.is-bordered { &.is-bordered {
padding: var(--ti-radio-mini-bordered-padding-vertical) var(--ti-radio-mini-bordered-padding-horizontal); padding: 0 8px;
border-radius: var(--ti-radio-bordered-border-radius); border-radius: var(--tv-Radio-bordered-border-radius);
border: 1px solid var(--ti-radio-bordered-border-color); border: 1px solid var(--tv-Radio-bordered-border-color);
box-sizing: border-box; box-sizing: border-box;
height: var(--ti-radio-bordered-height); height: 32px;
& + & { & + & {
margin-left: var(--ti-radio-mini-bordered-margin-left); margin-left: 8px;
} }
&.is-checked { &.is-checked {
border-color: var(--ti-radio-bordered-checked-border-color); border-color: var(--tv-Radio-bordered-checked-border-color);
} }
&.is-disabled { &.is-disabled {
cursor: not-allowed; cursor: not-allowed;
border-color: var(--ti-radio-bordered-border-color); border-color: var(--tv-Radio-bordered-border-color);
} }
} }
&, &,
&__input { &__input {
white-space: nowrap; white-space: nowrap;
line-height: 1;
outline: 0; outline: 0;
} }
&__input { &__input {
cursor: pointer; cursor: pointer;
line-height: 1;
display: inline-flex; display: inline-flex;
display: inline-block\9;
// 兼容ie10-ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: inline-block;
}
// 兼容edge
@supports (-ms-ime-align: auto) {
display: inline-block;
}
&.is-checked { &.is-checked {
.@{radio-prefix-cls}__inner { .@{radio-prefix-cls}__inner {
border-color: var(--ti-radio-bordered-checked-border-color); border-color: var(--tv-Radio-bordered-checked-border-color);
background: var(--ti-radio-bordered-checked-background-color);
&::after { &:after {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
background-color: var(--ti-radio-inner-checked-bg-color); background-color: var(--tv-Radio-inner-checked-bg-color);
} }
} }
&:hover .@{radio-prefix-cls}__inner::after {
background-color: var(--ti-radio-inner-checked-hover-bg-color);
}
&:not(.is-disabled) { &:not(.is-disabled) {
.@{radio-prefix-cls}__inner { .@{radio-prefix-cls}__inner {
&:hover { &:hover {
border-color: var(--ti-radio-bordered-checked-hover-border-color); border-color: var(--tv-Radio-bordered-checked-hover-border-color);
} }
} }
} }
@ -100,12 +83,12 @@
&.is-disabled { &.is-disabled {
.@{radio-prefix-cls}__inner { .@{radio-prefix-cls}__inner {
border-color: var(--ti-radio-input-disabled-border-color); border-color: var(--tv-Radio-input-disabled-border-color);
&, &,
&::after { &:after {
cursor: not-allowed; cursor: not-allowed;
background-color: var(--ti-radio-input-disabled-bg-color); background-color: var(--tv-Radio-input-disabled-bg-color);
} }
& + .@{radio-prefix-cls}__label { & + .@{radio-prefix-cls}__label {
@ -114,27 +97,27 @@
} }
&.is-checked .@{radio-prefix-cls}__inner { &.is-checked .@{radio-prefix-cls}__inner {
background-color: var(--ti-radio-input-checked-disabled-bg-color); background-color: var(--tv-Radio-input-checked-disabled-bg-color);
border-color: var(--ti-radio-input-checked-disabled-border-color); border-color: var(--tv-Radio-input-checked-disabled-border-color);
&::after { &:after {
background-color: var(--ti-radio-inner-checked-disabled-bg-color); background-color: var(--tv-Radio-inner-checked-disabled-bg-color);
} }
} }
& + span.@{radio-prefix-cls}__label { & + span.@{radio-prefix-cls}__label {
color: var(--ti-radio-input-disabled-text-color); color: var(--tv-Radio-input-disabled-text-color);
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
&__inner { &__inner {
border: 1px solid var(--ti-radio-bordered-border-color); border: 1px solid var(--tv-Radio-bordered-border-color);
border-radius: 100%; border-radius: 100%;
width: var(--ti-radio-inner-width); width: var(--tv-Radio-inner-width);
height: var(--ti-radio-inner-height); height: var(--tv-Radio-inner-height);
background-color: var(--ti-radio-inner-bg-color); background-color: var(--tv-Radio-inner-bg-color);
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -142,18 +125,18 @@
outline: none; outline: none;
&:hover { &:hover {
border-color: var(--ti-radio-bordered-hover-border-color); border-color: var(--tv-Radio-bordered-hover-border-color);
} }
&:active { &:active {
border-color: var(--ti-radio-bordered-active-border-color); border-color: var(--tv-Radio-bordered-active-border-color);
} }
&::after { &:after {
width: var(--ti-radio-inner-size); width: var(--tv-Radio-inner-size);
height: var(--ti-radio-inner-size); height: var(--tv-Radio-inner-size);
border-radius: var(--ti-radio-inner-border-radius); border-radius: var(--tv-Radio-inner-border-radius);
background-color: var(--ti-radio-inner-bg-color); background-color: var(--tv-Radio-inner-bg-color);
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -174,65 +157,11 @@
} }
&__label { &__label {
font-size: var(--ti-radio-font-size); font-size: var(--tv-Radio-font-size);
padding-left: 8px; padding-left: 8px;
vertical-align: middle; vertical-align: middle;
} }
&--medium {
&.is-bordered {
border-radius: var(--ti-radio-bordered-border-radius);
height: var(--ti-radio-medium-height);
.@{radio-prefix-cls}__inner {
height: var(--ti-radio-medium-inner-height);
width: var(--ti-radio-medium-inner-width);
}
.@{radio-prefix-cls}__label {
font-size: var(--ti-radio-font-size);
}
}
}
&--small {
&.is-bordered {
border-radius: var(--ti-radio-bordered-border-radius);
height: var(--ti-radio-small-height);
.@{radio-prefix-cls}__inner {
height: var(--ti-radio-small-inner-height);
width: var(--ti-radio-small-inner-width);
}
.@{radio-prefix-cls}__label {
font-size: var(--ti-radio-font-size);
}
}
}
&--mini {
&.is-bordered {
padding: var(--ti-radio-mini-bordered-padding-vertical) var(--ti-radio-mini-bordered-padding-horizontal);
border-radius: var(--ti-radio-bordered-border-radius, 2px);
height: var(--ti-radio-mini-height);
line-height: calc(var(--ti-radio-mini-height) - 2px);
.@{radio-prefix-cls}__inner {
height: var(--ti-radio-mini-inner-height);
width: var(--ti-radio-mini-inner-width);
&::after {
width: 4px;
height: 4px;
}
}
.@{radio-prefix-cls}__label {
font-size: var(--ti-radio-font-size);
}
}
}
&.is-checked.is-display-only { &.is-checked.is-display-only {
visibility: visible; visibility: visible;
line-height: 1; line-height: 1;
@ -241,15 +170,17 @@
padding: 0; padding: 0;
display: none; display: none;
} }
.tiny-radio__label { .tiny-radio__label {
padding-left: 0; padding-left: 0;
} }
} }
&.is-display-only { &.is-display-only {
visibility: hidden; visibility: hidden;
} }
&:focus:not(.is-focus):not(:active):not(.is-disabled) &__inner { &:focus:not(.is-focus):not(:active):not(.is-disabled) &__inner {
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color); box-shadow: 0 0 2px 2px var(--tv-Radio-bordered-hover-border-color);
} }
} }

80
packages/theme/src/radio/vars.less
View File

@ -10,83 +10,49 @@
* *
*/ */
.component-css-vars-radio() { .inject-radio-vars() {
// 单选框默认文本色 // 单选框默认文本色
--ti-radio-text-color: var(--ti-common-color-text-primary, #252b3a); --tv-Radio-text-color: var(--tv-color-text);
// 单选框字号 // 单选框字号
--ti-radio-font-size: var(--ti-common-font-size-0); --tv-Radio-font-size: var(--tv-font-size-sm);
// 带边框类单选框默认高度
--ti-radio-bordered-height: var(--ti-common-size-height-normal);
// 带边框类单选框圆角 // 带边框类单选框圆角
--ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal, 2px); --tv-Radio-bordered-border-radius: var(--tv-border-radius-md);
// 单选框默认边框色 // 单选框默认边框色
--ti-radio-bordered-border-color: var(--ti-common-color-line-normal); --tv-Radio-bordered-border-color: var(--tv-color-border);
// 单选框默认禁用边框色 // 单选框默认禁用边框色
--ti-radio-input-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); --tv-Radio-input-disabled-border-color: var(--tv-color-border-disabled);
// 单选框的选中状态时的边框色 // 单选框的选中状态时的边框色
--ti-radio-bordered-checked-border-color: #1476FF; --tv-Radio-bordered-checked-border-color: var(--tv-color-border-active-control);
// 单选框的选中状态时的背景色
--ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal, #fff);
// 单选框的带有边框时悬浮时的边框色 // 单选框的带有边框时悬浮时的边框色
--ti-radio-bordered-hover-border-color: var(--ti-common-color-info-hover); --tv-Radio-bordered-hover-border-color: var(--tv-color-border-hover);
// 单选框的带有边框时选中时的边框色 // 单选框的带有边框时选中时的边框色
--ti-radio-bordered-checked-hover-border-color: #1476FF; --tv-Radio-bordered-checked-hover-border-color: var(--tv-color-border-active-control);
// 单选框的带有边框时激活时的边框色 // 单选框的带有边框时激活时的边框色
--ti-radio-bordered-active-border-color: var(--ti-common-color-line-active, #5e7ce0); --tv-Radio-bordered-active-border-color: var(--tv-color-border-active-control);
// 单选框的禁用状态时的背景色 // 单选框的禁用状态时的背景色
--ti-radio-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); --tv-Radio-input-disabled-bg-color: var(--tv-color-bg-disabled);
// 单选框为选中且禁用状态时的背景色 // 单选框为选中且禁用状态时的背景色
--ti-radio-input-checked-disabled-bg-color: #fff; --tv-Radio-input-checked-disabled-bg-color: var(--tv-color-bg-secondary);
// 单选框为选中且禁用状态时的边框色 // 单选框为选中且禁用状态时的边框色
--ti-radio-input-checked-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); --tv-Radio-input-checked-disabled-border-color: var(--tv-color-border-disabled);
// 单选框为输入框样式时禁用状态时的文本色 // 单选框为输入框样式时禁用状态时的文本色
--ti-radio-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); --tv-Radio-input-disabled-text-color: var(--tv-color-text-disabled);
// 单选框单选按钮的背景色 // 单选框单选按钮的背景色
--ti-radio-inner-bg-color: var(--ti-common-color-bg-white-normal, #fff); --tv-Radio-inner-bg-color: var(--tv-color-bg-secondary);
// 单选框单选按钮选中时的背景色 // 单选框单选按钮选中时的背景色
--ti-radio-inner-checked-bg-color: #1476FF; --tv-Radio-inner-checked-bg-color: var(--tv-color-bg-active-control);
// 单选框单选按钮的尺寸 // 单选框单选按钮的尺寸
--ti-radio-inner-size: var(--ti-common-size-2x, 8px); --tv-Radio-inner-size: 8px;
// 单选框单选按钮为选中且禁用状态时的背景色 // 单选框单选按钮为选中且禁用状态时的背景色
--ti-radio-inner-checked-disabled-bg-color: var(--ti-common-color-bg-dark-disabled); --tv-Radio-inner-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
// 单选按钮为medium尺寸时的高度
--ti-radio-medium-height: var(--ti-common-size-height-small, 32px);
// 单选框单选按钮为medium尺寸时的高度
--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, 12px) + 2px);
// 单选按钮为small尺寸时的高度
--ti-radio-small-height: var(--ti-common-size-8x, 32px);
// 单选框单选按钮为small尺寸时的高度
--ti-radio-small-inner-height: var(--ti-common-size-3x, 12px);
// 单选框单选按钮为small尺寸时的宽度
--ti-radio-small-inner-width: var(--ti-common-size-3x, 12px);
// 单选按钮为mini尺寸时的高度
--ti-radio-mini-height: var(--ti-common-size-7x, 28px);
// 单选框单选按钮为mini尺寸时的高度
--ti-radio-mini-inner-height: var(--ti-common-size-3x, 12px);
// 单选框单选按钮为mini尺寸时的宽度
--ti-radio-mini-inner-width: var(--ti-common-size-3x, 12px);
// 单选框单选按钮的边框圆角半径 // 单选框单选按钮的边框圆角半径
--ti-radio-inner-border-radius: 100%; --tv-Radio-inner-border-radius: var(--tv-border-radius-round);
// 单选框尺寸为mini时的带有边框时垂直方向的内边距
--ti-radio-mini-bordered-padding-vertical: var(--ti-common-space-0, 0px);
// 单选框尺寸为mini时的带有边框时水平方向的内边距
--ti-radio-mini-bordered-padding-horizontal: var(--ti-common-space-2x, 8px);
// 单选框的带有边框时垂直方向的内边距
--ti-radio-bordered-padding-vertical: var(--ti-common-space-base, 4px);
// 单选框的带有边框时水平方向的内边距
--ti-radio-bordered-padding-horizontal: var(--ti-common-space-3x, 12px);
// 单选框的带有边框时左侧的外边距
--ti-radio-mini-bordered-margin-left: var(--ti-common-space-10, 10px);
// 单选框单选按钮宽度 // 单选框单选按钮宽度
--ti-radio-inner-width: var(--ti-common-size-4x, 16px); --tv-Radio-inner-width: 16px;
// 单选框单选按钮宽度 // 单选框单选按钮宽度
--ti-radio-inner-height: var(--ti-common-size-4x, 16px); --tv-Radio-inner-height: 16px;
// 单选组每个选项之间的间距 // 单选组每个选项之间的间距
--ti-radio-margin-right: var(--ti-common-space-6x); --tv-Radio-margin-right: 24px;
// 单选框单选按钮选中后悬浮时的背景色
--ti-radio-inner-checked-hover-bg-color: #1476FF;
// 单选按钮底部外边距 // 单选按钮底部外边距
--ti-radio-button-margin-bottom: var(--ti-common-space-4x); --tv-Radio-button-margin-bottom: var(--tv-space-xl);
} }