@navikt/ds-css 7.40.0 → 8.0.0

package/expansioncard.css

@@ -1,239 +0,0 @@
-.navds-expansioncard {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
-  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
-  --__ac-expansioncard-border-width: 1px;
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
-
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
-  height: fit-content;
-}
-
-.navds-expansioncard--open {
-  --__ac-expansioncard-border-color: var(
-    --ac-expansioncard-border-open-color,
-    var(--ac-expansioncard-border-color, var(--a-border-default))
-  );
-}
-
-.navds-expansioncard:hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-:where(.navds-expansioncard.navds-expansioncard--open):hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-/*************************
- * Header *
- *************************/
-.navds-expansioncard__header {
-  width: 100%;
-  display: flex;
-  gap: var(--a-spacing-4);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
-  position: relative;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  justify-content: space-between;
-}
-
-.navds-expansioncard--small {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
-}
-
-.navds-expansioncard__header:hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-bottom: none;
-  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 -1px 0 0 var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
-  content: "";
-  background-color: var(--a-border-divider);
-  bottom: 0;
-  left: var(--__ac-expansioncard-padding-inline);
-  height: 1px;
-  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
-  position: absolute;
-  opacity: 1;
-  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
-  opacity: 0;
-}
-
-/*************************
- * Header/Typography *
- *************************/
-
-.navds-expansioncard__title--small {
-  margin-top: 0.625rem;
-}
-
-.navds-expansioncard__title--medium {
-  margin-top: var(--a-spacing-2);
-}
-
-.navds-expansioncard__title--large {
-  margin-top: var(--a-spacing-1);
-}
-
-.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
-  margin-top: var(--a-spacing-05);
-}
-
-.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
-  margin-top: 0;
-}
-
-/*************************
- * Header/Button *
- *************************/
-.navds-expansioncard__header-button {
-  display: grid;
-  place-content: center;
-  cursor: pointer;
-  margin: 0;
-  background: transparent;
-  border: none;
-  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
-  min-height: 3rem;
-  min-width: 3rem;
-  font-size: 1.5rem;
-  align-self: flex-start;
-  padding: 0;
-}
-
-.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
-  background-color: var(--a-surface-hover);
-}
-
-.navds-expansioncard__header-chevron {
-  transition: transform 150ms ease-in-out;
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(0) rotate(180deg);
-}
-
-.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(1px);
-}
-
-.navds-expansioncard__header-button:focus-visible {
-  outline: 3px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-expansioncard__header-button:focus {
-    outline: 3px solid transparent;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-expansioncard--open
-  > :where(.navds-expansioncard__header)
-  > :where(.navds-expansioncard__header-button):hover
-  :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(-1px) rotate(180deg);
-}
-
-.navds-expansioncard__header-button::after {
-  inset: 0;
-  z-index: 1;
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-
-  /* Avoid @media print from styling after-element */
-  opacity: 0;
-}
-
-/*************************
- * Content *
- *************************/
-.navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-5);
-
-  border-end-end-radius: var(--__ac-expansioncard-border-radius);
-  border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
-    var(--__ac-expansioncard-padding-inline);
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-top: none;
-}
-
-.navds-expansioncard--small .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-}
-
-.navds-expansioncard__content--closed {
-  display: none;
-}
-
-:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 1px 0 0 var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard__content-inner {
-  animation: fadeExpansionCard 250ms ease;
-}
-
-.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
-  animation: none;
-}
-
-@keyframes fadeExpansionCard {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
-  }
-
-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-expansioncard:hover {
-    --__ac-expansioncard-border-color: highlight;
-
-    outline: 1px solid highlight;
-  }
-}

package/form/combobox.css

@@ -1,431 +0,0 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-.navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.5rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
-  --__ac-combobox-border-width: 1px;
-  --__ac-combobox-input-height: 2rem;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-form-field--small .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.25rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
-  --__ac-combobox-input-height: 1.5rem;
-}
-
-.navds-combobox--disabled {
-  opacity: 0.3;
-}
-
-.navds-combobox--disabled .navds-combobox__wrapper *:hover {
-  cursor: not-allowed;
-}
-
-.navds-combobox--disabled .navds-text-field__input {
-  border: 1px solid var(--a-border-default);
-}
-
-.navds-combobox--disabled .navds-combobox__selected-options {
-  pointer-events: none;
-}
-
-.navds-combobox--readonly {
-  pointer-events: none;
-}
-
-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
-
-.navds-combobox--readonly .navds-text-field__input,
-.navds-combobox--readonly .navds-combobox__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-}
-
-.navds-combobox__button-toggle-list svg,
-.navds-combobox__list svg {
-  width: var(--__ac-combobox-icon-size);
-  height: var(--__ac-combobox-icon-size);
-}
-
-.navds-combobox__wrapper-inner.navds-text-field__input {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
-  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
-}
-
-.navds-combobox__wrapper-inner > :first-child {
-  flex: 2;
-}
-
-.navds-combobox__wrapper-inner:hover {
-  cursor: text;
-}
-
-.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
-}
-
-.navds-combobox--error
-  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
-
-.navds-combobox__selected-options {
-  gap: 0;
-  align-items: center;
-}
-
-.navds-combobox__selected-options > li {
-  margin: auto 0;
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-combobox__selected-options > li:last-of-type {
-  display: flex;
-  flex: 1;
-}
-
-.navds-combobox__selected-options--no-bg {
-  font-family: inherit;
-  font-size: var(--a-font-size-large);
-  font-weight: var(--a-font-weight-regular);
-  letter-spacing: 0;
-  line-height: var(--a-font-line-height-large);
-  margin: 0;
-  padding-left: 0.25rem;
-}
-
-.navds-combobox__selected-options[data-type="multiple"] {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
-}
-
-.navds-combobox__selected-options > li:only-child > .navds-combobox__input {
-  margin-left: var(--a-spacing-1);
-}
-
-.navds-combobox__input-wrapper {
-  width: 100%;
-}
-
-.navds-combobox__input {
-  flex: 1;
-  border: none;
-  padding: 0;
-  margin: 0;
-  min-width: 10ch;
-  width: 100%;
-  height: var(--__ac-combobox-input-height);
-}
-
-.navds-combobox__selected-options[data-type="single"] .navds-combobox__input {
-  min-width: auto;
-}
-
-.navds-combobox__input--hide-caret {
-  caret-color: transparent;
-}
-
-.navds-combobox__input:focus-visible {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow: var(--a-shadow-focus);
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
-  box-shadow: none;
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-combobox__input:focus {
-    outline: none;
-    border: none;
-    box-shadow: none;
-  }
-
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
-  }
-}
-
-@supports not selector(:has(*)) {
-  .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
-  }
-}
-
-.navds-combobox__input::-webkit-search-cancel-button {
-  display: none;
-}
-
-.navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
-.navds-combobox__button-toggle-list:active:hover {
-  color: var(--a-text-action);
-}
-
-.navds-combobox__button-toggle-list:hover {
-  color: var(--a-text-action-selected);
-}
-
-.navds-combobox__button-toggle-list:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-combobox__button-toggle-list:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
-  }
-}
-
-/* dropdown & non selectable dropdown items */
-
-.navds-combobox__list {
-  /* stylelint-disable-next-line aksel/design-token-exists */
-  width: var(--ac-floating-anchor-width);
-  overflow-y: auto;
-  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--a-shadow-small);
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
-  color: var(--ac-combobox-list-text, var(--a-text-default));
-}
-
-.navds-combobox__list--closed {
-  display: none;
-}
-
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.navds-combobox__list-item,
-.navds-combobox__list-item--loading,
-.navds-combobox__list-item--no-options,
-.navds-combobox__list-item--new-option,
-.navds-combobox__list-item--max-selected {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-block: var(--__ac-combobox-list-item-padding-block);
-  padding-inline: var(--__ac-combobox-list-item-padding-inline);
-  width: 100%;
-  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
-}
-
-.navds-combobox__list:has(.navds-combobox__list_non-selectables) .navds-combobox__list-item {
-  scroll-margin-top: 48px;
-}
-
-.navds-combobox__list-item--loading {
-  justify-content: center;
-  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
-}
-
-.navds-combobox__list-item--max-selected {
-  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
-  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
-  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
-}
-
-.navds-combobox__list_non-selectables:hover {
-  cursor: default;
-}
-
-/* ul-list and selectable li-items */
-
-.navds-combobox__list-options {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: inherit;
-  flex-direction: inherit;
-  gap: inherit;
-  background-color: inherit;
-  align-items: flex-start;
-}
-
-.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover
-  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
-  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
-  cursor: pointer;
-  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
-  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
-}
-
-.navds-combobox__list-item[data-no-focus="true"] {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.navds-combobox__list-item--selected {
-  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
-}
-
-.navds-combobox__list-item--selected p {
-  font-weight: var(--a-font-weight-bold);
-}
-
-.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
-  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
-}
-
-.navds-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle);
-  cursor: pointer;
-  justify-content: flex-start;
-  gap: 0.25rem;
-}
-
-.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle-hover);
-}
-
-.navds-combobox__list-item--new-option--focus {
-  box-shadow:
-    var(--a-shadow-focus) inset,
-    var(--a-border-action) 0 0 0 5px inset;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-}
-
-.navds-combobox__list-item mark {
-  background-color: transparent;
-  font-weight: bold;
-}
-
-/* Mobile */
-
-@media (max-width: 479px) {
-  .navds-combobox__button-toggle-list {
-    right: 0.5rem;
-  }
-
-  /* add bigger click area for input */
-  .navds-combobox__input {
-    min-width: min-content;
-    padding: 0.75rem 0;
-  }
-
-  .navds-combobox__selected-options {
-    gap: var(--a-spacing-1);
-  }
-
-  .navds-combobox__list {
-    overscroll-behavior: contain;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-    outline-color: highlight;
-  }
-
-  .navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover
-    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
-    border-left-color: highlight;
-    color: highlight;
-  }
-
-  .navds-combobox__list-item[data-no-focus="true"] {
-    opacity: 1;
-    color: graytext;
-  }
-
-  .navds-combobox__list-item--selected {
-    background-color: selecteditem;
-    color: selecteditemtext;
-  }
-
-  .navds-combobox__list-item--selected > * {
-    forced-color-adjust: none;
-  }
-
-  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-    border-left-color: highlight;
-    color: highlight;
-  }
-
-  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-    color: highlight;
-  }
-
-  .navds-combobox__list-item--new-option--focus {
-    outline: 2px solid highlight;
-    outline-offset: -3px;
-  }
-}

package/form/confirmation-panel.css

@@ -1,53 +0,0 @@
-.navds-confirmation-panel__inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding: var(--a-spacing-4);
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
-  transition: background-color linear 100ms;
-  justify-self: stretch;
-  position: relative;
-}
-
-.navds-confirmation-panel__content {
-  max-width: 80ch;
-}
-
-.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-}
-
-.navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-  color: var(--a-text-default);
-}
-
-@media (forced-colors: active) {
-  .navds-confirmation-panel__inner::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    border-left: 8px solid;
-    border-color: orange;
-    forced-color-adjust: none;
-    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
-  }
-
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
-    border-color: green;
-  }
-
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
-    border-color: red;
-  }
-}