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

package/baseline/utility.css

@@ -1,46 +0,0 @@
-/*
- * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
- *
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.sr-only,
-.navds-sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-
-  /* 1 */
-}
-
-/*
- * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
- *
- * Extends the .sr-only class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus,
-.navds-sr-only.focusable:active,
-.navds-sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}

package/button.css

@@ -1,277 +0,0 @@
-:root,
-:host,
-[data-theme="light"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-background: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-primary-background-hover: var(--navds-semantic-color-interaction-primary-hover);
-  --navds-button-color-primary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-secondary-border: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-secondary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-tertiary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-tertiary-border-focus: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-border-active: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-tertiary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Danger */
-  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-danger-background: var(--navds-semantic-color-interaction-danger);
-  --navds-button-color-danger-background-hover: var(--navds-semantic-color-interaction-danger-hover);
-  --navds-button-color-danger-background-active: var(--navds-semantic-color-interaction-danger-selected);
-  --navds-button-color-danger-border-focus: var(--navds-semantic-color-component-background-light);
-
-  /* Loader */
-  --navds-loader-color-on-button-background: rgb(255 255 255 / 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
-}
-
-[data-theme="dark"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
-  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
-  --navds-button-color-primary-background-hover: var(--navds-global-color-blue-300);
-  --navds-button-color-primary-background-active: var(--navds-global-color-blue-400);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
-  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-text);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-inverted);
-  --navds-button-color-secondary-background-hover: var(--navds-global-color-gray-800);
-  --navds-button-color-secondary-background-active: var(--navds-global-color-gray-700);
-}
-
-.navds-button {
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-3) var(--navds-spacing-5);
-  align-items: center;
-  justify-content: center;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-button--small {
-  padding: 0.375rem var(--navds-spacing-3);
-}
-
-.navds-button--xsmall {
-  padding: 0.125rem var(--navds-spacing-2);
-  gap: var(--navds-spacing-1);
-}
-
-.navds-button--icon-only {
-  padding: var(--navds-spacing-3);
-}
-
-.navds-button--small.navds-button--icon-only {
-  padding: 0.375rem;
-}
-
-.navds-button--xsmall.navds-button--icon-only {
-  padding: var(--navds-spacing-1);
-}
-
-.navds-button:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-button__icon {
-  --navds-button-icon-adjustment: -4px;
-
-  font-size: 1.5rem;
-  display: flex;
-}
-
-.navds-button__icon:first-child {
-  margin-left: var(--navds-button-icon-adjustment);
-}
-
-.navds-button__icon:last-child {
-  margin-right: var(--navds-button-icon-adjustment);
-}
-
-.navds-button__icon:only-child {
-  margin: 0;
-}
-
-.navds-button--small .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
-
-  font-size: 1.25rem;
-}
-
-.navds-button--xsmall .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
-
-  font-size: 1rem;
-}
-
-/*************************
- * .navds-button--primary *
- *************************/
-
-.navds-button--primary {
-  background-color: var(--navds-button-color-primary-background);
-  color: var(--navds-button-color-primary-text);
-}
-
-.navds-button--primary:hover {
-  background-color: var(--navds-button-color-primary-background-hover);
-}
-
-.navds-button--primary:active {
-  background-color: var(--navds-button-color-primary-background-active);
-}
-
-.navds-button--primary:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus), var(--navds-shadow-focus);
-}
-
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-primary-background);
-}
-
-/**************************
-* .navds-button--secondary *
- **************************/
-
-.navds-button--secondary {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
-}
-
-.navds-button--secondary:hover {
-  color: var(--navds-button-color-secondary-text-hover);
-  background-color: var(--navds-button-color-secondary-background-hover);
-}
-
-.navds-button--secondary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), var(--navds-shadow-focus);
-}
-
-.navds-button--secondary:active {
-  color: var(--navds-button-color-secondary-text-active);
-  background-color: var(--navds-button-color-secondary-background-active);
-  box-shadow: none;
-}
-
-.navds-button--secondary:focus:active {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-secondary-border-focus-active-hover), var(--navds-shadow-focus);
-}
-
-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
-}
-
-/****************************
- * .navds-button--tertiary *
- ****************************/
-
-.navds-button--tertiary {
-  color: var(--navds-button-color-tertiary-text);
-}
-
-.navds-button--tertiary:hover {
-  background-color: var(--navds-button-color-tertiary-background-hover);
-}
-
-.navds-button--tertiary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus), var(--navds-shadow-focus);
-}
-
-.navds-button--tertiary:active {
-  color: var(--navds-button-color-tertiary-text-active);
-  background-color: var(--navds-button-color-tertiary-background-active);
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
-}
-
-.navds-button--tertiary:active:hover {
-  background-color: var(--navds-button-color-tertiary-background-active);
-}
-
-.navds-button--tertiary:active:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
-}
-
-.navds-button--tertiary:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-tertiary-text);
-  background: none;
-  box-shadow: none;
-}
-
-/*************************
- * .navds-button--danger *
- *************************/
-
-.navds-button--danger {
-  background-color: var(--navds-button-color-danger-background);
-  color: var(--navds-button-color-danger-text);
-}
-
-.navds-button--danger:hover {
-  background-color: var(--navds-button-color-danger-background-hover);
-}
-
-.navds-button--danger:active {
-  background-color: var(--navds-button-color-danger-background-active);
-}
-
-.navds-button--danger:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus), var(--navds-shadow-focus);
-}
-
-.navds-button--danger:active:where(:disabled, .navds-button--disabled),
-.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-danger-background);
-}
-
-/**************************
- * .navds-button:disabled *
- **************************/
-
-.navds-button:where(:disabled, .navds-button--disabled) {
-  cursor: not-allowed;
-}
-
-.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
-  opacity: 0.3;
-}
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}

package/chat.css

@@ -1,89 +0,0 @@
-:root,
-:host {
-  --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
-  --navds-chat-color-avatar: var(--navds-semantic-color-text);
-  --navds-chat-color-avatar-background: var(--navds-semantic-color-canvas-background);
-}
-
-.navds-chat {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--navds-spacing-4);
-  padding-right: var(--navds-spacing-16);
-}
-
-.navds-chat--right {
-  flex-direction: row-reverse;
-  padding-right: 0;
-  padding-left: var(--navds-spacing-16);
-}
-
-.navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-3);
-}
-
-.navds-chat--right .navds-chat__bubble-wrapper {
-  align-items: flex-end;
-}
-
-.navds-chat__avatar {
-  align-items: center;
-  background: var(--navds-chat-color-avatar-background);
-  color: var(--navds-chat-color-avatar);
-  border-radius: var(--navds-border-radius-full);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  overflow: hidden;
-  height: 3rem;
-  width: 3rem;
-}
-
-.navds-chat__avatar svg {
-  align-self: center;
-  height: 100%;
-  width: 100%;
-}
-
-.navds-chat__bubble {
-  padding: 1rem;
-  box-shadow: var(--navds-shadow-small);
-  width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--navds-chat-color-background);
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-chat__bubble:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-chat--right .navds-chat__bubble {
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
-}
-
-.navds-chat__top-text {
-  color: var(--navds-semantic-color-text);
-  display: flex;
-  gap: var(--navds-spacing-2);
-  align-items: baseline;
-}
-
-.navds-chat--right .navds-chat__top-text {
-  align-self: flex-end;
-}
-
-.navds-chat__name {
-  font-weight: var(--navds-font-weight-bold);
-}

package/content-container.css

@@ -1,17 +0,0 @@
-:root,
-:host {
-  --navds-content-container-max-width: 79.5rem;
-}
-
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--navds-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--navds-spacing-6);
-  }
-}

package/date.css

@@ -1,218 +0,0 @@
-.navds-date {
-  padding: var(--navds-spacing-3);
-}
-
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-deepblue-500);
-}
-
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--navds-spacing-5);
-}
-
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--navds-font-size-small);
-}
-
-.navds-date .rdp-weeknumber {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-gray-800);
-  font-size: var(--navds-font-size-small);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.125rem var(--navds-spacing-1);
-  border-radius: var(--navds-border-radius-small);
-}
-
-.navds-date__caption-dropdown {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--navds-spacing-2);
-  align-items: center;
-}
-
-.navds-date__caption__month-wrapper {
-  display: flex;
-  justify-content: center;
-  gap: var(--navds-spacing-2);
-  align-items: center;
-}
-
-.navds-date__caption__month .navds-select__container select {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-button {
-  all: unset;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--navds-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start {
-  border-radius: 12px 2px 2px 12px;
-  border-radius: var(--navds-border-radius-xlarge) var(--navds-border-radius-small) var(--navds-border-radius-small)
-    var(--navds-border-radius-xlarge);
-}
-
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--navds-border-radius-small) var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
-    var(--navds-border-radius-small);
-}
-
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--navds-border-radius-xlarge);
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 3px var(--navds-global-color-blue-800);
-}
-
-/* Monthpicker */
-.navds-date__month-button {
-  all: unset;
-  text-align: center;
-  width: 3rem;
-  height: 2.75rem;
-  text-transform: capitalize;
-  border-radius: var(--navds-border-radius-medium);
-  cursor: pointer;
-}
-
-.navds-date__month-button:focus,
-.navds-monthpicker__caption-button:focus {
-  box-shadow: var(--navds-shadow-focus);
-  z-index: 1;
-}
-
-.navds-date__year-label {
-  display: flex;
-  align-items: center;
-}
-
-.navds-date__wrapper,
-.navds-date__standalone-wrapper {
-  height: fit-content;
-  width: fit-content;
-}
-
-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-date__field-wrapper {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  width: fit-content;
-}
-
-/* Focus layering */
-.navds-date__field-input:focus,
-.navds-date__field-button {
-  z-index: 1;
-}
-
-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-deepblue-500);
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--navds-global-color-gray-100);
-  color: var(--navds-global-color-gray-600);
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
-  background: var(--navds-global-color-blue-50);
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--navds-global-color-deepblue-500);
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-date__caption-button {
-  color: var(--navds-global-color-gray-900);
-}
-
-.navds-date__field-input {
-  padding-right: var(--navds-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--navds-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
-  border-color: var(--navds-search-color-border-error);
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
-}
-
-.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
-}
-
-.navds-date__field-button {
-  position: absolute;
-  right: var(--navds-spacing-2);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--navds-global-color-gray-900);
-}
-
-.navds-form-field--small .navds-date__field-button {
-  right: var(--navds-spacing-2);
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-.navds-form-field--small .navds-date__field-button svg {
-  font-size: var(--navds-font-size-medium);
-}
-
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-}
-
-.navds-date__caption__year {
-  width: 5rem;
-}
-
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
-}

package/form/confirmation-panel.css

@@ -1,35 +0,0 @@
-:root,
-:host {
-  --navds-confirmation-panel-color-background: var(--navds-global-color-orange-50);
-  --navds-confirmation-panel-color-background-checked: var(--navds-global-color-green-50);
-  --navds-confirmation-panel-color-background-error: var(--navds-global-color-red-50);
-  --navds-confirmation-panel-color-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-confirmation-panel-color-border-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-confirmation-panel-color-border-error: var(--navds-semantic-color-feedback-danger-border);
-}
-
-.navds-confirmation-panel__inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-confirmation-panel-color-border);
-  background-color: var(--navds-confirmation-panel-color-background);
-  transition: background-color linear 100ms;
-  justify-self: stretch;
-}
-
-.navds-confirmation-panel__content {
-  max-width: 80ch;
-}
-
-.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-checked);
-  border-color: var(--navds-confirmation-panel-color-border-checked);
-}
-
-.navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-error);
-  border-color: var(--navds-confirmation-panel-color-border-error);
-}