bytedance-flowgram/apps/demo-fixed-layout-animation/src/components/node-render/index.less

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

.node-render {
  background: #fff;
  border: 1px solid rgba(6, 7, 9, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: auto;
  min-width: 200px;

  // Activated state - when node is selected/focused
  &-activated {
    border-color: #82a7fc;
  }

  // Dragging state - when node is being dragged
  &-dragging {
    opacity: 0.3;
  }

  // Block icon states - when showing order or regular block icons
  &-block-icon,
  &-block-order-icon {
    width: 260px;
  }

  // Hover effects for better UX
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  // Focus state for accessibility
  &:focus-within {
    outline: 2px solid #82a7fc;
    outline-offset: 2px;
  }

  .node-form {
    transition: opacity 1s ease-in-out;
  }
}

.node-render-before-render {
  max-height: 1px;

  .node-form {
    opacity: 0;
  }
}

.node-render-rendered {
  max-height: 1px;
  animation: node-rendered-transition 1s ease-out forwards;

  .node-form {
    opacity: 1;
  }
}

@keyframes node-rendered-transition {
  0% {
    max-height: 1px;
  }

  100% {
    max-height: 500px;
  }
}

.node-render-removed {
  max-height: 500px;
  animation: node-removed-transition 0.3s ease-out forwards;
  overflow: hidden;
  padding: 0 16px;
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

@keyframes node-removed-transition {
  0% {
    max-height: 500px;
    padding: 16px;
  }

  100% {
    max-height: 1px;
    padding: 0 16px;
  }
}

.node-render-border-transition {
  outline: 2px solid transparent;
  animation: node-border-appear-hide 0.8s ease-in-out forwards;
}

@keyframes node-border-appear-hide {
  0% {
    outline: 2px solid transparent;
  }

  50% {
    outline: 2px solid #82a7fc;
  }

  100% {
    outline: 2px solid transparent;
  }
}