packages/styles/scss/components/_notification.scss

   1 @use "sass:map";
   2
   3 .notifications-container {
   4         position: fixed;
   5         inset-block-end: calc(em(24) + env(safe-area-inset-bottom));
   6         inset-inline-start: 50%;
   7         z-index: map.get($z-indexes, 'notifications');
   8         transform: translateX(-50%);
   9         filter: drop-shadow(var(--shadow-lifted));
  10
  11         @at-root {
  12                 [dir='rtl'] & {
  13                         transform: translateX(50%);
  14                 }
  15         }
  16
  17         &--shifted {
  18                 inset-block-end: calc(var(--shift-custom-y) + env(safe-area-inset-bottom));
  19         }
  20 }
  21
  22 .notification {
  23         position: absolute;
  24         display: flex;
  25         inset-block-end: var(--top-custom);
  26         align-items: center;
  27         overflow: hidden;
  28         border-radius: var(--border-radius-lg);
  29         background-color: var(--background-invert);
  30         color: var(--text-invert);
  31         inline-size: max-content;
  32         max-inline-size: min(#{em(400)}, calc(100vw - 2em));
  33         padding-block: em(8);
  34         padding-inline: em(12) em(4);
  35         transform: translateX(-50%);
  36         transition: inset-block-end 0.35s easing(ease-out-quad);
  37
  38         @at-root {
  39                 [dir='rtl'] & {
  40                         transform: translateX(50%);
  41                 }
  42         }
  43
  44         .button {
  45                 --button-default-text-color: inherit;
  46                 --button-hover-text-color: inherit;
  47                 --button-active-text-color: inherit;
  48
  49                 margin-block: em(-6);
  50         }
  51
  52         .link {
  53                 color: inherit;
  54         }
  55
  56         &__icon {
  57                 margin-inline: 0 em(8);
  58                 flex-shrink: 0;
  59         }
  60
  61         &__content {
  62                 display: flex;
  63                 align-items: center;
  64                 padding-inline-end: em(8);
  65                 word-break: break-word;
  66                 hyphens: auto;
  67
  68                 > span {
  69                         word-break: break-word;
  70                         hyphens: auto;
  71                 }
  72
  73                 .notification__button {
  74                         white-space: nowrap;
  75                         align-self: center;
  76                         margin-inline: em(8) em(-6);
  77                         flex-shrink: 0;
  78
  79                         // spacing between two buttons
  80                         & + & {
  81                                 margin-inline-start: em(2);
  82                         }
  83                 }
  84
  85                 .circle-loader {
  86                         // make sure the loader is the last child or 2nd to last in case
  87                         // the "loading" text for screen readers is added
  88
  89                         flex-shrink: 0;
  90
  91                         &:last-child,
  92                         &:nth-last-child(2) {
  93                                 margin-inline-start: em(8);
  94                         }
  95                 }
  96
  97                 .notification__button + .circle-loader {
  98                         margin-inline-start: em(16);
  99                 }
 100         }
 101
 102         &:not(#{&}--has-close-button) &__content {
 103                 .button {
 104                         margin-inline-end: em(-8);
 105                 }
 106         }
 107
 108         &__close-button {
 109                 flex-shrink: 0;
 110         }
 111
 112         &--in {
 113                 animation-duration: 0.35s;
 114                 animation-fill-mode: both;
 115                 animation-timing-function: easing(ease-in-out);
 116                 animation-name: anime-notification-in;
 117         }
 118
 119         &--out {
 120                 animation-duration: 0.3s;
 121                 animation-fill-mode: both;
 122                 animation-timing-function: easing(ease-in-out);
 123                 animation-name: anime-notification-out;
 124         }
 125
 126         &--out-duplicate {
 127                 animation-duration: 0.3s;
 128                 animation-fill-mode: both;
 129                 animation-timing-function: easing(ease-in-out);
 130                 animation-name: anime-notification-out-duplicate;
 131         }
 132
 133         &--error,
 134         &--warning {
 135                 background-color: var(--signal-danger);
 136                 color: var(--signal-danger-contrast);
 137         }
 138 }
 139
 140 @keyframes anime-notification-in {
 141         0% {
 142                 opacity: 0;
 143                 transform: translateY(60%);
 144         }
 145
 146         100% {
 147                 opacity: 1;
 148                 transform: translateY(0);
 149         }
 150 }
 151
 152 @keyframes anime-notification-out {
 153         0% {
 154                 opacity: 1;
 155                 transform: translateY(0);
 156         }
 157
 158         100% {
 159                 opacity: 0;
 160                 transform: translateY(-20%);
 161         }
 162 }
 163
 164 @keyframes anime-notification-out-duplicate {
 165         0% {
 166                 opacity: 1;
 167                 transform: translateY(0);
 168         }
 169
 170         100% {
 171                 opacity: 0;
 172                 transform: translateY(0);
 173         }
 174 }
 175
 176 .global-loader {
 177         z-index: map.get($z-indexes, 'notifications');
 178 }