@dnb/eufemia 9.12.0 → 9.12.4

package/esm/components/switch/style/themes/dnb-switch-theme-ui.css

@@ -0,0 +1,224 @@
+/*
+* Switch theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-switch {
+  /*
+    * When switched OFF
+    * aka when the checkbox is not :checked
+    */
+  /*
+    * When switched ON
+    * aka when the checkbox is :checked
+    */
+  /*
+    * Draw the circle / line
+    *
+    */
+  /*
+    * On disabled
+    *
+    */
+  /*
+    * On focus
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On hover
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On active
+    *
+    */
+  /* stylelint-disable-next-line */
+  /*
+    * On error state
+    *
+    */
+  /* stylelint-disable-next-line */ }
+  .dnb-switch__background {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    overflow: hidden;
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+    .dnb-switch__background::after {
+      content: '';
+      position: absolute;
+      -webkit-transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
+      transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
+      transition: transform 0.3s ease-out, position 0.3s ease-out;
+      transition: transform 0.3s ease-out, position 0.3s ease-out, -webkit-transform 0.3s ease-out; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-switch__background::after {
+          top: 0.25rem; } }
+  .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+    background-color: #fff;
+    background-color: var(--color-white);
+    border-color: #007272;
+    border-color: var(--color-sea-green); }
+  .dnb-switch__input:checked ~ .dnb-switch__button {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+    right: 0;
+    -webkit-transform: translateX(-0.3rem);
+    -webkit-transform: translateX(calc(2.5rem - 2.8rem));
+            transform: translateX(-0.3rem);
+            transform: translateX(calc(2.5rem - 2.8rem));
+    -webkit-transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
+            transform: translateX(calc(var(--switch-width--medium) - 2.8rem));
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 0.0625rem solid #007272;
+    border: 0.0625rem solid var(--color-sea-green); }
+  .dnb-switch__input:checked ~ .dnb-switch__background::after {
+    left: 0;
+    -webkit-transform: translateX(0.63rem);
+    -webkit-transform: translateX(calc(2.5rem - 1.87rem));
+            transform: translateX(0.63rem);
+            transform: translateX(calc(2.5rem - 1.87rem));
+    -webkit-transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
+            transform: translateX(calc(var(--switch-width--medium) - 1.87rem));
+    width: 0.0625rem;
+    height: 0.5rem;
+    border-radius: 0.0625rem;
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
+    width: 0.625rem;
+    height: 0.625rem;
+    -webkit-transform: translateX(-0.45rem);
+    -webkit-transform: translateX(calc(3.25rem - 3.7rem));
+            transform: translateX(-0.45rem);
+            transform: translateX(calc(3.25rem - 3.7rem));
+    -webkit-transform: translateX(calc(var(--switch-width--large) - 3.7rem));
+            transform: translateX(calc(var(--switch-width--large) - 3.7rem)); }
+  .dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
+    height: 0.625rem;
+    -webkit-transform: translateX(0.75rem);
+    -webkit-transform: translateX(calc(3.25rem - 2.5rem));
+            transform: translateX(0.75rem);
+            transform: translateX(calc(3.25rem - 2.5rem));
+    -webkit-transform: translateX(calc(var(--switch-width--large) - 2.5rem));
+            transform: translateX(calc(var(--switch-width--large) - 2.5rem)); }
+  .dnb-switch__input[disabled] ~ .dnb-switch__background {
+    background-color: #e9f8f4;
+    background-color: var(--color-mint-green-25); }
+  .dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
+    border-color: #b3dada;
+    border-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled] ~ .dnb-switch__button {
+    border-color: #b3dada;
+    border-color: var(--color-sea-green-30); }
+  .dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
+    background-color: #b3dada;
+    background-color: var(--color-sea-green-30); }
+  html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
+    border: none; }
+  html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50); }
+  .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background,
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
+    .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
+        .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
+          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                  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); } }
+  .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus,
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
+    display: block; }
+  .dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button {
+    border-color: #007272;
+    border-color: var(--color-sea-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50); }
+  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    border-color: transparent; }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button {
+    border-color: #dc2a2a;
+    border-color: var(--color-fire-red);
+    background-color: #fdeeee;
+    background-color: var(--color-fire-red-8); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button {
+    border-color: #fdeeee;
+    border-color: var(--color-fire-red-8); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+    background-color: #fdeeee;
+    background-color: var(--color-fire-red-8);
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
+        -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+                box-shadow: 0 0 0 0.125rem #dc2a2a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+                box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+  .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
+    border-color: #dc2a2a;
+    border-color: var(--color-fire-red); }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+    display: block;
+    --border-color: var(--color-fire-red);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
+        -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+                box-shadow: 0 0 0 0.125rem #dc2a2a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+                box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .dnb-switch > .dnb-form-status {
+    -webkit-transform: translateY(0.1875rem);
+            transform: translateY(0.1875rem); }

package/esm/components/tabs/style/themes/dnb-tabs-theme-ui.css

@@ -0,0 +1,134 @@
+/*
+* Tabs theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-tabs__tabs:not(.dnb-section)::before {
+  background-color: #ebebeb;
+  background-color: var(--color-black-8);
+  -webkit-box-shadow: 100vw 0 0 0 #ebebeb;
+          box-shadow: 100vw 0 0 0 #ebebeb;
+  -webkit-box-shadow: 100vw 0 0 0 var(--color-black-8);
+          box-shadow: 100vw 0 0 0 var(--color-black-8); }
+
+.dnb-tabs__tabs__tablist:focus {
+  border-radius: 0.5rem; }
+
+.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
+  border-radius: 0 50% 50% 0; }
+
+.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
+  border-radius: 50% 0 0 50%; }
+
+.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus {
+  border-radius: 0; }
+
+.dnb-tabs__content:focus {
+  position: relative; }
+  .dnb-tabs__content:focus::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0.125rem;
+    bottom: -0.5rem;
+    left: -0.5rem;
+    right: -0.5rem;
+    max-width: 100vw;
+    border-radius: 0.5rem;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
+          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                  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); } }
+
+.dnb-tabs__button__title {
+  font-weight: normal;
+  font-weight: var(--font-weight-regular);
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  text-align: center;
+  color: #007272;
+  color: var(--color-sea-green); }
+
+html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] {
+  cursor: not-allowed; }
+
+html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
+  background-color: #d2f0e9;
+  background-color: var(--color-mint-green-50); }
+  html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after {
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+
+.dnb-tabs__button:focus::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                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); } }
+
+.dnb-tabs__button:focus::before {
+  top: 2px;
+  bottom: 2px;
+  right: 0;
+  left: 0;
+  border-radius: 0.25rem; }
+
+.dnb-tabs__button[disabled] .dnb-tabs__button__title {
+  color: #b3dada;
+  color: var(--color-sea-green-30); }
+
+.dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after {
+  height: 3px;
+  border-radius: 1.5px;
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,
+.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+
+.dnb-tabs__button span[hidden] {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }

package/esm/components/textarea/style/_textarea.scss

@@ -44,7 +44,7 @@
 
   &__state {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     top: -0.5rem;
     left: -0.5rem;
     bottom: -0.5rem;
@@ -65,6 +65,8 @@
   }
 
   &__textarea {
+    position: relative;
+    z-index: 2;
     @include textareaStyleCommon();
   }
 
@@ -72,7 +74,7 @@
     pointer-events: none;
 
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     left: 0;
 

package/esm/components/textarea/style/dnb-textarea.css

@@ -484,7 +484,7 @@ legend.dnb-form-label {
     font-size: var(--font-size-basis); }
   .dnb-textarea__state {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     top: -0.5rem;
     left: -0.5rem;
     bottom: -0.5rem;
@@ -503,6 +503,8 @@ legend.dnb-form-label {
   .dnb-textarea__suffix {
     padding-left: 1.5rem; }
   .dnb-textarea__textarea {
+    position: relative;
+    z-index: 2;
     cursor: auto;
     border: none;
     margin: 0;
@@ -516,7 +518,7 @@ legend.dnb-form-label {
   .dnb-textarea__placeholder {
     pointer-events: none;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     left: 0;
     overflow: hidden;

package/esm/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -0,0 +1,113 @@
+/*
+* Textarea theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+:root {
+  --textarea-rows: 2; }
+
+.dnb-textarea__textarea {
+  color: #000;
+  color: var(--color-black);
+  background-color: #fff;
+  background-color: var(--color-white);
+  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; }
+  .dnb-textarea__textarea ::-moz-selection {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #000;
+    color: var(--color-black);
+    text-shadow: none; }
+  .dnb-textarea__textarea ::selection {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #000;
+    color: var(--color-black);
+    text-shadow: none; }
+  html:not([data-visual-test]) .dnb-textarea__textarea {
+    scroll-behavior: smooth; }
+  html[data-visual-test] .dnb-textarea__textarea {
+    scroll-behavior: auto !important; }
+
+.dnb-textarea__placeholder {
+  color: #737373;
+  color: var(--color-black-55);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  -webkit-line-clamp: var(--textarea-rows, 2); }
+
+.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state,
+.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+  -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+          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); }
+
+.dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  color: #737373;
+  color: var(--color-black-55);
+  background-color: #f8f8f8;
+  background-color: var(--color-black-3); }
+  .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar, .dnb-textarea__textarea[disabled]::-webkit-scrollbar {
+    width: 0; }
+
+.dnb-textarea--disabled .dnb-textarea__state,
+.dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
+  -webkit-box-shadow: 0 0 0 0.0625rem #737373;
+          box-shadow: 0 0 0 0.0625rem #737373;
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+          box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  background-color: #f8f8f8;
+  background-color: var(--color-black-3); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {
+  color: #dc2a2a;
+  color: var(--color-fire-red); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
+  --border-color: var(--color-fire-red);
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+          box-shadow: 0 0 0 0.0625rem var(--border-color);
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled) ~ .dnb-textarea__state {
+      -webkit-box-shadow: 0 0 0 0.0625rem #dc2a2a;
+              box-shadow: 0 0 0 0.0625rem #dc2a2a;
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-fire-red);
+              box-shadow: 0 0 0 0.0625rem var(--color-fire-red); } }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+  --border-color: var(--color-fire-red);
+  -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+          box-shadow: 0 0 0 0.125rem var(--border-color);
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+      -webkit-box-shadow: 0 0 0 0.125rem #dc2a2a;
+              box-shadow: 0 0 0 0.125rem #dc2a2a;
+      -webkit-box-shadow: 0 0 0 0.125rem var(--color-fire-red);
+              box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }
+
+.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
+.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
+  display: none; }