@navikt/ds-css 7.39.1 → 8.0.0

package/date.css

@@ -1,334 +0,0 @@
-.navds-date {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
-
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--ac-date-middle-text, var(--a-text-on-action));
-  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
-}
-
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--a-spacing-5);
-}
-
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date__weeknumber-number {
-  font-size: 0.875rem;
-  color: var(--a-text-subtle);
-}
-
-.navds-date__weeknumber:active .navds-date__weeknumber-number {
-  color: var(--a-text-on-neutral);
-}
-
-.navds-date__caption__month .navds-select__container select {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-button {
-  all: unset;
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
-    var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-/* Monthpicker */
-.navds-date__month-button {
-  all: unset;
-  text-align: center;
-  width: 3rem;
-  height: 3rem;
-  text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
-  cursor: pointer;
-}
-
-.navds-date__month-button:focus-visible,
-.navds-monthpicker__caption-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__month-button:focus,
-  .navds-monthpicker__caption-button:focus {
-    box-shadow: var(--a-shadow-focus);
-    z-index: 1;
-  }
-}
-
-.navds-date__year-label {
-  display: flex;
-  align-items: center;
-}
-
-.navds-date__wrapper,
-.navds-date__standalone-wrapper {
-  height: fit-content;
-  width: fit-content;
-}
-
-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-date__field-wrapper {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  width: fit-content;
-}
-
-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--ac-date-selected-text, var(--a-text-on-action));
-  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-date-disabled-text, var(--a-text-subtle));
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--a-spacing-1);
-  padding-inline: var(--a-spacing-1);
-}
-
-.navds-date__caption-button,
-.navds-date__caption-button:disabled,
-.navds-date__caption-button:disabled:hover {
-  color: var(--ac-date-caption-text, var(--a-text-default));
-}
-
-.navds-date__field-input {
-  padding-right: var(--a-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
-  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
-}
-
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-date__field-button {
-  position: absolute;
-  right: 0.0625rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ac-date-input-button-text, var(--a-text-default));
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-  padding: var(--a-spacing-3);
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  height: calc(100% - 0.125rem);
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.navds-form-field--small .navds-date__field-button {
-  padding: var(--a-spacing-1);
-}
-
-.navds-date__field-button:hover:where(:not([disabled])) {
-  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-  cursor: not-allowed;
-}
-
-.navds-date__field-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-medium);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date__caption__year {
-  width: 5rem;
-}
-
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-/* Readonly */
-.navds-date__field--readonly .navds-date__field-button {
-  cursor: default;
-  color: var(--a-gray-500);
-}
-
-.navds-date__caption-button {
-  width: 2rem;
-  height: 2rem;
-}
-
-.navds-date__week-row {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-05);
-}
-
-.navds-date__week-wrapper {
-  width: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-}
-
-span.rdp-weeknumber {
-  display: grid;
-  place-content: center;
-  width: 2rem;
-  height: 2rem;
-}
-
-.navds-date__modal.navds-date {
-  padding: 0;
-}
-
-.navds-date__modal-body {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-date__modal-body > .navds-date {
-  padding: 0;
-}
-
-.navds-date__popover:where(.navds-popover) {
-  border: none;
-}
-
-@media (min-width: 480px) {
-  .navds-date {
-    padding: var(--a-spacing-5) var(--a-spacing-4);
-  }
-
-  .navds-date__modal-body {
-    padding: var(--a-spacing-6);
-  }
-
-  .navds-date__caption {
-    gap: var(--a-spacing-2);
-  }
-
-  .navds-date .rdp-button,
-  .navds-date__caption-button {
-    width: 3rem;
-    height: 3rem;
-  }
-}

package/dialog.css

@@ -1,253 +0,0 @@
-.navds-dialog__popup {
-  --__ac-dialog-transform: ;
-  --__ac-dialog-p-b: var(--a-spacing-4);
-  --__ac-dialog-p-i: var(--a-spacing-5);
-
-  position: fixed;
-  background-color: var(--a-surface-default);
-  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transition-property: transform, opacity, translate;
-  border-radius: var(--a-border-radius-large);
-  color: var(--a-text-default);
-  box-shadow: var(--a-shadow-xlarge);
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--a-border-subtle);
-  z-index: 2000;
-  overflow: hidden;
-
-  &:focus {
-    outline: none;
-  }
-
-  &[data-size="small"] {
-    --__ac-dialog-p-b: var(--a-spacing-3);
-    --__ac-dialog-p-i: var(--a-spacing-4);
-  }
-
-  /* Needed to accommodate 400% zoom */
-  @media (max-height: 400px) {
-    overflow: auto;
-  }
-
-  &[data-entering-style],
-  &[data-exiting-style] {
-    /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
-    opacity: 0.001;
-    transform: var(--__ac-dialog-transform);
-  }
-
-  &[data-exiting-style] {
-    transition-duration: 100ms;
-
-    &::after {
-      transition-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
-    }
-  }
-
-  &[data-nested-dialog-open="true"] {
-    box-shadow: none;
-
-    &::after {
-      opacity: 0.9;
-    }
-  }
-
-  &::after {
-    transition: opacity 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    content: "";
-    inset: 0;
-    position: absolute;
-    border-radius: inherit;
-    background-color: var(--a-surface-backdrop);
-    opacity: 0;
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  &[data-position="center"] {
-    --__ac-dialog-center-margin: 3rem;
-    --__ac-dialog-transform: scale(0.98);
-
-    left: 0;
-    right: 0;
-    margin-inline: auto;
-    top: 0;
-    max-width: calc(100dvw - 3rem);
-    max-height: calc(90dvh - var(--__ac-dialog-center-margin));
-    margin-block: max(var(--__ac-dialog-center-margin), 10dvh) auto;
-
-    &[data-nested="true"] {
-      &[data-entering-style] {
-        opacity: 1;
-        transform: scale(1);
-        transition-duration: 0ms;
-      }
-
-      &[data-exiting-style] {
-        opacity: 1;
-        transform: scale(1);
-        transition-duration: 0ms;
-      }
-    }
-
-    &[data-nested-dialog-open="true"] {
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
-    }
-
-    @media (max-width: 479px) or (max-height: 479px) {
-      --__ac-dialog-transform: translateY(35%);
-
-      max-height: calc(100dvh - max(16px, 10dvh));
-      max-width: 95dvw;
-      margin-inline: auto;
-      height: auto;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-      top: auto;
-      margin-block: 0;
-    }
-  }
-
-  &[data-position="right"],
-  &[data-position="left"] {
-    max-width: calc(100vw - max(16px, 10vw));
-    top: 0;
-    bottom: 0;
-
-    &[data-nested-dialog-open="true"] {
-      &::after {
-        opacity: 1;
-        transition-duration: 100ms;
-      }
-    }
-  }
-
-  &[data-position="right"] {
-    --__ac-dialog-transform: translateX(35%);
-
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-    right: 0;
-  }
-
-  &[data-position="left"] {
-    --__ac-dialog-transform: translateX(-35%);
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 0;
-    left: 0;
-  }
-
-  &[data-position="bottom"] {
-    --__ac-dialog-transform: translateY(35%);
-
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: calc(100dvh - max(16px, 10dvh));
-    max-width: 95dvw;
-    margin-inline: auto;
-    height: auto;
-
-    &[data-nested-dialog-open="true"] {
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
-    }
-  }
-
-  &[data-position="fullscreen"] {
-    --__ac-dialog-transform: scale(0.98);
-
-    border-radius: 0;
-    border: 0;
-    inset: 0;
-    max-height: 100dvh;
-    max-width: 100dvw;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.navds-dialog__backdrop {
-  position: fixed;
-  min-height: 100dvh;
-  inset: 0;
-  background-color: var(--a-surface-backdrop);
-  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  z-index: 2000;
-
-  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
-  @supports (-webkit-touch-callout: none) {
-    position: absolute;
-  }
-
-  &[data-entering-style],
-  &[data-exiting-style] {
-    opacity: 0.001;
-  }
-}
-
-.navds-dialog__header {
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-}
-
-.navds-dialog__title {
-  margin-block-end: var(--a-spacing-1);
-}
-
-.navds-dialog__close-button {
-  align-self: start;
-  float: right;
-}
-
-.navds-dialog__body {
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-  overflow: auto;
-  overscroll-behavior: contain;
-  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
-
-  .navds-dialog__header ~ & {
-    padding-block-start: 0;
-  }
-
-  background:
-    linear-gradient(var(--a-surface-default) 30%, transparent) top,
-    linear-gradient(transparent, var(--a-surface-default) 60%) bottom,
-    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
-    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
-  background-size:
-    100% 40px,
-    100% 50px,
-    100% 16px,
-    100% 16px;
-  background-attachment: local, local, scroll, scroll;
-  background-repeat: no-repeat;
-
-  /* Needed to accommodate 400% zoom */
-  @media (max-height: 400px) {
-    overflow: unset;
-  }
-}
-
-.navds-dialog__footer {
-  justify-content: flex-end;
-  display: flex;
-  flex-flow: wrap;
-  gap: var(--a-spacing-2);
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-}