Contents

@use "variables" as *;

.kpop--frame.side-panel {
  --opening-animation: slide-in-right;
  --closing-animation: slide-out-right;
  --min-width: 30dvw;
  --max-width: 50dvw;
  --min-height: 100dvh;
  --max-height: 100dvh;

  margin-inline: auto 0;
  align-self: flex-end;

  @include mobile {
    & {
      --opening-animation: slide-in-bottom;
      --closing-animation: slide-out-bottom;
      --min-width: 100dvw;
      --max-width: 100dvw;
      --min-height: 30dvh;
      --max-height: calc(100dvh - 1.5rem);
    }
  }

  .kpop-modal {
    border-radius: 0;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes slide-out-bottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
katalyst-kpop-3.0.0.beta.6	app/assets/stylesheets/katalyst/kpop/_side_panel.scss
katalyst-kpop-3.0.0.beta.5	app/assets/stylesheets/katalyst/kpop/_side_panel.scss