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

package/table.css

@@ -1,236 +0,0 @@
-:root,
-:host {
-  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
-  --navds-table-row-color-background-hover: var(--navds-semantic-color-canvas-background);
-  --navds-table-row-color-background-selected: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-table-row-color-background-selected-hover: var(--navds-global-color-blue-100);
-  --navds-table-row-color-background-zebra: var(--navds-semantic-color-component-background-alternate);
-  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
-}
-
-.navds-table {
-  width: 100%;
-  border-collapse: collapse;
-  display: table;
-}
-
-.navds-table__header {
-  display: table-header-group;
-}
-
-.navds-table__body {
-  display: table-row-group;
-}
-
-.navds-table__row {
-  display: table-row;
-}
-
-.navds-table__body .navds-table__row--shade-on-hover:hover {
-  background-color: var(--navds-table-row-color-background-hover);
-}
-
-.navds-table__row--selected {
-  background-color: var(--navds-table-row-color-background-selected);
-}
-
-.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-  background-color: var(--navds-table-row-color-background-selected-hover);
-}
-
-.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-  background-color: var(--navds-table-row-color-background-zebra);
-}
-
-.navds-table--zebra-stripes
-  .navds-table__body
-  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
-  background-color: transparent;
-}
-
-.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--navds-table-row-color-background-zebra);
-}
-
-.navds-table__header-cell,
-.navds-table__data-cell {
-  display: table-cell;
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
-  border-bottom: 1px solid var(--navds-table-cell-color-border);
-  text-align: left;
-}
-
-.navds-table__header .navds-table__header-cell,
-.navds-table__header .navds-table__data-cell {
-  border-bottom-width: 2px;
-}
-
-.navds-table__header-cell--align-right,
-.navds-table__data-cell--align-right {
-  text-align: right;
-}
-
-.navds-table__header-cell--align-center,
-.navds-table__data-cell--align-center {
-  text-align: center;
-}
-
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--navds-table-cell-color-border-hover);
-}
-
-:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
-  border-bottom-color: transparent;
-}
-
-.navds-table--small .navds-table__header-cell,
-.navds-table--small .navds-table__data-cell {
-  padding: var(--navds-spacing-2) var(--navds-spacing-3);
-}
-
-.navds-table .navds-checkbox .navds-checkbox__input {
-  top: -12px;
-}
-
-.navds-table .navds-checkbox--small .navds-checkbox__input {
-  top: -6px;
-}
-
-.navds-table .navds-checkbox .navds-checkbox__label {
-  padding: 0;
-}
-
-.navds-table__header-cell[aria-sort] {
-  padding: 0;
-}
-
-.navds-table__sort-button {
-  appearance: none;
-  background: none;
-  color: var(--navds-semantic-color-link);
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
-  width: 100%;
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  line-height: inherit;
-  font-weight: inherit;
-}
-
-.navds-table--small .navds-table__sort-button {
-  padding: var(--navds-spacing-2) var(--navds-spacing-3);
-}
-
-.navds-table__sort-button:hover {
-  background-color: var(--navds-semantic-color-canvas-background);
-}
-
-.navds-table__sort-button:focus {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
-}
-
-.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
-.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--navds-global-color-blue-50);
-}
-
-.navds-table__header-cell--align-right .navds-table__sort-button {
-  justify-content: flex-end;
-}
-
-.navds-table__header-cell--align-center .navds-table__sort-button {
-  justify-content: center;
-}
-
-.navds-table__sort-button svg {
-  font-size: 1rem;
-  flex-shrink: 0;
-}
-
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
-  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
-}
-
-.navds-table__expandable-row--open .navds-table__data-cell {
-  border-bottom-color: transparent;
-}
-
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--navds-semantic-color-border-muted);
-}
-
-.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
-  border-color: transparent;
-}
-
-.navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 56px;
-}
-
-.navds-table--small .navds-table__toggle-expand-cell {
-  padding: 0;
-  width: 36px;
-}
-
-.navds-table__toggle-expand-button {
-  all: unset;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: var(--navds-spacing-4);
-}
-
-.navds-table--small .navds-table__toggle-expand-button {
-  padding: var(--navds-spacing-2);
-}
-
-.navds-table__toggle-expand-button:focus {
-  box-shadow: inset var(--navds-shadow-focus);
-}
-
-.navds-table__expandable-icon {
-  font-size: 1.5rem;
-}
-
-.navds-table--small .navds-table__expandable-icon {
-  font-size: 1.25rem;
-}
-
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
-.navds-table__expandable-icon--filled {
-  display: none;
-}
-
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
-  display: block;
-}
-
-.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
-  transform: rotate(180deg);
-}
-
-.navds-table__expanded-row-cell {
-  padding: 0;
-}
-
-.navds-table__expanded-row-cell:empty {
-  display: none;
-}
-
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
-  border-bottom: 1px solid var(--navds-table-cell-color-border);
-}
-
-.navds-table__expanded-row-content {
-  padding: var(--navds-spacing-4) 4.25rem;
-}
-
-.navds-table--small .navds-table__expanded-row-content {
-  padding: var(--navds-spacing-2) var(--navds-spacing-12);
-}

package/tabs.css

@@ -1,113 +0,0 @@
-.navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
-  width: 100%;
-  display: flex;
-}
-
-.navds-tabs__tablist {
-  display: flex;
-  max-width: 100%;
-  width: auto;
-  scroll-behavior: smooth;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
-  overflow-x: scroll;
-}
-
-.navds-tabs__tablist::-webkit-scrollbar {
-  display: none; /* for Chrome, Safari, and Opera */
-}
-
-.navds-tabs__scroll-button {
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  width: 44px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.navds-tabs__scroll-button--hidden {
-  visibility: hidden;
-}
-
-.navds-tabs__scroll-button svg {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--navds-spacing-4);
-  width: 32px;
-}
-
-.navds-tabs__tab {
-  min-height: 48px;
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  border: none;
-  color: var(--navds-semantic-color-text-muted);
-  cursor: pointer;
-}
-
-.navds-tabs__tab:hover {
-  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
-}
-
-.navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
-  color: var(--navds-semantic-color-text);
-}
-
-.navds-tabs__tab:focus {
-  outline: none;
-  box-shadow: inset var(--navds-shadow-focus);
-  color: var(--navds-semantic-color-text);
-}
-
-.navds-tabs__tab-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-1);
-}
-
-.navds-tabs__tab-inner svg {
-  flex-shrink: 0;
-}
-
-.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
-  flex-direction: column;
-  gap: 0;
-}
-
-.navds-tabs__tab--small {
-  min-height: 32px;
-  padding: 0.375rem var(--navds-spacing-4);
-}
-
-.navds-tabs__tab-icon--top,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--navds-spacing-1) var(--navds-spacing-4);
-}
-
-.navds-tabs__tab svg,
-.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
-  font-size: 1.25rem;
-}
-
-.navds-tabs__tab--small svg {
-  font-size: 1rem;
-}
-
-.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab-icon--top svg {
-  font-size: 1.5rem;
-}
-
-.navds-tabs__tabpanel:focus {
-  outline: none;
-}

package/tag.css

@@ -1,51 +0,0 @@
-:root,
-:host {
-  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
-  --navds-tag-color-background: var(--navds-semantic-color-component-background-alternate);
-  --navds-tag-color-info-background: var(--navds-semantic-color-feedback-info-background);
-  --navds-tag-color-info-border: var(--navds-semantic-color-feedback-info-border);
-  --navds-tag-color-warning-background: var(--navds-semantic-color-feedback-warning-background);
-  --navds-tag-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-tag-color-success-background: var(--navds-semantic-color-feedback-success-background);
-  --navds-tag-color-success-border: var(--navds-semantic-color-feedback-success-border);
-  --navds-tag-color-error-background: var(--navds-semantic-color-feedback-danger-background);
-  --navds-tag-color-error-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
-.navds-tag {
-  border: 1px solid;
-  border-color: var(--navds-tag-color-border);
-  border-radius: var(--navds-border-radius-medium);
-  background-color: var(--navds-tag-color-background);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.125rem var(--navds-spacing-3);
-  min-height: 32px;
-}
-
-.navds-tag--small {
-  min-height: 24px;
-  padding-right: var(--navds-spacing-1);
-  padding-left: var(--navds-spacing-1);
-}
-
-.navds-tag--error {
-  background-color: var(--navds-tag-color-error-background);
-  border-color: var(--navds-tag-color-error-border);
-}
-
-.navds-tag--success {
-  background-color: var(--navds-tag-color-success-background);
-  border-color: var(--navds-tag-color-success-border);
-}
-
-.navds-tag--warning {
-  background-color: var(--navds-tag-color-warning-background);
-  border-color: var(--navds-tag-color-warning-border);
-}
-
-.navds-tag--info {
-  background-color: var(--navds-tag-color-info-background);
-  border-color: var(--navds-tag-color-info-border);
-}

package/toggle-group.css

@@ -1,85 +0,0 @@
-:root,
-:host {
-  --navds-toggle-group-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
-  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
-  --navds-toggle-group-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-toggle-group-color-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-toggle-group-color-background-pressed: var(--navds-semantic-color-interaction-primary-selected);
-  --navds-toggle-group-color-text-pressed: var(--navds-semantic-color-text-inverted);
-}
-
-.navds-toggle-group__wrapper {
-  display: grid;
-  justify-items: start;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-toggle-group {
-  border-radius: 7px; /* Custom value OK */
-  background-color: var(--navds-toggle-group-color-background);
-  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
-  padding: calc(var(--navds-spacing-1) + 1px);
-  gap: var(--navds-spacing-1);
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}
-
-.navds-toggle-group__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--navds-spacing-3);
-  min-height: 48px;
-  border: none;
-  cursor: pointer;
-  background-color: var(--navds-toggle-group-color-background);
-  color: var(--navds-toggle-group-color-text);
-  border-radius: var(--navds-border-radius-small);
-  min-width: fit-content;
-}
-
-.navds-toggle-group__button:hover {
-  background-color: var(--navds-toggle-group-color-background-hover);
-  color: var(--navds-toggle-group-color-text-hover);
-}
-
-.navds-toggle-group__button:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background), 0 0 0 4px var(--navds-semantic-color-focus);
-}
-
-.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover), 0 0 0 4px var(--navds-semantic-color-focus);
-}
-
-.navds-toggle-group__button-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-toggle-group__button-inner > * {
-  flex-shrink: 0;
-}
-
-.navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--navds-toggle-group-color-background-pressed);
-  color: var(--navds-toggle-group-color-text-pressed);
-}
-
-.navds-toggle-group--small > .navds-toggle-group__button {
-  padding: 0.375rem;
-  min-height: 32px;
-  min-width: fit-content;
-}
-
-.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.5rem;
-}
-
-.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.125rem;
-}

package/tooltip.css

@@ -1,53 +0,0 @@
-@keyframes tooltipFadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.navds-tooltip {
-  z-index: var(--navds-z-index-tooltip);
-  background-color: var(--navds-semantic-color-component-background-inverted);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-2);
-  align-items: center;
-  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.2s;
-  animation-name: tooltipFadeIn;
-  text-align: center;
-}
-
-.navds-tooltip__arrow {
-  height: 7px;
-  width: 7px;
-  transform: rotate(45deg);
-  z-index: -1;
-  background-color: var(--navds-semantic-color-component-background-inverted);
-  position: absolute;
-}
-
-.navds-tooltip__keys {
-  padding-bottom: var(--navds-spacing-1);
-  display: flex;
-  gap: var(--navds-spacing-1);
-}
-
-.navds-tooltip__key {
-  font-family: var(--navds-font-family);
-  background-color: var(--navds-global-color-gray-700);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-1);
-  min-width: 18px;
-  height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}