/** * 级联选择器模块 * 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; }