✨(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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user