@opentiny/vue-theme/query-builder/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-query-builder .queryBuilder{overflow:hidden}.tiny-query-builder .ruleGroup{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:45px;border-radius:4px}.tiny-query-builder .ruleGroup-header{position:relative;height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-query-builder .ruleGroup-body{-webkit-box-flex:1;-ms-flex:auto;flex:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.tiny-query-builder .group-rule-body{-webkit-box-flex:1;-ms-flex:auto;flex:auto;gap:8px}.tiny-query-builder .group-rule-branches{position:absolute;top:0;bottom:44px;left:14px}.tiny-query-builder .group-rule-action{-webkit-box-flex:0;-ms-flex:none;flex:none}.tiny-query-builder .group-combinator-box{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.tiny-query-builder .combinator-branches{position:absolute;top:14px;bottom:14px;right:-16px;left:50%;border:1px solid #e8ebef;border-radius:4px;border-right:0}.tiny-query-builder .combinator-btn{position:relative;z-index:1;width:24px;height:24px;background:#f5f6f8;border-radius:2px;cursor:pointer;color:#1890ff;font-size:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tiny-query-builder .combinator-btn.is-disabled{color:#8081a2;cursor:not-allowed}.tiny-query-builder .query-builder-button{min-width:auto;padding:0;margin:0;-webkit-box-flex:0;-ms-flex:none;flex:none}.tiny-query-builder .primary-svg{fill:currentColor}.tiny-query-builder .tiny-button.query-builder-button>.btn-icon{font-size:16px;fill:currentColor;color:#b5bbc1}.tiny-query-builder .tiny-button.query-builder-button>.btn-font{font-size:14px;color:#b5bbc1}.tiny-query-builder .tiny-button.query-builder-button:hover>.btn-font,.tiny-query-builder .tiny-button.query-builder-button:hover>.btn-icon{color:#78828d;fill:currentColor}.tiny-query-builder .tiny-button.query-builder-button.is-disabled>.btn-font,.tiny-query-builder .tiny-button.query-builder-button.is-disabled>svg.btn-icon{color:rgba(181,187,193,.5);fill:currentColor}.tiny-query-builder .query-builder-rule{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.tiny-query-builder .rule-fields{min-width:20%;max-width:40%}.tiny-query-builder .rule-operators{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-query-builder .rule-value{-webkit-box-flex:1;-ms-flex:auto;flex:auto;width:100%}.tiny-query-builder .ruleGroup-body:empty{display:none}.tiny-query-builder .rule--wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;gap:8px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.tiny-query-builder .rule-radio{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-query-builder .rule-value-editor{display:-webkit-box;display:-ms-flexbox;display:flex;min-width:20%;-webkit-box-flex:1;-ms-flex:auto;flex:auto;gap:8px}.tiny-query-builder .rule-value-editor>div{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.tiny-query-builder .custom-rule-value-editor{display:-webkit-box;display:-ms-flexbox;display:flex;width:40%}.tiny-query-builder .custom-rule-value-editor>div{width:100%}.tiny-query-builder .custom-rule-value-editor_multi{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}.tiny-query-builder .custom-rule-value-editor_multi-item{width:50%}.tiny-query-builder .custom-rule-value-editor_multi-item>div{width:100%}.tiny-query-builder .rule-item--wrap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 10px}.tiny-query-builder .group-button{margin-left:10px}.tiny-query-builder .rule-value-list-item{height:100%}.tiny-query-builder .rule-group--wrap{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.tiny-query-builder .rule-lock{margin-left:10px}.tiny-query-builder .ruleGroup-notToggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#1890ff}.tiny-query-builder .ruleGroup-notToggle input{margin-right:2px}.tiny-query-builder .query-builder-select{min-width:20%;display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-query-builder .query-builder-select>div{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-query-builder .betweenRules{max-width:20%;margin-bottom:12px}.tiny-query-builder .queryBuilder-branches .ruleGroup{padding-left:40px}.tiny-query-builder .queryBuilder-branches .ruleGroup-body{padding:0 12px}.tiny-query-builder .queryBuilder-branches .ruleGroup-header{margin-left:10px}.tiny-query-builder .queryBuilder-branches .ruleGroup .ruleGroup{border:1px solid #e8ebef}.tiny-query-builder .queryBuilder-branches .ruleGroup .ruleGroup .group-rule-branches{top:12px}.tiny-query-builder .queryBuilder-branches .ruleGroup .ruleGroup .ruleGroup-header{margin-left:6px}.tiny-query-builder .queryBuilder-branches .ruleGroup .ruleGroup .combinator-branches{top:14px;right:-12px;bottom:14px}.tiny-query-builder .queryBuilder-branches .ruleGroup .ruleGroup .ruleGroup-body{padding:12px 8px 0}.tiny-query-builder .display-only-field .rule--wrap>.rule-operators,.tiny-query-builder .display-only-field .rule--wrap>.rule-value,.tiny-query-builder .display-only-field .rule--wrap>.rule-value-editor,.tiny-query-builder .display-only-field .rule--wrap>.rule-valueSource{display:none}.tiny-query-builder .display-only-field .rule-fields{max-width:none}