@react-awesome-query-builder/antd/css/fixes.css

User-friendly query builder for React. AntDesign widgets

.qb-compact {
  --item-offset-left: 10px;
  --item-offset: 5px;
  --rulegroup-offset-left: 10px;
  --rulegroup-offset: 5px;
  --rule-padding: 5px;
  --rule-parts-distance: 5px;
  --drag-offset-right: 5px;
  --rule-group-actions-offset-left: 5px;
}

.qb-dark {
  --rule-background: rgba(83, 83, 83, 0.3490196078);
  --rule-border-color: transparent;
  --rulegroup-background: rgba(143, 143, 143, 0.6392156863);
  --rulegroup-border-color: rgba(143, 143, 143, 0.6392156863);
  --rulegroupext-background: rgba(143, 143, 143, 0.6392156863);
  --rulegroupext-border-color: rgba(143, 143, 143, 0.6392156863);
  --group-border-color: rgba(143, 143, 143, 0.6392156863);
  --group-background: rgba(62, 62, 62, 0.4705882353);
  --switch-border-color: rgba(143, 143, 143, 0.6392156863);
  --switch-background: rgba(62, 62, 62, 0.4705882353);
  --case-border-color: rgba(143, 143, 143, 0.6392156863);
  --case-background: rgba(62, 62, 62, 0.4705882353);
  --main-text-color: white;
}

/* don't trigger tooltips during drag-n-drop */
body.qb-dragging {
  /* v4 */
  /* v5 */
}
body.qb-dragging .ant-tooltip {
  display: none;
}
body.qb-dragging .ant-popover {
  display: none;
}

.query-builder .group--conjunctions > .ant-btn-group {
  border-radius: var(--conjunctions-radius, var(--item-radius, 5px));
  overflow: hidden;
}
.query-builder .group--header:hover .group--conjunctions > .ant-btn-group {
  overflow: visible;
}

/* slider */
.query-builder {
  /* v4 fix */
}
.query-builder .ant-tooltip-inner {
  min-height: 18px;
}
.query-builder .widget--widget .ant-slider {
  margin-bottom: 4px !important;
  margin-top: 4px;
}
.query-builder .widget--widget .ant-slider.ant-slider-horizontal.ant-slider-with-marks {
  margin-bottom: 10px !important;
  margin-left: 10px;
  margin-top: 4px;
}
.query-builder .widget--widget .ant-slider-track {
  visibility: visible !important;
}

.qb-compact {
  /* todo */
}

/* tree v4 ? */
.query-builder .ant-select-tree-dropdown > div[role=listbox] {
  outline: none;
}
.query-builder ul.ant-select-selection__rendered {
  margin-right: 11px;
}

/* for antd v4 default is 32 - too big */
.query-builder .ant-select-item {
  min-height: 22px;
}

/* should be outside of .query-builder */
.customSelectOption {
  color: var(--custom-select-option-color, lightcoral);
}

.query-builder .widget--valuesrc, .query-builder .rule--fieldsrc {
  vertical-align: middle;
}
.query-builder .widget--valuesrc .anticon, .query-builder .rule--fieldsrc .anticon {
  height: 100%;
}
.query-builder .widget--valuesrc .anticon svg, .query-builder .rule--fieldsrc .anticon svg {
  height: 100%;
}
.query-builder .widget--valuesrc span .anticon-ellipsis, .query-builder .rule--fieldsrc span .anticon-ellipsis {
  transform: rotate(90deg);
}
.query-builder .widget--valuesrc {
  margin-left: 3px;
  margin-right: 3px;
}
.query-builder .rule--value .rule--widget .widget--valuesrc {
  margin-top: 2px;
}
.query-builder .rule--fieldsrc {
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 4px;
}
.query-builder .rule--widget--BOOLEAN {
  height: 100%;
  display: flex;
}
.query-builder .rule--widget--BOOLEAN .widget--widget {
  align-self: center;
}