@progressiveui/styles 10.30.0

package/scss/components/notification/_notification.scss

@@ -0,0 +1,480 @@
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../feature-flags" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../themes" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/focus-outline" as *;
+
+@function cssColor($color-variable) {
+  @return var(--cds-inverse-support-02, #fa4d56);
+}
+
+/// notification styles
+/// @access public
+/// @group notification
+
+@mixin notification {
+  .wfp--toast-notification {
+    box-sizing: border-box;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: initial;
+    border: 0;
+    display: flex;
+    @include breakpoint-down(md) {
+      width: 100%;
+    }
+    max-width: 28rem;
+    height: auto;
+    margin: 0.5rem 1rem 0.5rem 0;
+    padding: 0 0 0 0.875rem;
+    color: var(--cds-inverse-01, var(--ui-01));
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+
+    .#{$prefix}--toast-notification:first-child {
+      margin-top: 1rem;
+    }
+
+    .#{$prefix}--toast-notification__close-button {
+      outline: 2px solid transparent;
+      outline-offset: -2px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 3rem;
+      min-width: 3rem;
+      height: 3rem;
+      min-height: 3rem;
+      margin-left: auto;
+      padding: 0;
+      background-color: initial;
+      border: none;
+      cursor: pointer;
+      transition: outline 0.11s, background-color 0.11s;
+
+      .#{$prefix}--toast-notification__close-icon {
+        fill: var(--cds-inverse-01, var(--ui-01));
+      }
+    }
+
+    .#{$prefix}--toast-notification__icon {
+      flex-shrink: 0;
+      margin-top: 0.875rem;
+      margin-right: 0.875rem;
+    }
+
+    .#{$prefix}--toast-notification__details {
+      margin-right: 1rem;
+      color: var(--cds-inverse-01, var(--ui-01));
+      .#{$prefix}--toast-notification__title {
+        font-size: 0.875rem;
+        line-height: 1.29;
+        letter-spacing: 0.16px;
+        margin-top: 1rem;
+        font-weight: 600;
+        word-break: break-word;
+      }
+
+      .#{$prefix}--toast-notification__subtitle {
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.29;
+        letter-spacing: 0.16px;
+        margin-top: 0;
+        margin-bottom: 1.5rem;
+
+        word-break: break-word;
+      }
+
+      .#{$prefix}--toast-notification__caption {
+        font-size: var(--cds-body-short-font-size, 0.875rem);
+        font-weight: var(--cds-body-short-font-weight, 400);
+        line-height: var(--cds-body-short-line-height, 1.29);
+        letter-spacing: var(--cds-body-short-letter-spacing, 0.16px);
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  .#{$prefix}--toast-notification--info,
+  .#{$prefix}--toast-notification--info-square {
+    background: #393939;
+    border-left: 3px solid $action-default-fill-primary-default;
+  }
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button
+    .#{$prefix}--toast-notification__close-icon {
+    fill: #161616;
+  }
+
+  .#{$prefix}--toast-notification--info-square
+    .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--toast-notification--info {
+    fill: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info
+    .#{$prefix}--toast-notification__icon {
+    fill: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--toast-notification--warning-alt
+    .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--toast-notification--warning
+    .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification--warning
+    .#{$prefix}--toast-notification__icon {
+    fill: $support-warning-main;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt
+    .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning
+    .#{$prefix}--toast-notification__icon {
+    fill: $support-warning-main;
+  }
+
+  .#{$prefix}--toast-notification--success
+    .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification--success
+    .#{$prefix}--toast-notification__icon {
+    fill: $support-success-main;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success
+    .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success
+    .#{$prefix}--toast-notification__icon {
+    fill: $support-success-main;
+  }
+
+  .#{$prefix}--toast-notification--error {
+    background: var(--cds-inverse-02, #393939);
+    // border-left: 3px solid var(--cds-inverse-support-01, #fa4d56);
+    border-left: 3px solid $support-error-main;
+    color: $support-error-main;
+
+    .#{$prefix}--toast-notification__icon {
+      fill: currentColor;
+    }
+  }
+  .#{$prefix}--toast-notification--low-contrast {
+    .#{$prefix}--toast-notification__details {
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
+    background: $support-error-background;
+    border-left: 3px solid $support-error-main;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
+    background: var(--support-light-04);
+    border-left: 3px solid $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
+    background: $support-success-background;
+    border-left: 3px solid $support-success-main;
+  }
+
+  .#{$prefix}--toast-notification--success {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-success-main;
+  }
+
+  .#{$prefix}--toast-notification--warning,
+  .#{$prefix}--toast-notification--warning-alt {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-warning-main;
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning,
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
+    background: $support-warning-background;
+    border-left: 3px solid $support-warning-main;
+  }
+  .#{$prefix}--toast-notification:first-child {
+    margin-top: 1rem;
+  }
+  .#{$prefix}--toast-notification--warning,
+  .#{$prefix}--toast-notification--warning-alt {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-warning-main;
+  }
+
+  .#{$prefix}--inline-notification {
+    box-sizing: border-box;
+    padding: 0;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: initial;
+    border: 0;
+    position: relative;
+    display: flex;
+    //flex-wrap: wrap;
+    width: 100%;
+    min-width: 18rem;
+    max-width: 18rem;
+    height: auto;
+    min-height: 3rem;
+    margin: 1rem 0;
+    color: $text-body-default; // var(--cds-inverse-01, var(--ui-01));
+
+    .#{$prefix}--inline-notification__details {
+      display: flex;
+      flex-grow: 1;
+      margin: 0 1rem 0 1rem;
+
+      .#{$prefix}--inline-notification__icon {
+        flex-shrink: 0;
+        margin-top: 0.9475rem;
+        margin-right: 0.7rem;
+        margin-bottom: 0.875rem;
+      }
+
+      .#{$prefix}--inline-notification__text-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0.86rem 0;
+
+        .#{$prefix}--inline-notification__title {
+          font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+          font-weight: var(--cds-productive-heading-01-font-weight, 600);
+          line-height: var(--cds-productive-heading-01-line-height, 1.29);
+          letter-spacing: var(
+            --cds-productive-heading-01-letter-spacing,
+            0.16px
+          );
+          margin: 0 0.25rem 0rem 0; // TODO: Check margin-bottom
+        }
+
+        .#{$prefix}--inline-notification__subtitle {
+          font-size: var(--cds-body-short-font-size, 0.875rem);
+          font-weight: var(--cds-body-short-font-weight, 400);
+          line-height: 1.45; //var(--cds-body-short-line-height, 1.29);
+          letter-spacing: var(--cds-body-short-letter-spacing, 0.16px);
+          word-break: break-word;
+          margin-top: 0.1rem;
+        }
+      }
+    }
+
+    .#{$prefix}--inline-notification__action-button {
+      height: 2rem;
+      margin-bottom: 0.5rem;
+      margin-left: 2.5rem;
+      font-weight: 400;
+      color: var(--cds-inverse-link, #78a9ff);
+
+      .#{$prefix}--inline-notification__close-icon {
+        fill: var(--cds-inverse-01, var(--ui-01));
+      }
+    }
+  }
+
+  .#{$prefix}--inline-notification--info,
+  .#{$prefix}--inline-notification--info-square {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info,
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
+    background: $layer-primary; //var(--support-light-04);
+    border-left: 3px solid $action-default-fill-primary-default;
+  }
+  .#{$prefix}--inline-notification--info
+    .#{$prefix}--inline-notification__icon {
+    color: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--inline-notification--success,
+  .#{$prefix}--inline-notification--success-square {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-success-main;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success,
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success-square {
+    background: $support-success-background;
+    border-left: 3px solid $support-success-main;
+  }
+
+  .#{$prefix}--inline-notification--success
+    .#{$prefix}--inline-notification__icon {
+    color: $support-success-main;
+  }
+
+  .#{$prefix}--inline-notification--error,
+  .#{$prefix}--inline-notification--error-square {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-error-main;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error,
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error-square {
+    background: $support-error-background;
+    border-left: 3px solid $support-error-main;
+  }
+
+  .#{$prefix}--inline-notification--error
+    .#{$prefix}--inline-notification__icon {
+    color: $support-error-main;
+  }
+
+  .#{$prefix}--inline-notification--warning,
+  .#{$prefix}--inline-notification--warning-square {
+    background: var(--cds-inverse-02, #393939);
+    border-left: 3px solid $support-warning-main;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning,
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-square {
+    background: $support-warning-background;
+    border-left: 3px solid $support-warning-main;
+  }
+
+  .#{$prefix}--inline-notification--warning
+    .#{$prefix}--inline-notification__icon {
+    color: $support-warning-main;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast {
+    //color: #161616;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
+    color: $action-default-fill-primary-default;
+  }
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__action-button,
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__action-button:active {
+    color: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--inline-notification__close-button {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    min-width: 3rem;
+    max-width: 3rem;
+    height: 3rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
+  .#{$prefix}--inline-notification__close-button
+    .#{$prefix}--inline-notification__close-icon {
+    fill: $border-strong;
+  }
+
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__close-button
+    .#{$prefix}--inline-notification__close-icon {
+    fill: $border-strong;
+  }
+
+  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
+    background-color: transparent;
+  }
+
+  @media (min-width: 66rem) {
+    .#{$prefix}--inline-notification {
+      max-width: 46rem;
+    }
+  }
+
+  @media (min-width: 42rem) {
+    .#{$prefix}--inline-notification {
+      flex-wrap: nowrap;
+      max-width: 38rem;
+    }
+
+    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
+      margin: 0.5rem 0;
+    }
+
+    .#{$prefix}--inline-notification__close-button {
+      position: static;
+    }
+  }
+
+  .#{$prefix}--block-notification.#{$prefix}--inline-notification {
+    max-width: inherit;
+
+    .#{$prefix}--inline-notification__details {
+      display: grid;
+      // grid-template-columns: min-content 0.9fr;
+      grid-template-columns: 0fr 1fr;
+      grid-template-areas:
+        "icon name"
+        "icon subject";
+
+      @include breakpoint(md) {
+        grid-template-columns: 0fr 1fr 0fr;
+        grid-template-areas: "icon name subject";
+      }
+    }
+
+    .wfp--inline-notification__icon  {
+      grid-area: icon;
+    }
+
+    @include breakpoint(md) {
+      max-width: inherit;
+    }
+    width: 100%;
+    .#{$prefix}--inline-notification__text-wrapper {
+      flex-direction: column;
+      grid-area: name;
+    }
+    .#{$prefix}--inline-notification__actions-wrapper {
+      grid-area: subject;
+      display: flex;
+      > * {
+        margin-left: 0.5em;
+      }
+      > :first-child {
+        margin-left: 0;
+      }
+      .#{$prefix}--btn--tertiary {
+        //background: rgba(255, 255, 255, 0.2);
+      }
+      padding: 0 0 0.8em 0;
+      @include breakpoint(md) {
+        padding-top: 0.8em;
+        padding-left: 0.8em;
+        align-items: center;
+      }
+      /*padding: 0em 0.8em 0.8em 0.8em;
+      @include breakpoint(md) {
+        padding: 0.8em 0.8em 0.8em 0;
+      }*/
+      &.#{$prefix}--btn/*--ghost*/ {
+        margin: 0.5em 0.4em;
+      }
+    }
+  }
+}