dev/scss/base/buttongroup.scss

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

/*
 * 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.choose-item;
      box-shadow:   choose.$choose-box-shadow;
      font-size:    9pt;
      font-weight:  normal;
      line-height:  1.5em;
      padding:      0 4px;
      display:      inline-block;
      border-style: solid;
      border-width: lengths.$border-size 0;

      &:not(.inactive):hover {
	@include choose.choose-hover;
        transition: none;
      }

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

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

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

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

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

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

        > span {
          @include mixins.blind;
        }
      }
    }
  }

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

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

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

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


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

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

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

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