sogo/UI/WebServerResources/scss/components/button/button.scss

$button-line-height: 25px !default;
$button-padding: 2px 6px 3px !default;

// Fab buttons
$button-fab-width: 56px !default;
$button-fab-height: 56px !default;
$button-fab-padding: 16px !default;

$button-fab-toast-offset: $button-fab-height * 0.75;

/**
 * Position a FAB button.
 */
@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  &.md-fab-#{$spot} {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: absolute;
  }
}

.md-button {

  user-select: none;
  position: relative; //for child absolute-positioned <canvas>

  outline: none;
  border: 0;
  padding: 6px;
  margin: 0;
  background: transparent;
  white-space: nowrap;

  text-align: center;

  // Always uppercase buttons
  text-transform: uppercase;
  font-weight: 500;
  font-style: inherit;
  font-variant: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  text-decoration: none;

  cursor: pointer;
  overflow: hidden;   // for ink containment

  transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
              transform $swift-ease-out-duration $swift-ease-out-timing-function;

  &.ng-hide {
    transition: none;
  }
;

  &.md-cornered {
    border-radius: 0;
  }

  &.md-icon {
    padding: 0;
    background: none;
  }

  &.md-raised {
    transform: translate3d(0, 0, 0);

    &:not([disabled]) {
      @extend .md-shadow-bottom-z-1;
    }
  }

  &.md-fab {

    @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
    @include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
    @include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
    @include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);

    z-index: $z-index-fab;

    width: $button-fab-width;
    height: $button-fab-height;

    border-radius: 50%;

    @extend .md-shadow-bottom-z-1;
    border-radius: 50%;
    overflow: hidden;

    transform: translate3d(0,0,0);

    transition: 0.2s linear;
    transition-property: transform, box-shadow;

    md-icon {
      line-height: $button-fab-height;
      margin-top: 0;
    }

  }

  &:not([disabled]) {
    &.md-raised,
    &.md-fab {
      &:focus,
      &:hover {
        transform: translate3d(0, -1px, 0);
        @extend .md-shadow-bottom-z-2;
      }
    }
  }
}

.md-toast-open-top {
  .md-button.md-fab-top-left,
  .md-button.md-fab-top-right {
    transform: translate3d(0, $button-fab-toast-offset, 0);
    &:not([disabled]) {
      &:focus,
      &:hover {
        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
      }
    }
  }
}
.md-toast-open-bottom {
  .md-button.md-fab-bottom-left,
  .md-button.md-fab-bottom-right {
    transform: translate3d(0, -$button-fab-toast-offset, 0);
    &:not([disabled]) {
      &:focus,
      &:hover {
        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
      }
    }
  }
}


.md-button-group {
  display: flex;
  flex: 1;
  width: 100%;
}
.md-button-group > .md-button {
  flex: 1;

  display: block;

  overflow: hidden;

  width: 0;

  border-width: 1px 0px 1px 1px;
  border-radius: 0;

  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:first-child {
    border-radius: 2px 0px 0px 2px;
  }
  &:last-child {
    border-right-width: 1px;
    border-radius: 0px 2px 2px 0px;
  }
}