@dnb/eufemia/components/stat/style/dnb-stat.css

DNB Eufemia Design System UI Library

/*
 * Stat Component
 *
 */
/*
 * Utilities
 */
.dnb-stat--tone-positive {
  color: var(--color-success-green);
}
.dnb-stat--tone-negative {
  color: var(--color-fire-red);
}
.dnb-stat__content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: var(--line-height-basis--em);
  word-break: keep-all;
}
.dnb-stat__content-item:not([class*=space__top]) {
  margin-top: 0;
}
.dnb-stat__content-item:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-stat__content-item:not([class*=space__left]) {
  margin-left: 0;
}
.dnb-stat__content-item:not([class*=space__right]) {
  margin-right: 0;
}
.dnb-stat__content-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dnb-stat__content-item--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.dnb-stat__label:not([class*=space__bottom]) {
  margin-bottom: 0.5rem;
}
.dnb-stat__label--plain {
  color: var(--color-black-80);
}
.dnb-stat__label--subtle {
  color: var(--color-black-55);
}
.dnb-stat__label [class*=dnb-h--]:not([class*=space__top]), .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__top]) {
  margin-top: 0;
}
.dnb-stat__label [class*=dnb-h--]:not([class*=space__bottom]), .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-stat__label [class*=dnb-h--]:not([class*=space__left]), .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__left]) {
  margin-left: 0;
}
.dnb-stat__label [class*=dnb-h--]:not([class*=space__right]), .dnb-spacing .dnb-stat__label [class*=dnb-h--]:not([class*=space__right]) {
  margin-right: 0;
}
.dnb-stat__label [class*=dnb-h--], .dnb-spacing .dnb-stat__label [class*=dnb-h--] {
  font-size: inherit;
  font-weight: inherit;
}
.dnb-stat__root:not([class*=space__top]) {
  margin-top: 0;
}
.dnb-stat__root:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-stat__root:not([class*=space__left]) {
  margin-left: 0;
}
.dnb-stat__root:not([class*=space__right]) {
  margin-right: 0;
}
.dnb-stat__root {
  display: grid;
}
.dnb-stat__root--content-label > .dnb-stat__label {
  order: 2;
}
.dnb-stat__root--content-label > .dnb-stat__content-item {
  order: 1;
}
.dnb-stat__info {
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);
}
.dnb-stat__info--plain {
  color: var(--color-black-80);
}
.dnb-stat__info--subtle {
  color: var(--color-black-55);
}
.dnb-stat__info--prominent {
  color: var(--color-black-80);
  font-weight: var(--font-weight-medium);
}
.dnb-stat__text {
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
}
.dnb-stat .dnb-sr-only::before {
  content: attr(data-text);
}
.dnb-stat__amount, .dnb-stat__sign {
  font-weight: inherit;
}
.dnb-stat__sign {
  margin-right: 0.2em;
}
.dnb-stat__currency {
  margin-left: 0.2em;
}
.dnb-stat__prefix, .dnb-stat__suffix {
  white-space: normal;
}
.dnb-stat__trend {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);
  font-weight: var(--font-weight-medium);
  border-radius: 0.5rem;
}
.dnb-stat__trend-content {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.dnb-stat__trend--positive {
  color: var(--color-success-green);
  background-color: var(--color-mint-green-25);
}
.dnb-stat__trend--negative {
  color: var(--color-fire-red);
  background-color: var(--color-fire-red-8);
}
.dnb-stat__trend--neutral {
  color: var(--color-black-80);
  background-color: var(--color-mint-green-25);
}
.dnb-stat__rating {
  display: inline-flex;
  align-items: center;
}
.dnb-stat__rating--stars {
  height: 1.5rem;
}
.dnb-stat__rating--progressive {
  height: 1.5rem;
}
.dnb-stat__rating-stars {
  display: inline-flex;
  gap: 0.125rem;
  align-items: flex-end;
}
.dnb-stat__rating-star {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}
.dnb-stat__rating-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: var(--dnb-stat-rating-fill, 0%);
  overflow: hidden;
  pointer-events: none;
}
.dnb-stat__rating-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.dnb-stat__rating-icon path {
  fill: currentcolor;
}
.dnb-stat__rating-icon--base {
  color: var(--color-black-20);
}
.dnb-stat__rating-icon--active {
  color: var(--color-black-80);
}
.dnb-stat__rating-progressive {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.125rem;
}
.dnb-stat__rating-progressive-step {
  display: inline-block;
  width: 0.25rem;
  height: var(--dnb-stat-rating-step-height, 0.25rem);
  border-radius: 0.0625rem;
  background: linear-gradient(to right, var(--color-black-80) var(--dnb-stat-rating-step-fill, 0%), var(--color-black-20) var(--dnb-stat-rating-step-fill, 0%));
}