@dnb/eufemia 10.17.0 → 10.19.0

package/style/themes/theme-ui/ui-theme-components.css

@@ -451,6 +451,16 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   border-color: transparent;
 }
 
+.dnb-text-counter .dnb-icon {
+  margin-right: 0;
+  font-size: 0;
+  transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
+}
+.dnb-text-counter--exceeded .dnb-icon {
+  margin-right: 0.5rem;
+  font-size: var(--font-size-basis--em);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -459,16 +469,26 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }
 
 .dnb-forms-field-expiry .dnb-multi-input-mask {
@@ -481,12 +501,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -776,12 +790,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__label-description {
   margin-left: 0.3em;
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
-.dnb-forms-field-block__label-secondary {
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
 }
 .dnb-forms-field-block__status {
   grid-area: status;
@@ -1818,18 +1826,28 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__animation {
+.dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
   transition: height 400ms var(--easing-default);
 }
-.dnb-breadcrumb__animation .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple .dnb-breadcrumb__item {
   transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);
   transform: translateX(-1rem);
 }
-.dnb-breadcrumb__animation.dnb-height-animation--parallax .dnb-breadcrumb__item {
+.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+@media screen and (max-width: 60em) {
+  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+    display: none;
+  }
+}
+@media screen and (min-width: 60em) {
+  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+    display: none;
+  }
+}
 .dnb-breadcrumb__collapse {
   display: flex;
   flex-direction: column;
@@ -3824,13 +3842,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
-.dnb-flex-container--row-gap-small, .dnb-flex-container--has-size.dnb-flex-container--spacing-small, .dnb-flex-container--wrap.dnb-flex-container--direction-horizontal {
+.dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
-.dnb-flex-container--row-gap-medium, .dnb-flex-container--has-size.dnb-flex-container--spacing-medium {
+.dnb-flex-container--row-gap-medium {
   --gap: var(--spacing-medium);
 }
-.dnb-flex-container--row-gap-large, .dnb-flex-container--has-size.dnb-flex-container--spacing-large {
+.dnb-flex-container--row-gap-large {
   --gap: var(--spacing-large);
 }
 .dnb-flex-container__hr.dnb-hr {
@@ -5923,6 +5941,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -8597,7 +8616,7 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
 .dnb-textarea__inner {
   display: inline-flex;
   flex-direction: column;
-  margin: var(--textarea-padding-width);
+  margin: 0 var(--textarea-padding-width);
 }
 .dnb-textarea__shell {
   display: inline-flex;
@@ -8612,15 +8631,22 @@ html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disa
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
   display: inline-flex;
+  margin: var(--textarea-padding-width) 0;
 }
 .dnb-textarea__suffix.dnb-suffix {
   padding-left: 1rem;
 }
+.dnb-textarea .dnb-text-counter {
+  margin-left: -0.5rem;
+}
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
@@ -8711,7 +8737,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 .dnb-textarea__inner > .dnb-form-status {
   order: 2;
-  margin: 1rem 0 0 calc(0px - var(--textarea-padding-width));
+  margin: 0.5rem 0 0 calc(0px - var(--textarea-padding-width));
 }
 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label {
   margin-top: 0.5rem;
@@ -11234,6 +11260,13 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -11247,14 +11280,20 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
   color: var(--color-black-55);
 }
 .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 {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   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 {
@@ -11397,6 +11436,10 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before {
 .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
   box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
 }
+.dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  background-color: var(--color-mint-green);
+  color: var(--color-white);
+}
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);
@@ -11761,6 +11804,13 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
+.dnb-text-counter.dnb-p {
+  color: var(--color-black-55);
+}
+.dnb-text-counter--exceeded.dnb-p {
+  color: var(--color-fire-red);
+}
+
 /**
  * ATTENTION: This file is auto generated by using "themeFactory".
  * But you still can change the content of this file on the very top.
@@ -11773,16 +11823,26 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }
 
 .dnb-forms-field-expiry .dnb-multi-input-mask {
@@ -11795,12 +11855,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 /*
  * Utilities
  */
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-number {
   --number-control-button-border-color: black;
   --number-control-button-border-color--hover: darkgrey;
@@ -12090,12 +12144,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__label-description {
   margin-left: 0.3em;
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
-.dnb-forms-field-block__label-secondary {
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
 }
 .dnb-forms-field-block__status {
   grid-area: status;
@@ -12232,4 +12280,13 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   --number-control-button-color--active: var(--color-sea-green);
   --number-control-button--error: var(--color-fire-red);
   --number-control-button--error-contrast: var(--color-fire-red-8);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button.dnb-button--size-small {
+  --button-height--small: 2rem;
+  --button-width--small: 2rem;
+}
+
+.dnb-forms-field-block__label-description {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
 }