framework7/components/notification/notification-aurora.less

Full featured mobile HTML framework for building iOS & Android apps

.aurora {
  .notification {
    transition-duration: 450ms;
    transform: translate3d(0%, -200%, 0);
    &.modal-in {
      transform: translate3d(0%, 0%, 0);
      opacity: 1;
    }
    &.modal-out {
      transform: translate3d(0%, -200%, 0);
    }
  }

  .notification-icon {
    margin-right: 10px;
  }
  .notification-header + .notification-content {
    margin-top: 10px;
  }
  .notification-title-right-text {
    margin-right: 0px;
    margin-left: auto;
    + .notification-close-button {
      margin-left: 10px;
    }
  }
  .notification-close-button {
    font-size: 14px;
    width: 16px;
    height: 16px;
    opacity: 0.4;
    transition-duration: 300ms;
    &.active-state {
      transition-duration: 0ms;
      opacity: 0.6;
    }
    &:after {
      color: #000;
      content: 'notification_close_ios';
      font-size: 0.5em;
      line-height: 38px;
      width: 38px;
      height: 38px;
      margin-left: -19px;
      margin-top: -19px;
    }
  }
}