@dnb/eufemia 9.42.0 → 9.44.0

package/cjs/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,10 +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 {
@@ -7552,6 +7582,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   .dnb-table .dnb-table__th .dnb-table__help-button,
   .dnb-table > thead > tr > th .dnb-table__help-button {
     margin-left: 0.5rem; }
+  .dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button {
+    white-space: nowrap; }
 
 /*
 * Table component
@@ -7733,8 +7765,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
 .dnb-table--outline thead .dnb-table__tr:first-of-type,
 .dnb-table--outline tbody
 .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
-  -webkit-clip-path: inset(0 round 0.5rem 0.5rem 0 0);
-          clip-path: inset(0 round 0.5rem 0.5rem 0 0); }
+  -webkit-clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
+          clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0); }
 
 .dnb-table--outline tbody .dnb-table__tr:last-of-type,
 .dnb-table--outline tbody
@@ -7764,18 +7796,15 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   padding: 0 !important;
   height: 0; }
 
-.dnb-table tr.sticky:not(.css-position) th {
-  position: relative;
-  z-index: 3;
-  will-change: transform;
+.dnb-table tr.sticky {
+  position: sticky;
+  z-index: 4;
   -webkit-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, var(--table-offset, 0), 0);
           transform: translate3d(0, var(--table-offset, 0), 0); }
 
 .dnb-table tr.sticky.css-position {
-  position: sticky;
-  z-index: 3;
   top: 0;
   top: var(--table-top, 0); }
 
@@ -7831,9 +7860,17 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
       margin: 0; }
   .dnb-table__container__foot {
-    padding: 1rem 1rem 1.5rem; }
+    padding: 1rem;
+    padding-bottom: 1.25rem; }
     .dnb-table__container__foot--empty {
-      padding: 0 0 1rem; }
+      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; }
 
@@ -8019,7 +8056,11 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
           */
       display: block; } }
   .dnb-table__tr__accordion_content td {
-    width: 100%; }
+    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;
@@ -8059,15 +8100,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); }
@@ -8125,8 +8162,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;
@@ -8146,6 +8183,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 {
@@ -8610,8 +8662,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);
@@ -8624,6 +8676,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 {