@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/timeline.css

@@ -1,450 +1,279 @@
-.navds-timeline {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  width: 100%;
-  min-width: fit-content;
-  align-items: center;
-}
-
-.navds-timeline__axislabels {
-  position: relative;
-  height: 1rem;
-  box-sizing: content-box;
-  grid-column: 2;
-  margin-bottom: var(--a-spacing-1);
-}
-
-.navds-timeline__row-label {
-  white-space: nowrap;
-  width: auto;
-  margin-right: var(--a-spacing-4);
-  grid-column: 1;
-  min-height: 1.5rem;
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-timeline__row-label:where(:nth-last-child(2)) {
-  align-self: flex-end;
-}
-
-.navds-timeline__axislabels-label {
-  position: absolute;
-  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
-  white-space: nowrap;
-}
-
-.navds-timeline__row {
-  display: flex;
-  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
-  margin: var(--a-spacing-4) 0;
-  grid-column: 2;
-}
-
-.navds-timeline__row--active {
-  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
-}
-
-.navds-timeline__row:last-of-type {
-  margin-bottom: 0;
-}
-
-.navds-timeline__row-periods {
-  min-height: 1.5rem;
-  position: relative;
-  width: 100%;
-  margin: 0;
-}
-
-.navds-timeline__row-periods > li {
-  list-style-type: none;
-}
-
-.navds-timeline__row-periods:focus {
-  outline: none;
-}
-
-.navds-timeline__period {
-  height: 100%;
-  border-radius: var(--a-border-radius-full);
-  position: absolute;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  z-index: 2;
-  border: none;
-  font-size: 1rem;
-}
-
-.navds-timeline__period--inner {
-  margin: 0 var(--a-spacing-1);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: clip;
-  text-align: left;
-  display: flex;
-  align-items: center;
-}
-
-.navds-timeline__period--inner svg {
-  flex-shrink: 0;
-}
-
-.navds-timeline__period--clickable {
-  cursor: pointer;
-}
-
-.navds-timeline__period--success {
-  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
-}
-
-.navds-timeline__period--success.navds-timeline__period--clickable:hover {
-  background: var(--a-surface-success-subtle-hover);
-  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
-}
-
-.navds-timeline__period--warning {
-  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
-}
-
-.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
-}
-
-.navds-timeline__period--danger {
-  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
-}
-
-.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
-}
-
-.navds-timeline__period--info {
-  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
-}
-
-.navds-timeline__period--info.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
-}
-
-.navds-timeline__period--neutral {
-  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
-}
-
-.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
-}
-
-.navds-timeline__period--connected-both {
-  border-radius: 0;
-}
-
-.navds-timeline__period--connected-right {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.navds-timeline__period--connected-left {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.navds-timeline__period--selected {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
-  z-index: 3;
-}
-
-.navds-timeline__pin-wrapper {
-  position: absolute;
-  grid-column: 2;
-  top: 0;
-  z-index: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column-reverse;
-  isolation: isolate;
-
-  --navdsc-timeline-pin-size: 0.9rem;
-}
-
-.navds-timeline__pin-button {
-  border: none;
-  cursor: pointer;
-  background: var(--a-surface-default);
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 5px var(--a-surface-default);
-  z-index: 2;
-  border-radius: var(--a-border-radius-full);
-  padding: var(--a-spacing-1);
-  position: relative;
-}
-
-.navds-timeline__pin-button::before {
-  content: "";
-  inset: 0;
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  border-radius: var(--a-border-radius-full);
-  left: calc(-12.5px + 3.5px);
-  top: calc(-12.5px + 3.5px);
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
+
+@layer aksel.components.modules {
+  .aksel-timeline {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    width: 100%;
+    min-width: fit-content;
+    display: grid;
+    position: relative;
+  }
 
-.navds-timeline__pin-button:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--a-surface-default),
-    0 0 0 6px var(--a-border-focus);
-  outline: none;
-}
+  .aksel-timeline__axislabels {
+    box-sizing: content-box;
+    height: 1rem;
+    margin-bottom: var(--ax-space-4);
+    grid-column: 2;
+    position: relative;
+  }
 
-.navds-timeline__pin-button:hover {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 5px var(--a-surface-default);
-}
+  .aksel-timeline__row-label {
+    white-space: nowrap;
+    width: auto;
+    margin-right: var(--ax-space-16);
+    align-items: center;
+    gap: var(--ax-space-8);
+    grid-column: 1;
+    min-height: 1.5rem;
+    display: flex;
+  }
 
-.navds-timeline__pin-button:hover:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--a-surface-default),
-    0 0 0 6px var(--a-border-focus);
-}
+  .aksel-timeline__row-label:where(:nth-last-child(2)) {
+    align-self: flex-end;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-timeline__pin-button:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 4px var(--a-surface-default),
-      0 0 0 6px var(--a-border-focus);
-    outline: none;
+  .aksel-timeline__axislabels-label {
+    color: var(--ax-text-neutral-subtle);
+    white-space: nowrap;
+    position: absolute;
   }
 
-  .navds-timeline__pin-button:hover:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 4px var(--a-surface-default),
-      0 0 0 6px var(--a-border-focus);
+  .aksel-timeline__row {
+    background: var(--ax-bg-neutral-softA);
+    margin: var(--ax-space-16) 0;
+    grid-column: 2;
+    display: flex;
   }
-}
 
-.navds-timeline__pin-wrapper::before {
-  content: "";
-  top: var(--navdsc-timeline-pin-size);
-  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
-  width: 1px;
-  margin: 0 auto;
-  background: var(--a-surface-inverted);
-}
+  .aksel-timeline__row--active {
+    background: var(--ax-bg-accent-moderate);
+  }
 
-.navds-timeline__zoom {
-  margin-top: var(--a-spacing-6);
-  float: right;
-  display: flex;
-  list-style-type: none;
-}
+  .aksel-timeline__row:last-of-type {
+    margin-bottom: 0;
+  }
 
-.navds-timeline__zoom-button {
-  all: unset;
-  cursor: pointer;
-  padding: 6px 9px 6px 8px;
-  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
-  border-width: 1px 0 1px 1px;
-  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
-}
+  .aksel-timeline__row-periods {
+    width: 100%;
+    min-height: 1.5rem;
+    margin: 0;
+    position: relative;
+  }
 
-.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
-  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
-}
+  .aksel-timeline__row-periods > li {
+    list-style-type: none;
+  }
 
-.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
-  border-width: 1px;
-  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
-}
+  .aksel-timeline__period:focus-visible {
+    z-index: 4;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 
-.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
-  border-radius: var(--a-border-radius-medium);
-}
+  .aksel-timeline__period:focus-visible.aksel-timeline__period:focus-visible {
+    box-shadow: 0 0 0 3px var(--ax-bg-default);
+  }
 
-.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
-}
+  .aksel-timeline__period {
+    border-radius: var(--ax-radius-full);
+    z-index: 2;
+    background: var(--ax-bg-moderate);
+    border: solid 1px var(--ax-border-default);
+    height: 100%;
+    color: var(--ax-text-decoration);
+    align-items: center;
+    padding: 0;
+    font-size: 1rem;
+    display: flex;
+    position: absolute;
+  }
 
-.navds-timeline__zoom-button[aria-pressed="true"] {
-  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
-  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
-}
+  .aksel-timeline__period.aksel-timeline__period--clickable:hover {
+    background: var(--ax-bg-moderate-hover);
+    border-color: var(--ax-border-strong);
+  }
 
-.navds-timeline__period:focus-visible {
-  outline: none;
-  z-index: 4;
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
+  .aksel-timeline__period.aksel-timeline__period--clickable.aksel-timeline__period--selected {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+    border: none;
+  }
 
-.navds-timeline__period--selected:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
-    0 0 0 2px var(--a-border-focus);
-  z-index: 3;
-}
+  .aksel-timeline__period--inner {
+    margin: 0 var(--ax-space-8);
+    white-space: nowrap;
+    text-overflow: clip;
+    text-align: left;
+    align-items: center;
+    display: flex;
+    overflow: hidden;
+  }
 
-.navds-timeline__zoom li:focus-within {
-  z-index: var(--a-z-index-focus);
-}
+  .aksel-timeline__period--inner svg {
+    flex-shrink: 0;
+  }
 
-.navds-timeline__zoom-button:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    0 0 0 3px var(--a-border-focus);
-  border-width: 1px;
-}
+  .aksel-timeline__period--clickable {
+    cursor: pointer;
+  }
 
-.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
-  margin-right: 2px;
-  padding-right: 6px;
-}
+  .aksel-timeline__period--connected-both {
+    border-radius: 0;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-timeline__period:focus {
-    outline: none;
-    z-index: 4;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
+  .aksel-timeline__period--connected-right {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  .navds-timeline__period--selected:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
-      0 0 0 2px var(--a-border-focus);
-    z-index: 3;
+  .aksel-timeline__period--connected-left {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
-  .navds-timeline__zoom-button:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      0 0 0 3px var(--a-border-focus);
-    border-width: 1px;
+  .aksel-timeline__pin-wrapper {
+    z-index: 1;
+    isolation: isolate;
+    flex-direction: column-reverse;
+    grid-column: 2;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    top: 0;
   }
 
-  .navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
-    margin-right: 2px;
-    padding-right: 6px;
+  .aksel-timeline__pin-button {
+    cursor: pointer;
+    background: var(--ax-bg-default);
+    box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
+    z-index: 2;
+    border-radius: var(--ax-radius-full);
+    padding: var(--ax-space-8);
+    border: none;
+    position: relative;
   }
-}
 
-/**
-* Timeline Popover
-*/
-
-.navds-timeline__popover {
-  z-index: var(--a-z-index-popover);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  box-shadow: var(--a-shadow-medium);
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
-}
+  .aksel-timeline__pin-button:before {
+    content: "";
+    border-radius: var(--ax-radius-full);
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    inset: -9px 0 0 -9px;
+  }
 
-.navds-timeline__popover:focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
+  .aksel-timeline__pin-button:hover {
+    box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong-hover);
+  }
 
-.navds-timeline__popover-arrow {
-  position: absolute;
-  z-index: -1;
-  transform: rotate(45deg);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  width: 1rem;
-  height: 1rem;
-}
+  .aksel-timeline__pin-button:focus-visible {
+    box-shadow: inset 0 0 0 4px var(--ax-border-danger-strong), 0 0 0 3px var(--ax-bg-default);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 
-.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
-  border-left-color: transparent;
-  border-top-color: transparent;
-}
+  .aksel-timeline__pin-wrapper:before {
+    content: "";
+    background: var(--ax-border-neutral-strong);
+    width: 1px;
+    height: calc(100% - 1.8rem);
+    margin: 0 auto;
+    top: .9rem;
+  }
 
-.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
-  border-bottom-color: transparent;
-  border-right-color: transparent;
-}
+  .aksel-timeline__zoom {
+    margin-top: var(--ax-space-24);
+    float: right;
+    list-style-type: none;
+    display: flex;
+  }
 
-.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
+  .aksel-timeline__zoom-button {
+    all: unset;
+    cursor: pointer;
+    border: 1px solid var(--ax-border-neutral);
+    background: var(--ax-bg-default);
+    border-width: 1px 0 1px 1px;
+    padding: 6px 9px 6px 8px;
+  }
 
-.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
-  border-right-color: transparent;
-  border-top-color: transparent;
-}
+  .aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button {
+    border-radius: var(--ax-radius-4) 0 0 var(--ax-radius-4);
+  }
 
-@media (forced-colors: active) {
-  .navds-timeline__period:focus {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button {
+    border-radius: 0 var(--ax-radius-4) var(--ax-radius-4) 0;
+    border-width: 1px;
   }
 
-  .navds-timeline__period--success,
-  .navds-timeline__period--warning,
-  .navds-timeline__period--info,
-  .navds-timeline__period--neutral,
-  .navds-timeline__period--danger {
-    forced-color-adjust: none;
+  .aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button {
+    border-radius: var(--ax-radius-4);
   }
 
-  .navds-timeline__row {
-    border: 1px solid transparent;
+  .aksel-timeline__zoom-button:not([aria-pressed="true"]):hover {
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 
-  .navds-timeline__pin-wrapper::before {
-    border: 1px solid transparent;
+  .aksel-timeline__zoom-button[aria-pressed="true"] {
+    background: var(--ax-bg-neutral-strong-pressed);
+    border-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
   }
 
-  .navds-timeline__pin-button {
-    outline: 4px solid transparent;
+  .aksel-timeline__zoom li:focus-within {
+    z-index: 5;
   }
 
-  .navds-timeline__pin-button:focus,
-  .navds-timeline__pin-button:focus-visible {
-    outline: 4px solid highlight;
-    outline-offset: 2px;
-    box-shadow: none;
+  .aksel-timeline__zoom-button:focus-visible {
+    box-shadow: 0 0 0 1px var(--ax-bg-default), 0 0 0 4px var(--ax-border-focus);
+    border-width: 1px;
   }
 
-  .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
-    border-left-color: canvas;
-    border-top-color: canvas;
+  .aksel-timeline__zoom li:not(:last-child) .aksel-timeline__zoom-button:focus-visible {
+    margin-right: 2px;
+    padding-right: 6px;
   }
 
-  .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
-    border-bottom-color: canvas;
-    border-right-color: canvas;
+  .aksel-timeline__popover {
+    z-index: 5;
+    background-color: var(--ax-bg-raised);
+    box-shadow: var(--ax-shadow-dialog);
+    border: 1px solid;
+    border-color: var(--ax-border-neutral-subtleA);
+    border-radius: var(--ax-radius-8);
+    padding: var(--ax-space-16) var(--ax-space-20);
   }
 
-  .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
-    border-left-color: canvas;
-    border-bottom-color: canvas;
+  .aksel-timeline__popover:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
-  .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
-    border-right-color: canvas;
-    border-top-color: canvas;
+  @media (forced-colors: active) {
+    .aksel-timeline__period:focus {
+      outline-offset: 3px;
+      outline: 3px solid highlight;
+    }
+
+    .aksel-timeline__period--success, .aksel-timeline__period--warning, .aksel-timeline__period--info, .aksel-timeline__period--neutral, .aksel-timeline__period--danger {
+      forced-color-adjust: none;
+    }
+
+    .aksel-timeline__row, .aksel-timeline__pin-wrapper:before {
+      border: 1px solid rgba(0, 0, 0, 0);
+    }
+
+    .aksel-timeline__pin-button {
+      outline: 4px solid rgba(0, 0, 0, 0);
+    }
+
+    .aksel-timeline__pin-button:focus, .aksel-timeline__pin-button:focus-visible {
+      outline-offset: 3px;
+      box-shadow: none;
+      outline: 4px solid highlight;
+    }
   }
 }
+
+@layer aksel.layout;