@navikt/ds-css 7.4.0 → 7.4.2

package/darkside/modal.darkside.css

@@ -0,0 +1,209 @@
+.navds-modal__document-body {
+  overflow: hidden;
+}
+
+.navds-modal {
+  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+
+  background-color: var(--__ac-modal-bg);
+  border: none;
+  border-radius: var(--a-border-radius-large);
+  box-shadow: var(--a-shadow-xlarge);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-modal[open] {
+  display: flex;
+  flex-direction: column;
+  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+}
+
+.navds-modal--polyfilled .navds-modal--polyfilled {
+  overflow: auto;
+}
+
+.navds-modal--polyfilled:not([open]) {
+  display: none; /* from polyfill */
+}
+
+._dialog_overlay {
+  /* From polyfill */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal--small {
+  width: var(--ac-modal-width-small, 450px);
+}
+
+.navds-modal--medium {
+  width: var(--ac-modal-width-medium, 700px);
+}
+
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc(100% - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc(100% - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 2em);
+  }
+
+  .navds-modal--top {
+    margin-top: 2em;
+    max-height: calc(100% - 4em);
+  }
+}
+
+.navds-modal::backdrop {
+  /*
+   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
+   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
+   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   */
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal__button {
+  margin-left: var(--a-spacing-4);
+  float: right;
+}
+
+.navds-modal__header {
+  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__header {
+  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-modal__header-icon svg {
+  display: inline;
+  vertical-align: -0.25rem;
+  margin-right: var(--a-spacing-1);
+}
+
+.navds-modal__label {
+  font-weight: 600;
+  color: var(--a-text-subtle);
+}
+
+.navds-modal__body {
+  padding: var(--a-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__ac-modal-bg) 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;
+}
+
+.navds-modal--small .navds-modal__body {
+  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--a-spacing-0);
+}
+
+.navds-modal__footer {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
+}
+
+.navds-modal--small .navds-modal__footer {
+  padding: var(--a-spacing-4);
+}
+
+.navds-modal__footer :nth-of-type(2) {
+  margin-left: auto;
+}
+
+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
+@keyframes akselModalFadeIn {
+  0% {
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
+    transform: translate3d(0, calc(5% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+}

package/darkside/pagination.darkside.css

@@ -0,0 +1,73 @@
+.navds-pagination {
+  position: relative;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--a-spacing-3);
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--a-spacing-12);
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--a-spacing-8);
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: var(--a-spacing-6);
+}
+
+.navds-pagination__item {
+  color: var(--ac-pagination-text, var(--a-text-default));
+}
+
+.navds-pagination--medium .navds-pagination__item {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-pagination__item[aria-current="true"] {
+  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
+}
+
+.navds-pagination__item[aria-current="true"]:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-pagination__item[aria-current="true"]:focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-pagination__prev-next {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-inline: var(--a-spacing-1-alt);
+}
+
+.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
+  padding-left: var(--a-spacing-05);
+  padding-right: var(--a-spacing-05);
+}
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}

package/darkside/panel.darkside.css

@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--ac-panel-bg, var(--a-surface-default));
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-small);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--ac-panel-border, var(--a-border-default));
+}

package/darkside/popover.darkside.css

@@ -0,0 +1,84 @@
+.navds-popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-large);
+  max-width: calc(100vw - var(--a-spacing-6));
+}
+
+.navds-popover__content {
+  padding: var(--a-spacing-4);
+}
+
+.navds-popover--hidden {
+  display: none;
+}
+
+.navds-popover:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-popover:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-popover__arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-popover[data-placement^="top"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+/* prettier-ignore */
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-top-color: canvas;
+  }
+
+  /* prettier-ignore */
+  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+    border-bottom-color: canvas;
+    border-right-color: canvas;
+  }
+
+  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
+    border-left-color: canvas;
+    border-bottom-color: canvas;
+  }
+
+  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
+    border-right-color: canvas;
+    border-top-color: canvas;
+  }
+}