@dnb/eufemia/extensions/forms/Field/MultiSelection/style/dnb-multi-selection.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.dnb-forms-field-multi-selection__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.dnb-forms-field-multi-selection__popover {
  --popover-border-radius: var(--token-radius-lg);
}
.dnb-forms-field-multi-selection__popover.dnb-popover {
  min-width: auto;
}
.dnb-forms-field-multi-selection__search {
  padding: 0 0 1rem;
}
.dnb-forms-field-multi-selection__items {
  display: flex;
  flex-direction: column;
}
.dnb-forms-field-multi-selection__items:focus-visible {
  outline: var(--focus-ring-width) solid var(--token-color-stroke-action-focus);
  outline-offset: var(--focus-ring-offset);
}
.dnb-forms-field-multi-selection__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dnb-forms-field-multi-selection__item-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 2.35rem;
}
.dnb-forms-field-multi-selection__item-text, .dnb-forms-field-multi-selection__item-description {
  display: block;
  word-break: break-word;
}
.dnb-forms-field-multi-selection__item-description {
  color: var(--token-color-text-neutral-alternative);
}
.dnb-forms-field-multi-selection__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding-right: 0.5rem;
  --item-outline-width: 0.0625rem;
  --item-outline-width--hover: 0.125rem;
  --item-outline-width--active: 0.0625rem;
  --item-outline-width--focus: var(--focus-ring-width);
  background-color: var(--item-background-color, transparent);
}
.dnb-forms-field-multi-selection__item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border: var(--item-outline-width) solid var(--item-outline-color, transparent);
  border-bottom: var(--item-outline-width) solid var(--item-outline-color, var(--item-outline-bottom-color, transparent));
}
.dnb-forms-field-multi-selection__item {
  cursor: pointer;
}
.dnb-forms-field-multi-selection__item .dnb-checkbox {
  align-self: center;
  width: 100%;
}
.dnb-forms-field-multi-selection__item .dnb-checkbox .dnb-checkbox__label {
  font-size: var(--font-size-basis);
}
.dnb-forms-field-multi-selection__item--parent:not(.dnb-forms-field-multi-selection__item--selected) {
  --item-background-color: var(
    --token-color-background-neutral-alternative
  );
}
.dnb-forms-field-multi-selection__item--selected {
  --item-background-color: var(
    --token-color-background-selected-subtle
  );
}
.dnb-forms-field-multi-selection__item--select-all {
  --item-outline-bottom-color: var(
    --token-color-stroke-neutral-subtle
  );
}
.dnb-forms-field-multi-selection__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dnb-forms-field-multi-selection__item .dnb-checkbox__input {
  --checkbox-bounding--medium: 100;
}
.dnb-forms-field-multi-selection__item:has(.dnb-checkbox__input) {
  overflow: clip;
}
.dnb-forms-field-multi-selection__item:hover:not(.dnb-forms-field-multi-selection__item--disabled) {
  --item-outline-color: var(--token-color-stroke-action);
  --item-outline-width: var(--item-outline-width--hover);
}
.dnb-forms-field-multi-selection__item:hover:not(.dnb-forms-field-multi-selection__item--disabled)::after {
  z-index: 2;
}
.dnb-forms-field-multi-selection__item:active:not(.dnb-forms-field-multi-selection__item--disabled) {
  --item-outline-color: var(--token-color-stroke-action-pressed);
  --item-outline-width: var(--item-outline-width--active);
}
.dnb-forms-field-multi-selection__item .dnb-checkbox__order .dnb-form-label {
  padding-left: 1rem;
}
html[data-whatinput=keyboard] .dnb-forms-field-multi-selection__item:has(.dnb-checkbox__input:focus) {
  --item-outline-color: var(--token-color-stroke-action-focus);
  --item-outline-width: var(--item-outline-width--focus);
  --item-background-color: var(
    --token-color-background-action-focus-subtle
  );
}
html[data-whatinput=keyboard] .dnb-forms-field-multi-selection__item:has(.dnb-checkbox__input:focus),
html[data-whatinput=keyboard] .dnb-forms-field-multi-selection__item:has(.dnb-checkbox__input:focus) .dnb-forms-field-multi-selection__item-description,
html[data-whatinput=keyboard] .dnb-forms-field-multi-selection__item:has(.dnb-checkbox__input:focus) .dnb-form-label {
  color: var(--token-color-text-action-focus);
}
.dnb-forms-field-multi-selection__popover-content {
  display: flex;
  flex-direction: column;
  --inner-space: 2.5rem;
  width: calc(var(--forms-field-width--large) - var(--inner-space, 0));
}
@media screen and (max-width: 25em) {
  .dnb-forms-field-multi-selection__popover-content {
    width: 70dvw;
  }
}
.dnb-forms-field-multi-selection__popover-content {
  max-height: calc(var(--popover-max-height, 90dvh) - var(--inner-space, 0));
}
.dnb-popover--no-inner-space .dnb-forms-field-multi-selection__popover-content {
  --inner-space: -0.5rem;
}
.dnb-forms-field-multi-selection__popover-content:focus {
  outline: none;
}
.dnb-forms-field-multi-selection__popover-content:focus-visible {
  outline: var(--focus-ring-width) solid var(--token-color-stroke-action-focus);
  outline-offset: var(--focus-ring-offset);
}
.dnb-forms-field-multi-selection__nested-items {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--token-color-background-neutral);
}
.dnb-forms-field-multi-selection__item--level-1 {
  padding-left: 2rem;
}
.dnb-forms-field-multi-selection__item--level-2 {
  padding-left: 3rem;
}
.dnb-forms-field-multi-selection__item--level-3 {
  padding-left: 4rem;
}
.dnb-forms-field-multi-selection__no-options {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dnb-forms-field-multi-selection__no-options-text {
  color: var(--token-color-text-neutral-alternative);
}
.dnb-forms-field-multi-selection__selected-items__inner {
  display: flex;
  flex-wrap: wrap;
  max-height: 10rem;
  gap: 0.5rem;
  padding: 0.125rem 0 1rem 0.125rem;
  margin: -0.125rem 0 0 -0.125rem;
}
.dnb-forms-field-multi-selection__search ~ .dnb-forms-field-multi-selection__selected-items .dnb-forms-field-multi-selection__selected-items__inner {
  padding-top: 1rem;
}
.dnb-forms-field-multi-selection__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
}
.dnb-forms-field-multi-selection__selected-items-header {
  padding: 0.5rem 0;
}
.dnb-forms-field-multi-selection--inline .dnb-forms-field-multi-selection__inline-content {
  display: flex;
  flex-direction: column;
}
.dnb-forms-field-multi-selection--inline .dnb-forms-field-multi-selection__items {
  max-height: none;
}