@navikt/ds-css 1.3.34 → 1.3.37-alpha.1

package/loader.css

@@ -1,124 +0,0 @@
-:root,
-:host {
-  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-background: rgb(0 0 0 / 0.05);
-  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-interaction-foreground: var(--navds-global-color-blue-500);
-  --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
-  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
-  --navds-loader-color-transparent-background: transparent;
-}
-
-.navds-loader {
-  width: 1.5rem;
-  display: inline-block;
-  position: relative;
-  animation: loader-rotate 1.8s linear infinite;
-  stroke-width: 6;
-
-  --navds-loader-background-stroke-width: 5.9;
-}
-
-.navds-loader__foreground {
-  animation: loader-dasharray 1.8s ease-in-out infinite;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0;
-  stroke: var(--navds-loader-color-foreground);
-}
-
-.navds-loader__background {
-  stroke: var(--navds-loader-color-background);
-  stroke-width: var(--navds-loader-background-stroke-width);
-}
-
-.navds-loader--neutral .navds-loader__foreground {
-  stroke: var(--navds-loader-color-neutral-foreground);
-}
-
-.navds-loader--interaction .navds-loader__foreground {
-  stroke: var(--navds-loader-color-interaction-foreground);
-}
-
-.navds-loader--inverted .navds-loader__foreground {
-  stroke: var(--navds-loader-color-inverted-foreground);
-}
-
-.navds-loader--inverted .navds-loader__background {
-  stroke: var(--navds-loader-color-inverted-background);
-}
-
-.navds-loader--transparent .navds-loader__background {
-  stroke: var(--navds-loader-color-transparent-background);
-}
-
-.navds-loader--3xlarge {
-  width: 5.5rem;
-  stroke-width: 5;
-
-  --navds-loader-background-stroke-width: 4.8;
-}
-
-.navds-loader--2xlarge {
-  width: 4rem;
-  stroke-width: 6;
-
-  --navds-loader-background-stroke-width: 5.8;
-}
-
-.navds-loader--xlarge {
-  width: 2.5rem;
-  stroke-width: 6;
-
-  --navds-loader-background-stroke-width: 5.8;
-}
-
-.navds-loader--large {
-  width: 2rem;
-  stroke-width: 7;
-
-  --navds-loader-background-stroke-width: 6.8;
-}
-
-.navds-loader--medium {
-  width: 1.5rem;
-  stroke-width: 7;
-
-  --navds-loader-background-stroke-width: 6.8;
-}
-
-.navds-loader--small {
-  width: 1.25rem;
-  stroke-width: 8;
-
-  --navds-loader-background-stroke-width: 7.8;
-}
-
-.navds-loader--xsmall {
-  width: 1rem;
-  stroke-width: 8;
-
-  --navds-loader-background-stroke-width: 7.8;
-}
-
-@keyframes loader-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loader-dasharray {
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -120px;
-  }
-}

package/modal.css

@@ -1,67 +0,0 @@
-:root,
-:host {
-  --navds-modal-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-modal-color-overlay: rgb(38 38 38 / 0.7);
-}
-
-.ReactModal__Body--open {
-  overflow: hidden;
-}
-
-.navds-modal {
-  background-color: var(--navds-modal-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  display: block;
-  position: relative;
-  overflow: auto;
-  max-height: 100%;
-}
-
-.navds-modal__content {
-  padding: var(--navds-spacing-4);
-}
-
-.navds-modal:focus,
-.navds-modal--focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-modal__overlay {
-  position: fixed;
-  z-index: var(--navds-z-index-modal);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--navds-modal-color-overlay);
-  padding: var(--navds-spacing-4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navds-modal__button--shake {
-  transform: rotate(0deg);
-  transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
-}
-
-/* prettier-ignore */
-.navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
-  transform: rotate(10deg);
-  transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
-}
-
-.navds-modal__button {
-  position: absolute;
-  top: var(--navds-spacing-4);
-  right: var(--navds-spacing-4);
-  display: flex;
-  padding: var(--navds-spacing-2);
-}
-
-.navds-modal__button svg {
-  /* 24x24px */
-  height: 1.5rem;
-  width: 1.5rem;
-}

package/pagination.css

@@ -1,66 +0,0 @@
-:root,
-:host {
-  --navds-pagination-color-background-selected: var(--navds-semantic-color-interaction-primary-selected);
-  --navds-pagination-color-text-selected: var(--navds-semantic-color-text-inverted);
-}
-
-.navds-pagination__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  gap: var(--navds-spacing-3);
-}
-
-.navds-pagination__ellipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--navds-spacing-12);
-  cursor: default;
-}
-
-.navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--navds-spacing-8);
-}
-
-.navds-pagination--xsmall .navds-pagination__ellipsis {
-  width: var(--navds-spacing-6);
-}
-
-.navds-pagination__item {
-  color: var(--navds-semantic-color-text);
-}
-
-.navds-pagination--medium .navds-pagination__item {
-  border-radius: var(--navds-border-radius-medium);
-}
-
-.navds-pagination__item[aria-current="true"] {
-  background-color: var(--navds-pagination-color-background-selected);
-  color: var(--navds-pagination-color-text-selected);
-}
-
-.navds-pagination__item[aria-current="true"]:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
-}
-
-.navds-pagination__prev-next {
-  display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-1);
-}
-
-.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
-.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
-
-.navds-pagination--invisible {
-  visibility: hidden;
-}

package/panel.css

@@ -1,16 +0,0 @@
-:root,
-:host {
-  --navds-panel-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-panel-color-border: var(--navds-semantic-color-border-muted);
-}
-
-.navds-panel {
-  background-color: var(--navds-panel-color-background);
-  padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius-small);
-  border: 1px solid transparent;
-}
-
-.navds-panel--border {
-  border-color: var(--navds-panel-color-border);
-}

package/popover.css

@@ -1,59 +0,0 @@
-:root,
-:host {
-  --navds-popover-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-popover-color-border: var(--navds-semantic-color-border-muted);
-}
-
-.navds-popover {
-  z-index: var(--navds-z-index-popover);
-  background-color: var(--navds-popover-color-background);
-  box-shadow: var(--navds-shadow-medium);
-  border: 1px solid;
-  border-color: var(--navds-popover-color-border);
-  border-radius: var(--navds-border-radius-medium);
-}
-
-.navds-popover__content {
-  padding: var(--navds-spacing-4);
-}
-
-.navds-popover--hidden {
-  display: none;
-}
-
-.navds-popover:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-popover__arrow {
-  position: absolute;
-  z-index: -1;
-  transform: rotate(45deg);
-  background-color: var(--navds-popover-color-background);
-  border: 1px solid;
-  border-color: var(--navds-popover-color-border);
-  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;
-}

package/read-more.css

@@ -1,63 +0,0 @@
-.navds-read-more__button {
-  cursor: pointer;
-  margin: 0;
-  border: none;
-  background: none;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.125rem;
-  color: var(--navds-semantic-color-link);
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1) 2px;
-  text-align: start;
-}
-
-.navds-read-more--small .navds-read-more__button {
-  padding: 2px var(--navds-spacing-1) 2px 2px;
-}
-
-.navds-read-more__button:hover {
-  background-color: rgba(38 38 38 / 0.06);
-}
-
-.navds-read-more__button:active {
-  background-color: rgba(38 38 38 / 0.1);
-}
-
-.navds-read-more__button:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-read-more__content {
-  margin-top: var(--navds-spacing-1);
-  border-left: 2px solid rgba(38 38 38 / 0.36);
-  margin-left: 11px;
-  padding-left: 11px;
-}
-
-.navds-read-more__expand-icon {
-  font-size: 1.25rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-}
-
-.navds-read-more--small .navds-read-more__expand-icon {
-  height: 1.25rem;
-}
-
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
-}
-
-.navds-read-more__expand-icon--filled {
-  display: none;
-}
-
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
-}
-
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  display: none;
-}

package/stepper.css

@@ -1,222 +0,0 @@
-.navds-stepper {
-  --navds-stepper-circle-size: 1.75rem;
-  --navds-stepper-border-width: 2px;
-  --navds-stepper-line-length: 1rem;
-
-  color: var(--navds-semantic-color-interaction-primary);
-  font-weight: 600;
-  line-height: 1;
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-.navds-stepper--horizontal {
-  display: flex;
-  align-items: flex-start;
-  text-align: center;
-}
-
-.navds-stepper__item {
-  display: grid;
-  grid-template-rows:
-    [line-1] auto [step-start] var(--navds-stepper-circle-size)
-    [line-2 step-end] auto;
-  grid-template-columns: var(--navds-stepper-circle-size) auto;
-  justify-items: flex-start;
-  gap: 0.5rem;
-}
-
-.navds-stepper__line {
-  background-color: var(--navds-semantic-color-border-muted);
-  width: var(--navds-stepper-border-width);
-  height: 100%;
-  min-height: var(--navds-stepper-line-length);
-  justify-self: center;
-  grid-column: 1;
-}
-
-.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--navds-global-color-blue-500);
-}
-
-.navds-stepper__line--1 {
-  grid-row: line-1;
-  display: none;
-}
-
-.navds-stepper__line--2 {
-  grid-row: line-2;
-}
-
-:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
-  display: none;
-}
-
-.navds-stepper__step {
-  grid-row: 2 / -1;
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
-  gap: var(--navds-spacing-2);
-  justify-content: flex-start;
-  text-decoration: none;
-  cursor: pointer;
-  padding: var(--navds-stepper-border-width);
-  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
-}
-
-button.navds-stepper__step {
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-}
-
-.navds-stepper__step--non-interactive {
-  color: var(--navds-global-color-gray-600);
-  cursor: default;
-}
-
-:where(.navds-stepper__step):focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-  isolation: isolate;
-}
-
-.navds-stepper__circle {
-  grid-column: circle;
-  display: inline-grid;
-  place-items: center;
-  flex-shrink: 0;
-  width: var(--navds-stepper-circle-size);
-  height: var(--navds-stepper-circle-size);
-  border: var(--navds-stepper-border-width) solid currentColor;
-  border-radius: var(--navds-border-radius-full);
-  line-height: 1;
-}
-
-.navds-stepper__circle--success {
-  border: none;
-  background: none;
-  font-size: 28px;
-}
-
-.navds-stepper__content {
-  min-width: fit-content;
-  line-height: 1.5;
-  grid-column: content;
-  padding-top: 0.035rem;
-}
-
-/* Horizontal */
-:where(.navds-stepper--horizontal) .navds-stepper__item {
-  flex: 1 1 100%;
-  grid-template-columns:
-    [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
-    [line-2-start] auto [step-end] 1fr [line-2-end];
-  grid-template-rows: var(--navds-stepper-circle-size) auto;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__line {
-  height: var(--navds-stepper-border-width);
-  width: 100%;
-  min-height: auto;
-  grid-row: 1;
-  display: block;
-  align-self: center;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
-  grid-column: line-1;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
-  grid-column: line-2;
-}
-
-:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
-:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
-  visibility: hidden;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__step {
-  grid-row: 1 / -1;
-  grid-column: step;
-  display: grid;
-  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
-  grid-template-columns:
-    [content-start] auto [circle] var(--navds-stepper-circle-size)
-    [content-end] auto;
-  justify-items: center;
-  align-items: center;
-  margin-bottom: 0;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__circle {
-  grid-row: circle;
-  grid-column: 2;
-}
-
-:where(.navds-stepper--horizontal) .navds-stepper__content {
-  grid-row: content;
-  grid-column: 1 / -1;
-  max-width: 24ch;
-}
-
-/* Active step */
-:where(.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--navds-semantic-color-interaction-primary-selected);
-}
-
-:where(.navds-stepper__step:hover) .navds-stepper__content {
-  text-decoration: underline;
-}
-
-:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
-  text-decoration: none;
-}
-
-:where(.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--navds-semantic-color-interaction-primary-selected);
-  border-color: var(--navds-semantic-color-interaction-primary-selected);
-  color: var(--navds-semantic-color-text-inverted);
-}
-
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
-  background-color: var(--navds-semantic-color-interaction-primary-hover-subtle);
-}
-
-/* Non-interactive */
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--navds-global-color-gray-900);
-}
-
-.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--navds-global-color-gray-600);
-}
-
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--navds-global-color-gray-900);
-  border-color: var(--navds-global-color-gray-900);
-  color: var(--navds-global-color-white);
-}
-
-:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
-  background-color: transparent;
-}
-
-:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
-  background-color: var(--navds-global-color-gray-900);
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: inherit;
-  color: var(--navds-global-color-deepblue-500);
-}
-
-:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
-  color: var(--navds-global-color-gray-900);
-}