@c8y/style/styles/_card-flip.less

Styles for Cumulocity IoT applications

.card-flip-container {
  display: flex;
  width: 100%;
  transition: transform 0.6s;
  &.ng-animate {
    z-index: 3;
  }
  > .card-flip {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    .card-front,
    .card-back {
      position: absolute;
      width: 100%;
      background-color: @component-background-default;
      transition: transform 0.6s;

      backface-visibility: hidden;
    }
    .card-front {
      position: relative;
      text-align: center;
    }
    .card-back {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      display: none;
      transform: rotateY(180deg);
    }
    &.flipped-add,
    &.flipped-remove {
      perspective: 800px;
      .card-front,
      .card-back {
        box-shadow: 0 2px 4px 1px fade(@black, 10%);

        transform-style: preserve-3d;
        .card-inner-scroll {
          overflow-y: hidden;
        }
      }
      .card-front {
        position: relative;
      }
      .card-back {
        display: block;
      }
    }
  }
}

.interact-grid .card-flip-container {
  > .card-flip.flipped {
    .card-front {
      position: relative;
      transform: rotateY(-180deg);
    }
    .card-back {
      display: block;
      transform: rotateY(0);
      [class^='col-sm-'],
      [class*=' col-sm'],
      [class^='col-md-'],
      [class*=' col-md'],
      [class^='col-lg-'],
      [class*=' col-lg'] {
        float: none;
        width: 100%;
      }
    }
  }
}