@navikt/ds-css 7.4.0 → 7.4.2

package/darkside/expansioncard.darkside.css

@@ -0,0 +1,235 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 0.625rem;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  outline: 3px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: 3px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-5);
+
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}

package/darkside/form/combobox.darkside.css

@@ -0,0 +1,441 @@
+.navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.5rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
+  --__ac-combobox-border-width: 1px;
+  --__ac-combobox-input-height: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-form-field--small .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.25rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
+  --__ac-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox--disabled {
+  opacity: 0.3;
+}
+
+.navds-combobox--disabled .navds-combobox__wrapper *:hover {
+  cursor: not-allowed;
+}
+
+.navds-combobox--disabled .navds-text-field__input {
+  border: 1px solid var(--a-border-default);
+}
+
+.navds-combobox--disabled .navds-combobox__selected-options {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
+.navds-combobox--readonly .navds-text-field__input,
+.navds-combobox--readonly .navds-combobox__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__ac-combobox-icon-size);
+  height: var(--__ac-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner.navds-text-field__input {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
+  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__wrapper-inner > :first-child {
+  flex: 2;
+}
+
+.navds-combobox__wrapper-inner > :last-child {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.navds-combobox__wrapper-inner:hover {
+  cursor: text;
+}
+
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+.navds-combobox__selected-options {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+  align-items: center;
+}
+
+.navds-combobox__selected-options > li {
+  margin: auto 0;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-combobox__selected-options > li:last-of-type {
+  display: flex;
+  flex: 1;
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+  padding-left: 0.25rem;
+}
+
+.navds-combobox__input-wrapper {
+  width: 100%;
+}
+
+.navds-combobox__input {
+  flex: 1;
+  border: none;
+  padding: 0;
+  margin: 0;
+  margin-left: var(--a-spacing-1);
+  min-width: 10ch;
+  width: 100%;
+  height: var(--__ac-combobox-input-height);
+}
+
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
+}
+
+.navds-combobox__input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  box-shadow: none;
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+@supports not selector(:has) {
+  .navds-combobox--focused .navds-combobox__wrapper-inner {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.navds-combobox__button-toggle-list {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--a-text-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear:active:hover,
+.navds-combobox__button-toggle-list:active:hover {
+  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+}
+
+.navds-combobox__button-clear:hover,
+.navds-combobox__button-toggle-list:hover {
+  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+}
+
+.navds-combobox__button-toggle-list:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__button-toggle-list:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+/* dropdown & non selectable dropdown items */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: var(--a-z-index-popover);
+  top: calc(100% + var(--a-spacing-2));
+  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--a-shadow-small);
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
+  color: var(--ac-combobox-list-text, var(--a-text-default));
+  overscroll-behavior: contain;
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.navds-combobox__list-item,
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-block: var(--__ac-combobox-list-item-padding-block);
+  padding-inline: var(--__ac-combobox-list-item-padding-inline);
+  width: 100%;
+  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--loading {
+  justify-content: center;
+  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
+}
+
+.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
+  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+  cursor: pointer;
+  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
+  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+}
+
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
+}
+
+.navds-combobox__list-item--selected p {
+  font-weight: var(--a-font-weight-bold);
+}
+
+.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
+  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+}
+
+.navds-combobox__list-item--new-option {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle-hover);
+}
+
+.navds-combobox__list-item--new-option--focus {
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+}
+
+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+/* Mobile */
+
+@media (max-width: 479px) {
+  .navds-combobox__button-toggle-list {
+    right: 0.5rem;
+  }
+
+  /* add bigger click area for input */
+  .navds-combobox__input {
+    min-width: min-content;
+    padding: 0.75rem 0;
+  }
+
+  .navds-combobox__selected-options {
+    gap: var(--a-spacing-1);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover
+    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: -3px;
+  }
+}