dev/scss/main/resultinfo.scss

@charset "utf-8";
@use "../util";
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";

/**
 * Rules applicable for the result panel
 */

// TODO: This should be moved to panel/result

#resultinfo {
  clear:       both;
  text-align:  right;
  line-height: 1.5em;
  min-height:  1.5em;
  margin-top:  .4em;
  font-size:   10pt;

  p.found {
    display:    inline;
    padding:    0;
    margin:     0;
    text-align: right;
  }

  /*
   * TODO:
   *   This rule should not be dependent on
   *   whether something is found or not,
   *   but whether #search contains a result,
   *   e.g. when a result view is open in the
   *   result panel. This should probably be
   *   indicated by a class on the button group
   *   rather than a class on the resultinfo.
   */
  &.found {
    position:      relative;
    margin-bottom: 0px;

    .button-group > span {
      margin-bottom:       0;
      border-bottom-width: 0;
      box-shadow:          none;

      &:first-child {
        border-bottom-left-radius: 0;
      }

      &:last-child {
        border-bottom-right-radius: 0;
      }   
    }
  }
}


div.result.panel .view {
  border:           1px solid colors.$kwic-border;
  background-color: colors.$dark-orange;
}


// Specify result button group layout
.result.button-group.button-panel {
  display:        inline-block;
  width:          auto;
  vertical-align: bottom;
  line-height:    1.5em;

  > span {
    line-height:  1.5em;
    border-width: lengths.$result-border-size 0;

    &:first-child {
      border-left-width: lengths.$result-border-size;
    }

    &:last-child {
      border-right-width: lengths.$result-border-size;
    }
  }
}


#total-results {
  color:       colors.$light-green;
  font-weight: bold;
}


.no-results {
  margin:     0 auto;
  text-align: center;
  code {
    font-weight: bold;
  }
}


// Define icons for result buttons
.button-icon {

  // TODO:
  //   Add icon via data-icon
  &.align.left::after {
    content: icons.$fa-left-align;
  }
  &.align.right::after {
    content: icons.$fa-right-align;
  }
  &.align.center::after {
    content: icons.$fa-center-align;
  }
  &.show-kq::after {
    content: icons.$fa-code;
  }
}