@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c

package/src/listItem/ListItem.less

@@ -1,346 +0,0 @@
-@import "./ListItem.grid.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.wds-list-item {
-  list-style: none;
-  width: 100%;
-  border-radius: var(--radius-medium);
-  background-color: var(--color-background-screen);
-  position: relative;
-  padding: var(--size-12);
-  container-type: inline-size;
-
-  & + .wds-list-item-spotlight,
-  .wds-list-item-spotlight + &{
-    margin-top: var(--size-16);
-  }
-
-  &:focus-within{
-    z-index: 1;
-  }
-
-  &-view {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-    grid-template-columns: subgrid;
-    grid-template-rows: subgrid;
-
-    &.fullyInteractive {
-      margin-bottom: 0;
-      &:before {
-        content: '';
-        position: absolute;
-        inset: 0;
-      }
-    }
-  }
-
-  a {
-    text-underline-offset: calc(var(--size-4) / 2);
-  }
-
-  &-interactive {
-    .wds-list-item-control:focus-visible,
-    // checkboxes are complicated. i could update checkbox but i'd probably break something else
-    .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
-      outline: none;
-    }
-
-    &:has(.wds-list-item-control:focus-visible),
-    &:has(input[type="checkbox"]:focus-visible) {
-      .ring();
-      outline-offset: -1px;
-    }
-
-    .wds-list-item-additional-info {
-      .ring-offset-0
-    }
-
-    a.wds-list-item-control {
-      &, &:hover, &:focus {
-        text-decoration: none;
-      }
-
-      &:has(.wds-list-item-control_pseudo-element) {
-        position: relative;
-        z-index: 1;
-      }
-
-      &.wds-list-item-control_pseudo-element {
-        &:before {
-          content: '';
-          position: absolute;
-          inset: 0;
-        }
-      }
-    }
-
-    &:not(.disabled, :disabled):hover {
-        background-color: var(--color-background-screen-hover);
-
-        .wds-list-item-control-wrapper {
-            .wds-Button {
-              background-color: var(--Button-background-hover);
-              color: var(--Button-color-hover);
-              transition: none;
-            }
-        }
-    }
-
-    &:not(.disabled, :disabled):active {
-        background-color: var(--color-background-screen-active);
-    }
-
-    .wds-list-item-button-control {
-        .wds-Button {
-          transition: none;
-        }
-      }
-
-    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-      &:hover {
-        background-color: unset;
-      }
-    }
-  }
-
-  &-media {
-    grid-area: media;
-    display: flex;
-    align-items: start;
-
-    &-image-wrapper {
-      width: var(--wds-list-item-media-size);
-      height: var(--wds-list-item-media-size);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &-image {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  &-body {
-    grid-area: body;
-    align-items: center;
-    width: 100%;
-    display: grid;
-    grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
-    gap: var(--size-16);
-    word-break: break-word;
-  }
-
-  &-title {
-    color: var(--color-content-primary);
-  }
-
-  &-value {
-    text-align: right;
-  }
-
-  &-body-center {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  &-additional-info {
-      grid-area: info;
-      color: var(--color-content-tertiary);
-      margin-top: calc(var(--size-4) * -1);
-  }
-
-  &-control-wrapper {
-      grid-area: control;
-      align-content: center;
-      height: var(--wds-list-item-control-wrapper-height);
-  }
-
-  &-navigation {
-    .tw-icon-chevron-right {
-      color: var(--color-interactive-secondary);
-    }
-  }
-
-  &-control {
-      flex: 0 0 auto;
-  }
-
-  &.disabled {
-    filter: none;
-    opacity: 1;
-
-    label {
-      cursor: not-allowed;
-    }
-
-    .tw-icon-backslash-circle {
-      color: var(--color-content-tertiary);
-    }
-  }
-
-
-
-  &-spotlight {
-      &-active {
-          background-color: var(--color-background-neutral);
-          &:not(.disabled, :disabled):hover {
-              background-color: var(--color-background-neutral-hover);
-          }
-          &:not(.disabled, :disabled):active {
-              background-color: var(--color-background-neutral-active);
-          }
-      }
-
-      &-inactive {
-          background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-          border: 1px dashed var(--color-border-neutral);
-          &:not(.disabled, :disabled):hover {
-              background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-          }
-          &:not(.disabled, :disabled):active {
-              background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-          }
-      }
-  }
-
-  &-prompt {
-    grid-area: prompt;
-
-    display: inline-flex;
-    justify-self: start;
-    text-align: left;
-    padding-top: calc(var(--padding-x-small) / 2);
-    padding-bottom: calc(var(--padding-x-small) / 2);
-    padding-left: calc(var(--padding-x-small) - 1px);
-    padding-right: var(--padding-x-small);
-    border-radius: var(--radius-small);
-    word-break: break-word;
-    overflow-wrap: break-word;
-
-    &:has(a),
-    &:has(button) {
-      position: relative;
-      z-index: 1;
-    }
-
-    a, button {
-      text-underline-offset: calc(var(--size-4) / 2);
-      &:first-of-type {
-        &:before {
-          content: '';
-          position: absolute;
-          inset: 0;
-        }
-      }
-    }
-
-    &.np-prompt-icon {
-      padding-left: calc(var(--padding-x-small) - 1px);
-      padding-right: var(--padding-x-small);
-      display: inline-flex;
-      align-items: center;
-      gap: var(--size-4);
-    }
-
-    .np-prompt-icon {
-      padding-right: calc(var(--size-12) / 2);
-      padding-top: calc(var(--size-4) - 1px);
-      padding-bottom: calc(var(--size-4) - 1px);
-
-      .tw-icon-tags,
-      .tw-icon-confetti {
-        color: var(--color-sentiment-positive-primary);
-      }
-    }
-
-    &.negative {
-      background-color: var(--color-sentiment-negative-secondary);
-      color: var(--color-sentiment-negative-primary);
-      a, button {
-        color: var(--color-sentiment-negative-primary);
-        &:hover {
-          color: var(--color-sentiment-negative-primary-hover);
-        }
-        &:active {
-          color: var(--color-sentiment-negative-primary-active);
-        }
-      }
-        .wds-list-item-prompt&:has(a, button) {
-        &:hover {
-          background-color: var(--color-sentiment-negative-secondary-hover);
-        }
-        &:active {
-          background-color: var(--color-sentiment-negative-secondary-active);
-        }
-      }
-    }
-    &.positive,
-    &.discount,
-    &.savings {
-      background-color: var(--color-sentiment-positive-secondary);
-      color: var(--color-sentiment-positive-primary);
-      a, button {
-        color: var(--color-sentiment-positive-primary);
-        &:hover {
-          color: var(--color-sentiment-positive-primary-hover);
-        }
-        &:active {
-          color: var(--color-sentiment-positive-primary-active);
-        }
-      }
-      .wds-list-item-prompt&:has(a, button) {
-        &:hover {
-          background-color: var(--color-sentiment-positive-secondary-hover);
-        }
-        &:active {
-          background-color: var(--color-sentiment-positive-secondary-active);
-        }
-      }
-    }
-    &.neutral {
-      background-color: var(--color-background-neutral);
-      color: var(--color-content-primary);
-      a, button {
-        color: var(--color-content-primary);
-      }
-      .wds-list-item-prompt&:has(a, button) {
-        &:hover {
-          background-color: var(--color-background-neutral-hover);
-        }
-        &:active {
-          background-color: var(--color-background-neutral-active);
-        }
-      }
-    }
-    &.warning {
-      background-color: var(--color-sentiment-warning-secondary);
-      color: var(--color-sentiment-warning-content);
-      a, button {
-        color: var(--color-sentiment-warning-content);
-        &:hover {
-          color: var(--color-sentiment-warning-content-hover);
-        }
-        &:active {
-          color: var(--color-sentiment-warning-content-active);
-        }
-      }
-      .wds-list-item-prompt&:has(a, button) {
-        &:hover {
-          // someday we'll have hover and active states for warning
-          // background-color: var(--color-sentiment-warning-secondary-hover);
-          background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-        }
-        &:active {
-          // background-color: var(--color-sentiment-warning-secondary-active);
-          background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-        }
-      }
-    }
-  }
-}