@dnb/eufemia 9.27.0 → 9.30.0

package/cjs/style/dnb-ui-components.css

@@ -802,7 +802,10 @@
   .dnb-autocomplete__row {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
-    display: inline-flex; }
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
   .dnb-autocomplete--small {
     line-height: 1.5rem;
     line-height: var(--autocomplete-height--small); }
@@ -861,6 +864,34 @@
             transform: rotate(180deg);
     -webkit-transform-origin: 50% 50%;
             transform-origin: 50% 50%; }
+  .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+    --border-color: var(--color-black-55);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+            box-shadow: inset 0 0 0 var(--input-border-width) 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-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) 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-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color);
+          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: inset 0 0 0 1px #737373;
+                box-shadow: inset 0 0 0 1px #737373;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
+                box-shadow: inset 0 0 0 1px var(--color-black-55); } }
   .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
     -webkit-transition: -webkit-transform 400ms ease-out;
     transition: -webkit-transform 400ms ease-out;
@@ -871,7 +902,8 @@
               transition-duration: 1ms !important; }
   .dnb-autocomplete .dnb-input__inner__element {
     position: relative;
-    z-index: 3; }
+    z-index: 3;
+    cursor: text; }
   @media screen and (min-width: 40em) {
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
@@ -881,7 +913,6 @@
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
       padding-right: 2.5rem !important; } }
   .dnb-autocomplete .dnb-input__inner__element.dnb-p {
-    pointer-events: none;
     white-space: nowrap;
     padding: 0 0.5rem; }
     @media screen and (max-width: 40em) {
@@ -896,6 +927,8 @@
     padding-right: 3rem; }
   .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
     padding-right: 1rem; }
+  .dnb-autocomplete--disabled .dnb-input__inner__element {
+    cursor: not-allowed; }
   .dnb-autocomplete__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
@@ -1050,6 +1083,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  white-space: nowrap;
   border-radius: 50%;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
@@ -1167,6 +1201,88 @@
         margin-left: 0.25rem;
         margin-left: var(--spacing-xx-small); }
 
+/*
+* Badge component
+*
+*/
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height)/4);
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height)/2);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small); }
+
+.dnb-badge {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  white-space: nowrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 1.5rem;
+  width: var(--badge-width);
+  height: 1.5rem;
+  height: var(--badge-height);
+  font-size: 0.875rem;
+  font-size: var(--badge-font-size); }
+  .dnb-badge,
+  .dnb-core-style .dnb-badge {
+    line-height: 1.125rem;
+    line-height: var(--badge-line-height); }
+  .dnb-badge__root {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+    -ms-flex-negative: 0;
+        flex-shrink: 0; }
+    .dnb-badge__root .dnb-badge {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; }
+  .dnb-badge--variant-notification {
+    border-radius: 0.75rem;
+    border-radius: calc(1.5rem / 2);
+    border-radius: var(--badge-border-radius-notification); }
+  .dnb-badge--variant-information {
+    border-radius: 0.375rem;
+    border-radius: calc(1.5rem / 4);
+    border-radius: var(--badge-border-radius-information);
+    min-width: 1.5rem;
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 0.25rem;
+    padding: 0 var(--spacing-xx-small); }
+  .dnb-badge--horizontal-left {
+    left: 0; }
+  .dnb-badge--horizontal-right {
+    right: 0; }
+  .dnb-badge--vertical-bottom {
+    bottom: 0; }
+  .dnb-badge--vertical-top {
+    top: 0; }
+
 /*
 * Breadcrumb component
 *
@@ -2695,19 +2811,12 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
+    /** Sets the color on scroll overflow (at the bottom) */
     background-color: transparent;
     background-color: var(--modal-background-color, transparent);
     width: 100%;
     height: 100%;
     overflow-x: hidden; }
-    .dnb-drawer__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 2rem 0;
     padding: 0 var(--drawer-spacing) 0; }
@@ -2889,16 +2998,20 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 2rem 0;
-    margin: var(--drawer-spacing) 0; }
+    margin: 2rem -2rem;
+    margin: 2rem calc(2rem * -1);
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing)*-1);
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
     content: '';
     position: absolute;
     z-index: -1;
-    left: -50%;
-    right: -50%;
+    left: 0;
+    right: 0;
     bottom: 0;
     height: 300%;
     -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -4329,8 +4442,7 @@ html[data-visual-test] .dnb-global-status__shell {
  */
 :root {
   --modal-z-index: 3000;
-  --modal-animation-duration: 300ms;
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-animation-duration: 300ms; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -4408,9 +4520,7 @@ html[data-dnb-modal-active] {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    height: 100%; }
   .dnb-modal-root__inner .dnb-modal__overlay {
     -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
             animation: hide-modal-overlay 300ms ease-out forwards;
@@ -4462,8 +4572,7 @@ html[data-dnb-modal-active] {
             flex-direction: row;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
-            justify-content: space-between;
-    width: 100%; }
+            justify-content: space-between; }
     @media screen and (-ms-high-contrast: none) {
       .dnb-modal__header__bar.dnb-section {
         -webkit-box-align: center;
@@ -5434,37 +5543,6 @@ html[data-dnb-modal-active] {
     margin: 0 calc(var(--slider-space) * 1.5);
     min-width: 2rem;
     cursor: pointer; }
-    .dnb-slider__track::before, .dnb-slider__track::after {
-      content: '';
-      position: absolute;
-      z-index: 2;
-      left: 0;
-      top: 50%;
-      width: 2rem;
-      width: var(--slider-thumb-size);
-      height: 0.25rem;
-      height: var(--slider-track-height);
-      -webkit-transform: translate3d(0, -50%, 0);
-              transform: translate3d(0, -50%, 0);
-      border-radius: 0.125rem;
-      border-radius: calc(0.25rem / 2);
-      border-radius: calc(var(--slider-track-height)/2);
-      border-radius: calc(var(--slider-track-height) / 2);
-      background-color: inherit; }
-    .dnb-slider__track::before {
-      background-color: red;
-      left: -1rem;
-      left: calc(1px - 1px - 1rem);
-      left: calc(0px - var(--slider-space));
-      left: calc(1px - 1px - var(--slider-space));
-      right: auto; }
-    .dnb-slider__track::after {
-      background-color: blue;
-      left: auto;
-      right: -1rem;
-      right: calc(1px - 1px - 1rem);
-      right: calc(0px - var(--slider-space));
-      right: calc(1px - 1px - var(--slider-space)); }
   .dnb-slider--vertical .dnb-slider__track {
     margin: 1.5rem 0;
     margin: calc(1rem * 1.5) 0;
@@ -5472,26 +5550,14 @@ html[data-dnb-modal-active] {
     margin: calc(var(--slider-space) * 1.5) 0;
     min-height: 2rem;
     min-width: auto; }
-    .dnb-slider--vertical .dnb-slider__track::before, .dnb-slider--vertical .dnb-slider__track::after {
-      left: 50%;
-      -webkit-transform: translate3d(-50%, 0, 0);
-              transform: translate3d(-50%, 0, 0);
-      width: 0.25rem;
-      width: var(--slider-track-height);
-      height: 2rem;
-      height: var(--slider-thumb-size); }
-    .dnb-slider--vertical .dnb-slider__track::before {
-      top: -1rem;
-      top: calc(1px - 1px - 1rem);
-      top: calc(0px - var(--slider-space));
-      top: calc(1px - 1px - var(--slider-space));
-      bottom: auto; }
-    .dnb-slider--vertical .dnb-slider__track::after {
-      top: auto;
-      bottom: -1rem;
-      bottom: calc(1px - 1px - 1rem);
-      bottom: calc(0px - var(--slider-space));
-      bottom: calc(1px - 1px - var(--slider-space)); }
+  .dnb-slider--no-buttons .dnb-slider__track {
+    margin: 0 1rem;
+    margin: 0 calc(1rem);
+    margin: 0 calc(var(--slider-space)); }
+  .dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track {
+    margin: 1rem 0;
+    margin: calc(1rem) 0;
+    margin: calc(var(--slider-space)) 0; }
   .dnb-slider--vertical .dnb-slider__inner {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -5502,27 +5568,31 @@ html[data-dnb-modal-active] {
     height: inherit;
     min-width: inherit;
     min-height: inherit; }
-  .dnb-slider--reverse .dnb-slider__track {
-    -webkit-transform: scaleX(-1);
-            transform: scaleX(-1); }
-  .dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
-    -webkit-transform: scaleY(-1);
-            transform: scaleY(-1); }
   .dnb-slider__line {
     position: absolute;
     left: 0;
     top: 50%;
+    margin: 0 -1rem;
+    margin: 0 calc(1px - 1px - 1rem);
+    margin: 0 calc(0px - var(--slider-space));
+    margin: 0 calc(1px - 1px - var(--slider-space));
     height: 0.25rem;
     height: var(--slider-track-height);
     -webkit-transform: translate3d(0, -50%, 0);
             transform: translate3d(0, -50%, 0);
-    background-color: grey; }
+    background-color: grey;
+    border-radius: 0.25rem;
+    border-radius: var(--slider-track-height); }
   .dnb-slider--vertical .dnb-slider__line {
     width: 0.25rem;
     width: var(--slider-track-height);
     height: auto;
     left: 50%;
     top: 0;
+    margin: -1rem 0;
+    margin: calc(1px - 1px - 1rem) 0;
+    margin: calc(0px - var(--slider-space)) 0;
+    margin: calc(1px - 1px - var(--slider-space)) 0;
     -webkit-transform: translate3d(-50%, 0, 0);
             transform: translate3d(-50%, 0, 0); }
   .dnb-slider__line__before {
@@ -5532,7 +5602,8 @@ html[data-dnb-modal-active] {
     right: 0;
     background-color: #ddd; }
   .dnb-slider--vertical .dnb-slider__line__before {
-    top: 0; }
+    top: 0;
+    bottom: 0; }
   .dnb-slider--vertical .dnb-slider__line__after {
     bottom: 0; }
   .dnb-slider__button-helper, .dnb-slider__thumb {
@@ -5562,18 +5633,20 @@ html[data-dnb-modal-active] {
     line-height: 1.5rem;
     line-height: var(--slider-button-size);
     -webkit-transform: translateY(0.25rem);
-            transform: translateY(0.25rem); }
+            transform: translateY(0.25rem);
+    z-index: 2; }
   .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
     -webkit-transform: translateX(0.25rem);
             transform: translateX(0.25rem); }
   .dnb-slider__state--jumped .dnb-slider__thumb,
   .dnb-slider__state--jumped .dnb-slider__line {
-    -webkit-transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, box-shadow 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms; }
-  .dnb-slider__state--disabled.dnb-slider__track,
-  .dnb-slider__state--disabled .dnb-slider__thumb {
+    -webkit-transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease; }
+  .dnb-slider__state--disabled .dnb-slider__track,
+  .dnb-slider__state--disabled .dnb-slider__thumb,
+  .dnb-slider__state--disabled .dnb-slider__line {
     cursor: not-allowed; }
   .dnb-slider__button-helper {
     pointer-events: none;