@dnb/eufemia 9.27.0 → 9.30.0

package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css

@@ -167,10 +167,12 @@ button.dnb-anchor {
       color: var(--color-sea-green);
       background-color: transparent;
       -webkit-transition: none;
-      transition: none;
-      -webkit-box-shadow: none;
-              box-shadow: none;
-      text-decoration: none; }
+      transition: none; }
+      .dnb-anchor:focus:not(:active),
+      .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
+        -webkit-box-shadow: none;
+                box-shadow: none;
+        text-decoration: none; }
     html[data-whatinput='keyboard'] .dnb-anchor:focus {
       --border-color: var(--color-emerald-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
@@ -188,25 +190,30 @@ button.dnb-anchor {
     background-color: #d2f0e9;
     background-color: var(--color-mint-green-50);
     border-radius: 0.25em;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-    text-decoration: none;
     color: #007272;
     color: var(--color-sea-green);
     background-color: transparent; }
+    .dnb-anchor:hover,
+    .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active,
+    .dnb-section .dnb-anchor:active.dnb-anchor {
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      text-decoration: none; }
   .dnb-anchor:active {
     color: #a5e1d2;
     color: var(--color-mint-green);
     background-color: #14555a;
     background-color: var(--color-emerald-green);
     border-radius: 0.25em;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-    text-decoration: none;
     color: #007272;
     color: var(--color-sea-green);
     background-color: #f2f4ec;
     background-color: var(--color-pistachio); }
+    .dnb-anchor:active,
+    .dnb-section .dnb-anchor:active.dnb-anchor {
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      text-decoration: none; }
   .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon) {
     position: relative;
     background-size: 0;
@@ -246,12 +253,14 @@ button.dnb-anchor {
   background-color: #d2f0e9;
   background-color: var(--color-mint-green-50);
   border-radius: 0.25em;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  text-decoration: none;
   color: #007272;
   color: var(--color-sea-green);
   background-color: transparent; }
+  .dnb-anchor--hover,
+  .dnb-section .dnb-anchor--hover.dnb-anchor {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
 
 .dnb-anchor--active {
   color: #a5e1d2;
@@ -259,13 +268,15 @@ button.dnb-anchor {
   background-color: #14555a;
   background-color: var(--color-emerald-green);
   border-radius: 0.25em;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  text-decoration: none;
   color: #007272;
   color: var(--color-sea-green);
   background-color: #f2f4ec;
   background-color: var(--color-pistachio); }
+  .dnb-anchor--active,
+  .dnb-section .dnb-anchor--active.dnb-anchor {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
 
 .dnb-anchor--focus {
   outline: none;
@@ -275,10 +286,12 @@ button.dnb-anchor {
     color: var(--color-sea-green);
     background-color: transparent;
     -webkit-transition: none;
-    transition: none;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-    text-decoration: none; }
+    transition: none; }
+    .dnb-anchor--focus:not(:active),
+    .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      text-decoration: none; }
   html[data-whatinput='mouse'] .dnb-anchor--focus {
     --border-color: var(--color-emerald-green);
     -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
@@ -293,16 +306,19 @@ button.dnb-anchor {
 
 .dnb-anchor--no-style {
   color: inherit;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  text-decoration: none;
   -webkit-transition: none;
   transition: none; }
+  .dnb-anchor--no-style,
+  .dnb-section .dnb-anchor--no-style.dnb-anchor {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
   .dnb-anchor--no-style:hover {
     color: inherit;
     background-color: transparent; }
 
-.dnb-anchor--no-underline {
+.dnb-anchor--no-underline,
+.dnb-section .dnb-anchor--no-underline.dnb-anchor {
   -webkit-box-shadow: none;
           box-shadow: none;
   text-decoration: none; }
@@ -1613,6 +1629,28 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       fill: #14555a;
       fill: var(--color-emerald-green); }
 
+/*
+* Badge theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-badge {
+  color: #fff;
+  color: var(--color-white); }
+  .dnb-badge--variant-information {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-badge--variant-notification {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }
+
 /*
 * Button theme
 *
@@ -2647,8 +2685,6 @@ html:not([data-whatintent='touch']) .dnb-date-picker__day--inactive .dnb-button[
 .dnb-dialog {
   background: #fff;
   background: var(--color-white); }
-  .dnb-dialog__root::after {
-    background-color: var(--modal-background-color); }
 
 /*
 * Modal theme
@@ -2665,8 +2701,6 @@ html:not([data-whatintent='touch']) .dnb-date-picker__day--inactive .dnb-button[
 .dnb-drawer {
   background: #fff;
   background: var(--color-white); }
-  .dnb-drawer__root::after {
-    background-color: var(--modal-background-color); }
 
 /*
 * Dropdown theme
@@ -3172,8 +3206,12 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
 /*
  * Utilities
  */
-.dnb-modal__content::after {
-  background-color: var(--modal-background-color); }
+:root {
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+
+.dnb-modal__overlay {
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--modal-overlay-bg); }
 
 /*
 * Pagination theme
@@ -3760,22 +3798,6 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
     background-color: #e9f8f4;
     background-color: var(--color-mint-green-25); }
 
-.dnb-slider__track::before {
-  background-color: #007272;
-  background-color: var(--color-sea-green); }
-
-.dnb-slider__track::after {
-  background-color: #d2f0e9;
-  background-color: var(--color-mint-green-50); }
-
-.dnb-slider__state--disabled.dnb-slider__track::before {
-  background-color: #b3dada;
-  background-color: var(--color-sea-green-30); }
-
-.dnb-slider__state--disabled.dnb-slider__track::after {
-  background-color: #e9f8f4;
-  background-color: var(--color-mint-green-25); }
-
 .dnb-slider__thumb {
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -6637,9 +6659,178 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
         -webkit-box-shadow: 0 0 0 0.0625rem var(--color-black-55);
                 box-shadow: 0 0 0 0.0625rem var(--color-black-55); } }
 
+.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
+html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
+  cursor: not-allowed; }
+
+.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+  color: #14555a;
+  color: var(--color-emerald-green);
+  background-color: #f2f4ec;
+  background-color: var(--color-pistachio);
+  --border-color: transparent;
+  -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-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+      -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+              box-shadow: 0 0 0 0.0625rem transparent; } }
+
 .dnb-button--tertiary {
   color: #14555a;
   color: var(--color-emerald-green); }
   .dnb-button--tertiary[disabled] {
     color: #737373;
     color: var(--color-black-55); }
+
+/*
+* Tabs theme
+*
+*/
+/*
+* 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;
+  display: block;
+  color: #007272;
+  color: var(--color-sea-green);
+  padding: 0.5rem 0 0.25rem 0; }
+
+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: 2px;
+    border-radius: 2px;
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+
+.dnb-tabs__button:focus {
+  overflow: visible; }
+  .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: 0.5rem;
+    left: -0.375rem;
+    right: -0.375rem;
+    bottom: 0.5rem;
+    border-radius: 1.5rem; }
+
+.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: 2px;
+  border-radius: 2px;
+  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); }
+
+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: #f2f4ec;
+  background-color: var(--color-pistachio); }