flowstudio/src/styles/sheet.css

Enterprise Flow Designer

/* SlidingDialog.css */
/* .dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
} */

.dialog-content {
    /* background: white; */
    position: fixed;
    /* width: 300px; */
    height: 100%;
    overflow: auto;
    box-shadow: 0 10px 38px -10px rgba(0, 0, 0, 0.35);
    outline: none;
  }
  
  .dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }
  
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  @keyframes slideOutToRight {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  
  @keyframes slideInFromLeft {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  @keyframes slideOutToLeft {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes slideInFromTop {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  @keyframes slideOutToTop {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
  
  @keyframes slideInFromBottom {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  @keyframes slideOutToBottom {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
  
  .slide-in-right {
    top: 0;
    right: 0;
    animation: slideInFromRight 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-out-right {
    top: 0;
    right: 0;
    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-in-left {
    top: 0;
    left: 0;
    animation: slideInFromLeft 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-out-left {
    top: 0;
    left: 0;
    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-in-top {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: slideInFromTop 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-out-top {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-in-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: slideInFromBottom 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .slide-out-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }