@c8y/style/styles/components/navigation-and-layout/cards/_card-flip.less

Styles for Cumulocity IoT applications

/**
 * Card Flip - Flip animation container for cards
 *
 * Note: Uses @component-background-default for backgrounds.
 *
 * Intentionally hardcoded values:
 * - Transition durations (0.6s): Animation timing for flip effect
 * - Transform values (180deg, -180deg, 800px): 3D perspective and rotation angles
 * - Percentages (100%): Layout
 * - Z-index values (1, 3): Stacking order
 * - Box-shadow values: Shadow effects for 3D appearance
 * - RGBA values: Transparency in shadows
 */

.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 rgba(@black, (10 / 100));

        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 {
    perspective: 800px;

    .card-front,
    .card-back {
      transform-style: preserve-3d;
    }

    .card-back {
      display: block;
    }

    &.flipped {
      .card-front {
        position: relative;
        transform: rotateY(-180deg);
      }
      .card-back {
        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%;
        }
      }
    }
  }
}