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

package/src/listItem/ListItem.grid.less

@@ -1,620 +0,0 @@
-.wds-list-item {
-  &-gridWrapper {
-    display: grid;
-    gap: var(--size-4) var(--size-16);
-
-    @container (min-width: 375px) {
-      &.wds-list-item-hasMedia-hasControl {
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "media body control"
-              ". info ."
-              ". prompt prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media body control"
-              ". info ."
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media body control"
-              ". prompt prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: auto 1fr auto;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "media body control"
-        }
-      }
-
-      &.wds-list-item-hasMedia-noControl {
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media body"
-              ". info"
-              ". prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "media body"
-              ". info"
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media body"
-              ". prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "media body"
-        }
-      }
-
-      &.wds-list-item-noMedia-hasControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body control"
-              "info ."
-              "prompt prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "info ."
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "prompt prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body control"
-        }
-      }
-
-      &.wds-list-item-noMedia-noControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-              "prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body"
-        }
-      }
-    }
-
-    @container (min-width: 297px) and (max-width: 375px) {
-      &.wds-list-item-hasMedia-hasControl {
-        .wds-list-item-media {
-          margin-bottom: var(--size-12);
-
-          .wds-list-item-media-image {
-            height: auto;
-          }
-        }
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto auto;
-          grid-template-areas:
-              "media media"
-              "body control"
-              "info control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "info"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "media media"
-              "body control"
-              "info control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "info"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "media media"
-              "body control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media media"
-              "body control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "control";
-              }
-        }
-      }
-
-      &.wds-list-item-hasMedia-noControl {
-        .wds-list-item-media {
-          margin-bottom: var(--size-16);
-
-          .wds-list-item-media-image {
-            height: auto;
-          }
-        }
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto auto;
-          grid-template-rows: auto auto auto auto;
-          grid-template-areas:
-              "media media"
-              "body body"
-              "info info"
-              "prompt prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "media media"
-              "body body"
-              "info info";
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto auto;
-
-          grid-template-areas:
-              "media media"
-              "body body"
-              "prompt prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "media"
-              "body"
-        }
-      }
-
-      &.wds-list-item-noMedia-hasControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "info control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "control";
-              }
-        }
-      }
-
-      &.wds-list-item-noMedia-noControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-              "prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body"
-        }
-      }
-    }
-
-    @container (max-width: 297px) {
-      &.wds-list-item-hasMedia-hasControl {
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "info control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: auto 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "control";
-              }
-        }
-      }
-
-      &.wds-list-item-hasMedia-noControl {
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-              "prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body"
-        }
-      }
-
-      &.wds-list-item-noMedia-hasControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "info control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body control"
-              "prompt prompt";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr auto;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body control";
-
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "control";
-              }
-        }
-      }
-
-      &.wds-list-item-noMedia-noControl {
-        .wds-list-item-prompt {
-          grid-column: 1 / -1;
-        }
-
-        &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-              "prompt";
-        }
-
-        &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "info"
-        }
-
-        &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-              "body"
-              "prompt";
-        }
-
-        &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-          grid-template-areas:
-              "body"
-        }
-      }
-
-      .wds-list-item-media {
-        display: none;
-        }
-
-      .wds-list-item-body {
-        grid-area: body;
-        display: grid;
-        grid-template-columns: 1fr;
-        justify-items: start;
-        gap: 0;
-
-        .wds-list-item-value {
-          text-align: left;
-        }
-      }
-    }
-  }
-}