demosample/css/src/components/sidesheet.css

React components library project for CensaNext Design System

@keyframes sidesheet-open {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}

@keyframes sidesheet-close {
  from {
    right: 0;
  }
  to {
    right: -100%;
  }
}

@keyframes shift-right-spacing-3 {
  from {
    transform: translateX(calc(-1 * var(--spacing-3)));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes shift-left-spacing-3 {
  from {
    transform: translateX(var(--spacing-3));
  }
  to {
    transform: translateX(0);
  }
}

.Sidesheet {
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100vh;
  box-shadow: var(--shadow-l);
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.Sidesheet--open {
  visibility: visible;
}

.Sidesheet-animation--open {
  animation: sidesheet-open 240ms cubic-bezier(0, 0, 0.3, 1);
}

.Sidesheet-animation--close {
  animation: sidesheet-close 120ms cubic-bezier(0.4, 0.14, 1, 1);
  animation-fill-mode: forwards;
}

.Sidesheet-header {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-l);
  padding-right: var(--spacing-2);
}

.Sidesheet-header--withSeperator {
  border-bottom: var(--border);
}

.Sidesheet-body {
  padding: 0 var(--spacing-xl);
}

.Sidesheet-body--withMargin {
  margin-bottom: 80px;
}

.Sidesheet-footer {
  height: 80px;
}

.Sidesheet-footer--withSeperator {
  border-top: var(--border);
}

.Sidesheet-footer--stickToBottom {
  position: absolute;
  bottom: 0;
}

.Sidesheet-header--shiftRight {
  animation: shift-right-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.Sidesheet-header--shiftLeft {
  animation: shift-left-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
}