@dnb/eufemia 9.18.0 → 9.19.0

package/es/style/themes/theme-ui/dnb-theme-ui.css

@@ -1565,6 +1565,9 @@ thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::aft
   margin: -0.25em 0;
   padding: 0.25em 0.25em;
   /* 2px 4px */
+  overflow: auto;
+  -webkit-transform: translateY(0.1875rem);
+          transform: translateY(0.1875rem);
   font-size: inherit;
   text-decoration: inherit;
   line-height: 1em;
@@ -2070,6 +2073,43 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
   color: #fff;
   color: var(--color-white); }
 
+/*
+* Avatar theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-avatar {
+  color: #f2f4ec;
+  color: var(--color-pistachio); }
+  .dnb-avatar svg {
+    color: #f2f4ec;
+    color: var(--color-pistachio);
+    fill: #f2f4ec;
+    fill: var(--color-pistachio); }
+  .dnb-avatar--primary {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-avatar--secondary {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-avatar--tertiary {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-avatar--tertiary svg {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      fill: #14555a;
+      fill: var(--color-emerald-green); }
+
 /*
 * Button theme
 *
@@ -4887,6 +4927,192 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
 .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
   display: none; }
 
+/*
+* Timeline theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+:root {
+  --timeline-icon-height--small: var(--button-height--small);
+  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-border-radius--small: calc(var(--timeline-icon-height--small)/2);
+  --timeline-icon-border-radius--small: calc(
+    var(--timeline-icon-height--small) / 2
+  );
+  --timeline-icon-height--medium: var(--button-height--medium);
+  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-border-radius--medium: calc(var(--timeline-icon-height--medium)/2);
+  --timeline-icon-border-radius--medium: calc(
+    var(--timeline-icon-height--medium) / 2
+  );
+  --timeline-icon-width-diff: calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);
+  --timeline-icon-width-diff: calc(
+    (
+        var(--timeline-icon-width--medium) -
+          var(--timeline-icon-width--small)
+      ) / 2
+  );
+  --timeline-border-spacing: var(--spacing-small);
+  --timeline-border-spacing--icon-adjusted: calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing));
+  --timeline-border-spacing--icon-adjusted: calc(
+    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
+  ); }
+
+.dnb-timeline__item {
+  margin-left: 0.25rem;
+  margin-left: calc(
+    (
+        2rem -
+          1.5rem) / 2
+  );
+  margin-left: var(--timeline-icon-width-diff); }
+  .dnb-timeline__item__label__icon {
+    width: 1.5rem;
+    width: var(--timeline-icon-width--small);
+    line-height: 1.5rem;
+    line-height: var(--timeline-icon-height--small);
+    border-radius: 0.75rem;
+    border-radius: calc(
+    1.5rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--small);
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-80);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #333;
+                box-shadow: inset 0 0 0 1px #333;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+                box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+  .dnb-timeline__item__label__name {
+    margin-left: 1.25rem;
+    margin-left: calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem);
+    margin-left: var(--timeline-border-spacing--icon-adjusted);
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+  .dnb-timeline__item__content {
+    margin-left: 0.75rem;
+    margin-left: calc(1.5rem / 2);
+    margin-left: calc(var(--timeline-icon-width--small)/2);
+    margin-left: calc(var(--timeline-icon-width--small) / 2);
+    padding-left: 2rem;
+    padding-left: calc(1.5rem / 2 + calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem));
+    padding-left: calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted));
+    padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
+    border-left: 1px dashed #737373;
+    border-left: 1px dashed var(--color-black-55); }
+  .dnb-timeline__item--completed .dnb-timeline__item__content {
+    border-left: 1px solid #333;
+    border-left: 1px solid var(--color-black-80); }
+  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+    color: #333;
+    color: var(--color-black-80); }
+  .dnb-timeline__item--current .dnb-timeline__item__content {
+    margin-left: 1rem;
+    margin-left: calc(2rem / 2);
+    margin-left: calc(var(--timeline-icon-width--medium)/2);
+    margin-left: calc(var(--timeline-icon-width--medium) / 2);
+    padding-left: 2rem;
+    padding-left: calc(2rem / 2 + 1rem);
+    padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
+    padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+    margin-left: 1rem;
+    margin-left: var(--timeline-border-spacing);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__icon {
+    width: 2rem;
+    width: var(--timeline-icon-width--medium);
+    line-height: 2rem;
+    line-height: var(--timeline-icon-height--medium);
+    border-radius: 1rem;
+    border-radius: calc(
+    2rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--medium); }
+  .dnb-timeline__item--current {
+    margin-left: 0; }
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+    font-weight: normal;
+    font-weight: var(--font-weight-basis);
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+    color: #737373;
+    color: var(--color-black-55);
+    background-color: #f8f8f8;
+    background-color: var(--color-black-3);
+    --border-color: var(--color-black-3);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #f8f8f8;
+                box-shadow: inset 0 0 0 1px #f8f8f8;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-3);
+                box-shadow: inset 0 0 0 1px var(--color-black-3); } }
+  .dnb-timeline__item:only-child {
+    margin-left: 0; }
+  .dnb-timeline__item:last-child .dnb-timeline__item__content {
+    border-left: none; }
+
 /*
 * ToggleButton theme
 *