✨(component): 优化 select 多选样式
This commit is contained in:
parent
b4f3e43fed
commit
c739b2bd00
@ -10,10 +10,10 @@
|
||||
@md-badge:26px;
|
||||
@sm-badge:20px;
|
||||
@xs-badge:14px;
|
||||
@lg-width: 300px;
|
||||
@md-width: 260px;
|
||||
@sm-width: 220px;
|
||||
@xs-width: 180px;
|
||||
@lg-width: 260px;
|
||||
@md-width: 220px;
|
||||
@sm-width: 180px;
|
||||
@xs-width: 140px;
|
||||
|
||||
.set-size(@size,@badge-size,@width) {
|
||||
& {
|
||||
@ -45,10 +45,11 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 30px;
|
||||
right: 34px;
|
||||
padding: 5px 0 5px 6px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--input-border-color);
|
||||
@ -70,6 +71,21 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
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 {
|
||||
@ -92,12 +108,14 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
.layui-form-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-select-title{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layui-select-title .layui-input {
|
||||
padding-right: 36px;
|
||||
padding-left: 10px;
|
||||
padding-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -113,6 +131,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-input-icon-area{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
@ -125,6 +144,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
.layui-form-select .layui-icon-down {
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
@ -219,7 +239,4 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
|
||||
&[size="xs"] {
|
||||
.set-size(@xs, @xs-badge, @xs-width);
|
||||
}
|
||||
}
|
||||
.layui-form-select-multiple{
|
||||
width: 100% !important;
|
||||
}
|
@ -762,10 +762,9 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
| expandIcon | 扩展图标 | -- |
|
||||
|
||||
:::
|
||||
|
||||
@ -777,7 +776,7 @@ export default {
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
| expandIcon | 扩展图标 | isExpand:是否展开 |
|
||||
:::
|
||||
|
||||
::: contributor menu
|
||||
|
@ -46,7 +46,7 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| 插槽 | 描述 | 参数 |
|
||||
| ------- | -------- | ------ |
|
||||
| default | 默认插槽 | -- |
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user