thingsboard/ui-ngx/src/app/shared/components/fab-toolbar.component.scss

/**
 * Copyright © 2016-2021 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
$font-size:   10px !default;
@function rem($multiplier) {
  @return $multiplier * $font-size;
}

$button-fab-width: rem(5.600) !default;
$button-fab-height: rem(5.600) !default;
$button-fab-padding: rem(1.60) !default;
$icon-button-margin: rem(0.600) !default;
$z-index-fab: 20 !default;

$swift-ease-in-duration: 0.3s !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
  #{$ltr-prop}: $value;
  [dir=rtl] & {
    #{$ltr-prop}: $reset-value;
    #{$rtl-prop}: $value;
  }
}

@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  &.mat-fab-#{$spot} {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: absolute;
  }
}

@mixin fab-all-positions() {
  @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);
}

mat-fab-toolbar {
  $icon-delay: 200ms;
  @include fab-all-positions();
  display: block;

  .mat-fab-toolbar-wrapper {
    display: block;
    position: relative;
    overflow: hidden;

    height: $button-fab-width + ($icon-button-margin * 2);
  }

  mat-fab-trigger {
    position: absolute;
    z-index: $z-index-fab;

    button {
      overflow: visible !important;
      opacity: .5;
    }

    .mat-fab-toolbar-background {
      display: block;
      position: absolute;
      z-index: $z-index-fab + 1;
      opacity: 1;
    }

    mat-icon {
      position: relative;
      z-index: $z-index-fab + 2;

      opacity: 1;

    }

  }

  &.mat-left {
    mat-fab-trigger {
      @include rtl-prop(right, left, 0, auto);
    }

    .mat-toolbar-tools {
      flex-direction: row-reverse;

      > .mat-button:first-child {
        @include rtl-prop(margin-right, margin-left, 0.6rem, auto)
      }

      > .mat-button:first-child {
        @include rtl-prop(margin-left, margin-right, -0.8rem, auto);
      }


      > .mat-button:last-child {
        @include rtl-prop(margin-right, margin-left, 8px, auto);
      }

    }
  }

  &.mat-right {
    mat-fab-trigger {
      @include rtl-prop(left, right, 0, auto);
    }

    .mat-toolbar-tools {
      flex-direction: row;
    }
  }

  mat-toolbar {
    padding: 0 !important;
    background-color: transparent !important;
    pointer-events: none;
    position: relative;
    z-index: $z-index-fab + 3;

    .mat-toolbar-tools {
      padding: 0 20px !important;
      margin-top: 3px;
    }

    .mat-fab-action-item {
      opacity: 0;
      transform: scale(0);
    }
  }

  &.mat-is-open {
    mat-fab-trigger > button {
      box-shadow: none;
      opacity: 1;

      mat-icon {
        opacity: 0;
      }
    }

    .mat-fab-action-item {
      opacity: 1;
      transform: scale(1);
    }
  }

  &.mat-animation {
    mat-fab-trigger {
      button {
        transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
      }
      .mat-fab-toolbar-background {
        transition: $swift-ease-in;
      }
      mat-icon {
        transition: all $icon-delay ease-in;
      }
    }
    mat-toolbar {
      .mat-fab-action-item {
        transition: $swift-ease-in;
        transition-duration: $swift-ease-in-duration / 2;
      }
    }
    &.mat-is-open {
      mat-fab-trigger > button {
        transition: opacity .3s cubic-bezier(.55, 0, .55, .2);
      }
    }
  }
}