theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 修复按需模式下的样式污染

Browse Source
This commit is contained in:
就眠儀式 2022-08-04 19:16:36 +08:00
parent fdeefb3599
commit 6e346e58cf
7 changed files with 74 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "1.3.12-alpha.5",
"version": "1.3.12-alpha.6",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",

24
package/component/src/component/checkbox/index.less
View File

@ -1,12 +1,12 @@
@lg: 18px;
@md: 16px;
@sm: 14px;
@xs: 12px;
@checkbox-lg: 18px;
@checkbox-md: 16px;
@checkbox-sm: 14px;
@checkbox-xs: 12px;
@lg-font-size: 16px;
@md-font-size: 14px;
@sm-font-size: 12px;
@xs-font-size: 10px;
@checkbox-lg-font-size: 16px;
@checkbox-md-font-size: 14px;
@checkbox-sm-font-size: 12px;
@checkbox-xs-font-size: 10px;
.set-size(@size, @font-size) {
& {
@ -30,16 +30,16 @@
.layui-checkbox{
&[size="lg"] {
.set-size(@lg, @lg-font-size);
.set-size(@checkbox-lg, @checkbox-lg-font-size);
}
&[size="md"] {
.set-size(@md, @md-font-size);
.set-size(@checkbox-md, @checkbox-md-font-size);
}
&[size="sm"] {
.set-size(@sm, @sm-font-size);
.set-size(@checkbox-sm, @checkbox-sm-font-size);
}
&[size="xs"] {
.set-size(@xs, @xs-font-size);
.set-size(@checkbox-xs, @checkbox-xs-font-size);
}
}

16
package/component/src/component/input/index.less
View File

@ -3,10 +3,10 @@
--input-border-color: var(--global-neutral-color-3);
}
@lg: 44px;
@md: 38px;
@sm: 32px;
@xs: 26px;
@input-lg: 44px;
@input-md: 38px;
@input-sm: 32px;
@input-xs: 26px;
.set-size(@size) {
& {
@ -105,15 +105,15 @@
.layui-input{
&[size="lg"] {
.set-size(@lg);
.set-size(@input-lg);
}
&[size="md"] {
.set-size(@md);
.set-size(@input-md);
}
&[size="sm"] {
.set-size(@sm);
.set-size(@input-sm);
}
&[size="xs"] {
.set-size(@xs);
.set-size(@input-xs);
}
}

33
package/component/src/component/inputNumber/index.less
View File

@ -3,18 +3,19 @@
@border-color: #eee;
@hover-border-color: var(--global-primary-color);
@lg: 44px;
@lg-wdith: 200px;
@lg-right: 22px;
@md: 38px;
@md-wdith: 160px;
@md-right: 19px;
@sm: 32px;
@sm-wdith: 140px;
@sm-right: 16px;
@xs: 26px;
@xs-wdith: 120px;
@xs-right: 13px;
@input-number-lg: 44px;
@input-number-lg-wdith: 200px;
@input-number-lg-right: 22px;
@input-number-md: 38px;
@input-number-md-wdith: 160px;
@input-number-md-right: 19px;
@input-number-sm: 32px;
@input-number-sm-wdith: 140px;
@input-number-sm-right: 16px;
@input-number-xs: 26px;
@input-number-xs-wdith: 120px;
@input-number-xs-right: 13px;
.set-size(@width, @size, @right-size) {
& {
@ -123,15 +124,15 @@
}
&[size="lg"] {
.set-size(@lg-wdith, @lg, @lg-right);
.set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
}
&[size="md"] {
.set-size(@md-wdith, @md, @md-right);
.set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
}
&[size="sm"] {
.set-size(@sm-wdith, @sm, @sm-right);
.set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
}
&[size="xs"] {
.set-size(@xs-wdith, @xs, @xs-right);
.set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
}
}

16
package/component/src/component/radio/index.less
View File

@ -1,7 +1,7 @@
@lg: 24px;
@md: 22px;
@sm: 20px;
@xs: 18px;
@radio-lg: 24px;
@radio-md: 22px;
@radio-sm: 20px;
@radio-xs: 18px;
.set-size(@size) {
& {
@ -13,16 +13,16 @@
.layui-radio{
&[size="lg"] {
.set-size(@lg);
.set-size(@radio-lg);
}
&[size="md"] {
.set-size(@md);
.set-size(@radio-md);
}
&[size="sm"] {
.set-size(@sm);
.set-size(@radio-sm);
}
&[size="xs"] {
.set-size(@xs);
.set-size(@radio-xs);
}
}

32
package/component/src/component/select/index.less
View File

@ -2,18 +2,18 @@
@import "../checkbox/index.less";
@import "../input/index.less";
@lg: 44px;
@md: 38px;
@sm: 32px;
@xs: 26px;
@lg-badge:32px;
@md-badge:26px;
@sm-badge:20px;
@xs-badge:14px;
@lg-width: 260px;
@md-width: 220px;
@sm-width: 180px;
@xs-width: 140px;
@select-lg: 44px;
@select-md: 38px;
@select-sm: 32px;
@select-xs: 26px;
@select-lg-badge:32px;
@select-md-badge:26px;
@select-sm-badge:20px;
@select-xs-badge:14px;
@select-lg-width: 260px;
@select-md-width: 220px;
@select-sm-width: 180px;
@select-xs-width: 140px;
.set-size(@size,@badge-size,@width) {
& {
@ -229,15 +229,15 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
}
.layui-form-select{
&[size="lg"] {
.set-size(@lg, @lg-badge, @lg-width);
.set-size(@select-lg, @select-lg-badge, @select-lg-width);
}
&[size="md"] {
.set-size(@md, @md-badge, @md-width);
.set-size(@select-md, @select-md-badge, @select-md-width);
}
&[size="sm"] {
.set-size(@sm, @sm-badge, @sm-width);
.set-size(@select-sm, @select-sm-badge, @select-sm-width);
}
&[size="xs"] {
.set-size(@xs, @xs-badge, @xs-width);
.set-size(@select-xs, @select-xs-badge, @select-xs-width);
}
}

24
package/component/src/component/switch/index.less
View File

@ -1,12 +1,12 @@
@lg: 24px;
@md: 22px;
@sm: 20px;
@xs: 18px;
@switch-lg: 24px;
@switch-md: 22px;
@switch-sm: 20px;
@switch-xs: 18px;
@lg-min-width: 42px;
@md-min-width: 37px;
@sm-min-width: 32px;
@xs-min-width: 27px;
@switch-lg-min-width: 42px;
@switch-md-min-width: 37px;
@switch-sm-min-width: 32px;
@switch-xs-min-width: 27px;
.set-size(@size, @min-width) {
& {
@ -36,16 +36,16 @@
.layui-switch-container{
&[size="lg"] {
.set-size(@lg,@lg-min-width);
.set-size(@switch-lg,@switch-lg-min-width);
}
&[size="md"] {
.set-size(@md,@md-min-width);
.set-size(@switch-md,@switch-md-min-width);
}
&[size="sm"] {
.set-size(@sm,@sm-min-width);
.set-size(@switch-sm,@switch-sm-min-width);
}
&[size="xs"] {
.set-size(@xs,@xs-min-width);
.set-size(@switch-xs,@switch-xs-min-width);
}
}