ionic-angular/components/fab/fab.scss

@import "../../themes/ionic.globals";

// Floating Action Buttons
// --------------------------------------------------

/// @prop - Width and height of the FAB button
$fab-size:                              56px !default;

/// @prop - Width and height of the FAB button mini
$fab-mini-size:                         40px !default;

/// @prop - Margin of the FAB Container
$fab-content-margin:                    10px !default;

/// @prop - Margin of the FAB List
$fab-list-margin:                       10px !default;

/// @prop - Background color of the button in a list
$fab-list-button-background-color:      #f4f4f4 !default;


.fab {
  @include text-align(center);
  @include appearance(none);
  @include border-radius(50%);

  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;

  width: $fab-size;
  height: $fab-size;

  font-size: 14px;
  line-height: $fab-size;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color, opacity 100ms linear;

  background-clip: padding-box;
  font-kerning: none;
  user-select: none;

  contain: strict;
}

.fab ion-icon {
  flex: 1;

  font-size: 2.4rem;
}

// FAB mini
// --------------------------------------------------

.fab[mini] {
  @include margin(($fab-size - $fab-mini-size) / 2);

  width: $fab-mini-size;
  height: $fab-mini-size;

  line-height: $fab-mini-size;
}

.fab[mini] .fab-close-icon {
  line-height: $fab-mini-size;
}


// FAB container
// --------------------------------------------------

ion-fab {
  position: absolute;
  z-index: $z-index-fixed-content;

  &[center] {
    @include position(null, null, null, 50%);
    @include margin-horizontal(-$fab-size / 2, null);
  }

  &[middle] {
    @include margin(-$fab-size / 2, null, null, null);

    top: 50%;
  }

  &[top] {
    top: $fab-content-margin;
  }

  &[right] {
    // scss-lint:disable PropertySpelling
    @include multi-dir() {
      right: $fab-content-margin;
    }

    @include multi-dir() {
      right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
      right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
    }
  }

  &[end] {
    @include position-horizontal(null, $fab-content-margin);
    @include safe-position-horizontal(null, $fab-content-margin);
  }

  &[bottom] {
    bottom: $fab-content-margin;
  }

  &[left] {
    // scss-lint:disable PropertySpelling
    @include multi-dir() {
      left: $fab-content-margin;
    }

    @include multi-dir() {
      left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
      left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
    }
  }

  &[start] {
    @include position-horizontal($fab-content-margin, null);
    @include safe-position-horizontal($fab-content-margin, null);
  }

  &[top][edge] {
    top: -$fab-size / 2;
  }

  &[bottom][edge] {
    bottom: -$fab-size / 2;
  }
}


// FAB list (speed dial)
// --------------------------------------------------

ion-fab-list {
  @include margin($fab-size + $fab-list-margin, 0);

  position: absolute;
  top: 0;
  display: none;

  flex-direction: column;
  align-items: center;

  min-width: $fab-size;
  min-height: $fab-size;
}

.fab-in-list {
  @include margin(8px, 0);

  width: $fab-mini-size;
  height: $fab-mini-size;

  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}

.fab-in-list.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

ion-fab-list[side=left] .fab-in-list,
ion-fab-list[side=right] .fab-in-list {
  @include margin(0, 8px);
}

ion-fab-list[side=top] {
  top: auto;
  bottom: 0;

  flex-direction: column-reverse;
}

ion-fab-list[side=left] {
  @include margin(0, $fab-size + $fab-list-margin);
  @include position-horizontal(null, 0);

  flex-direction: row-reverse;
}

ion-fab-list[side=right] {
  @include margin(0, $fab-size + $fab-list-margin);
  @include position(null, null, null, 0);

  flex-direction: row;
}


// FAB animation
// --------------------------------------------------

.fab-list-active {
  display: flex;
}

.fab-close-icon {
  @include position(0, 0, null, 0);

  position: absolute;

  line-height: $fab-size;
  opacity: 0;
  transform: scale(.4) rotateZ(-45deg);
  transition: all ease-in-out 300ms;
  transition-property: transform, opacity;
}

.fab .button-inner {
  transition: all ease-in-out 300ms;
  transition-property: transform, opacity;
}

.fab-close-active .fab-close-icon {
  opacity: 1;
  transform: scale(1) rotateZ(0deg);
}

.fab-close-active .button-inner {
  opacity: 0;
  transform: scale(.4) rotateZ(45deg);
}