@navikt/ds-css 7.39.1 → 8.0.0

package/action-menu.css

@@ -1,227 +0,0 @@
-.navds-action-menu__content {
-  overflow: hidden;
-  box-shadow: var(--a-shadow-medium);
-  border-radius: var(--a-border-radius-large);
-}
-
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-.navds-action-menu__content > .navds-action-menu__content-inner {
-  --__ac-action-menu-content-p: var(--a-spacing-2);
-  --__ac-action-menu-item-pr: var(--a-spacing-3);
-  --__ac-action-menu-item-pl: var(--a-spacing-2);
-  --__ac-action-menu-item-height: 2rem;
-
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--a-surface-default);
-  min-width: 128px;
-  max-width: min(95vw, 640px);
-  transform-origin: var(--__ac-action-menu-content-transform-origin);
-  animation-duration: 160ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__ac-action-menu-content-p);
-  overflow: auto;
-  max-height: var(--__ac-action-menu-content-available-height);
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
-  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
-  animation-name: aksel-action-from-top, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
-  animation-name: aksel-action-from-left, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
-  animation-name: aksel-action-from-right, aksel-action-fade-in;
-}
-
-@keyframes aksel-action-from-bottom {
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-top {
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-left {
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-right {
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-fade-in {
-  from {
-    opacity: 0.01;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.navds-action-menu__item {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-2);
-  min-height: var(--__ac-action-menu-item-height);
-  cursor: default;
-  border-radius: var(--a-border-radius-medium);
-  position: relative;
-  padding-left: var(--__ac-action-menu-item-pl);
-  padding-right: var(--__ac-action-menu-item-pr);
-  font-size: var(--a-font-size-medium);
-  scroll-margin-block: var(--__ac-action-menu-content-p);
-  line-height: 1.5;
-  color: var(--a-text-default);
-  text-decoration: none;
-}
-
-.navds-action-menu__item svg {
-  flex-shrink: 0;
-}
-
-.navds-action-menu__item--has-icon {
-  --__ac-action-menu-item-pl: var(--a-spacing-6);
-}
-
-.navds-action-menu__sub-trigger {
-  --__ac-action-menu-item-pr: var(--a-spacing-05);
-}
-
-.navds-action-menu__item:focus {
-  outline: none;
-  background-color: var(--a-surface-action-subtle-hover);
-  color: var(--a-text-default);
-}
-
-.navds-action-menu__item--danger {
-  color: var(--a-text-danger);
-}
-
-.navds-action-menu__item--danger:focus {
-  background-color: var(--a-surface-danger-subtle);
-}
-
-.navds-action-menu__marker {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-action-menu__marker--right {
-  margin-left: auto;
-  padding-left: var(--a-spacing-4);
-}
-
-.navds-action-menu__marker--left {
-  position: absolute;
-  left: 0;
-  width: var(--__ac-action-menu-item-pl);
-  display: inline-flex;
-  justify-content: center;
-}
-
-.navds-action-menu__marker-icon svg {
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-.navds-action-menu__shortcut {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-text-default);
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
-  min-width: 1.125rem;
-  height: 1.125rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--a-font-size-small);
-}
-
-.navds-action-menu__label {
-  display: flex;
-  align-items: center;
-  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
-  padding-right: var(--__ac-action-menu-item-pr);
-  padding-left: var(--__ac-action-menu-item-pl);
-  color: var(--a-text-subtle);
-  border-radius: var(--a-border-radius-medium);
-  user-select: none;
-  cursor: default;
-  font-size: var(--a-font-size-small);
-}
-
-.navds-action-menu__divider {
-  height: 1px;
-  margin-block: var(--a-spacing-2);
-  background-color: var(--a-border-divider);
-}
-
-.navds-action-menu__indicator {
-  display: grid;
-  place-content: center;
-}
-
-.navds-action-menu__indicator-icon {
-  font-size: 14px;
-}
-
-.navds-action-menu__indicator-icon--unchecked,
-.navds-action-menu__indicator-icon--checked,
-.navds-action-menu__indicator-icon--indeterminate {
-  display: none;
-}
-
-.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
-  display: block;
-}
-
-.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
-  display: block;
-}
-
-.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
-  display: block;
-}
-
-.navds-action-menu__item:where([aria-disabled="true"]) {
-  color: var(--a-text-subtle);
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.navds-action-menu__sub-trigger:where([data-state="open"]) {
-  background-color: var(--a-surface-neutral-subtle);
-}

package/alert.css

@@ -1,380 +0,0 @@
-.navds-alert {
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid;
-  padding: var(--a-spacing-4);
-  display: flex;
-  gap: var(--a-spacing-3);
-  align-items: center;
-}
-
-.navds-alert--small.navds-alert--close-button {
-  align-items: flex-start;
-}
-
-.navds-alert__wrapper--maxwidth {
-  max-width: 43.5rem;
-}
-
-.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-1);
-}
-
-.navds-alert--small {
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-alert--full-width {
-  border-radius: 0;
-}
-
-.navds-alert > .navds-alert__icon {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  align-self: flex-start;
-  height: var(--a-font-line-height-xlarge);
-  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
-}
-
-.navds-alert--small > .navds-alert__icon {
-  margin-block-start: 0;
-  height: var(--a-font-line-height-large);
-}
-
-.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-1);
-}
-
-.navds-alert--error {
-  border-color: var(--ac-alert-error-border, var(--a-border-danger));
-  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-alert--error > .navds-alert__icon {
-  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
-}
-
-.navds-alert--warning {
-  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
-  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
-}
-
-.navds-alert--warning > .navds-alert__icon {
-  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
-  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
-}
-
-.navds-alert--info {
-  border-color: var(--ac-alert-info-border, var(--a-border-info));
-  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
-}
-
-.navds-alert--info > .navds-alert__icon {
-  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
-}
-
-.navds-alert--success {
-  border-color: var(--ac-alert-success-border, var(--a-border-success));
-  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
-}
-
-.navds-alert--success > .navds-alert__icon {
-  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
-}
-
-.navds-alert--inline {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
-.navds-alert__button-wrapper {
-  align-self: flex-start;
-  flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-end;
-}
-
-@media (forced-colors: active) {
-  .navds-alert {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
-  }
-}
-
-/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
-.navds-base-alert {
-  display: grid;
-  border-radius: var(--a-border-radius-xlarge);
-  overflow: clip;
-  height: fit-content;
-
-  --__ac-base-alert-pi: var(--a-spacing-5);
-  --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
-  --__ac-base-alert-header-max-width: 37.5rem;
-  --__ac-base-alert-header-icon-margin-block-start: var(--a-spacing-2);
-  --__ac-base-alert-header-close-button-margin-block-start: var(--a-spacing-1);
-  --__ac-global-alert-alignment: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
-
-  &[data-centered="false"] {
-    --__ac-global-alert-alignment: var(--a-spacing-5);
-  }
-
-  &[data-size="small"] {
-    --__ac-base-alert-pi: var(--a-spacing-4);
-    --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
-    --__ac-base-alert-header-icon-margin-block-start: var(--a-spacing-1-alt);
-    --__ac-base-alert-header-close-button-margin-block-start: var(--a-spacing-05);
-
-    &[data-centered="false"] {
-      --__ac-global-alert-alignment: var(--a-spacing-4);
-    }
-  }
-
-  &[data-variant="moderate"] {
-    outline: 1px solid;
-    outline-offset: -1px;
-  }
-
-  &[data-variant="strong"] {
-    outline: 4px solid;
-    outline-offset: -4px;
-  }
-
-  &[data-global="true"] {
-    border-radius: 0;
-  }
-}
-
-.navds-base-alert[data-color="accent"] {
-  outline-color: var(--a-border-action);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-action-subtle);
-      color: var(--a-blue-800);
-      border-color: var(--a-blue-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="neutral"] {
-  outline-color: var(--a-gray-700);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-neutral-subtle);
-      color: var(--a-gray-800);
-      border-color: var(--a-gray-200);
-    }
-  }
-
-  &[data-variant="strong"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-neutral);
-      color: var(--a-text-on-neutral);
-    }
-  }
-}
-
-.navds-base-alert[data-color="info"] {
-  outline-color: var(--a-border-info);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-info-subtle);
-      color: var(--a-lightblue-900);
-      border-color: var(--a-lightblue-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="success"] {
-  outline-color: var(--a-border-success);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-success-subtle);
-      color: var(--a-green-800);
-      border-color: var(--a-green-200);
-    }
-  }
-
-  &[data-variant="strong"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-success);
-      color: var(--a-text-on-success);
-    }
-  }
-}
-
-.navds-base-alert[data-color="warning"] {
-  outline-color: var(--a-surface-warning);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-warning-subtle);
-      color: var(--a-orange-900);
-      border-color: var(--a-orange-200);
-    }
-  }
-
-  &[data-variant="strong"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-warning);
-      color: var(--a-text-on-warning);
-    }
-  }
-}
-
-.navds-base-alert[data-color="danger"] {
-  outline-color: var(--a-border-danger);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-danger-subtle);
-      color: var(--a-red-800);
-      border-color: var(--a-red-200);
-    }
-  }
-
-  &[data-variant="strong"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-danger);
-      color: var(--a-text-on-danger);
-    }
-  }
-}
-
-.navds-base-alert[data-color="brand-magenta"] {
-  outline-color: var(--a-border-alt-1);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-alt-1-subtle);
-      color: var(--a-purple-800);
-      border-color: var(--a-purple-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="brand-beige"] {
-  outline-color: var(--a-border-warning);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-warning-subtle);
-      color: var(--a-orange-900);
-      border-color: var(--a-orange-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="brand-blue"] {
-  outline-color: var(--a-border-alt-3);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-alt-3-subtle);
-      color: var(--a-deepblue-800);
-      border-color: var(--a-deepblue-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="meta-lime"] {
-  outline-color: var(--a-border-alt-2);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-alt-2-subtle);
-      color: var(--a-limegreen-900);
-      border-color: var(--a-limegreen-200);
-    }
-  }
-}
-
-.navds-base-alert[data-color="meta-purple"] {
-  outline-color: var(--a-border-alt-1);
-
-  &[data-variant="moderate"] {
-    .navds-base-alert__header {
-      background: var(--a-surface-alt-1-subtle);
-      color: var(--a-purple-800);
-      border-color: var(--a-purple-200);
-    }
-  }
-}
-
-.navds-base-alert__header {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: 0 var(--__ac-base-alert-pi);
-  border-bottom: 1px solid;
-
-  .navds-base-alert[data-global="true"] & {
-    padding-inline: var(--__ac-global-alert-alignment);
-  }
-
-  .navds-base-alert[data-variant="strong"] & {
-    border-bottom: none;
-  }
-
-  &:only-child {
-    border-bottom: none;
-  }
-}
-
-.navds-base-alert__icon {
-  font-size: 1.5rem;
-  margin-top: var(--__ac-base-alert-header-icon-margin-block-start);
-  display: grid;
-}
-
-.navds-base-alert__title {
-  padding-block: var(--a-spacing-1-alt);
-}
-
-.navds-base-alert__content {
-  padding: var(--__ac-base-alert-content-p);
-  background-color: var(--a-bg-default);
-
-  .navds-base-alert[data-global="true"] & {
-    padding-inline: var(--__ac-global-alert-alignment);
-  }
-}
-
-.navds-base-alert__close-button.navds-base-alert__close-button {
-  margin-left: auto;
-  margin-block-start: var(--__ac-base-alert-header-close-button-margin-block-start);
-
-  /* Moved focus-outline over wrapper outline */
-  z-index: 1;
-
-  &:focus-visible {
-    box-shadow: 0 0 0 3px white;
-  }
-
-  &.navds-base-alert__close-button.navds-base-alert__close-button {
-    color: var(--a-text-on-inverted);
-  }
-}
-
-.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button {
-  color: var(--a-text-default);
-
-  &:active {
-    color: var(--a-text-on-inverted);
-  }
-}

package/baseline/_inline-reset.css

@@ -1,54 +0,0 @@
-html,
-:host {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  color: inherit;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default. */
-
-[hidden] {
-  display: none !important;
-}

package/baseline/_utilities.css

@@ -1,62 +0,0 @@
-/* https://web.dev/prefers-reduced-motion/ */
-
-@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
-  ::before,
-  ::after {
-    animation-delay: -1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    background-attachment: initial !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0s !important;
-    transition-delay: 0s !important;
-  }
-}
-
-/*
- * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
- *
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.sr-only,
-.navds-sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-/*
-* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
-*
-* Extends the .sr-only class to allow the element
-* to be focusable when navigated to via the keyboard:
-* https://www.drupal.org/node/897638
-*/
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus,
-.navds-sr-only.focusable:active,
-.navds-sr-only.focusable:focus {
-  clip: auto;
-  clip-path: none;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}