@navikt/ds-css 7.40.0 → 8.0.1

package/guide-panel.css

@@ -1,96 +0,0 @@
-.navds-guide-panel {
-  --__ac-guide-panel-guide-size: 4rem;
-
-  position: relative;
-  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
-  position: absolute;
-  width: var(--__ac-guide-panel-guide-size);
-  height: var(--__ac-guide-panel-guide-size);
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.navds-guide svg,
-.navds-guide img {
-  height: 100%;
-  width: 100%;
-}
-
-.navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-4);
-  padding-top: var(--a-spacing-12);
-}
-
-@media (min-width: 480px) {
-  .navds-guide-panel {
-    --__ac-guide-panel-guide-size: 6.25rem;
-  }
-
-  .navds-guide-panel__content {
-    padding: var(--a-spacing-8);
-    padding-top: 4.25rem;
-  }
-}
-
-/* not-poster */
-
-.navds-guide-panel--not-poster {
-  padding-top: 0;
-  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide-panel--not-poster .navds-guide {
-  left: 0;
-  top: var(--a-spacing-5);
-  transform: none;
-}
-
-.navds-guide-panel--not-poster .navds-guide-panel__content {
-  padding: var(--a-spacing-4);
-  padding-left: var(--a-spacing-10);
-  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-}
-
-@media (min-width: 480px) {
-  .navds-guide-panel--not-poster {
-    --__ac-guide-panel-guide-size: 5rem;
-  }
-
-  .navds-guide-panel--not-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-  }
-}
-
-/* responsive-poster (on desktop) */
-
-@media (min-width: 480px) {
-  .navds-guide-panel--responsive-poster {
-    --__ac-guide-panel-guide-size: 5rem;
-
-    padding-top: 0;
-    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-  }
-
-  .navds-guide-panel--responsive-poster .navds-guide {
-    left: 0;
-    top: var(--a-spacing-5);
-    transform: none;
-  }
-
-  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-  }
-}

package/help-text.css

@@ -1,85 +0,0 @@
-.navds-help-text__button {
-  margin: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: transparent;
-  border-radius: var(--a-border-radius-full);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.25rem;
-  padding: calc(var(--a-spacing-1) / 2);
-}
-
-.navds-help-text__button:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow:
-    0 0 0 1px var(--a-border-focus),
-    inset 0 0 0 1px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:focus {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-border-focus),
-      inset 0 0 0 1px var(--a-border-focus);
-  }
-}
-
-.navds-help-text__icon {
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-help-text__popover > .navds-popover__arrow {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-}
-
-.navds-help-text__popover.navds-popover {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: min(65ch, calc(100vw - 1.5rem));
-
-  --ac-popover-border: var(--a-border-info);
-}
-
-.navds-help-text__icon--filled {
-  display: none;
-}
-
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
-  display: none;
-}
-
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
-  display: inherit;
-  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
-}
-
-.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
-    display: none;
-  }
-
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
-    display: inherit;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
-    display: inherit;
-  }
-
-  .navds-help-text__button:hover > .navds-help-text__icon {
-    color: highlight;
-  }
-
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
-    display: none;
-  }
-}

package/index.css

@@ -1,42 +0,0 @@
-@charset "UTF-8";
-
-@import "baseline/index.css";
-@import "typography.css";
-@import "accordion.css";
-@import "alert.css";
-@import "button.css";
-@import "chat.css";
-@import "chips.css";
-@import "copybutton.css";
-@import "dialog.css";
-@import "dropdown.css";
-@import "action-menu.css";
-@import "expansioncard.css";
-@import "guide-panel.css";
-@import "form/index.css";
-@import "help-text.css";
-@import "inline-message.css";
-@import "internalheader.css";
-@import "link.css";
-@import "link-anchor.css";
-@import "link-card.css";
-@import "loader.css";
-@import "modal.css";
-@import "pagination.css";
-@import "popover.css";
-@import "date.css";
-@import "tag.css";
-@import "timeline.css";
-@import "tooltip.css";
-@import "toggle-group.css";
-@import "panel.css";
-@import "link-panel.css";
-@import "read-more.css";
-@import "process.css";
-@import "progress-bar.css";
-@import "skeleton.css";
-@import "stepper.css";
-@import "table.css";
-@import "tabs.css";
-@import "list.css";
-@import "primitives/index.css";

package/inline-message.css

@@ -1,45 +0,0 @@
-.navds-inline-message {
-  display: flex;
-  gap: var(--a-spacing-1);
-}
-
-.navds-inline-message[data-color="info"] {
-  color: var(--a-lightblue-900);
-
-  & .navds-inline-message__icon {
-    color: var(--a-icon-info);
-  }
-}
-
-.navds-inline-message[data-color="success"] {
-  color: var(--a-green-900);
-
-  & .navds-inline-message__icon {
-    color: var(--a-icon-success);
-  }
-}
-
-.navds-inline-message[data-color="danger"] {
-  color: var(--a-red-900);
-
-  & .navds-inline-message__icon {
-    color: var(--a-icon-danger);
-  }
-}
-
-.navds-inline-message[data-color="warning"] {
-  color: var(--a-orange-900);
-
-  & .navds-inline-message__icon {
-    color: var(--a-icon-warning);
-  }
-}
-
-.navds-inline-message__icon {
-  font-size: 1.5rem;
-  flex: 0 0 auto;
-
-  .navds-inline-message[data-size="small"] & {
-    font-size: 1.25rem;
-  }
-}

package/internalheader.css

@@ -1,105 +0,0 @@
-.navds-internalheader {
-  display: flex;
-  align-self: stretch;
-  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
-  min-height: 3rem;
-
-  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
-}
-
-@media (forced-colors: active) {
-  .navds-internalheader {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
-  }
-
-  .navds-internalheader a:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  .navds-internalheader .navds-internalheader__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-}
-
-.navds-internalheader__title {
-  border: none;
-  overflow: visible;
-  background: transparent;
-  font: inherit;
-  font-weight: var(--a-font-weight-bold);
-  line-height: normal;
-  text-align: left;
-  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
-  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  margin: 0;
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
-
-button.navds-internalheader__title {
-  cursor: pointer;
-}
-
-.navds-internalheader__user {
-  padding: 0 var(--a-spacing-5);
-  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
-  display: flex;
-  align-items: center;
-}
-
-.navds-internalheader__button {
-  border: none;
-  margin: 0;
-  padding: 0 var(--a-spacing-3);
-  overflow: visible;
-  background: transparent;
-  font: inherit;
-  line-height: normal;
-  cursor: pointer;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-self: center;
-  gap: var(--a-spacing-2);
-  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
-
-a.navds-internalheader__title:hover,
-button.navds-internalheader__title:hover,
-.navds-internalheader__button:hover {
-  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
-}
-
-.navds-internalheader__title:focus-visible,
-.navds-internalheader__button:focus-visible {
-  box-shadow: var(--navds-internalheader-focus);
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-internalheader__title:focus,
-  .navds-internalheader__button:focus {
-    box-shadow: var(--navds-internalheader-focus);
-    outline: none;
-  }
-}
-
-a.navds-internalheader__title:active,
-button.navds-internalheader__title:active,
-.navds-internalheader__button:active {
-  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
-}
-
-.navds-internalheader__user-button {
-  padding-left: var(--a-spacing-5);
-  gap: var(--a-spacing-4);
-}

package/link-anchor.css

@@ -1,53 +0,0 @@
-.navds-link-anchor__overlay {
-  cursor: pointer;
-}
-
-.navds-link-anchor__overlay:focus-within {
-  outline: 3px solid var(--a-border-focus);
-  outline-offset: 3px;
-}
-
-@supports selector(:has(*)) {
-  .navds-link-anchor__overlay:focus-within {
-    outline: unset;
-  }
-
-  .navds-link-anchor__overlay:has(:focus-visible) {
-    outline: 3px solid var(--a-border-focus);
-    outline-offset: 3px;
-  }
-}
-
-.navds-link-anchor {
-  text-decoration: underline;
-  text-decoration-color: currentColor;
-  text-underline-offset: 0.1em;
-  text-decoration-thickness: 0.05em;
-  color: inherit;
-}
-
-.navds-link-anchor:hover,
-.navds-link-anchor__overlay:hover .navds-link-anchor {
-  text-decoration-thickness: 0.111em;
-}
-
-.navds-link-anchor:focus-visible {
-  outline: 3px solid var(--a-border-focus);
-  outline-offset: 3px;
-  border-radius: 1px;
-}
-
-.navds-link-anchor__overlay .navds-link-anchor:focus-visible {
-  outline: none;
-}
-
-.navds-link-anchor__arrow {
-  transition: transform 200ms;
-  transform: translateX(0);
-  flex-shrink: 0;
-}
-
-.navds-link-anchor:hover .navds-link-anchor__arrow,
-.navds-link-anchor__overlay:hover .navds-link-anchor__arrow {
-  transform: translateX(4px);
-}

package/link-card.css

@@ -1,127 +0,0 @@
-.navds-link-card {
-  --__ac-link-card-padding-block: var(--a-spacing-4);
-  --__ac-link-card-padding-inline: var(--a-spacing-5);
-
-  border-radius: var(--a-border-radius-xlarge);
-  text-decoration: none;
-  color: var(--a-text-default);
-  transition-property: border-color, box-shadow, transform, background-color;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0, 1);
-  position: relative;
-  background-color: var(--a-surface-default);
-  border: 1px solid var(--a-border-subtle);
-  padding: var(--__ac-link-card-padding-block) var(--__ac-link-card-padding-inline);
-  cursor: pointer;
-  display: grid;
-  grid-template-areas:
-    "image image image"
-    "icon title arrow"
-    "icon description arrow"
-    "icon footer arrow";
-  grid-template-columns: auto 1fr;
-  grid-template-rows: min-content min-content min-content auto;
-  align-items: center;
-}
-
-.navds-link-card[data-align-arrow="baseline"] {
-  grid-template-areas:
-    "image image image"
-    "icon title arrow"
-    "icon description description"
-    "icon footer footer";
-}
-
-.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) {
-  grid-template-rows: auto 1fr;
-}
-
-.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) .navds-link-card__icon {
-  align-self: center;
-}
-
-.navds-link-card:not(:has(.navds-link-card__description, .navds-link-card__footer)) .navds-link-card__title {
-  align-items: center;
-}
-
-.navds-link-card[data-align-arrow="baseline"]:not(:has(.navds-link-card__description, .navds-link-card__footer))
-  .navds-link-card__arrow {
-  align-self: center;
-}
-
-.navds-link-card:hover {
-  border-color: var(--a-border-default);
-  box-shadow: 0 0 0 1px var(--a-border-default);
-}
-
-.navds-link-card__title {
-  grid-area: title;
-  color: var(--a-text-default);
-  hyphens: auto;
-}
-
-.navds-link-card__description {
-  grid-area: description;
-  margin-block-start: var(--a-spacing-1);
-}
-
-.navds-link-card__footer {
-  grid-area: footer;
-  margin-block-start: var(--a-spacing-4);
-  display: flex;
-  align-self: flex-end;
-  gap: var(--a-spacing-2);
-  flex-wrap: wrap;
-}
-
-.navds-link-card__icon {
-  grid-area: icon;
-  width: max-content;
-  height: max-content;
-  display: grid;
-  place-content: center;
-  color: var(--a-text-default);
-  align-self: flex-start;
-  margin-inline-end: var(--a-spacing-4);
-}
-
-.navds-link-card--small {
-  --__ac-link-card-padding-block: var(--a-spacing-3);
-  --__ac-link-card-padding-inline: var(--a-spacing-4);
-}
-
-.navds-link-card--small .navds-link-card__icon {
-  margin-inline-end: var(--a-spacing-3);
-}
-
-.navds-link-card__image-container {
-  display: block;
-  overflow: hidden;
-  grid-area: image;
-  margin-block: calc(var(--__ac-link-card-padding-block) * -1) var(--__ac-link-card-padding-block);
-  margin-inline: calc(var(--__ac-link-card-padding-inline) * 1 * -1);
-  border-radius: calc(var(--a-border-radius-xlarge) - 1px);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  position: relative;
-}
-
-.navds-link-card__image-container :is(img, picture) {
-  object-fit: cover;
-  display: block;
-  max-width: 100%;
-  height: 100%;
-}
-
-.navds-link-card__arrow {
-  grid-area: arrow;
-  margin-inline-start: var(--a-spacing-2);
-}
-
-.navds-link-card[data-align-arrow="baseline"] .navds-link-card__arrow {
-  align-self: baseline;
-}
-
-.navds-link-card[data-align-arrow="center"] .navds-link-card__arrow {
-  align-self: center;
-}

package/link-panel.css

@@ -1,47 +0,0 @@
-.navds-link-panel {
-  text-decoration: none;
-  color: var(--ac-link-panel-text, var(--a-text-default));
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--a-spacing-4);
-}
-
-.navds-link-panel:hover .navds-link-panel__title {
-  text-decoration: underline;
-  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
-}
-
-.navds-link-panel:hover {
-  box-shadow: var(--a-shadow-small);
-  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
-}
-
-.navds-link-panel:focus-visible {
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-link-panel:focus {
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-link-panel__chevron {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  transition: transform 200ms;
-}
-
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
-  transform: translateX(4px);
-}
-
-.navds-link-panel__description {
-  margin-top: var(--a-spacing-1);
-}

package/link.css

@@ -1,79 +0,0 @@
-.navds-link {
-  color: var(--ac-link-text, var(--a-text-action));
-  text-decoration: underline;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-link.navds-link--inline-text {
-  display: inline;
-}
-
-.navds-link.navds-link--inline-text > svg {
-  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
-  margin: 0.1em 0.1em -0.1em;
-  transform: translateY(0.05em);
-  display: inline;
-  vertical-align: baseline;
-}
-
-.navds-link:hover {
-  text-decoration: none;
-}
-
-.navds-link.navds-link--remove-underline {
-  text-decoration: none;
-}
-
-.navds-link.navds-link--remove-underline:hover {
-  text-decoration: underline;
-}
-
-.navds-alert:not(.navds-alert--inline) .navds-link:not(:active, :focus-visible),
-.navds-confirmation-panel .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-link:focus-visible {
-  outline: 2px solid transparent;
-  color: var(--ac-link-focus-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-link:focus {
-    outline: 2px solid transparent;
-    color: var(--ac-link-focus-text, var(--a-text-on-action));
-    text-decoration: none;
-    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
-  }
-}
-
-.navds-link:active {
-  outline: 2px solid transparent;
-  color: var(--ac-link-active-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-active-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
-}
-
-.navds-link svg {
-  color: inherit;
-  flex-shrink: 0;
-}
-
-.navds-link--action {
-  color: var(--ac-link-action-text, var(--a-text-action));
-}
-
-.navds-link--neutral {
-  color: var(--ac-link-neutral-text, var(--a-text-default));
-}
-
-.navds-link--subtle {
-  color: var(--ac-link-subtle-text, var(--a-text-subtle));
-}