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

✨(component): 优化 select 多选样式

Browse Source
This commit is contained in:
就眠儀式 2022-07-22 00:19:14 +08:00
parent b4f3e43fed
commit c739b2bd00
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,10 +10,10 @@
@md-badge:26px; @md-badge:26px;
@sm-badge:20px; @sm-badge:20px;
@xs-badge:14px; @xs-badge:14px;
@lg-width: 300px; @lg-width: 260px;
@md-width: 260px; @md-width: 220px;
@sm-width: 220px; @sm-width: 180px;
@xs-width: 180px; @xs-width: 140px;
.set-size(@size,@badge-size,@width) { .set-size(@size,@badge-size,@width) {
& { & {
@ -45,10 +45,11 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
right: 30px; right: 34px;
padding: 5px 0 5px 6px; padding: 5px 0 5px 6px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
overflow-x: scroll;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
@ -70,6 +71,21 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
padding-left: 3px; padding-left: 3px;
} }
} }
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-thumb {
height: 50px;
background-color: whitesmoke;
border-radius: 6px;
opacity: 0.5;
}
&::-webkit-scrollbar-thumb:hover {
height: 50px;
background-color: whitesmoke;
border-radius: 6px;
}
} }
.layui-select { .layui-select {
@ -92,12 +108,14 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
.layui-form-select { .layui-form-select {
position: relative; position: relative;
} }
.layui-select-title{ .layui-select-title{
height: 100%; height: 100%;
} }
.layui-select-title .layui-input { .layui-select-title .layui-input {
padding-right: 36px;
padding-left: 10px; padding-left: 10px;
padding-right: 30px;
cursor: pointer; cursor: pointer;
} }
@ -113,6 +131,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
transition: all 0.3s; transition: all 0.3s;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
} }
.layui-input-icon-area{ .layui-input-icon-area{
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -125,6 +144,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
} }
.layui-form-select .layui-icon-down { .layui-form-select .layui-icon-down {
display: inline-block; display: inline-block;
transition: all 0.3s; transition: all 0.3s;
@ -219,7 +239,4 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
&[size="xs"] { &[size="xs"] {
.set-size(@xs, @xs-badge, @xs-width); .set-size(@xs, @xs-badge, @xs-width);
} }
}
.layui-form-select-multiple{
width: 100% !important;
} }

5
package/document-component/src/document/zh-CN/components/menu.md
View File

@ -762,10 +762,9 @@ export default {
::: table ::: table
| 插槽 | 描述 | 备注 | | 属性 | 描述 | 备注 |
| ----- | -------- | ---- | | ----- | -------- | ---- |
| title | 菜单标题 | -- | | title | 菜单标题 | -- |
| expandIcon | 扩展图标 | -- |
::: :::
@ -777,7 +776,7 @@ export default {
| 插槽 | 描述 | 备注 | | 插槽 | 描述 | 备注 |
| ----- | -------- | ---- | | ----- | -------- | ---- |
| title | 菜单标题 | -- | | title | 菜单标题 | -- |
| expandIcon | 扩展图标 | isExpand:是否展开 |
::: :::
::: contributor menu ::: contributor menu

2
package/document-component/src/document/zh-CN/components/panel.md
View File

@ -46,7 +46,7 @@ export default {
::: table ::: table
| 插槽 | 描述 | 可选值 | | 插槽 | 描述 | 参数 |
| ------- | -------- | ------ | | ------- | -------- | ------ |
| default | 默认插槽 | -- | | default | 默认插槽 | -- |