oui-kit/lib/notification/oui-notification.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-notification {
  --notification-color: var(--light-text-color, white);
  --notification-background: rgb(56, 56, 56); // rgba(118, 118, 118, 1);
  --notification-border: none; // 1px solid #dddddd;
  // --notification-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --notification-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.25);
  --notification-shadow-hover: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --notification-text: white;
  --notification-error-background: rgb(87, 0, 0);
  --notification-error-text: rgb(253, 209, 209);
  --notification-error-shadow: 0 0 3px 1px rgba(253, 209, 209, 0.5);
  --notification-warn-background: rgb(66, 43, 0);
  --notification-warn-text: rgb(255, 210, 128);
  --notification-warn-shadow: 0 0 3px 1px rgba(255, 210, 128, 0.5);

  button {
    border: none;
    appearance: none;
    background: transparent;
    color: inherit;
    font-weight: normal;
  }

  &-container {
    display: grid;
    display: -ms-grid;
    position: fixed;
    top: -safe-top;
    right: -safe-right;
    isolation: isolate;
    padding: px(16);
    gap: px(8);
    pointer-events: none;
    width: px(380);
    max-width: 100%;
    z-index: -z-index-notification;

    @media -mobile {
      width: 100%;
    }
  }

  & {
    &-error {
      --notification-background: var(--notification-error-background);
      --notification-text: var(--notification-error-text);
      --notification-shadow: var(--notification-error-shadow);
    }

    &-warn {
      --notification-background: var(--notification-warn-background);
      --notification-text: var(--notification-warn-text);
      --notification-shadow: var(--notification-warn-shadow);
    }

    // border: 1px solid purple;
    pointer-events: initial;
    width: 100%;
    padding: px(12);
    background: var(--notification-background);
    color: var(--notification-text);
    box-shadow: var(--notification-shadow);
    border-radius: px(8);
    gap: px(8);
    cursor: default;

    &._has_action {
      cursor: unquote("pointer");

      &:hover {
        --notification-shadow: var(--notification-shadow-hover);
      }
    }

    use: stack-x;

    &-body {
      position: relative;
      use: stack-y;
      use: stack-item-grow;
      gap: px(8);
      margin-y: 2;
    }

    &-icon {
      display: flex;
      padding: 0;
      margin: 0 !important;
      padding-left: 2;
      padding-right: 4;

      svg {
        padding: 0;
        margin: 0;
        size: 24;
      }
    }

    &-header {
      use: stack-x;
      gap: px(16);
    }

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

    &-close {
      position: absolute;
      right: 0;
      top: 0;
      // color: white !important;
      cursor: unquote("pointer");
      opacity: 0.5;

      button {
        padding: 0;
        border: none;
      }

      svg {
        size: 1em;
      }

      &:hover {
        opacity: 1;
      }
    }

    &-message {
      white-space: pre-line;
    }

    &-feedback {
      display: flex;
      justify-content: right;
      margin-top: px(8);
      gap: px(8);

      button {
        border: px(1) solid var(--notification-text); // rgba(255, 255, 255, 0.6);
        border-radius: px(4);
        padding: px(4) px(8);
        font-weight: 500;

        &:hover {
          // border-color: white !important;
          // color: white !important;
          // background-color: rgba(255, 255, 255, 0.2) !important;
          background-color: rgba(255, 255, 255, 0.2) !important;
        }
      }
    }
  }

  &-enter-active, &-leave-active {
    transition: all 500ms ease-in-out;
    opacity: 1;
  }

  // &-enter-from {
  // transform: translateY(-100%);
  // }

  // &-leave-to {
  // transform: translateY(100%);
  // }
  &-enter-from, &-leave-to {
    transform: translateX(90%);
    opacity: 0;
  }
}