@navikt/ds-css 7.40.0 → 8.0.1

package/form/error-summary.css

@@ -1,55 +0,0 @@
-.navds-error-summary {
-  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
-  padding: var(--a-spacing-5);
-  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
-  border-radius: var(--a-border-radius-large);
-}
-
-.navds-error-summary--small {
-  padding: var(--a-spacing-3);
-}
-
-.navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-6);
-}
-
-.navds-error-summary--small .navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-4);
-}
-
-.navds-error-summary__heading:focus {
-  outline: none;
-}
-
-.navds-error-summary:focus-visible,
-.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-border-on-inverted),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-error-summary:focus {
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
-  }
-}
-
-.navds-error-summary__list {
-  margin: var(--a-spacing-3) 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding-left: var(--a-spacing-6);
-  list-style: inherit;
-}
-
-.navds-error-summary__list > * {
-  color: var(--ac-error-summary-list-dot, var(--a-text-action));
-}
-
-.navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--a-spacing-2) 0;
-  gap: var(--a-spacing-2);
-  padding-left: var(--a-spacing-5);
-}

package/form/fieldset.css

@@ -1,51 +0,0 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
-.navds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-
-.navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--a-spacing-2);
-}
-
-.navds-fieldset__description {
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
-}
-
-.navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: 0.125rem;
-}
-
-/* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
-  margin-top: 0;
-}
-
-.navds-fieldset__legend {
-  padding: 0;
-}
-
-.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
-  display: inline-flex;
-}
-
-.navds-fieldset:disabled > .navds-fieldset__legend,
-.navds-fieldset:disabled > .navds-fieldset__description {
-  opacity: 0.3;
-}
-
-@media (forced-colors: active) {
-  .navds-fieldset:disabled > .navds-fieldset__legend,
-  .navds-fieldset:disabled > .navds-fieldset__description {
-    opacity: 1;
-  }
-}

package/form/file-upload.css

@@ -1,224 +0,0 @@
-/**
- * FileUpload.Dropzone
- */
-
-.navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-subtle);
-  --__ac-dropzone-text-color: var(--a-text-default);
-  --__ac-dropzone-padding: var(--a-spacing-6);
-  --__ac-dropzone-icon-padding: var(--a-spacing-2);
-  --__ac-dropzone-animation-length-long: 0.6s;
-  --__ac-dropzone-animation-length-short: 250ms;
-  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
-  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
-
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: var(--a-spacing-4);
-  text-align: center;
-  padding: var(--__ac-dropzone-padding);
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--__ac-dropzone-background);
-  color: var(--__ac-dropzone-text-color);
-  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
-  cursor: pointer;
-}
-
-.navds-dropzone__area:hover {
-  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
-  outline-color: var(--a-border-default);
-}
-
-.navds-dropzone--disabled > .navds-dropzone__area:hover {
-  outline-color: var(--a-border-subtle);
-  box-shadow: initial;
-  cursor: default;
-}
-
-.navds-dropzone--dragging > .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
-}
-
-.navds-dropzone--dragging > .navds-dropzone__area::after {
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  color: var(--a-text-action-selected);
-  background-color: var(--a-surface-hover);
-  content: "";
-  inset: 0;
-  position: absolute;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
-  border-radius: var(--a-border-radius-large);
-  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
-}
-
-@keyframes akselDropzoneDragoverAnimation {
-  0% {
-    -webkit-backdrop-filter: blur(0);
-    backdrop-filter: blur(0);
-    background-color: var(--a-surface-transparent);
-  }
-
-  70% {
-    -webkit-backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
-  }
-
-  100% {
-    background-color: var(--a-surface-hover);
-  }
-}
-
-.navds-dropzone__area-icon {
-  display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  visibility: hidden;
-}
-
-.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
-  outline-color: var(--a-surface-danger);
-  outline-width: 2px;
-}
-
-.navds-dropzone__area:hover > .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-}
-
-.navds-dropzone__area:active .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
-}
-
-.navds-dropzone__area-release {
-  top: var(--__ac-dropzone-padding);
-  display: grid;
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  transition:
-    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
-    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
-}
-
-.navds-dropzone__area-release__icon {
-  display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  border-radius: var(--a-border-radius-full);
-  background-color: var(--a-surface-neutral-subtle);
-  transition:
-    background-color 300ms var(--__ac-dropzone-animation-ease-out),
-    font-size 300ms var(--__ac-dropzone-animation-ease-out);
-  font-size: 1.5rem;
-}
-
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
-  background-color: transparent;
-  font-size: 2rem;
-}
-
-.navds-dropzone__area-release__text {
-  visibility: hidden;
-}
-
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
-  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
-  visibility: visible;
-}
-
-.navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--a-text-action-selected);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.navds-dropzone__area-disabled {
-  color: var(--a-text-subtle);
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: var(--a-spacing-2);
-}
-
-/**
- * FileUpload.Item
- */
-.navds-file-upload :is(ul, li),
-ul:has(> li.navds-file-item),
-li.navds-file-item {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.navds-file-item__inner {
-  outline: 1px solid var(--a-border-subtle);
-  outline-offset: -1px;
-  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
-  display: flex;
-  gap: var(--a-spacing-3);
-  align-items: flex-start;
-}
-
-.navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--a-surface-danger);
-}
-
-.navds-file-item__icon {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-icon-default);
-  border-radius: var(--a-border-radius-full);
-  min-height: 3rem;
-  min-width: 3rem;
-  display: grid;
-  place-content: center;
-  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-}
-
-.navds-file-item__icon--loading {
-  background-color: transparent;
-}
-
-.navds-file-item__file-info {
-  overflow-wrap: anywhere;
-}
-
-.navds-file-item__error {
-  color: var(--a-text-danger);
-  display: grid;
-  transition-property: grid-template-rows, padding-top;
-  transition-duration: 250ms;
-  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
-  overflow: hidden;
-  grid-template-rows: 0fr;
-}
-
-.navds-file-item--error .navds-file-item__error {
-  grid-template-rows: 1fr;
-  padding-top: var(--a-spacing-1);
-}
-
-.navds-file-item__error-content > svg {
-  flex-shrink: 0;
-  height: 1rem;
-  margin-top: 0.1rem;
-}
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--a-spacing-1);
-}

package/form/form-progress.css

@@ -1,53 +0,0 @@
-.navds-form-progress__bar {
-  margin-bottom: var(--a-spacing-2);
-}
-
-.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
-.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
-  display: none;
-}
-
-.navds-form-progress__button:hover svg {
-  transform: translateY(1px);
-}
-
-.navds-form-progress__button[data-state="open"] svg {
-  transform: rotate(-180deg);
-}
-
-.navds-form-progress__button[data-state="open"]:hover svg {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
-.navds-form-progress__collapsible {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
-}
-
-.navds-form-progress__collapsible[hidden] {
-  /* CSS-resets sets 'hidden' to display non with imporant */
-  display: grid !important;
-}
-
-.navds-form-progress__collapsible[data-state="open"] {
-  grid-template-rows: 1fr;
-}
-
-.navds-form-progress__collapsible-content {
-  min-height: 0;
-  transition: visibility 0.3s;
-  visibility: hidden;
-}
-
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-}
-
-.navds-form-progress__stepper {
-  border: 2px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  margin-top: var(--a-spacing-1);
-}

package/form/form-summary.css

@@ -1,90 +0,0 @@
-.navds-form-summary {
-  overflow: hidden;
-  border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  background: var(--a-surface-default);
-}
-
-.navds-form-summary__header {
-  background-color: var(--a-surface-subtle);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
-  display: flex;
-  justify-content: space-between;
-  gap: 0 var(--a-spacing-2);
-}
-
-@media (max-width: 479px) {
-  .navds-form-summary__header {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
-    flex-direction: column;
-  }
-}
-
-.navds-form-summary__header .navds-form-summary__edit {
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-
-.navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--a-border-subtle);
-}
-
-.navds-form-summary__answers {
-  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
-  margin: 0;
-}
-
-@media (max-width: 479px) {
-  .navds-form-summary__answers {
-    padding: var(--a-spacing-4);
-  }
-}
-
-.navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--a-spacing-4);
-  padding-bottom: var(--a-spacing-4);
-  border-bottom: 1px solid var(--a-border-divider);
-}
-
-.navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--a-spacing-6);
-}
-
-.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
-  padding-bottom: 0;
-}
-
-@media (max-width: 479px) {
-  .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--a-spacing-3);
-    padding-bottom: var(--a-spacing-3);
-  }
-
-  .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--a-spacing-5);
-  }
-}
-
-.navds-form-summary__value:first-of-type {
-  margin-top: var(--a-spacing-1);
-}
-
-.navds-form-summary__value :where(.navds-form-summary__answers) {
-  margin-top: var(--a-spacing-2);
-  padding: var(--a-spacing-4);
-  background: var(--a-surface-selected);
-  border-radius: var(--a-border-radius-large);
-}
-
-.navds-form-summary__footer {
-  display: flex;
-  padding: var(--a-spacing-5) var(--a-spacing-6);
-  background: var(--a-surface-default);
-  border-top: 1px solid var(--a-border-subtle);
-}
-
-@media (max-width: 479px) {
-  .navds-form-summary__footer {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
-  }
-}

package/form/form.css

@@ -1,52 +0,0 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
-.navds-form-field {
-  display: grid;
-  justify-items: start;
-  gap: var(--a-spacing-2);
-}
-
-.navds-form-field__description {
-  margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
-}
-
-.navds-form-field__description:empty {
-  display: none;
-}
-
-.navds-form-field--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.navds-form-field__error:empty {
-  display: none;
-}
-
-.navds-form-field__subdescription {
-  color: var(--ac-form-subdescription, var(--a-text-subtle));
-}
-
-.navds-form-field--readonly > :where(.navds-form-field__label) {
-  display: inline-flex;
-}
-
-.navds-form-field__readonly-icon {
-  margin-top: var(--a-spacing-05);
-  margin-right: var(--a-spacing-2);
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-
-@media (forced-colors: active) {
-  .navds-form-field--disabled {
-    opacity: 1;
-  }
-}

package/form/index.css

@@ -1,17 +0,0 @@
-/*
-  Order matters; rearrange with care
-*/
-@import "fieldset.css";
-@import "file-upload.css";
-@import "form.css";
-@import "error-summary.css";
-@import "confirmation-panel.css";
-@import "radio-checkbox.css";
-@import "select.css";
-@import "switch.css";
-@import "text-field.css";
-@import "textarea.css";
-@import "search.css";
-@import "combobox.css";
-@import "form-summary.css";
-@import "form-progress.css";