Day 21: Notification 🤫

A notification component usually displays a message that communicates information to the user.

The component could be seen at the bottom left corner of the site.

A few notes about this notification component:

• CSS Variables are used for colors and spacing,
• the position: fixed declaration is used to stick the component to the bottom left of the screen,
• CSS animation is used to animate the notification,
• to respect the user preference for reduced motion, --transition-duration-xmas CSS variable is set to 0s (read more about using CSS Variables for reduced motion on a global scale).

The code:

<a class="advent-notification" href="#link">
  <p>Psst! Did you already check the Advent of the UI Components? 🤫</p>
</a>

.advent-notification {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --transition-duration-xmas1: .6s;
  --transition-duration-xmas2: .3s;
  --size-xmas: 1em;

  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-beta);

  max-width: 66%;
  padding: calc(var(--size-xmas) / 4) calc(var(--size-xmas) / 2);
  border: 1px solid var(--color-xmas-gamma);
  border-radius: calc(var(--size-xmas) / 4);

  position: fixed;
  bottom: var(--size-xmas);
  left: var(--size-xmas);
  z-index: 1;

  transform: translateX(calc(-100% - var(--size-xmas)));
  animation: show var(--transition-duration-xmas1) forwards var(--transition-duration-xmas2);
}

.advent-notification:hover,
.advent-notification:focus,
.advent-notification:active {
  background-color: var(--color-xmas-beta);
  color: var(--color-xmas-alpha);
}

.advent-notification p {
  margin: 0;
}

@keyframes show {
  0% {
    transform: translateX(calc(-100% - var(--size-xmas)));
  }
  90% {
    transform: translateX(calc(var(--size-xmas) / 4));
  }
  to {
    transform: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .advent-button {
    --transition-duration-xmas1: 0s;
    --transition-duration-xmas2: 0s;
  }
}