@dnb/eufemia/components/help-button/style/dnb-help-button-inline.css

DNB Eufemia Design System UI Library

/*
 * HelpButton component
 *
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-help-button.dnb-help-button__inline--open {
  --border-color: var(--color-emerald-green);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}

.dnb-help-button__inline svg {
  will-change: transform;
}
.dnb-help-button__inline svg:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
}
.dnb-help-button__inline--open svg:nth-of-type(1) {
  opacity: 0;
}
.dnb-help-button__inline--open svg:nth-of-type(2) {
  animation: rotate-icon-in 400ms var(--easing-default) forwards;
}
.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
  opacity: 0;
  animation: animate-question 400ms var(--easing-default) 200ms forwards;
}
.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
  animation: rotate-icon-out 400ms var(--easing-default) forwards;
}
.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
  animation-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  .dnb-help-button__inline svg {
    animation-duration: 0.01ms !important;
  }
}
@keyframes rotate-icon-in {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(90deg);
  }
}
@keyframes rotate-icon-out {
  0% {
    opacity: 1;
    transform: rotate(90deg);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}
@keyframes animate-question {
  from {
    opacity: 0;
    transform: rotate(10deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

.dnb-help-button__content .dnb-section {
  --background-color: var(--help-button-content-background);
  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
}
.dnb-help-button__content .dnb-section .dnb-p {
  max-width: var(--prose-max-width);
  transition: transform 400ms var(--easing-default) 40ms;
  transform: translate3d(0, -0.5rem, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-help-button__content .dnb-section .dnb-p {
    transition-duration: 0.01ms;
  }
}
.dnb-help-button__content {
  --help-button-indent-width: var(--card-outline-width);
}
:not(.dnb-card) .dnb-help-button__content .dnb-section {
  --outset-left: calc(
    var(--spacing-medium) + var(--help-button-indent-width)
  );
  --outset-right: calc(
    var(--spacing-medium) + var(--help-button-indent-width)
  );
}
.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
  transform: translate3d(0, 0, 0);
}