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',
type: 'component',
props: [
{
name: 'border',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示边框',
'en-US': 'Display Border'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'with-border',
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
@ -79,18 +67,6 @@ export default {
mobileDemo: 'base',
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',
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-group>
</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>
</template>
<script setup>
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')
</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 radioGroup = demo.locator('.tiny-radio-group')
await expect(radioGroup.first()).toHaveCSS('width', '184px')
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(2)).toHaveCSS('width', '152px')
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-group>
</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>
</template>
<script>
import { Radio, RadioButton, RadioGroup } from '@opentiny/vue'
import { RadioButton, RadioGroup } from '@opentiny/vue'
export default {
components: {
TinyRadio: Radio,
TinyRadioButton: RadioButton,
TinyRadioGroup: RadioGroup
},

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

@ -42,18 +42,6 @@ export default {
},
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',
name: {
@ -116,7 +104,7 @@ export default {
},
desc: {
'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':
'<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} {
.component-css-vars-radio-button();
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);
}
.inject-RadioButton-vars();
border-radius: var(--tv-RadioButton-border-radius);
&,
&__inner {
display: inline-block;
position: relative;
outline: 0;
margin-right: var(--ti-radio-button-margin-right);
margin-right: 2px;
}
&__inner {
color: var(--ti-radio-button-text-color);
font-size: var(--ti-radio-button-font-size);
background: var(--ti-radio-button-bg-color);
border: 1px solid var(--ti-radio-button-border-color);
padding: var(--ti-radio-button-padding-verticals) 24px;
color: var(--tv-RadioButton-text-color);
font-size: var(--tv-RadioButton-font-size);
background: var(--tv-RadioButton-bg-color);
border: 1px solid var(--tv-RadioButton-border-color);
padding: 5px 24px;
font-weight: 500;
border-radius: var(--ti-radio-button-border-radius);
border-radius: var(--tv-RadioButton-border-radius);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
@ -66,8 +50,7 @@
}
&:hover {
color: var(--ti-radio-button-hover-text-color);
background-color: var(--ti-radio-button-checked-hover-bg-color);
background-color: var(--tv-RadioButton-checked-hover-bg-color);
outline: 0;
}
@ -89,21 +72,15 @@
&:checked {
& + .@{radio-button-prefix-cls}__inner {
color: #fff;
background-color: var(--ti-radio-button-checked-normal-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);
}
background-color: var(--tv-RadioButton-checked-bg-color);
}
}
&:disabled {
& + .@{radio-button-prefix-cls}__inner {
color: var(--ti-radio-button-disabled-text-color);
border-color: var(--ti-radio-button-border-color);
background-color: var(--ti-radio-button-disabled-bg-color);
color: var(--tv-RadioButton-disabled-text-color);
border-color: var(--tv-RadioButton-border-color);
background-color: var(--tv-RadioButton-disabled-bg-color);
background-image: none;
box-shadow: none;
cursor: not-allowed;
@ -112,19 +89,17 @@
&:disabled:checked {
& + .@{radio-button-prefix-cls}__inner {
background-color: var(--ti-radio-button-checked-disabled-bg-color);
color: var(--ti-radio-button-disabled-checked-text-color);
background-color: var(--tv-RadioButton-checked-disabled-bg-color);
color: var(--tv-RadioButton-disabled-checked-text-color);
}
}
}
&--default &__inner {
font-size: var(--ti-radio-button-medium-font-size);
display: flex;
align-items: center;
height: 32px;
height: var(--tv-RadioButton-size-height-md);
padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 10px 20px;
@ -132,12 +107,10 @@
}
&--medium &__inner {
font-size: var(--ti-radio-button-medium-font-size);
display: flex;
align-items: center;
height: 32px;
height: var(--tv-RadioButton-size-height-md);
padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 10px 20px;
@ -145,12 +118,11 @@
}
&--small &__inner {
font-size: var(--ti-radio-button-font-size);
font-size: 12px;
display: flex;
align-items: center;
height: 28px;
height: var(--tv-RadioButton-size-height-sm);
padding: 5px 24px;
border-radius: var(--ti-radio-button-margin-right);
&.is-round {
padding: 9px 15px;
@ -158,24 +130,20 @@
}
&--mini &__inner {
font-size: var(--ti-radio-button-font-size);
font-size: 12px;
display: flex;
align-items: center;
height: 24px;
height: var(--tv-RadioButton-size-height-xs);
padding: 3px 16px;
border-radius: var(--ti-radio-button-margin-right);
border-radius: 4px;
&.is-round {
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 {
color: var(--ti-radio-button-active-disabled-color);
background-color: var(--ti-radio-button-active-disabled-bg-color);;
color: var(--tv-RadioButton-disabled-checked-text-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() {
--ti-radio-button-text-color: var(--ti-common-color-text-secondary);
--ti-radio-button-hover-text-color: var(--ti-common-color-bg-emphasize);
--ti-radio-button-border-radius: var(--ti-common-space-6);
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
--ti-radio-button-bg-color: var(--ti-common-color-bg-normal);
--ti-radio-button-checked-normal-bg-color: #1476FF;
--ti-radio-button-checked-normal-box-shadow: #1476FF;
--ti-radio-button-checked-hover-bg-color: var(--ti-common-color-prompt-bg);
--ti-radio-button-checked-hover-box-shadow: #1293ff;
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
--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);
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
--ti-radio-button-margin-right: var(--ti-common-space-2);
--ti-radio-button-border-left: 0;
--ti-radio-button-child-left-border-radius: var(--ti-common-space-6);
--ti-radio-button-child-right-border-radius: var(--ti-common-space-6);
--ti-radio-button-padding-verticals: 5px;
--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);
--ti-radio-button-checked-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
.inject-RadioButton-vars() {
// 单选框按钮文本色
--tv-RadioButton-text-color: var(--tv-color-text);
// 单选框按钮圆角
--tv-RadioButton-border-radius: var(--tv-border-radius-md);
// 单选框按钮字体大小
--tv-RadioButton-font-size: var(--tv-font-size-md);
// 单选框按钮背景色
--tv-RadioButton-bg-color: var(--tv-color-bg);
// 单选框按钮选中背景色
--tv-RadioButton-checked-bg-color: var(--tv-color-bg-active-control);
// 单选框按钮悬浮背景色
--tv-RadioButton-checked-hover-bg-color: var(--tv-color-bg-hover-1);
// 单选框按钮禁用文本色
--tv-RadioButton-disabled-text-color: var(--tv-color-text-disabled);
// 单选框按钮选中状态禁用文本色
--tv-RadioButton-disabled-checked-text-color: var(--tv-color-text-weaken);
// 单选框按钮禁用背景色
--tv-RadioButton-disabled-bg-color: var(--tv-color-bg-disabled);
// 单选框按钮选中状态禁用背景色
--tv-RadioButton-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
// 单选框按钮中等尺寸
--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-group-prefix-cls} {
.component-css-vars-radio-group();
.inject-RadioGroup-vars();
display: inline-flex;
@ -31,31 +31,13 @@
margin-right: 0;
&:not(:last-child) {
margin-bottom: var(--ti-radio-group-margin-bottom);
margin-bottom: var(--tv-RadioGroup-margin-bottom);
}
}
.@{radio-button-prefix-cls} {
display: block;
margin-bottom: var(--ti-radio-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);
}
margin-bottom: var(--tv-RadioGroup-button-margin-bottom);
}
}
}

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

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

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

@ -17,11 +17,10 @@
@radio-prefix-cls: ~'@{css-prefix}radio';
.@{radio-prefix-cls} {
.component-css-vars-radio();
.inject-radio-vars();
color: var(--ti-radio-text-color);
font-weight: 500;
margin-right: var(--ti-radio-margin-right);
color: var(--tv-Radio-text-color);
margin-right: var(--tv-Radio-margin-right);
display: inline-flex;
align-items: center;
position: relative;
@ -33,66 +32,50 @@
}
&.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);
border: 1px solid var(--ti-radio-bordered-border-color);
padding: 0 8px;
border-radius: var(--tv-Radio-bordered-border-radius);
border: 1px solid var(--tv-Radio-bordered-border-color);
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 {
border-color: var(--ti-radio-bordered-checked-border-color);
border-color: var(--tv-Radio-bordered-checked-border-color);
}
&.is-disabled {
cursor: not-allowed;
border-color: var(--ti-radio-bordered-border-color);
border-color: var(--tv-Radio-bordered-border-color);
}
}
&,
&__input {
white-space: nowrap;
line-height: 1;
outline: 0;
}
&__input {
cursor: pointer;
line-height: 1;
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 {
.@{radio-prefix-cls}__inner {
border-color: var(--ti-radio-bordered-checked-border-color);
background: var(--ti-radio-bordered-checked-background-color);
border-color: var(--tv-Radio-bordered-checked-border-color);
&::after {
&:after {
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) {
.@{radio-prefix-cls}__inner {
&: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 {
.@{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;
background-color: var(--ti-radio-input-disabled-bg-color);
background-color: var(--tv-Radio-input-disabled-bg-color);
}
& + .@{radio-prefix-cls}__label {
@ -114,27 +97,27 @@
}
&.is-checked .@{radio-prefix-cls}__inner {
background-color: var(--ti-radio-input-checked-disabled-bg-color);
border-color: var(--ti-radio-input-checked-disabled-border-color);
background-color: var(--tv-Radio-input-checked-disabled-bg-color);
border-color: var(--tv-Radio-input-checked-disabled-border-color);
&::after {
background-color: var(--ti-radio-inner-checked-disabled-bg-color);
&:after {
background-color: var(--tv-Radio-inner-checked-disabled-bg-color);
}
}
& + span.@{radio-prefix-cls}__label {
color: var(--ti-radio-input-disabled-text-color);
color: var(--tv-Radio-input-disabled-text-color);
cursor: not-allowed;
}
}
}
&__inner {
border: 1px solid var(--ti-radio-bordered-border-color);
border: 1px solid var(--tv-Radio-bordered-border-color);
border-radius: 100%;
width: var(--ti-radio-inner-width);
height: var(--ti-radio-inner-height);
background-color: var(--ti-radio-inner-bg-color);
width: var(--tv-Radio-inner-width);
height: var(--tv-Radio-inner-height);
background-color: var(--tv-Radio-inner-bg-color);
position: relative;
display: inline-block;
cursor: pointer;
@ -142,18 +125,18 @@
outline: none;
&:hover {
border-color: var(--ti-radio-bordered-hover-border-color);
border-color: var(--tv-Radio-bordered-hover-border-color);
}
&:active {
border-color: var(--ti-radio-bordered-active-border-color);
border-color: var(--tv-Radio-bordered-active-border-color);
}
&::after {
width: var(--ti-radio-inner-size);
height: var(--ti-radio-inner-size);
border-radius: var(--ti-radio-inner-border-radius);
background-color: var(--ti-radio-inner-bg-color);
&:after {
width: var(--tv-Radio-inner-size);
height: var(--tv-Radio-inner-size);
border-radius: var(--tv-Radio-inner-border-radius);
background-color: var(--tv-Radio-inner-bg-color);
content: '';
position: absolute;
left: 50%;
@ -174,65 +157,11 @@
}
&__label {
font-size: var(--ti-radio-font-size);
font-size: var(--tv-Radio-font-size);
padding-left: 8px;
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 {
visibility: visible;
line-height: 1;
@ -241,15 +170,17 @@
padding: 0;
display: none;
}
.tiny-radio__label {
padding-left: 0;
}
}
&.is-display-only {
visibility: hidden;
}
&: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);
// 带边框类单选框默认高度
--ti-radio-bordered-height: var(--ti-common-size-height-normal);
--tv-Radio-font-size: var(--tv-font-size-sm);
// 带边框类单选框圆角
--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;
// 单选框的选中状态时的背景色
--ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal, #fff);
--tv-Radio-bordered-checked-border-color: var(--tv-color-border-active-control);
// 单选框的带有边框时悬浮时的边框色
--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);
// 单选按钮为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);
--tv-Radio-inner-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
// 单选框单选按钮的边框圆角半径
--ti-radio-inner-border-radius: 100%;
// 单选框尺寸为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);
--tv-Radio-inner-border-radius: var(--tv-border-radius-round);
// 单选框单选按钮宽度
--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);
// 单选框单选按钮选中后悬浮时的背景色
--ti-radio-inner-checked-hover-bg-color: #1476FF;
--tv-Radio-margin-right: 24px;
// 单选按钮底部外边距
--ti-radio-button-margin-bottom: var(--ti-common-space-4x);
--tv-Radio-button-margin-bottom: var(--tv-space-xl);
}