@navikt/ds-css 7.40.0 → 8.0.1

package/form/select.css

@@ -1,113 +0,0 @@
-.navds-select__input {
-  appearance: none;
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  color: var(--ac-select-text, var(--a-text-default));
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 3rem;
-  display: inline-block;
-  position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-  scroll-margin-block-start: 4rem;
-}
-
-@media (forced-colors: active) {
-  .navds-select__input.navds-select__input.navds-select__input {
-    background-color: ButtonFace;
-    border-color: ButtonText;
-    color: ButtonText;
-    forced-color-adjust: none;
-    box-shadow: none;
-  }
-
-  .navds-select__input.navds-select__input.navds-select__input:focus {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-}
-
-.navds-select__input:hover {
-  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
-  cursor: pointer;
-}
-
-.navds-select__input:focus {
-  outline: none;
-  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
-  box-shadow: var(--a-shadow-focus);
-}
-
-.navds-select__container {
-  position: relative;
-  display: flex;
-  width: 100%;
-  color: var(--a-text-default);
-}
-
-.navds-select__chevron {
-  position: absolute;
-  font-size: 1.5rem;
-  right: var(--a-spacing-2);
-  pointer-events: none;
-  align-self: center;
-  color: var(--ac-select-text, var(--a-text-default));
-}
-
-@media (forced-colors: active) {
-  .navds-select__chevron {
-    color: ButtonText;
-  }
-}
-
-.navds-form-field--small .navds-select__input {
-  min-height: 2rem;
-  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
-}
-
-.navds-form-field--small .navds-select__chevron {
-  right: var(--a-spacing-1-alt);
-}
-
-/**
-  Error handling
-*/
-.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
-  border-color: var(--ac-select-error-border, var(--a-surface-danger));
-}
-
-.navds-select--error .navds-select__input:focus {
-  box-shadow: var(--a-shadow-focus);
-}
-
-/**
-  Disabled
-*/
-.navds-select__input:disabled {
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  box-shadow: none;
-  cursor: not-allowed;
-
-  /* Chrome-fix */
-  opacity: 1;
-  color: var(--a-text-default);
-}
-
-/* Chrome-fix */
-.navds-select__input:disabled > option {
-  color: var(--a-text-default);
-}
-
-.navds-select--readonly .navds-select__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-
-.navds-select--readonly .navds-select__chevron {
-  color: var(--a-gray-500);
-}

package/form/switch.css

@@ -1,304 +0,0 @@
-.navds-switch {
-  position: relative;
-  min-height: 3rem;
-  width: fit-content;
-}
-
-.navds-switch--right {
-  width: auto;
-}
-
-.navds-switch--small {
-  position: relative;
-  min-height: 2rem;
-}
-
-/* Input */
-.navds-switch__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 3rem;
-  height: 3rem;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-switch--small > .navds-switch__input {
-  height: 2rem;
-  width: 2.5rem;
-  top: 0;
-}
-
-/* Label */
-.navds-switch__label-wrapper {
-  cursor: pointer;
-  color: var(--a-text-default);
-}
-
-.navds-switch__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
-}
-
-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
-
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem;
-}
-
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
-}
-
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
-  padding-bottom: 0;
-}
-
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action-selected));
-}
-
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
-  color: inherit;
-}
-
-/* Track */
-.navds-switch__track {
-  width: 2.75rem;
-  height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-default));
-  border: 2px solid var(--a-border-default);
-  position: absolute;
-  top: var(--a-spacing-3);
-  left: 0;
-  border-radius: var(--a-border-radius-full);
-  transition-property: background-color, border-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1-alt);
-  width: 2.25rem;
-  height: 1.25rem;
-}
-
-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
-
-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-}
-
-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
-}
-
-.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-default));
-}
-
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
-}
-
-.navds-switch__input:focus-visible ~ .navds-switch__track {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-switch__input:focus ~ .navds-switch__track {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-/* Thumb */
-.navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
-  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-full);
-  width: 1.125rem;
-  height: 1.125rem;
-  position: absolute;
-  transform: translateX(0);
-  left: 0.0625rem;
-  top: 0.0625rem;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navds-switch--small .navds-switch__thumb {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
-  background-color: var(--a-surface-default);
-  width: 1.25rem;
-  height: 1.25rem;
-  left: 0;
-  top: 0;
-}
-
-.navds-switch--small > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1rem);
-  width: 1rem;
-  height: 1rem;
-  left: 0;
-  top: 0;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.125rem);
-  }
-
-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.125rem);
-  }
-
-  .navds-switch--small > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.875rem);
-  }
-}
-
-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
-}
-
-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-}
-
-.navds-switch--small > .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1rem);
-}
-
-/* Disabled */
-.navds-switch__input:disabled {
-  appearance: none;
-}
-
-.navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
-}
-
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
-  cursor: not-allowed;
-}
-
-/* Readonly */
-.navds-switch--readonly > .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
-  background-color: var(--a-surface-neutral-moderate);
-  border-color: var(--a-border-subtle);
-}
-
-.navds-switch--readonly > .navds-switch__label-wrapper,
-.navds-switch--readonly > .navds-switch__input {
-  cursor: default;
-}
-
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch--readonly .navds-switch__label-wrapper:hover {
-  color: var(--a-text-default);
-}
-
-.navds-switch--readonly .navds-switch__label {
-  display: inline-flex;
-}
-
-.navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-neutral);
-}
-
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-on-neutral);
-  background-color: var(--a-surface-neutral);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0);
-  }
-
-  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.25rem);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  .navds-switch__label-wrapper:hover {
-    color: highlight;
-  }
-
-  .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb,
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: fieldtext;
-  }
-
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    color: field;
-  }
-
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: graytext;
-  }
-
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  .navds-switch--disabled:not(.navds-switch--loading) {
-    opacity: 1;
-  }
-
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
-    border-color: graytext;
-  }
-
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
-    border-color: graytext;
-  }
-
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
-    color: graytext !important;
-  }
-}

package/form/text-field.css

@@ -1,113 +0,0 @@
-[data-theme="dark"] {
-  --__ac-textfield-text: var(--a-text-on-inverted);
-  --__ac-textfield-bg: var(--a-surface-inverted);
-  --__ac-textfield-border: var(--a-border-on-inverted);
-  --__ac-textfield-hover-border: var(--a-blue-200);
-  --__ac-textfield-placeholder: var(--a-gray-500);
-  --__ac-textfield-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textfield-text: initial;
-  --__ac-textfield-bg: initial;
-  --__ac-textfield-border: initial;
-  --__ac-textfield-hover-border: initial;
-  --__ac-textfield-placeholder: initial;
-  --__ac-textfield-error-border: initial;
-}
-
-.navds-text-field__input {
-  appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  min-height: 3rem;
-  width: 100%;
-  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
-  scroll-margin-block-start: 4rem;
-}
-
-.navds-text-field__input[size] {
-  width: auto;
-}
-
-.navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
-}
-
-.navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--a-spacing-2);
-  min-height: 2rem;
-}
-
-.navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
-}
-
-.navds-text-field__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-text-field__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-/**
-  Error handling
-*/
-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-}
-
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    0 0 0 1px var(--a-border-danger),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      0 0 0 1px var(--a-border-danger),
-      var(--a-shadow-focus);
-  }
-}
-
-/* Disabled handling */
-.navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-
-/**
-  * Removes default search icon
-  */
-.navds-text-field__input[type="search"]::-webkit-search-decoration,
-.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-@media (forced-colors: active) {
-  .navds-text-field__input {
-    background-color: field;
-    color: fieldtext;
-  }
-}

package/form/textarea.css

@@ -1,143 +0,0 @@
-[data-theme="dark"] {
-  --__ac-textarea-text: var(--a-text-on-inverted);
-  --__ac-textarea-bg: var(--a-transparent);
-  --__ac-textarea-border: var(--a-border-on-inverted);
-  --__ac-textarea-hover-border: var(--a-blue-200);
-  --__ac-textarea-placeholder: var(--a-gray-500);
-  --__ac-textarea-error-border: var(--a-red-300);
-  --__ac-textarea-counter-text: var(--a-gray-300);
-  --__ac-textarea-counter-error-text: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textarea-text: initial;
-  --__ac-textarea-bg: initial;
-  --__ac-textarea-border: initial;
-  --__ac-textarea-hover-border: initial;
-  --__ac-textarea-placeholder: initial;
-  --__ac-textarea-error-border: initial;
-  --__ac-textarea-counter-text: initial;
-  --__ac-textarea-counter-error-text: initial;
-}
-
-.navds-textarea__input {
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  height: var(--__ac-textarea-height);
-  appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  resize: none;
-  width: 100%;
-  display: block;
-  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
-  scroll-margin-block-start: 4rem;
-  white-space: break-spaces;
-}
-
-.navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
-}
-
-.navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
-}
-
-.navds-textarea__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-textarea__input:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-form-field--small .navds-textarea__input {
-  padding: var(--a-spacing-1-alt);
-}
-
-.navds-textarea__counter {
-  margin-top: -0.375rem;
-  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
-}
-
-.navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
-}
-
-.navds-textarea__sr-counter {
-  display: none;
-}
-
-.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
-  display: initial;
-}
-
-.navds-textarea--resize-both .navds-textarea__input {
-  resize: both;
-  border-end-end-radius: 0;
-}
-
-.navds-textarea--resize-horizontal .navds-textarea__input {
-  resize: horizontal;
-  border-end-end-radius: 0;
-}
-
-.navds-textarea--resize-vertical .navds-textarea__input {
-  resize: vertical;
-  border-end-end-radius: 0;
-}
-
-.navds-textarea--autoscrollbar,
-.navds-textarea--autoscrollbar .navds-textarea__wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  /* Makes the box-shadow visible even though overflow is hidden: */
-  padding: 3px;
-  margin: -3px;
-}
-
-.navds-textarea--autoscrollbar .navds-textarea__input {
-  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
-}
-
-/**
-  Error handling
-*/
-.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-}
-
-.navds-textarea--error .navds-textarea__input:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
-
-.navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-textarea--readonly .navds-textarea__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
-
-@media (forced-colors: active) {
-  .navds-textarea__input {
-    background-color: field;
-    color: fieldtext;
-  }
-}