dev/scss/main/buttongroup.scss

@charset "utf-8";
@import "../util";

/*
 * Define the base layout of horizontal button groups
 */
.button-group {
  font-size: 0;
  > span {
    cursor: pointer;
  }
  
  &.button-panel,
  &.operators {
    > span,
    input[type=submit],  
    a {
      @include choose-item;
      box-shadow:   $choose-box-shadow;
      font-size:    9pt;
      font-weight:  normal;
      line-height:  1.5em;
      padding:      0 4px;
      display:      inline-block;
      border-style: solid;
      border-width: $border-size 0;

      &:hover {
	      @include choose-hover;
      }

      &:first-child {
	      border: {
	        left-width:          $border-size;
	        top-left-radius:     $standard-border-radius;
	        bottom-left-radius:  $standard-border-radius;
	      }
      }

      &:last-child {
	      border: {
	        right-width:         $border-size;
	        top-right-radius:    $standard-border-radius;
	        bottom-right-radius: $standard-border-radius;
        }
      }
    }
  }

  &.button-panel {
    > span,
    input[type=submit],  
    a {
      margin-top: 0;
      width: auto;
      min-width: auto;

      > span.check {
        @include icon-font;
        width:      1em;
        display:    inline-block;
        text-align: left;

        &:not(.checked)::after {
          content: $fa-check;
        }

        &.checked::after {
          content: $fa-checked;
        }

        > span {
          @include blind;
        }
      }
    }
  }

  &.button-view {
    position:  absolute;
    display:   block;
    right:     0;
    top:       0;
    z-index:   20;
    margin:    0;
    padding:   0;
    width:     $right-view-distance;
    font-size: 10pt;
    color:     $nearly-white;

    > span:first-child {
      margin-top: $border-size
    }

    > span {
      display:         block !important;
      border-width:    0;
      text-decoration: none;
      text-align:      center;
      font-style:      normal;
      
      &.download::after {
	      content: $fa-download;
      }
      
      &.close::after {
	      content: $fa-close;
      }

      &.minimize::after {
	      content: $fa-minimize;
      }
      
      &.plugin::after {
	      content: $fa-plugin;        
      }
    }
  }
}


ul.menu.button-group-list {
  border-top-right-radius: 8px;
  position:   fixed;
  font-size:  10pt;
  left:       0;
  text-align: left;
  margin:     -1 * $border-size;
  margin-top: 0;

  > li:first-of-type {
	  border-top-right-radius: 5px;
  }
}

.button-icon {
  @include icon-font;
  line-height: 1.3;
  > span {
    @include blind;
  }
  &[data-icon]::after {
    content: attr(data-icon);
  }
}

.button-panel .button-icon {
  line-height: .7;
}