@transferwise/components 0.0.0-experimental-4f2af7f → 0.0.0-experimental-8bbf3ee

package/src/listItem/ListItem.grid.css

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