twindy/src/ui/notification.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

@require "../mixins";

notification-text = Var(--notification-text, -gray-900);
notification-background = Var(--notification-background, rgba(255, 255, 255, 0.98));

.tw-notification-container {
  position: absolute;
  top: -safe-top;
  right: -safe-right;
  padding: 16;
  space-y: 8;
  pointer-events: none;

  @media -media-desktop {
    width: 480;
  }

  @media -media-mobile {
    left: -safe-left;
    bottom: 0;
    padding-bottom: -safe-bottom;
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

.tw-notification {
  pointer-events: initial;
  width: 100%;
  padding: 12;
  background: notification-background;
  color: notification-text;
  border-radius: lg;
  space-y: 8;

  &-header {
    stack-x: 16;
  }

  &-title {
    font-weight: medium;
    use: stack-item-grow;
  }

  button {
    cursor: pointer;

    &:hover {
      opacity: 80%;
    }
  }
}

.tw-notification-enter-active, .tw-notification-leave-active {
  transition: all 200ms ease-in-out;
  opacity: 1;
}

.tw-notification-enter-from, .tw-notification-leave-to {
  transform: translateX(100%);
  opacity: 0;
}