| | |
| | | /** 级联选择器模块 date:2019-07-27 License By http://easyweb.vip */ |
| | | .ew-cascader-group { |
| | | position: relative; |
| | | } |
| | | |
| | | .ew-cascader-group * { |
| | | line-height: 24px; |
| | | } |
| | | |
| | | /** 隐藏原始elem */ |
| | | .ew-cascader-hide { |
| | | display: block !important; |
| | | visibility: hidden; |
| | | position: absolute; |
| | | z-index: -1; |
| | | } |
| | | |
| | | /** 显示区域 */ |
| | | .ew-cascader-input-group { |
| | | position: relative; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | /* 输入框 */ |
| | | .layui-form-danger + .ew-cascader-group > .ew-cascader-input-group > .ew-cascader-input { |
| | | border-color: #FF5722 !important; |
| | | } |
| | | |
| | | .ew-cascader-input-group > .ew-cascader-input { |
| | | cursor: pointer; |
| | | padding-right: 25px; |
| | | } |
| | | |
| | | /** 右侧箭头 */ |
| | | .ew-cascader-input-group > .ew-icon-arrow { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 7px; |
| | | color: #c2c2c2; |
| | | font-size: 17px; |
| | | margin-top: -12px; |
| | | transition: all .3s; |
| | | } |
| | | |
| | | .ew-cascader-group.ew-cascader-open > .ew-cascader-input-group > .ew-icon-arrow { |
| | | transform: rotate(180deg); |
| | | } |
| | | |
| | | .ew-cascader-group.show-loading > .ew-cascader-input-group > .ew-icon-arrow, .ew-cascader-input-group.show-clear > .ew-icon-arrow { |
| | | display: none; |
| | | } |
| | | |
| | | /** 异步回显默认值时加载loading */ |
| | | .ew-cascader-input-group > .ew-icon-loading { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 7px; |
| | | color: #666; |
| | | font-size: 17px; |
| | | margin-top: -12px; |
| | | display: none; |
| | | } |
| | | |
| | | .ew-cascader-group.show-loading > .ew-cascader-input-group > .ew-icon-loading { |
| | | display: block; |
| | | } |
| | | |
| | | /** 清除图标 */ |
| | | .ew-cascader-input-group > .ew-icon-clear { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 7px; |
| | | color: #999; |
| | | font-size: 17px; |
| | | margin-top: -12px; |
| | | display: none; |
| | | } |
| | | |
| | | .ew-cascader-input-group.show-clear > .ew-icon-clear { |
| | | display: block; |
| | | } |
| | | |
| | | .ew-cascader-group.show-loading > .ew-cascader-input-group > .ew-icon-clear { |
| | | display: none; |
| | | } |
| | | |
| | | /** 下拉列表 */ |
| | | .ew-cascader-dropdown { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 100%; |
| | | font-size: 0; |
| | | margin-top: 8px; |
| | | margin-bottom: 8px; |
| | | background: #fff; |
| | | width: auto; |
| | | border-radius: 2px; |
| | | border: 1px solid #d2d2d2; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, .12); |
| | | z-index: 999; |
| | | display: none; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .ew-cascader-open .ew-cascader-dropdown { |
| | | display: block; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list { |
| | | padding: 5px 0; |
| | | min-width: 120px; |
| | | height: 180px; |
| | | overflow-y: auto; |
| | | vertical-align: top; |
| | | display: inline-block; |
| | | border-right: 1px solid #e6e6e6; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list:last-child { |
| | | border-right: none; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item { |
| | | color: #555; |
| | | font-size: 14px; |
| | | padding: 5px 25px 5px 15px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item:hover { |
| | | background-color: #f3f3f3; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.active { |
| | | background-color: #f3f3f3; |
| | | color: #5FB878; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.is-last { |
| | | padding-right: 15px; |
| | | } |
| | | |
| | | /** 每一项的右侧箭头及加载loading */ |
| | | .ew-cascader-dropdown-list-item .ew-icon-right, .ew-cascader-dropdown-list-item .ew-icon-loading { |
| | | position: absolute; |
| | | top: 6px; |
| | | right: 10px; |
| | | color: #666; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.active .ew-icon-right { |
| | | color: #5FB878; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.is-last .ew-icon-right, .ew-cascader-dropdown-list-item.show-loading .ew-icon-right, .ew-cascader-dropdown-list-item .ew-icon-loading { |
| | | display: none; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.show-loading .ew-icon-loading { |
| | | display: block; |
| | | } |
| | | |
| | | /* 禁用项 */ |
| | | .ew-cascader-dropdown-list-item.ew-cascader-disabled { |
| | | color: #aaa; |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.ew-cascader-disabled:hover { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .ew-cascader-dropdown-list-item.ew-cascader-disabled .ew-icon-right { |
| | | color: #bbb; |
| | | } |
| | | |
| | | /** 搜索功能 */ |
| | | .ew-cascader-input-group .ew-cascader-input-search { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | display: none; |
| | | padding-right: 25px; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .ew-cascader-input-group.show-search .ew-cascader-input-search { |
| | | display: block; |
| | | } |
| | | |
| | | .ew-cascader-input-group.show-search .ew-cascader-input { |
| | | color: #999; |
| | | } |
| | | |
| | | .ew-cascader-input-group.have-value .ew-cascader-input-search { |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .ew-cascader-input-group.have-value .ew-icon-clear { |
| | | display: none; |
| | | } |
| | | |
| | | .ew-cascader-input-group.have-value .ew-icon-arrow { |
| | | display: block; |
| | | } |
| | | |
| | | /* 搜索面板 */ |
| | | .ew-cascader-search-list { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 100%; |
| | | margin-top: 8px; |
| | | margin-bottom: 8px; |
| | | background: #fff; |
| | | width: max-content; |
| | | padding: 5px 0; |
| | | min-width: 150px; |
| | | max-height: 250px; |
| | | overflow-y: auto; |
| | | border-radius: 2px; |
| | | border: 1px solid #d2d2d2; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, .12); |
| | | z-index: 999; |
| | | display: none; |
| | | } |
| | | |
| | | .show-search-list .ew-cascader-search-list { |
| | | display: block; |
| | | } |
| | | |
| | | .show-search-list .ew-cascader-dropdown { |
| | | display: none; |
| | | } |
| | | |
| | | .ew-cascader-search-list-item { |
| | | color: #555; |
| | | font-size: 14px; |
| | | padding: 5px 15px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .ew-cascader-search-list-item:hover { |
| | | background-color: #f3f3f3; |
| | | } |
| | | |
| | | .ew-cascader-search-list-item .search-keyword { |
| | | color: #f5222d; |
| | | } |
| | | |
| | | .ew-cascader-search-list-empty { |
| | | text-align: center; |
| | | padding: 10px 15px; |
| | | } |
| | | |
| | | /* 禁用项 */ |
| | | .ew-cascader-search-list-item.ew-cascader-disabled { |
| | | color: #aaa; |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | .ew-cascader-search-list-item.ew-cascader-disabled:hover { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .ew-cascader-search-list-item.ew-cascader-disabled .search-keyword { |
| | | color: #F86169; |
| | | } |
| | | |
| | | /** 向上显示 */ |
| | | .ew-cascader-group.dropdown-show-top .ew-cascader-dropdown, .ew-cascader-group.dropdown-show-top .ew-cascader-search-list { |
| | | top: unset; |
| | | bottom: 100%; |
| | | } |
| | | |
| | | /** 向左显示 */ |
| | | .ew-cascader-group.dropdown-show-left .ew-cascader-dropdown, .ew-cascader-group.dropdown-show-left .ew-cascader-search-list { |
| | | right: 0; |
| | | left: unset; |
| | | } |
| | | .ew-cascader-group{position:relative}.ew-cascader-group *{line-height:24px}.ew-cascader-hide{display:block!important;visibility:hidden;position:absolute;z-index:-1}.ew-cascader-input-group{position:relative;cursor:pointer}.layui-form-danger+.ew-cascader-group>.ew-cascader-input-group>.ew-cascader-input{border-color:#ff5722!important}.ew-cascader-input-group>.ew-cascader-input{cursor:pointer;padding-right:25px}.ew-cascader-input-group>.ew-icon-arrow{position:absolute;top:50%;right:7px;color:#c2c2c2;font-size:17px;margin-top:-12px;transition:all .3s}.ew-cascader-group.ew-cascader-open>.ew-cascader-input-group>.ew-icon-arrow{transform:rotate(180deg)}.ew-cascader-group.show-loading>.ew-cascader-input-group>.ew-icon-arrow,.ew-cascader-input-group.show-clear>.ew-icon-arrow{display:none}.ew-cascader-input-group>.ew-icon-loading{position:absolute;top:50%;right:7px;color:#666;font-size:17px;margin-top:-12px;display:none}.ew-cascader-group.show-loading>.ew-cascader-input-group>.ew-icon-loading{display:block}.ew-cascader-input-group>.ew-icon-clear{position:absolute;top:50%;right:7px;color:#999;font-size:17px;margin-top:-12px;display:none}.ew-cascader-input-group.show-clear>.ew-icon-clear{display:block}.ew-cascader-group.show-loading>.ew-cascader-input-group>.ew-icon-clear{display:none}.ew-cascader-dropdown{position:absolute;left:0;top:100%;font-size:0;margin-top:8px;margin-bottom:8px;background:#fff;width:auto;border-radius:2px;border:1px solid #d2d2d2;box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:999;display:none;white-space:nowrap}.ew-cascader-open .ew-cascader-dropdown{display:block}.ew-cascader-dropdown-list{padding:5px 0;min-width:120px;height:180px;overflow-y:auto;vertical-align:top;display:inline-block;border-right:1px solid #e6e6e6}.ew-cascader-dropdown-list:last-child{border-right:0}.ew-cascader-dropdown-list-item{color:#555;font-size:14px;padding:5px 25px 5px 15px;cursor:pointer;position:relative}.ew-cascader-dropdown-list-item:hover{background-color:#f3f3f3}.ew-cascader-dropdown-list-item.active{background-color:#f3f3f3;color:#5fb878}.ew-cascader-dropdown-list-item.is-last{padding-right:15px}.ew-cascader-dropdown-list-item .ew-icon-right,.ew-cascader-dropdown-list-item .ew-icon-loading{position:absolute;top:6px;right:10px;color:#666;font-size:12px}.ew-cascader-dropdown-list-item.active .ew-icon-right{color:#5fb878}.ew-cascader-dropdown-list-item.is-last .ew-icon-right,.ew-cascader-dropdown-list-item.show-loading .ew-icon-right,.ew-cascader-dropdown-list-item .ew-icon-loading{display:none}.ew-cascader-dropdown-list-item.show-loading .ew-icon-loading{display:block}.ew-cascader-dropdown-list-item.ew-cascader-disabled{color:#aaa;cursor:not-allowed}.ew-cascader-dropdown-list-item.ew-cascader-disabled:hover{background-color:transparent}.ew-cascader-dropdown-list-item.ew-cascader-disabled .ew-icon-right{color:#bbb}.ew-cascader-input-group .ew-cascader-input-search{position:absolute;top:0;left:0;right:0;bottom:0;display:none;padding-right:25px;background-color:transparent}.ew-cascader-input-group.show-search .ew-cascader-input-search{display:block}.ew-cascader-input-group.show-search .ew-cascader-input{color:#999}.ew-cascader-input-group.have-value .ew-cascader-input-search{background-color:#fff}.ew-cascader-input-group.have-value .ew-icon-clear{display:none}.ew-cascader-input-group.have-value .ew-icon-arrow{display:block}.ew-cascader-search-list{position:absolute;left:0;top:100%;margin-top:8px;margin-bottom:8px;background:#fff;width:max-content;padding:5px 0;min-width:150px;max-height:250px;overflow-y:auto;border-radius:2px;border:1px solid #d2d2d2;box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:999;display:none}.show-search-list .ew-cascader-search-list{display:block}.show-search-list .ew-cascader-dropdown{display:none}.ew-cascader-search-list-item{color:#555;font-size:14px;padding:5px 15px;cursor:pointer}.ew-cascader-search-list-item:hover{background-color:#f3f3f3}.ew-cascader-search-list-item .search-keyword{color:#f5222d}.ew-cascader-search-list-empty{text-align:center;padding:10px 15px}.ew-cascader-search-list-item.ew-cascader-disabled{color:#aaa;cursor:not-allowed}.ew-cascader-search-list-item.ew-cascader-disabled:hover{background-color:transparent}.ew-cascader-search-list-item.ew-cascader-disabled .search-keyword{color:#f86169}.ew-cascader-group.dropdown-show-top .ew-cascader-dropdown,.ew-cascader-group.dropdown-show-top .ew-cascader-search-list{top:unset;bottom:100%}.ew-cascader-group.dropdown-show-left .ew-cascader-dropdown,.ew-cascader-group.dropdown-show-left .ew-cascader-search-list{right:0;left:unset} |