the-query-bar

index.jade

h5 single clause
.query
  .clause
    .key foo
    .value bar
    
h5 multiple clauses (implicit $and)
.query
  .clause
    .key foo
    .value 1
  .clause
    .key bar
    .value hello
  .clause
    .key baz
    .value false
    
    
h5 multiple clauses (explicit $and)
.query.and
  .clause
    .key foo
    .value 1
  .clause
    .key bar
    .value hello
  .clause
    .key baz
    .value false
    
h5 object as value
.query
  .clause
    .key foo
    .value
      .object
        .clause
          .key bar
          .value 1
        .clause
          .key baz
          .value 1


h5 $in value, $nin value
.query
  .clause
    .key key
    .in 
      .value foo
      .value bar
      .value baz

  .clause
    .key tag
    .nin 
      .value urgent
      .value new
      .value empty
      
h5 $in with objects instead of leaf values
.query
  .clause
    .key user
    .in
      .object
        .clause 
          .key name
          .value John
        .clause
          .key age
          .value 50
      .object
        .clause 
          .key name
          .value Mary
        .clause
          .key age
          .value 41
 
h5 root-level $or with single object containing 2 clauses
.query.or
  .clause
    .key foo
    .value 1
  .clause
    .key bar
    .value 1


h5 explicit root-level $and with single object containing 2 clauses
.query.and
  .clause
    .key foo
    .value 1
  .clause
    .key bar
    .value 1
    
        
h5 root-level $or with multiple (implicit $and) objects
.query.or
  .object
    .clause
      .key foo
      .value 1
    .clause
      .key bar
      .value 1
        
  .object
    .clause
      .key foo
      .value 2
    .clause
      .key bar
      .value 2
      
      
h5 root-level $or with multiple (explicit $and) objects
.query.or
  .and
    .clause
      .key foo
      .value 1
    .clause
      .key bar
      .value 1
        
  .and
    .clause
      .key foo
      .value 2
    .clause
      .key bar
      .value 2
        

h5 root-level (implicit) $and with multiple $or clauses
.query
  
  .or
    .clause
      .key a
      .value 1
    .clause
      .key b
      .value 1

  .or
    .clause
      .key c
      .value 1
    .clause
      .key d
      .value 1



h5 root-level (explicit) $and with multiple $or clauses
.query.and
  
  .or
    .clause
      .key a
      .value 1
    .clause
      .key b
      .value 1

  .or
    .clause
      .key c
      .value 1
    .clause
      .key d
      .value 1
        
        
h5 really crazy nested query

.query.and
  .or
    .and
      .object
        .clause
          .key a
          .value 1
        .clause 
          .key b
          .value 1
      .object
        .clause 
          .key c
          .value 1
    
  .or
    .clause
      .key d
      .value 1
  
  
h5 negation

.query
  .not 
    .clause 
      .key foo
      .value bar


br
br
br

        


      
      

style.less

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

@blue: #2577de;
@green: #029e9d;
@orange: #d99546;
@purple: #5e65a9;
@gray: #d0d8e2;

h5 {
  margin-left: 20px;
  margin-top: 20px;
}

:focus {
  outline: none;
}

.pill-left {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  padding-left: 13px;
}

.pill-right {
  border-top-right-radius: 23px;
  border-bottom-right-radius: 23px;
  padding-right: 13px;
}

.pill {
  .pill-left;
  .pill-right;
}

.object {
  .flex;

  border-radius: 6px;
  margin: 0 5px;
  padding: 0 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.query {
  &:extend(.object);
  div { // all divs inside must be same height
    height: 34px;
  }

  background-color: @gray;
  margin: 0 20px;
  padding: 10px;
  font-family: "Source Sans Pro";
  font-size: 16px;
  color: white;
}

.flex {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.gray-border {
  border: 1px solid @gray;
}

.operator {
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  padding: 0 6px 0 4px;
}

.leaf {
  padding: 0 10px;
  background-color: @blue;
  .gray-border;
}

.clause {
  .flex;
  &:not(:last-child) {
    margin-right: 5px;
  }
}

.key {
  .flex;
  .leaf;
  .pill-left;

}

.value {
  .flex;
  .leaf;
  margin-left: -1px;
  
  &:last-child {
    .pill-right;
  }
}

.varray {  // value arrays like $in, $nin
  .value;
  
  & > .value {
    &:extend(.value all);
    background-color: @purple;
  }
  
  & > .value:last-child {
    border-radius: 0;
  }
  
  margin-right: 0;
  padding: 0;

  .object {
    height: 34px;
    border-radius: 0px;
    background: none;
    margin: 0;
    margin-right: -1px;
    padding: 0 10px;
    .gray-border;
  }
  
  &:before {
    .operator;
  }
 
}

.in {
  &:extend(.varray all);
  &:before {
    content: "in";
  }
}
.nin {
  &:extend(.varray all);
  &:before {
    content: "nin";
  }
}


.logical {  // logical objects like $or, $and, $nor, $not
  &:extend(.object);
  
  &:before {
    .operator;
  }
}

.or {
  &:extend(.logical all);
  &:before {
    content: "or"
  }
}

.and {
  &:extend(.logical all);
  &:before {
    content: "and"
  }
}

.not {
  &:extend(.logical all);
  &:before {
    content: "not"
  }
}

the-query-bar.markdown

the-query-bar

query pill layout

A Pen by Thomas Rückstieß on CodePen.

License.