@dnb/eufemia 9.41.0 → 9.43.0

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

@@ -107,8 +107,23 @@
     scrollbar-width: thin;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: auto;
-    scrollbar-color: #14555a transparent;
-    scrollbar-color: var(--color-emerald-green) transparent; }
+    scrollbar-color: #007272 transparent;
+    scrollbar-color: var(--color-sea-green) transparent; }
+    @supports not (scrollbar-color: auto) {
+      .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar {
+        background-color: #ebebeb;
+        background-color: var(--color-black-8); }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical {
+          width: 0.5rem; }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal {
+          height: 0.5rem; }
+      .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
+        background-color: #007272;
+        background-color: var(--color-sea-green);
+        border-radius: 0.5rem; }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover {
+          background-color: #14555a;
+          background-color: var(--color-emerald-green); } }
     html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options {
       scroll-behavior: smooth; }
     html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options {
@@ -562,8 +577,25 @@
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: #14555a transparent;
-  scrollbar-color: var(--color-emerald-green) transparent; }
+  scrollbar-color: #007272 transparent;
+  scrollbar-color: var(--color-sea-green) transparent;
+  -ms-scroll-chaining: chained;
+      overscroll-behavior: auto; }
+  @supports not (scrollbar-color: auto) {
+    .dnb-scroll-view::-webkit-scrollbar {
+      background-color: #ebebeb;
+      background-color: var(--color-black-8); }
+      .dnb-scroll-view::-webkit-scrollbar:vertical {
+        width: 0.5rem; }
+      .dnb-scroll-view::-webkit-scrollbar:horizontal {
+        height: 0.5rem; }
+    .dnb-scroll-view::-webkit-scrollbar-thumb {
+      background-color: #007272;
+      background-color: var(--color-sea-green);
+      border-radius: 0.5rem; }
+      .dnb-scroll-view::-webkit-scrollbar-thumb:hover {
+        background-color: #14555a;
+        background-color: var(--color-emerald-green); } }
   html:not([data-visual-test]) .dnb-scroll-view {
     scroll-behavior: smooth; }
   html[data-visual-test] .dnb-scroll-view {
@@ -7361,12 +7393,33 @@ span.dnb-space--no-collapse > span {
       html:not([data-whatintent='touch'])
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
         right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
       html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
+      html:not([data-whatintent='touch'])
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
       html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon {
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon {
         opacity: 1; }
+      html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
+        opacity: 1;
+        color: inherit; }
+      html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
+        visibility: visible; }
       .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
       html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
@@ -7500,6 +7553,18 @@ span.dnb-space--no-collapse > span {
     color: #007272;
     color: var(--color-sea-green);
     opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
+    cursor: not-allowed; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after,
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after,
+  html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
+    opacity: 0; }
   .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
   .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
     visibility: visible; }
@@ -7787,12 +7852,26 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
             flex-direction: column; }
   .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
     margin-bottom: 0; }
+  .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
+    padding-top: 1.5rem; }
   .dnb-table__container__head {
     padding: 2rem 1rem 0; }
+    .dnb-table__container__head--empty {
+      padding: 0.5rem 0 0; }
     .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
       margin: 0; }
   .dnb-table__container__foot {
-    padding: 0.5rem 1rem 2rem; }
+    padding: 1rem;
+    padding-bottom: 1.25rem; }
+    .dnb-table__container__foot--empty {
+      padding-bottom: 1.5rem; }
+  .dnb-table__container .dnb-table__scroll-view {
+    -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
+            clip-path: inset(0 round 0 0 0.5rem 0.5rem); }
+  @supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
+    .dnb-table__container::after {
+      bottom: calc(var(--outline-width)*-1);
+      bottom: calc(var(--outline-width) * -1); } }
   .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
     overflow: visible; }
 
@@ -7858,12 +7937,15 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     var(--color-black-20); }
   .dnb-table__th.dnb-table__th__accordion-icon {
     padding: 0; }
+    .dnb-table__th.dnb-table__th__accordion-icon,
     .dnb-table__th.dnb-table__th__accordion-icon div {
       width: 3.5rem;
       text-indent: -300vw; }
-      .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div {
+      .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--medium
+      .dnb-table__th.dnb-table__th__accordion-icon div {
         width: 3rem; }
-      .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div {
+      .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--small
+      .dnb-table__th.dnb-table__th__accordion-icon div {
         width: 2.5rem; }
   .dnb-table__td.dnb-table__td__accordion-icon {
     padding: 0;
@@ -7974,6 +8056,12 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
           * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
           */
       display: block; } }
+  .dnb-table__tr__accordion_content td {
+    width: calc(100% - 3.5rem); }
+    .dnb-table__size--medium .dnb-table__tr__accordion_content td {
+      width: calc(100% - 3rem); }
+    .dnb-table__size--small .dnb-table__tr__accordion_content td {
+      width: calc(100% - 2.5rem); }
   .dnb-table__tr__accordion_content td::before {
     content: '';
     position: absolute;
@@ -8013,15 +8101,11 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
     -webkit-transform: translateY(0);
             transform: translateY(0); }
-  .dnb-table__tr__accordion_content > td,
   .dnb-table__tr__accordion_content > td.dnb-table__td {
     padding: 0; }
-    .dnb-table__tr__accordion_content > td .dnb-dl,
-    .dnb-table__tr__accordion_content > td .dnb-dl dt,
     .dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl,
     .dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl dt {
       margin: 0; }
-  .dnb-table__tr__accordion_content--expanded > td,
   .dnb-table__tr__accordion_content--expanded > td.dnb-table__td {
     background-color: #fff;
     background-color: var(--color-white); }
@@ -8079,8 +8163,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
       scrollbar-width: thin;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: auto;
-      scrollbar-color: #14555a transparent;
-      scrollbar-color: var(--color-emerald-green) transparent;
+      scrollbar-color: #007272 transparent;
+      scrollbar-color: var(--color-sea-green) transparent;
       /* Hide scrollbar for Chrome, Safari */
       /* stylelint-disable-next-line */
       -ms-overflow-style: none;
@@ -8100,6 +8184,21 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
                       box-shadow: 0 0 0 0.125rem #14555a;
               -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                       box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+      @supports not (scrollbar-color: auto) {
+        .dnb-tabs__tabs__tablist::-webkit-scrollbar {
+          background-color: #ebebeb;
+          background-color: var(--color-black-8); }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical {
+            width: 0.5rem; }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
+            height: 0.5rem; }
+        .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
+          background-color: #007272;
+          background-color: var(--color-sea-green);
+          border-radius: 0.5rem; }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover {
+            background-color: #14555a;
+            background-color: var(--color-emerald-green); } }
       html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
         scroll-behavior: smooth; }
       html[data-visual-test] .dnb-tabs__tabs__tablist {
@@ -8564,8 +8663,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: #14555a transparent;
-  scrollbar-color: var(--color-emerald-green) transparent; }
+  scrollbar-color: #007272 transparent;
+  scrollbar-color: var(--color-sea-green) transparent; }
   .dnb-textarea__textarea ::-moz-selection {
     background-color: #a5e1d2;
     background-color: var(--color-mint-green);
@@ -8578,6 +8677,21 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     color: #000;
     color: var(--color-black);
     text-shadow: none; }
+  @supports not (scrollbar-color: auto) {
+    .dnb-textarea__textarea::-webkit-scrollbar {
+      background-color: #ebebeb;
+      background-color: var(--color-black-8); }
+      .dnb-textarea__textarea::-webkit-scrollbar:vertical {
+        width: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
+        height: 0.5rem; }
+    .dnb-textarea__textarea::-webkit-scrollbar-thumb {
+      background-color: #007272;
+      background-color: var(--color-sea-green);
+      border-radius: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
+        background-color: #14555a;
+        background-color: var(--color-emerald-green); } }
   html:not([data-visual-test]) .dnb-textarea__textarea {
     scroll-behavior: smooth; }
   html[data-visual-test] .dnb-textarea__textarea {