@dnb/eufemia/cjs/components/icon/style/dnb-icon.css

DNB Eufemia Design System UI Library

/*
* Icon component
*
*/
/*
 * Utilities
 */
.dnb-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1rem;
  color: inherit;
  width: 1em;
  height: 1em;
}
.dnb-icon img, :where(.dnb-core-style) .dnb-icon img,
.dnb-icon svg,
:where(.dnb-core-style) .dnb-icon svg {
  width: inherit;
  height: inherit;
  shape-rendering: geometricprecision;
  vertical-align: top;
}
.dnb-icon svg[width="100%"] {
  width: inherit;
}
.dnb-icon svg[height="100%"] {
  height: inherit;
}
.dnb-icon--filled svg path {
  fill: currentcolor;
}
.dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] {
  fill: currentcolor;
}
.dnb-icon--inherit-color svg [stroke] {
  stroke: currentcolor;
}
.dnb-icon--small {
  font-size: 0.75rem;
}
.dnb-icon--default {
  font-size: 1rem;
}
.dnb-icon--medium {
  font-size: 1.5rem;
}
.dnb-icon--large {
  font-size: 2rem;
}
.dnb-icon--x-large {
  font-size: 2.5rem;
}
.dnb-icon--xx-large {
  font-size: 3rem;
}
.dnb-icon--custom-size {
  width: auto;
  height: auto;
  line-height: 0;
}
.dnb-icon--auto {
  font-size: 1em;
}
.dnb-icon--custom-size svg[width="24"] path, .dnb-icon--auto svg[width="24"] path, .dnb-icon--large svg[width="24"] path, .dnb-icon--x-large svg[width="24"] path, .dnb-icon--xx-large svg[width="24"] path {
  vector-effect: non-scaling-stroke;
}
.dnb-icon--auto > .dnb-icon--wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dnb-icon {
  --icon-border-positioning: var(--icon-border-positioning--default, -25%);
}
.dnb-icon--border {
  position: relative;
  vertical-align: baseline;
}
.dnb-icon--border::after {
  content: "";
  position: absolute;
  left: var(--icon-border-positioning);
  right: var(--icon-border-positioning);
  top: var(--icon-border-positioning);
  bottom: var(--icon-border-positioning);
  margin: auto;
  border-radius: 50%;
  border: 0.0875rem solid;
  border-color: currentcolor;
}
h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
  vertical-align: middle;
}
p > .dnb-icon {
  vertical-align: inherit;
}
.dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
  content: none !important;
}
.dnb-icon.dnb-skeleton {
  color: var(--skeleton-color) !important;
}
@supports (d: path("")) {
  .dnb-icon--transition-fallback[style*="--icon-transition"] svg[data-icon-state]:not(:first-of-type) {
    display: none;
  }
  .dnb-icon--transition-fallback[style*="--icon-transition"] svg[data-icon-state]:first-of-type {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dnb-icon--transition-fallback[style*="--icon-transition"] svg[data-icon-state]:first-of-type path {
    d: var(--icon-transition, var(--icon-transition-default));
    vector-effect: non-scaling-stroke;
    transition: d 400ms var(--easing-default);
  }
  @media (prefers-reduced-motion: reduce) {
    .dnb-icon--transition-fallback[style*="--icon-transition"] svg[data-icon-state]:first-of-type path {
      transition-duration: 0.01ms;
    }
  }
}
.dnb-icon--transition-fallback {
  position: relative;
}
.dnb-icon--transition-fallback svg[data-icon-state] {
  transition: opacity 500ms var(--easing-default) 80ms, transform 600ms var(--easing-default);
}
.dnb-icon--transition-fallback svg[data-icon-state]:not(:first-of-type) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.dnb-icon--transition-fallback svg[data-icon-state]:not(.dnb-icon__state--active) {
  opacity: 0;
  transform: scale(0.5);
}
.dnb-icon--transition-fallback svg[data-icon-state].dnb-icon__state--active {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-icon--transition-fallback svg[data-icon-state] {
    transition-duration: 0.01ms;
  }
}