@dnb/eufemia 9.15.2 → 9.16.3

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

@@ -0,0 +1,527 @@
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* DrawerList component
+*
+*/
+:root {
+  --drawer-list-width: 16rem;
+  --drawer-list-height: 2rem;
+  --drawer-list-padding-horizontal: 1rem;
+  --drawer-list-focus-border-width: 0.125rem;
+  --drawer-list-text-padding: 0.5rem;
+  --drawer-list-height--small: 1.5rem;
+  --drawer-list-height--medium: 2.5rem;
+  --drawer-list-height--large: 3rem; }
+
+.dnb-drawer-list {
+  display: block;
+  position: relative;
+  width: inherit;
+  min-width: inherit;
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  /* stylelint-disable-next-line  */ }
+  .dnb-drawer-list__portal__style {
+    position: absolute;
+    z-index: 3200; }
+    .dnb-drawer-list__portal__style--fixed {
+      position: fixed; }
+  .dnb-drawer-list__root {
+    width: inherit;
+    min-width: inherit; }
+    .dnb-drawer-list__root--portal {
+      position: absolute;
+      top: 0;
+      left: 0; }
+  .dnb-drawer-list__content {
+    width: 100%;
+    padding: 0; }
+  .dnb-drawer-list__list {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    width: inherit;
+    min-width: inherit;
+    margin: 0;
+    padding: 0;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    background-color: transparent;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    -webkit-transition: opacity 160ms ease-out, -webkit-transform 200ms;
+    transition: opacity 160ms ease-out, -webkit-transform 200ms;
+    transition: transform 200ms, opacity 160ms ease-out;
+    transition: transform 200ms, opacity 160ms ease-out, -webkit-transform 200ms; }
+  .dnb-drawer-list__options {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    margin: 0;
+    max-height: 90vh;
+    padding: 0;
+    list-style: none;
+    background-color: transparent; }
+    .dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option {
+      margin: 0; }
+  .dnb-drawer-list--scroll .dnb-drawer-list__options {
+    min-height: 2rem;
+    max-height: 70vh;
+    overflow-y: auto;
+    -ms-scroll-chaining: none;
+        overscroll-behavior: contain;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: auto;
+    scrollbar-color: #14555a transparent;
+    scrollbar-color: var(--color-emerald-green) transparent; }
+    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 {
+      scroll-behavior: auto !important; }
+  .dnb-drawer-list--opened .dnb-drawer-list__options {
+    scroll-behavior: smooth; }
+  .dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options {
+    scroll-behavior: auto; }
+  .dnb-drawer-list__option {
+    position: relative;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    outline: none;
+    background-color: #fff;
+    background-color: var(--color-white); }
+    .dnb-drawer-list__option__inner {
+      position: relative;
+      z-index: 1;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      outline: none;
+      margin: 0;
+      padding: 1rem;
+      color: inherit;
+      background-color: #fff;
+      background-color: var(--color-white); }
+      .dnb-drawer-list__option__inner > * {
+        -ms-flex-item-align: self-start;
+            align-self: self-start; }
+    .dnb-drawer-list__option__item {
+      display: block;
+      text-overflow: ellipsis; }
+      .dnb-drawer-list__option__item .dnb-anchor {
+        display: inline-block;
+        margin-right: 0.5rem;
+        word-break: break-word;
+        white-space: nowrap;
+        font-size: inherit; }
+    .dnb-drawer-list__option--ignore {
+      cursor: default;
+      pointer-events: none; }
+  .dnb-drawer-list__triangle {
+    position: absolute;
+    top: -0.875rem;
+    top: calc( 0.125rem - 2rem / 2);
+    top: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2);
+    top: calc( var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2);
+    left: auto;
+    right: 0;
+    pointer-events: none;
+    margin: 0 1rem;
+    margin: 0 var(--drawer-list-padding-horizontal);
+    width: 1rem;
+    width: calc(2rem / 2);
+    width: calc(var(--drawer-list-height)/2);
+    width: calc(var(--drawer-list-height) / 2);
+    height: 1rem;
+    height: calc(2rem / 2);
+    height: calc(var(--drawer-list-height)/2);
+    height: calc(var(--drawer-list-height) / 2);
+    overflow: hidden; }
+    .dnb-drawer-list__triangle::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1rem;
+      width: calc(2rem / 2);
+      width: calc(var(--drawer-list-height)/2);
+      width: calc(var(--drawer-list-height) / 2);
+      height: 1rem;
+      height: calc(2rem / 2);
+      height: calc(var(--drawer-list-height)/2);
+      height: calc(var(--drawer-list-height) / 2);
+      -webkit-transform: translateY(60%) rotate(45deg);
+              transform: translateY(60%) rotate(45deg);
+      border: 1px solid #cdcdcd;
+      border: 1px solid var(--color-black-border);
+      background-color: #fff;
+      background-color: var(--color-white); }
+  .dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle {
+    left: 0;
+    right: auto; }
+  .dnb-drawer-list--top .dnb-drawer-list__triangle {
+    top: auto;
+    bottom: calc(-0.875rem - 2px);
+    bottom: calc( 0.125rem - 2rem / 2 - 2px);
+    bottom: calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2 - 2px);
+    bottom: calc( var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2 - 2px);
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+    .dnb-drawer-list--top .dnb-drawer-list__triangle::before {
+      -webkit-transform: translateY(65%) rotate(45deg);
+              transform: translateY(65%) rotate(45deg); }
+  .dnb-drawer-list--is-popup.dnb-drawer-list--right {
+    position: absolute;
+    left: auto;
+    right: 0; }
+  .dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
+    left: -0.5rem; }
+  .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+    right: -0.5rem; }
+  .dnb-drawer-list--opened .dnb-drawer-list__list {
+    z-index: 100;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column; }
+    .dnb-drawer-list--opened .dnb-drawer-list__list {
+      -webkit-animation: drawer-list-slide-top-down 200ms ease-out 1 forwards;
+              animation: drawer-list-slide-top-down 200ms ease-out 1 forwards; }
+    html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list, .dnb-drawer-list--opened .dnb-drawer-list__list--no-animation {
+      -webkit-animation: drawer-list-slide-top-down 1ms ease-out 1 forwards;
+              animation: drawer-list-slide-top-down 1ms ease-out 1 forwards; }
+  @media screen and (max-width: 40em), screen and (max-height: 40em) {
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--opened .dnb-drawer-list__list {
+      z-index: 100;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-animation: drawer-list-scale-in 200ms ease-out 1 forwards;
+              animation: drawer-list-scale-in 200ms ease-out 1 forwards; } }
+  .dnb-drawer-list--hidden .dnb-drawer-list__list {
+    display: none; }
+  .dnb-drawer-list--bottom .dnb-drawer-list__list {
+    top: 0;
+    bottom: auto; }
+  .dnb-drawer-list--top .dnb-drawer-list__list {
+    top: auto;
+    bottom: 2rem;
+    bottom: var(--drawer-list-height); }
+  .dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list {
+    top: 2rem;
+    top: var(--drawer-list-height);
+    bottom: auto; }
+  .dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list {
+    top: 1.5rem;
+    top: var(--drawer-list-height--small); }
+  .dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list {
+    bottom: 1.5rem;
+    bottom: var(--drawer-list-height--small); }
+  .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
+    left: -0.75rem; }
+  .dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+    right: -0.75rem; }
+  .dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list {
+    top: 2.5rem;
+    top: var(--drawer-list-height--medium); }
+  .dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list {
+    bottom: 2.5rem;
+    bottom: var(--drawer-list-height--medium); }
+  .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
+    left: -0.25rem; }
+  .dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+    right: -0.25rem; }
+  .dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list {
+    top: 3rem;
+    top: var(--drawer-list-height--large); }
+  .dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list {
+    bottom: 3rem;
+    bottom: var(--drawer-list-height--large); }
+  .dnb-drawer-list--large .dnb-drawer-list__triangle {
+    margin: 0 1.25rem; }
+  .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
+    left: -0.25rem; }
+  .dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+    right: -0.25rem; }
+  .dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+    left: auto; }
+  .dnb-drawer-list__root > .dnb-drawer-list--right {
+    position: absolute;
+    right: 0;
+    left: auto; }
+  .dnb-drawer-list__portal .dnb-drawer-list--right {
+    right: 100%; }
+  .dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list {
+    top: auto;
+    bottom: 0; }
+  @media screen and (max-width: 40em), screen and (max-height: 40em) {
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view, .dnb-drawer-list__portal__style--mobile-view {
+      top: 0 !important;
+      right: 0 !important;
+      left: auto !important; }
+    .dnb-drawer-list__portal__style--mobile-view {
+      position: fixed; }
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__list,
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__options {
+      height: 100vh;
+      top: 0 !important;
+      max-height: 100vh !important;
+      border-radius: 0; } }
+  .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list {
+    -webkit-animation: drawer-list-slide-top-up 150ms ease-out 1 forwards;
+            animation: drawer-list-slide-top-up 150ms ease-out 1 forwards; }
+  html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list, .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation {
+    -webkit-animation: drawer-list-slide-top-up 1ms ease-out 1 forwards;
+            animation: drawer-list-slide-top-up 1ms ease-out 1 forwards; }
+  @media screen and (max-width: 40em), screen and (max-height: 40em) {
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list {
+      -webkit-animation: drawer-list-scale-out 150ms ease-out 1 forwards;
+              animation: drawer-list-scale-out 150ms ease-out 1 forwards; } }
+  .dnb-drawer-list--action-menu .dnb-drawer-list__option__inner {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  @media screen and (min-width: 40em) {
+    .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
+      left: 0; }
+    .dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
+      right: 0; } }
+  @media screen and (max-width: 40em), screen and (max-height: 40em) {
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__list {
+      z-index: 100;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-animation: drawer-list-slide-bottom-up 200ms ease-out 1 forwards;
+              animation: drawer-list-slide-bottom-up 200ms ease-out 1 forwards; }
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list {
+      -webkit-animation: drawer-list-slide-bottom-down 200ms ease-out 1 forwards;
+              animation: drawer-list-slide-bottom-down 200ms ease-out 1 forwards; }
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__list,
+    .dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__options {
+      position: fixed;
+      top: auto !important;
+      right: 0 !important;
+      left: 0 !important;
+      bottom: 0 !important;
+      height: auto !important;
+      width: 100vw !important;
+      -webkit-box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.16);
+              box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.16); } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-drawer-list {
+      -webkit-box-flex: 0;
+          -ms-flex: none;
+              flex: none;
+      vertical-align: baseline; }
+      .dnb-drawer-list__shell {
+        top: 0; }
+      .dnb-drawer-list__options {
+        display: block; } }
+
+@-webkit-keyframes drawer-list-scale-in {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.8) translateX(calc(1px - 16rem));
+            transform: scale(0.8) translateX(calc(1px - 16rem));
+    -webkit-transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
+            transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1) translateX(0);
+            transform: scale(1) translateX(0); } }
+
+@keyframes drawer-list-scale-in {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.8) translateX(calc(1px - 16rem));
+            transform: scale(0.8) translateX(calc(1px - 16rem));
+    -webkit-transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
+            transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1) translateX(0);
+            transform: scale(1) translateX(0); } }
+
+@-webkit-keyframes drawer-list-scale-out {
+  from {
+    opacity: 1;
+    -webkit-transform: scale(1) translateX(0);
+            transform: scale(1) translateX(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.8) translateX(calc(1px - 16rem));
+            transform: scale(0.8) translateX(calc(1px - 16rem));
+    -webkit-transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
+            transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); } }
+
+@keyframes drawer-list-scale-out {
+  from {
+    opacity: 1;
+    -webkit-transform: scale(1) translateX(0);
+            transform: scale(1) translateX(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.8) translateX(calc(1px - 16rem));
+            transform: scale(0.8) translateX(calc(1px - 16rem));
+    -webkit-transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
+            transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width))); } }
+
+@-webkit-keyframes drawer-list-slide-top-down {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px - 2rem));
+            transform: translateY(calc(1px - 2rem));
+    -webkit-transform: translateY(calc(1px - var(--drawer-list-height)));
+            transform: translateY(calc(1px - var(--drawer-list-height))); }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
+
+@keyframes drawer-list-slide-top-down {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px - 2rem));
+            transform: translateY(calc(1px - 2rem));
+    -webkit-transform: translateY(calc(1px - var(--drawer-list-height)));
+            transform: translateY(calc(1px - var(--drawer-list-height))); }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
+
+@-webkit-keyframes drawer-list-slide-top-up {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px - 2rem));
+            transform: translateY(calc(1px - 2rem));
+    -webkit-transform: translateY(calc(1px - var(--drawer-list-height)));
+            transform: translateY(calc(1px - var(--drawer-list-height))); } }
+
+@keyframes drawer-list-slide-top-up {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px - 2rem));
+            transform: translateY(calc(1px - 2rem));
+    -webkit-transform: translateY(calc(1px - var(--drawer-list-height)));
+            transform: translateY(calc(1px - var(--drawer-list-height))); } }
+
+@-webkit-keyframes drawer-list-slide-bottom-down {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px + 2rem));
+            transform: translateY(calc(1px + 2rem));
+    -webkit-transform: translateY(calc(1px + var(--drawer-list-height)));
+            transform: translateY(calc(1px + var(--drawer-list-height))); } }
+
+@keyframes drawer-list-slide-bottom-down {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); }
+  to {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px + 2rem));
+            transform: translateY(calc(1px + 2rem));
+    -webkit-transform: translateY(calc(1px + var(--drawer-list-height)));
+            transform: translateY(calc(1px + var(--drawer-list-height))); } }
+
+@-webkit-keyframes drawer-list-slide-bottom-up {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px + 2rem));
+            transform: translateY(calc(1px + 2rem));
+    -webkit-transform: translateY(calc(1px + var(--drawer-list-height)));
+            transform: translateY(calc(1px + var(--drawer-list-height))); }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
+
+@keyframes drawer-list-slide-bottom-up {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(calc(1px + 2rem));
+            transform: translateY(calc(1px + 2rem));
+    -webkit-transform: translateY(calc(1px + var(--drawer-list-height)));
+            transform: translateY(calc(1px + var(--drawer-list-height))); }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
+
+/*
+* ScrollView component
+*
+*/
+.dnb-scroll-view {
+  overflow-x: auto;
+  overflow-y: auto;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: auto;
+  scrollbar-color: #14555a transparent;
+  scrollbar-color: var(--color-emerald-green) transparent; }
+  html:not([data-visual-test]) .dnb-scroll-view {
+    scroll-behavior: smooth; }
+  html[data-visual-test] .dnb-scroll-view {
+    scroll-behavior: auto !important; }

package/cjs/style/dnb-ui-fragments.min.css

@@ -0,0 +1 @@
+:root{--drawer-list-width:16rem;--drawer-list-height:2rem;--drawer-list-padding-horizontal:1rem;--drawer-list-focus-border-width:0.125rem;--drawer-list-text-padding:0.5rem;--drawer-list-height--small:1.5rem;--drawer-list-height--medium:2.5rem;--drawer-list-height--large:3rem}.dnb-drawer-list{display:block;font-size:1rem;font-size:var(--font-size-small);min-width:inherit;position:relative;width:inherit}.dnb-drawer-list__portal__style{position:absolute;z-index:3200}.dnb-drawer-list__portal__style--fixed{position:fixed}.dnb-drawer-list__root{min-width:inherit;width:inherit}.dnb-drawer-list__root--portal{left:0;position:absolute;top:0}.dnb-drawer-list__content{padding:0;width:100%}.dnb-drawer-list__list{background-color:transparent;bottom:auto;font-size:1.125rem;font-size:var(--font-size-basis);left:0;line-height:1.5rem;line-height:var(--line-height-basis);margin:0;min-width:inherit;padding:0;position:absolute;right:0;top:0;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .16s ease-out,-webkit-transform .2s;transition:opacity .16s ease-out,-webkit-transform .2s;transition:transform .2s,opacity .16s ease-out;transition:transform .2s,opacity .16s ease-out,-webkit-transform .2s;width:inherit;z-index:3}.dnb-drawer-list__options{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:0;max-height:90vh;padding:0;width:100%}.dnb-spacing .dnb-drawer-list__options li.dnb-drawer-list__option{margin:0}.dnb-drawer-list--scroll .dnb-drawer-list__options{-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;max-height:70vh;min-height:2rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin}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{scroll-behavior:auto!important}.dnb-drawer-list--opened .dnb-drawer-list__options{scroll-behavior:smooth}.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options{scroll-behavior:auto}.dnb-drawer-list__option{cursor:pointer;padding:0}.dnb-drawer-list__option,.dnb-drawer-list__option__inner{background-color:#fff;background-color:var(--color-white);color:inherit;margin:0;outline:none;position:relative}.dnb-drawer-list__option__inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:1rem;z-index:1}.dnb-drawer-list__option__inner>*{-ms-flex-item-align:self-start;align-self:self-start}.dnb-drawer-list__option__item{display:block;text-overflow:ellipsis}.dnb-drawer-list__option__item .dnb-anchor{display:inline-block;font-size:inherit;margin-right:.5rem;white-space:nowrap;word-break:break-word}.dnb-drawer-list__option--ignore{cursor:default;pointer-events:none}.dnb-drawer-list__triangle{left:auto;margin:0 1rem;margin:0 var(--drawer-list-padding-horizontal);overflow:hidden;pointer-events:none;right:0;top:-.875rem;top:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2)}.dnb-drawer-list__triangle,.dnb-drawer-list__triangle:before{height:1rem;height:calc(var(--drawer-list-height)/2);position:absolute;width:1rem;width:calc(var(--drawer-list-height)/2)}.dnb-drawer-list__triangle:before{background-color:#fff;background-color:var(--color-white);border:1px solid #cdcdcd;border:1px solid var(--color-black-border);content:"";left:0;top:0;-webkit-transform:translateY(60%) rotate(45deg);transform:translateY(60%) rotate(45deg)}.dnb-drawer-list--triangle-position-left .dnb-drawer-list__triangle{left:0;right:auto}.dnb-drawer-list--top .dnb-drawer-list__triangle{bottom:calc(-.875rem - 2px);bottom:calc(var(--drawer-list-focus-border-width) - var(--drawer-list-height)/2 - 2px);top:auto;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-drawer-list--top .dnb-drawer-list__triangle:before{-webkit-transform:translateY(65%) rotate(45deg);transform:translateY(65%) rotate(45deg)}.dnb-drawer-list--is-popup.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.5rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.5rem}.dnb-drawer-list--opened .dnb-drawer-list__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-animation:drawer-list-slide-top-down .2s ease-out 1 forwards;animation:drawer-list-slide-top-down .2s ease-out 1 forwards;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;z-index:100}.dnb-drawer-list--opened .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list--opened .dnb-drawer-list__list{-webkit-animation:drawer-list-slide-top-down 1ms ease-out 1 forwards;animation:drawer-list-slide-top-down 1ms ease-out 1 forwards}@media screen and (max-height:40em),screen and (max-width:40em){.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--opened .dnb-drawer-list__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-animation:drawer-list-scale-in .2s ease-out 1 forwards;animation:drawer-list-scale-in .2s ease-out 1 forwards;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;z-index:100}}.dnb-drawer-list--hidden .dnb-drawer-list__list{display:none}.dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:0}.dnb-drawer-list--top .dnb-drawer-list__list{bottom:2rem;bottom:var(--drawer-list-height);top:auto}.dnb-drawer-list__portal .dnb-drawer-list--bottom .dnb-drawer-list__list{bottom:auto;top:2rem;top:var(--drawer-list-height)}.dnb-drawer-list__portal .dnb-drawer-list--small .dnb-drawer-list__list{top:1.5rem;top:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--top .dnb-drawer-list__list{bottom:1.5rem;bottom:var(--drawer-list-height--small)}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.75rem}.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.75rem}.dnb-drawer-list__portal .dnb-drawer-list--medium .dnb-drawer-list__list{top:2.5rem;top:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--top .dnb-drawer-list__list{bottom:2.5rem;bottom:var(--drawer-list-height--medium)}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list__portal .dnb-drawer-list--large .dnb-drawer-list__list{top:3rem;top:var(--drawer-list-height--large)}.dnb-drawer-list--large.dnb-drawer-list--top .dnb-drawer-list__list{bottom:3rem;bottom:var(--drawer-list-height--large)}.dnb-drawer-list--large .dnb-drawer-list__triangle{margin:0 1.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:-.25rem}.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:-.25rem}.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{left:auto}.dnb-drawer-list__root>.dnb-drawer-list--right{left:auto;position:absolute;right:0}.dnb-drawer-list__portal .dnb-drawer-list--right{right:100%}.dnb-drawer-list__portal .dnb-drawer-list--top .dnb-drawer-list__list{bottom:0;top:auto}@media screen and (max-height:40em),screen and (max-width:40em){.dnb-drawer-list__portal .dnb-drawer-list--mobile-view,.dnb-drawer-list__portal__style--mobile-view{left:auto!important;right:0!important;top:0!important}.dnb-drawer-list__portal__style--mobile-view{position:fixed}.dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__list,.dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__options{border-radius:0;height:100vh;max-height:100vh!important;top:0!important}}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{-webkit-animation:drawer-list-slide-top-up .15s ease-out 1 forwards;animation:drawer-list-slide-top-up .15s ease-out 1 forwards}.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list--no-animation,html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{-webkit-animation:drawer-list-slide-top-up 1ms ease-out 1 forwards;animation:drawer-list-slide-top-up 1ms ease-out 1 forwards}@media screen and (max-height:40em),screen and (max-width:40em){.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{-webkit-animation:drawer-list-scale-out .15s ease-out 1 forwards;animation:drawer-list-scale-out .15s ease-out 1 forwards}}.dnb-drawer-list--action-menu .dnb-drawer-list__option__inner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;justify-content:flex-start}@media screen and (min-width:40em){.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list{left:0}.dnb-drawer-list--action-menu.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list{right:0}}@media screen and (max-height:40em),screen and (max-width:40em){.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-animation:drawer-list-slide-bottom-up .2s ease-out 1 forwards;animation:drawer-list-slide-bottom-up .2s ease-out 1 forwards;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;z-index:100}.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu.dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawer-list__list{-webkit-animation:drawer-list-slide-bottom-down .2s ease-out 1 forwards;animation:drawer-list-slide-bottom-down .2s ease-out 1 forwards}.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__list,.dnb-drawer-list__portal .dnb-drawer-list--mobile-view.dnb-drawer-list--action-menu .dnb-drawer-list__options{bottom:0!important;-webkit-box-shadow:0 -4px 4px rgba(0,0,0,.16);box-shadow:0 -4px 4px rgba(0,0,0,.16);height:auto!important;left:0!important;position:fixed;right:0!important;top:auto!important;width:100vw!important}}@media screen and (-ms-high-contrast:none){.dnb-drawer-list{-webkit-box-flex:0;-ms-flex:none;flex:none;vertical-align:baseline}.dnb-drawer-list__shell{top:0}.dnb-drawer-list__options{display:block}}@-webkit-keyframes drawer-list-scale-in{0%{opacity:0;-webkit-transform:scale(.8) translateX(calc(1px - 16rem));transform:scale(.8) translateX(calc(1px - 16rem));-webkit-transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)));transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}to{opacity:1;-webkit-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}}@keyframes drawer-list-scale-in{0%{opacity:0;-webkit-transform:scale(.8) translateX(calc(1px - 16rem));transform:scale(.8) translateX(calc(1px - 16rem));-webkit-transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)));transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}to{opacity:1;-webkit-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}}@-webkit-keyframes drawer-list-scale-out{0%{opacity:1;-webkit-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}to{opacity:0;-webkit-transform:scale(.8) translateX(calc(1px - 16rem));transform:scale(.8) translateX(calc(1px - 16rem));-webkit-transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)));transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}}@keyframes drawer-list-scale-out{0%{opacity:1;-webkit-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}to{opacity:0;-webkit-transform:scale(.8) translateX(calc(1px - 16rem));transform:scale(.8) translateX(calc(1px - 16rem));-webkit-transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)));transform:scale(.8) translateX(calc(1px - var(--drawer-list-width)))}}@-webkit-keyframes drawer-list-slide-top-down{0%{opacity:0;-webkit-transform:translateY(calc(1px - 2rem));transform:translateY(calc(1px - 2rem));-webkit-transform:translateY(calc(1px - var(--drawer-list-height)));transform:translateY(calc(1px - var(--drawer-list-height)))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes drawer-list-slide-top-down{0%{opacity:0;-webkit-transform:translateY(calc(1px - 2rem));transform:translateY(calc(1px - 2rem));-webkit-transform:translateY(calc(1px - var(--drawer-list-height)));transform:translateY(calc(1px - var(--drawer-list-height)))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes drawer-list-slide-top-up{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(calc(1px - 2rem));transform:translateY(calc(1px - 2rem));-webkit-transform:translateY(calc(1px - var(--drawer-list-height)));transform:translateY(calc(1px - var(--drawer-list-height)))}}@keyframes drawer-list-slide-top-up{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(calc(1px - 2rem));transform:translateY(calc(1px - 2rem));-webkit-transform:translateY(calc(1px - var(--drawer-list-height)));transform:translateY(calc(1px - var(--drawer-list-height)))}}@-webkit-keyframes drawer-list-slide-bottom-down{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(calc(1px + 2rem));transform:translateY(calc(1px + 2rem));-webkit-transform:translateY(calc(1px + var(--drawer-list-height)));transform:translateY(calc(1px + var(--drawer-list-height)))}}@keyframes drawer-list-slide-bottom-down{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(calc(1px + 2rem));transform:translateY(calc(1px + 2rem));-webkit-transform:translateY(calc(1px + var(--drawer-list-height)));transform:translateY(calc(1px + var(--drawer-list-height)))}}@-webkit-keyframes drawer-list-slide-bottom-up{0%{opacity:0;-webkit-transform:translateY(calc(1px + 2rem));transform:translateY(calc(1px + 2rem));-webkit-transform:translateY(calc(1px + var(--drawer-list-height)));transform:translateY(calc(1px + var(--drawer-list-height)))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes drawer-list-slide-bottom-up{0%{opacity:0;-webkit-transform:translateY(calc(1px + 2rem));transform:translateY(calc(1px + 2rem));-webkit-transform:translateY(calc(1px + var(--drawer-list-height)));transform:translateY(calc(1px + var(--drawer-list-height)))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.dnb-scroll-view{-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin}html:not([data-visual-test]) .dnb-scroll-view{scroll-behavior:smooth}html[data-visual-test] .dnb-scroll-view{scroll-behavior:auto!important}

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

@@ -0,0 +1,92 @@
+/**
+ * Import basis core parts
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * CSS Properties
+ *
+ */
+:root {
+  --font-family-default: 'DNB', sans-serif;
+  --font-family-monospace: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+  --font-weight-default: normal;
+  --font-weight-basis: normal;
+  --font-weight-regular: normal;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --font-size-x-small: 0.875rem;
+  --font-size-small: 1rem;
+  --font-size-basis: 1.125rem;
+  --font-size-basis--em: 1em;
+  --font-size-medium: 1.25rem;
+  --font-size-large: 1.625rem;
+  --font-size-x-large: 2.125rem;
+  --font-size-xx-large: 3rem;
+  --line-height-xx-small--em: 1em;
+  --line-height-x-small: 1.125rem;
+  --line-height-small: 1.25rem;
+  --line-height-basis: 1.5rem;
+  --line-height-basis--em: 1.333em;
+  --line-height-medium: 2rem;
+  --line-height-large: 2.5rem;
+  --line-height-x-large: 3.5rem;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-mint-green-12: #f4fbf9;
+  --color-sea-green-30: #b3dada;
+  --color-accent-yellow-30: #feebc1;
+  --color-signal-orange: #ff5400;
+  --color-fire-red: #dc2a2a;
+  --color-success-green: #007b5e;
+  --color-fire-red-8: #fdeeee;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-55: #737373;
+  --color-black-20: #ccc;
+  --color-black-8: #ebebeb;
+  --color-black-3: #f8f8f8;
+  --color-white: #fff;
+  --color-black-border: #cdcdcd;
+  --color-black-background: #fafafa;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-accent-yellow: #fdbb31;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2;
+  --color-lavender: #f2f2f5;
+  --color-sand-yellow: #fbf6ec;
+  --color-pistachio: #f2f4ec;
+  --color-mint-green-alt: #ebfffa;
+  --color-indigo-medium: #6e6491;
+  --color-indigo-light: #b9afc8;
+  --color-violet-medium: #a06eaf;
+  --color-violet-light: #cfb9d7;
+  --color-sky-blue-medium: #87d2e1;
+  --color-sky-blue-light: #c3ebf0;
+  --spacing-xx-small: 0.25rem;
+  --spacing-x-small: 0.5rem;
+  --spacing-small: 1rem;
+  --spacing-medium: 1.5rem;
+  --spacing-large: 2rem;
+  --spacing-x-large: 3rem;
+  --spacing-xx-large: 3.5rem;
+  --layout-small: 40em;
+  --layout-medium: 50em;
+  --layout-large: 60em;
+  --layout-x-large: 72em;
+  --layout-xx-large: 80em;
+  --layout-xxx-large: 90em;
+  --shadow-default: 0 8px 16px rgba(51, 51, 51, 0.08);
+  --shadow-default-x: 0;
+  --shadow-default-y: 8px;
+  --shadow-default-blur-radius: 16px;
+  --shadow-default-color: rgba(51, 51, 51, 0.08); }

package/cjs/style/dnb-ui-properties.min.css

@@ -0,0 +1 @@
+:root{--font-family-default:"DNB",sans-serif;--font-family-monospace:"DNBMono","Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace;--font-weight-default:normal;--font-weight-basis:normal;--font-weight-regular:normal;--font-weight-medium:500;--font-weight-bold:600;--font-size-x-small:0.875rem;--font-size-small:1rem;--font-size-basis:1.125rem;--font-size-basis--em:1em;--font-size-medium:1.25rem;--font-size-large:1.625rem;--font-size-x-large:2.125rem;--font-size-xx-large:3rem;--line-height-xx-small--em:1em;--line-height-x-small:1.125rem;--line-height-small:1.25rem;--line-height-basis:1.5rem;--line-height-basis--em:1.333em;--line-height-medium:2rem;--line-height-large:2.5rem;--line-height-x-large:3.5rem;--color-mint-green-50:#d2f0e9;--color-mint-green-25:#e9f8f4;--color-mint-green-12:#f4fbf9;--color-sea-green-30:#b3dada;--color-accent-yellow-30:#feebc1;--color-signal-orange:#ff5400;--color-fire-red:#dc2a2a;--color-success-green:#007b5e;--color-fire-red-8:#fdeeee;--color-black:#000;--color-black-80:#333;--color-black-55:#737373;--color-black-20:#ccc;--color-black-8:#ebebeb;--color-black-3:#f8f8f8;--color-white:#fff;--color-black-border:#cdcdcd;--color-black-background:#fafafa;--color-sea-green:#007272;--color-mint-green:#a5e1d2;--color-summer-green:#28b482;--color-emerald-green:#14555a;--color-ocean-green:#00343e;--color-accent-yellow:#fdbb31;--color-indigo:#23195a;--color-violet:#6e2382;--color-sky-blue:#4bbed2;--color-lavender:#f2f2f5;--color-sand-yellow:#fbf6ec;--color-pistachio:#f2f4ec;--color-mint-green-alt:#ebfffa;--color-indigo-medium:#6e6491;--color-indigo-light:#b9afc8;--color-violet-medium:#a06eaf;--color-violet-light:#cfb9d7;--color-sky-blue-medium:#87d2e1;--color-sky-blue-light:#c3ebf0;--spacing-xx-small:0.25rem;--spacing-x-small:0.5rem;--spacing-small:1rem;--spacing-medium:1.5rem;--spacing-large:2rem;--spacing-x-large:3rem;--spacing-xx-large:3.5rem;--layout-small:40em;--layout-medium:50em;--layout-large:60em;--layout-x-large:72em;--layout-xx-large:80em;--layout-xxx-large:90em;--shadow-default:0 8px 16px rgba(51,51,51,.08);--shadow-default-x:0;--shadow-default-y:8px;--shadow-default-blur-radius:16px;--shadow-default-color:rgba(51,51,51,.08)}