@digdir/designsystemet-css 0.11.0-next.11 → 0.100.51-next.51

package/search.css

@@ -1,170 +0,0 @@
-.ds-search {
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-  --dsc-search-input-background: var(--ds-color-neutral-background-default);
-  --dsc-search-input-border-color: var(--ds-color-neutral-border-default);
-  --dsc-search-input-border: 1px solid var(--dsc-search-input-border-color);
-  --dsc-search-input-color: var(--ds-color-neutral-text-default);
-
-  display: inline-grid;
-  width: 100%;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-search--sm {
-  --dsc-search-clear-button-size: var(--ds-sizing-5);
-}
-
-.ds-search--md {
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-}
-
-.ds-search--lg {
-  --dsc-search-clear-button-size: var(--ds-sizing-8);
-}
-
-.ds-search__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-search__field {
-  display: flex;
-  width: 100%;
-  align-items: stretch;
-  border-radius: var(--ds-border-radius-md);
-  position: relative;
-}
-
-.ds-search__icon {
-  position: absolute;
-  height: 100%;
-  z-index: 2;
-  left: var(--ds-spacing-4);
-  transform: scale(1.5);
-  pointer-events: none;
-}
-
-[type='search']::-webkit-search-decoration,
-[type='search']::-webkit-search-cancel-button {
-  appearance: none;
-}
-
-.ds-search__input {
-  background: var(--dsc-search-input-background);
-  color: var(--dsc-search-input-color);
-  border: var(--dsc-search-input-border);
-  border-radius: var(--ds-border-radius-md);
-  font-family: inherit;
-  position: relative;
-  box-sizing: border-box;
-  flex: 0 1 auto;
-  height: var(--ds-sizing-10);
-  width: 100%;
-  appearance: none;
-  padding: 0 var(--ds-spacing-3);
-}
-
-.ds-search__input.ds-search__input--with-search-button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ds-search__input:disabled {
-  cursor: not-allowed;
-}
-
-.ds-search__input[type='search']:focus-visible {
-  z-index: 1;
-}
-
-.ds-search:has(.ds-search__input:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
-
-.ds-search__search-button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.ds-search__search-button:not(:focus-visible) {
-  border-left: 0;
-}
-
-.ds-search__search-button:focus-visible {
-  z-index: 1;
-}
-
-.ds-search__clear-button {
-  color: var(--ds-color-neutral-text-default);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  background: none;
-  border: none;
-  right: 0.6em;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  height: var(--dsc-search-clear-button-size);
-  width: var(--dsc-search-clear-button-size);
-  border-radius: var(--ds-border-radius-md);
-  font-size: 1.25rem;
-  padding: 0;
-  z-index: 2;
-}
-
-.ds-search--sm .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-4);
-
-  height: var(--ds-sizing-10);
-  padding: 0 var(--ds-spacing-3);
-  padding-right: 2.5em;
-}
-
-.ds-search--sm .ds-search__icon {
-  left: var(--ds-spacing-3);
-}
-
-.ds-search--md .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-
-  height: var(--ds-sizing-12);
-  padding: 0 var(--ds-spacing-4);
-  padding-right: 2.2em;
-}
-
-.ds-search--md .ds-search__icon {
-  left: var(--ds-spacing-4);
-}
-
-.ds-search--lg .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-12);
-
-  height: var(--ds-sizing-14);
-  padding: 0 var(--ds-spacing-5);
-  padding-right: 2em;
-}
-
-.ds-search--lg .ds-search__icon {
-  left: var(--ds-spacing-5);
-}
-
-.ds-search__input.ds-search__input--simple {
-  padding-left: 2.4em;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
-    --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
-
-    box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
-  }
-
-  .ds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
-    background: var(--ds-color-accent-surface-hover);
-  }
-}

package/skeleton.css

@@ -1,59 +0,0 @@
-.ds-skeleton {
-  --dsc-skeleton-animation-duration: 0.8s;
-  --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
-
-  height: 1.3em;
-  pointer-events: none;
-  user-select: none;
-  background-color: var(--dsc-skeleton-background);
-  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-}
-
-.ds-skeleton--circle {
-  width: 1.3em;
-  border-radius: var(--ds-border-radius-full);
-  aspect-ratio: 1 / 1;
-}
-
-.ds-skeleton--rectangle {
-  width: 100%;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-}
-
-.ds-skeleton--text {
-  width: 100%;
-  height: auto;
-  transform-origin: 0 55%;
-  transform: scale(1, 0.6);
-  border-radius: var(--ds-border-radius-full);
-}
-
-.ds-skeleton--text:empty::before {
-  content: '\00a0';
-}
-
-.ds-skeleton--has-children {
-  width: fit-content;
-  height: fit-content;
-  color: transparent !important;
-}
-
-.ds-skeleton--has-children > * {
-  visibility: hidden;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ds-skeleton {
-    --dsc-skeleton-animation-duration: 1.6s;
-  }
-}
-
-@keyframes ds-skeleton-opacity-fade {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.4;
-  }
-}

package/skiplink.css

@@ -1,44 +0,0 @@
-.ds-skiplink:focus {
-  display: grid;
-  place-items: center;
-  outline: 0;
-  position: static;
-  width: auto;
-  height: auto;
-  margin: inherit;
-  overflow: visible;
-  clip: auto;
-  clip-path: none;
-  white-space: inherit;
-  text-decoration: none;
-  padding: var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3) var(--ds-spacing-6);
-  color: var(--ds-color-neutral-text-default);
-  background: var(--ds-color-accent-surface-default);
-}
-
-.ds-skiplink__content {
-  --dsc-skiplink-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-  --dsc-skiplink-border-width: 3px;
-
-  display: flex;
-  align-items: center;
-  border: var(--ds-border-width-default) solid transparent;
-  background-color: transparent;
-  color: var(--ds-color-accent-text-subtle);
-  border-color: var(--ds-color-accent-border-strong);
-  width: fit-content;
-  padding: var(--dsc-skiplink-padding);
-  margin: var(--ds-spacing-1);
-  box-sizing: border-box;
-  cursor: pointer;
-  font-family: inherit;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  position: relative;
-  border-radius: var(--ds-border-radius-md);
-  min-height: var(--ds-sizing-10);
-  outline: var(--dsc-skiplink-border-width) solid var(--ds-color-focus-outer);
-  outline-offset: var(--dsc-skiplink-border-width);
-  box-shadow: 0 0 0 var(--dsc-skiplink-border-width) var(--ds-color-focus-inner);
-}

package/spinner.css

@@ -1,69 +0,0 @@
-.ds-spinner {
-  --dsc-spinner-background: var(--ds-color-neutral-surface-default);
-  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
-
-  animation: ds-spinner-rotate-animation linear infinite;
-  animation-duration: 2s;
-}
-
-.ds-spinner__circle {
-  stroke: var(--dsc-spinner-stroke);
-  stroke-dasharray: 1px, 200px;
-  transform-origin: center;
-  animation: ds-spinner-stroke-animation ease-in-out infinite;
-  animation-duration: 2s;
-}
-
-/* Prefers reduced motion needs longer animation,
-but don't remove it since it is not decorative.
-*/
-@media (prefers-reduced-motion: reduce) {
-  .ds-spinner {
-    animation-duration: 6s;
-  }
-
-  .ds-spinner__circle {
-    animation-duration: 6s;
-  }
-}
-
-.ds-spinner--neutral {
-  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
-}
-
-.ds-spinner--accent {
-  --dsc-spinner-stroke: var(--ds-color-accent-base-default);
-}
-
-.ds-spinner__background {
-  stroke: var(--dsc-spinner-background);
-}
-
-@keyframes ds-spinner-rotate-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ds-spinner-stroke-animation {
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-    transform: rotate(0deg);
-  }
-
-  100% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: -120px;
-    transform: rotate(15deg);
-  }
-}

package/switch.css

@@ -1,242 +0,0 @@
-.ds-switch {
-  --dsc-switch--transition: 200ms;
-  --dsc-switch-height: 1.75rem;
-  --dsc-switch-focus-border-width: 3px;
-  --dsc-switch-check_color: transparent;
-  --dsc-switch-thumb-background-color: var(--ds-color-neutral-background-default);
-
-  position: relative;
-}
-
-@media (prefers-reduced-motion) {
-  .switch {
-    --dsc-switch--transition: 0;
-  }
-}
-
-.ds-switch__label {
-  min-height: var(--ds-sizing-10);
-  min-width: min-content;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-  cursor: pointer;
-}
-
-.ds-switch__track {
-  position: relative;
-  display: inline-block;
-  pointer-events: none;
-  width: var(--dsc-switch-width);
-  height: var(--dsc-switch-height);
-  margin: auto;
-  overflow: visible;
-  border-radius: var(--ds-border-radius-full);
-  background-color: var(--ds-color-neutral-border-default);
-  transition: background-color var(--dsc-switch--transition) ease;
-  margin-right: var(--ds-spacing-1);
-}
-
-.ds-switch__description {
-  padding-left: calc(var(--dsc-switch-width) + var(--ds-spacing-2));
-  margin-top: var(--ds-spacing-1);
-  color: var(--ds-color-neutral-text-subtle);
-  width: fit-content;
-}
-
-.ds-switch__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-switch__label--right {
-  grid-template-columns: 1fr auto;
-  grid-auto-flow: dense;
-}
-
-.ds-switch__label--right .ds-switch__track {
-  order: 1;
-  margin-right: 0;
-}
-
-.ds-switch__label--right + .ds-switch__description {
-  padding-left: 0;
-}
-
-.ds-switch__input {
-  position: absolute;
-  width: 2.75rem;
-  height: 2.75rem;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
-  margin: 0;
-}
-
-.ds-switch--readonly > .ds-switch__label {
-  grid-template-columns: auto min-content 1fr;
-}
-
-.ds-switch--readonly > .ds-switch__label:where(.ds-switch__label--right) {
-  grid-template-columns: min-content 1fr auto;
-}
-
-.ds-switch--readonly > .ds-switch__input,
-.ds-switch--readonly > .ds-switch__label {
-  cursor: default;
-}
-
-.ds-switch--readonly > .ds-switch__description {
-  margin-left: var(--ds-spacing-1);
-}
-
-.ds-switch--sm,
-.ds-switch--sm .ds-switch__label {
-  min-height: var(--ds-sizing-6);
-}
-
-.ds-switch--md,
-.ds-switch--md .ds-switch__label {
-  min-height: var(--ds-sizing-7);
-}
-
-.ds-switch--lg,
-.ds-switch--lg .ds-switch__label {
-  min-height: var(--ds-sizing-8);
-}
-
-.ds-switch--sm {
-  --dsc-switch-height: var(--ds-sizing-6);
-  --dsc-switch-width: var(--ds-sizing-11);
-}
-
-.ds-switch--sm .ds-switch__input {
-  left: -0.25rem;
-  top: -0.25rem;
-}
-
-.ds-switch--md {
-  --dsc-switch-height: var(--ds-sizing-7);
-  --dsc-switch-width: var(--ds-sizing-13);
-}
-
-.ds-switch--md .ds-switch__input {
-  left: 0;
-  top: 0;
-}
-
-.ds-switch--lg {
-  --dsc-switch-height: var(--ds-sizing-8);
-  --dsc-switch-width: var(--ds-sizing-15);
-}
-
-.ds-switch--lg .ds-switch__input {
-  left: 0;
-  top: 0.25rem;
-}
-
-.ds-switch__label:has(.ds-switch__track:only-child) {
-  grid-template-columns: auto;
-}
-
-.ds-switch__label:has(.ds-switch__track:only-child) .ds-switch__track {
-  margin-right: 0;
-}
-
-.ds-switch__input:disabled,
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label {
-  cursor: not-allowed;
-}
-
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__label,
-.ds-switch:has(.ds-switch__input:disabled) > .ds-switch__description {
-  opacity: var(--ds-disabled-opacity);
-}
-
-/*   .ds-switch__input:focus-visible + .ds-switch__label .ds-switch__track {
-    outline: var(--dsc-switch-focus-border-width) solid var(--ds-color-focus-outer);
-    outline-offset: var(--dsc-switch-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-color-focus-inner);
-  } */
-
-/**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-.ds-switch:has(.ds-switch__input:focus-visible) {
-  --dsc-focus-border-width: 3px;
-
-  outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
-  outline-offset: var(--dsc-focus-border-width);
-  box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-switch__input:not([readonly]):checked + .ds-switch__label .ds-switch__track {
-  background-color: var(--ds-color-accent-base-default);
-}
-
-.ds-switch__thumb {
-  scale: 0.8;
-  position: absolute;
-  height: var(--dsc-switch-height);
-  width: var(--dsc-switch-height);
-  border-radius: var(--ds-border-radius-full);
-  background-color: var(--dsc-switch-thumb-background-color);
-  transition: transform var(--dsc-switch--transition) ease;
-}
-
-.ds-switch__input:checked + .ds-switch__label .ds-switch__track .ds-switch__thumb {
-  --dsc-switch-check_color: var(--ds-color-accent-base-default);
-  --dsc-switch-thumb-background-color: var(--ds-color-accent-contrast-default);
-
-  transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 1.2));
-}
-
-.ds-switch__thumb::after {
-  content: '';
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: var(--dsc-switch-check_color);
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%23118849' /%3E%3C/svg%3E");
-  transition: background-color var(--dsc-switch--transition) ease;
-}
-
-.ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track {
-  box-shadow: inset 0 0 0 2px var(--ds-color-neutral-border-subtle);
-  background-color: var(--ds-color-neutral-background-subtle);
-}
-
-.ds-switch--readonly .ds-switch__input[readonly] + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-  --dsc-switch-check_color: var(--ds-color-neutral-background-subtle);
-
-  background-color: var(--ds-color-neutral-border-strong);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 0.2));
-  }
-
-  .ds-switch__input:not([readonly], :disabled):hover + .ds-switch__label {
-    color: var(--ds-color-accent-text-subtle);
-  }
-
-  .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track > .ds-switch__thumb {
-    --dsc-switch-check_color: var(--ds-color-accent-base-hover);
-
-    transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))));
-  }
-
-  .ds-switch__input:not(:checked, :disabled, [readonly]):hover + .ds-switch__label .ds-switch__track {
-    background-color: var(--ds-color-neutral-border-strong);
-  }
-
-  .ds-switch__input:not(:disabled, [readonly]):checked:hover + .ds-switch__label .ds-switch__track {
-    background-color: var(--ds-color-accent-base-hover);
-  }
-}