Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(checkbox): [checkbox] adapte checkbox saas theme and x-design theme #2260

Merged
merged 4 commits into from
Oct 14, 2024
Merged

feat(checkbox): [checkbox] adapte checkbox saas theme and x-design theme #2260

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f680b7
feat(checkbox): adapte checkbox saas theme and x-design theme
zzcr Oct 14, 2024
bec5029
feat(checkbox): adapte checkbox saas theme and x-design theme
zzcr Oct 14, 2024
6d3a35e
feat(checkbox): adapte checkbox saas theme and x-design theme
zzcr Oct 14, 2024
50497b1
feat(checkbox): adapte checkbox saas theme and x-design theme
zzcr Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 20 additions & 48 deletions packages/theme/src/checkbox/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,40 +38,21 @@
.@{checkbox-prefix-cls}__inner {
display: inline-block;
position: relative;
border: 1px solid var(--tv-Checkbox-border-color);
border-radius: var(--tv-Checkbox-border-radius);
box-sizing: border-box;
width: var(--tv-Checkbox-width);
height: var(--tv-Checkbox-height);
outline: none;
z-index: 1;
transition:
border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

&:hover {
border-color: var(--tv-Checkbox-border-color-hover);
}

svg {
width: var(--tv-Checkbox-svg-width);
height: var(--tv-Checkbox-svg-height);
}

.icon-checked-sur {
fill: var(--tv-Checkbox-icon-color);
}

.icon-no-checked {
fill: transparent;
}

.icon-halfselect {
fill: var(--tv-Checkbox-icon-halfselect);
}

.icon-halfselect:hover {
fill: transparent;
svg.icon-check:hover {
fill: var(--tv-Checkbox-icon-color-hover);
}
}

Expand Down Expand Up @@ -117,43 +98,34 @@
line-height: 1;
cursor: pointer;

&.is-disabled {
.checkbox-input-disabled(
var(--tv-Checkbox-bg-color-disabled),
var(--tv-Checkbox-border-color-disabled),
var(--tv-Checkbox-bg-color-checked-disabled),
var(--tv-Checkbox-label-text-color-disabled),
var(--tv-Checkbox-icon-color-disabled)
);
}

&.is-disabled,
.@{checkbox-prefix-cls}__input.is-disabled {
&.is-checked,
&.is-indeterminate {
.@{checkbox-prefix-cls}__inner {
.icon-halfselect {
fill: var(--tv-Checkbox-icon-halfselect-disabled);
}

.icon-no-checked {
fill: transparent;
svg {
fill: var(--tv-Checkbox-icon-selected);
}
}
}

&.is-checked,
&.is-indeterminate {
&.is-disabled {
& + span.@{checkbox-prefix-cls}__label {
color: var(--tv-Checkbox-label-text-color-disabled);
cursor: not-allowed;
}

.@{checkbox-prefix-cls}__inner {
background-color: var(--tv-Checkbox-bg-color-checked);
border-color: var(--tv-Checkbox-border-color-checked);
svg {
fill: var(--tv-Checkbox-icon-selected-disabled);
cursor: not-allowed;
}

svg:hover {
fill: var(--tv-Checkbox-icon-selected-disabled);
}
}
}
}

input:focus-visible + .@{checkbox-prefix-cls}__inner {
outline: 2px solid var(--tv-Checkbox-bg-color-checked);
outline-offset: 1px;
}

// 原始表单input组件，需要隐藏
&__original {
opacity: 0;
Expand Down
37 changes: 12 additions & 25 deletions packages/theme/src/checkbox/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,53 +11,40 @@
*/

.inject-Checkbox-vars() {
// 复选框宽度
--tv-Checkbox-width: 16px;
// 复选框高度
--tv-Checkbox-height: 16px;
// 复选框内部svg宽度
--tv-Checkbox-svg-width: calc(var(--tv-Checkbox-width) - 2px);
--tv-Checkbox-svg-width: var(--tv-icon-size);
// 复选框内部svg高度
--tv-Checkbox-svg-height: calc(var(--tv-Checkbox-height) - 2px);
--tv-Checkbox-svg-height: var(--tv-icon-size);
// 复选框svg颜色
--tv-Checkbox-icon-color: var(--tv-color-icon-white);
--tv-Checkbox-icon-color: var(--tv-color-bg-control);
// 复选框svg悬浮颜色
--tv-Checkbox-icon-color-hover: var(--tv-color-icon-hover);
// 复选框半选svg颜色
--tv-Checkbox-icon-halfselect: var(--tv-color-icon-control-active);
--tv-Checkbox-icon-selected: var(--tv-color-icon-control-active);
// 复选框半选svg颜色
--tv-Checkbox-icon-halfselect-disabled: var(--tv-color-icon-control-disabled);
--tv-Checkbox-icon-selected-disabled: var(--tv-color-icon-control-disabled);
// 默认复选框文本色
--tv-Checkbox-text-color: var(--tv-color-text);
// 默认复选框字号
--tv-Checkbox-font-size: var(--tv-font-size-md);
// 默认复选框字重
--tv-Checkbox-font-weight: var(--tv-font-weight-regular);
// 默认复选框选中项背景色
--tv-Checkbox-bg-color-checked: var(--tv-color-bg-active-control);
// 默认复选框选中项边框色
--tv-Checkbox-border-color-checked: var(--tv-color-border-active-control);
// 默认复选框未选中项边框色
--tv-Checkbox-border-color: var(--tv-color-border);
// 默认复选框未选中项悬浮边框色
--tv-Checkbox-border-color-hover: var(--tv-color-border-hover);

// 默认复选框禁用时，未选中时背景色
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
// 默认复选框禁用时，选中项背景颜色
--tv-Checkbox-bg-color-checked-disabled: var(--tv-color-bg-disabled-control-checked);
// 默认复选框禁用时，选中项对勾颜色以及半选时图标的颜色
--tv-Checkbox-icon-color-disabled: var(--tv-color-icon-white);
// 默认复选框禁用边框色
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);
// 默认复选框禁用时，label文本色
--tv-Checkbox-label-text-color-disabled: var(--tv-color-text-disabled);

// 默认复选框边框圆角
--tv-Checkbox-border-radius: var(--tv-border-radius-sm);
// 默认复选框外边框圆角
--tv-Checkbox-outline-border-radius: var(--tv-border-radius-md);
// 默认复选框的右侧外边距
--tv-Checkbox-label-margin-right: 24px;

// 边框模式复选框禁用时背景色
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
// 边框模式复选框禁用边框色
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);

// 复选框过滤器模式底色
--tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2);
}
46 changes: 0 additions & 46 deletions packages/theme/src/mixins/checkbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,49 +40,3 @@
}
}
}

.checkbox-input-disabled(@bg-color, @border-color, @bg-color-checked, @label-color, @icon-color) {
.@{checkbox-prefix-cls}__inner {
background-color: @bg-color;
border-color: @border-color;
cursor: not-allowed;

svg {
fill: @icon-color;
}

& + .@{checkbox-prefix-cls}__label {
cursor: not-allowed;
}
}

&.is-checked {
.@{checkbox-prefix-cls}__inner,
.@{checkbox-prefix-cls}__inner:hover {
background-color: @bg-color-checked;
border-color: @border-color;

&:after {
border-color: @icon-color;
}
}
}

&.is-indeterminate {
.@{checkbox-prefix-cls}__inner,
.@{checkbox-prefix-cls}__inner:hover {
background-color: @bg-color-checked;
border-color: @border-color;

&:before {
background-color: @icon-color;
border-color: @icon-color;
}
}
}

& + span.@{checkbox-prefix-cls}__label {
color: @label-color;
cursor: not-allowed;
}
}
11 changes: 6 additions & 5 deletions packages/vue/src/checkbox/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@
@click.stop
/>
<span class="tiny-checkbox__inner">
<icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="icon-halfselect" />
<icon-checked-sur v-else-if="state.isChecked" class="icon-checked-sur" />
<icon-checked-sur v-else class="icon-no-checked" />
<icon-halfselect v-if="indeterminate && state.shape !== 'filter'" class="tiny-svg-size icon-halfselect" />
<icon-checked-sur v-else-if="state.isChecked" class="tiny-svg-size icon-checked-sur" />
<icon-check v-else class="tiny-svg-size icon-check" />
</span>
</span>
<span
Expand All @@ -87,7 +87,7 @@
import { renderless, api } from '@opentiny/vue-renderless/checkbox/vue'
import { props, setup, defineComponent } from '@opentiny/vue-common'
import '@opentiny/vue-theme/checkbox/index.less'
import { iconHalfselect, iconYes } from '@opentiny/vue-icon'
import { iconHalfselect, iconCheckedSur, iconCheck } from '@opentiny/vue-icon'
import type { ICheckboxApi } from '@opentiny/vue-renderless/types/checkbox.type'
import { AutoTip } from '@opentiny/vue-directive'
export default defineComponent({
Expand Down Expand Up @@ -117,7 +117,8 @@ export default defineComponent({
],
components: {
IconHalfselect: iconHalfselect(),
IconCheckedSur: iconYes()
IconCheckedSur: iconCheckedSur(),
IconCheck: iconCheck()
},
setup(props, context) {
return setup({ props, context, renderless, api }) as unknown as ICheckboxApi
Expand Down
Loading