everright-filter
Version:
🦮Vue3 query builder/filter builder ui component for building complex queries and filters with nested conditionals.Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date and time(Vue 高级ç›é€‰å™¨ç»„件)
2 lines (1 loc) • 9.62 kB
CSS
.Everright-region-Main__dropdown{padding:0;min-width:200px}.Everright-region-Main__dropdown .el-tabs__header{padding:6px 12px 0}.Everright-region-Main__wrap{max-height:274px}.Everright-region-Main__regin{width:100%;display:inline-block;position:relative}.Everright-region-Main__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.Everright-region-Main__list li{display:flex;align-items:center;font-size:14px;padding:0 32px 0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;height:34px;line-height:34px;box-sizing:border-box;cursor:pointer}.Everright-region-Main__list li.is-Selected{color:var(--el-color-primary);font-weight:700}.Everright-region-Main__list li:hover{background:#f5f7fa}.Everright-region-Main__tagsWrap{position:absolute;left:0;right:30px;top:50%;transform:translateY(-50%);display:flex;flex-wrap:wrap;line-height:normal;text-align:left;box-sizing:border-box}.Everright-region-Main__tagsWrap .el-tag:not(.is-hit){border-color:transparent}.Everright-region-Main__tagsWrap .el-tag{display:inline-flex;align-items:center;max-width:100%;margin:2px 0 2px 6px;text-overflow:ellipsis}.Everright-region-Main__search-input{flex:1;height:24px;min-width:60px;margin:2px 0 2px 11px;padding:0;color:var(--el-text-color-regular);border:none;outline:none;box-sizing:border-box;background:transparent}.Everright-region-Main__icon{transition:transform .3s;font-size:14px}.Everright-region-Main__reverse{transform:rotate(180deg)}.Everright-region-Main__label{flex:1;text-align:left;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Everright-region-Main__postfix{flex:1;text-align:left;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;right:10px}.Everright-filter-Main{padding:50px}.Everright-filter-Main .EverrightFilterOption{display:flex}.Everright-filter-Main .EverrightFilterOption .EverrightFilterOptionContent{width:100%}.Everright-filter-Main__add{width:100%;height:76px;z-index:1;background:#f9f9f9;border:#f9f9f9;color:#000}.Everright-filter-Main__quick-search{padding:0}.Everright-filter-Main__quick-search .Everright-filter-FilterItem{padding:0;background:none;margin:0}.Everright-filter-Main__quick-search .Everright-filter-PickerComponent>*{margin:0}.Everright-filter-Main__quick-search .Everright-filter-TriggerComponent{width:120px;margin-right:0}.Everright-filter-Main__quick-search .Everright-filter-TriggerComponent .el-input__wrapper{border-radius:4px 0 0 4px;box-shadow:1px 0 #dcdfe6 inset,0 1px #dcdfe6 inset,0 -1px #dcdfe6 inset}.Everright-filter-Main__quick-search .Everright-filter-TextType__width .el-input__wrapper{border-radius:0}.Everright-filter-Main__quick-search .Everright-filter-PickerComponent__searchButton{border-radius:0 4px 4px 0}.Everright-filter-Main__quick-filter{padding:0}.Everright-filter-Main__quick-filter .Everright-filter-FilterItem{padding:0;background:none;margin:0}.Everright-filter-Main__quick-filter .Everright-filter-FilterItem__optionContent.EverrightFilterOptionContent{display:flex}.Everright-filter-Main__quick-filter .Everright-filter-FilterItem__optionContent.EverrightFilterOptionContent{flex-wrap:wrap}.Everright-filter-Main__quick-filter .Everright-filter-FilterRule{display:flex}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent{width:100%;flex-wrap:wrap;align-content:flex-start}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent>div:first-child{margin-bottom:10px}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent>*{width:100%}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent>.Everright-filter-DateComponent__button+*{margin-top:10px}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap{flex-wrap:wrap;margin:0;width:100%;justify-content:space-between}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap>*:last-child:not(.is-range),.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap>.Everright-filter-DateComponent__button,.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap .el-cascader{width:100%}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap .Everright-filter-DateComponent__button+.Everright-filter-DateComponent__width{margin-top:10px}.Everright-filter-Main__quick-filter .Everright-filter-PickerComponent .Everright-filter-PickerComponent__componentWrap .is-range{width:120px}.Everright-filter-Main__quick-filter .Everright-filter-FilterRule{width:270px;margin:0 20px}.Everright-filter-PickerComponent{display:flex}.Everright-filter-PickerComponent>*{margin-right:15px;display:flex;align-items:center}.Everright-filter-FilterRule{padding:10px 10px 10px 0}.Everright-filter-FilterRule__border{border-bottom:1px dashed #E0E0E0}.Everright-filter-FilterItem{background-color:#f9f9f9;border-radius:3px;padding:20px 20px 70px;margin:12px 0}.Everright-filter-FilterItem>h2{font-size:16px;font-weight:600}.Everright-filter-FilterItem__optionContent{position:relative}.Everright-filter-FilterItem__add{position:absolute;left:0;bottom:-40px;color:#000}.Everright-filter-FilterItem__add span{font-weight:600}.Everright-filter-LogicalOperatorComponent{position:relative;display:flex;align-items:center;overflow:hidden;width:70px}.Everright-filter-LogicalOperatorComponent:before{content:"";position:absolute;width:160px;left:26px;border:1px solid #E9E9E9;border-right-color:transparent;top:26px;bottom:26px}.Everright-filter-DateType__width{width:100px;box-sizing:border-box;flex-shrink:0}.Everright-filter-DateType__width>.select-trigger{width:100%}.Everright-filter-DateComponent__manuals{display:flex;flex-wrap:wrap;margin:0 8px;padding:10px 0}.Everright-filter-DateComponent__shortcuts{display:flex;flex-wrap:wrap;justify-content:flex-start}.Everright-filter-DateComponent__shortcuts>*{width:118px;margin:10px 9px}.Everright-filter-DateComponent__absolute{border-top:1px solid #E9E9E9;text-align:center;padding:20px 0 10px;margin:0 8px}.Everright-filter-DateComponent__includeToday{display:flex;align-items:center;margin-left:10px}.Everright-filter-DateComponent__button .el-icon{padding-left:10px}.Everright-filter-DateComponent__width{display:flex;flex-grow:0;width:300px;box-sizing:border-box;flex-shrink:0}.Everright-filter-DayHourComponent{padding:5px;margin:4px 9px;background:#f9f9f9;display:flex;align-items:baseline}.Everright-filter-DayHourComponent__content{display:flex;align-items:center}.Everright-filter-DayHourComponent__appendLabel,.Everright-filter-DayHourComponent__prependLabel{margin:5px}.Everright-filter-DayHourComponent__wrap{margin:5px;position:relative;width:110px}.Everright-filter-DayHourComponent__wrap .el-input-number{width:100%}.Everright-filter-DayHourComponent__wrap .el-input-number .el-input__wrapper{padding:0 48px 0 10px}.Everright-filter-DayHourComponent__suffix{position:absolute;font-size:12px;right:12px;top:0;height:30px;display:flex;align-items:center}.Everright-filter-DayHourComponent__suffix.el-select{height:28px;width:40px;right:1px;top:1px}.Everright-filter-DayHourComponent__suffix.el-select .el-input .el-input__wrapper{box-shadow:none;padding:0}.Everright-filter-DayHourComponent__suffix.el-select .el-input .el-input__wrapper .el-input__inner{line-height:28px;height:28px;text-align:center}.Everright-filter-DayHourComponent__suffix.el-select .el-input .el-input__wrapper .el-input__suffix{margin-right:4px}.Everright-filter-TriggerComponent{width:300px;flex-shrink:0}.Everright-filter-OperatorComponent__width{width:150px;flex-shrink:0}.Everright-filter-ConstraintComponent{padding-top:10px}.Everright-filter-ConstraintComponent__contentLabel{margin:0 20px 0 24px;font-size:14px}.Everright-filter-ConstraintComponent__content>div{align-items:baseline;display:flex;padding:10px 0}.Everright-filter-ConstraintComponent__item{display:flex}.Everright-filter-ConstraintComponent__item>*{margin-right:15px}.Everright-filter-ConstraintComponent .Everright-filter-FilterItem{padding:0 0 50px;margin:0}.Everright-filter-ConstraintComponent .Everright-filter-FilterRule{padding:6px 10px 4px 0}.Everright-filter-TextType__width{width:300px;flex-shrink:0}.Everright-filter-TextType__width>.select-trigger{width:100%}.Everright-filter-SelectType__width{width:300px;flex-shrink:0}.Everright-filter-SelectType__width>.select-trigger{width:100%}.Everright-filter-NumberType__width{width:300px;flex-shrink:0}.Everright-filter-TimeType__width{width:300px;box-sizing:border-box;flex-shrink:0;flex-grow:0}.Everright-filter-RegionType__width,.Everright-filter-CascaderType__width{width:300px}.Everright-filter-CascaderType .el-tag{max-width:108px}@keyframes ERFILTER-ERROR-shakeError{0%{transform:translate(0)}15%{transform:translate(.375rem)}30%{transform:translate(-.375rem)}45%{transform:translate(.375rem)}60%{transform:translate(-.375rem)}75%{transform:translate(.375rem)}90%{transform:translate(-.375rem)}to{transform:translate(0)}}.ERFILTER-ERROR{animation-name:ERFILTER-ERROR-shakeError;animation-fill-mode:forwards;animation-duration:.6s;animation-timing-function:ease-in-out}.ERFILTER-ERROR.el-input__wrapper,.ERFILTER-ERROR .el-input__wrapper{box-shadow:0 0 0 1px #f56c6c inset}.ERFILTER-ERROR.el-button{border-color:#f56c6c}