@seams/wallet 0.21.0 → 0.22.0

package/dist/esm/react/components/AccountMenuButton/TransactionSettingsSection.css

@@ -1,109 +1,401 @@
-/* Expander (TransactionSettingsSection) */
-.seams-dropdown-tx-settings-root {
-  background-color: var(--seams-expander-surface, var(--seams-colors-surface));
-  transform-origin: top;
+/* Transaction settings: a review switch, then the review layout as cards
+   with a small drawing. The settings page and the account menu share these
+   rules; the menu adds a compact variant. */
+.seams-transaction-page {
   display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  gap: 40px;
 }
-
-.seams-dropdown-tx-settings-root.is-expanded {
+.seams-transaction-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.seams-transaction-review + .seams-transaction-group {
+  padding-top: 40px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
-  /* border-bottom: 1px solid var(--seams-colors-borderPrimary); */
-  background-color: var(--seams-expander-surface, var(--seams-colors-surface));
-  grid-template-rows: 1fr;
 }
-
-.seams-dropdown-toggle-tx-settings {
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
+.seams-transaction-group legend {
+  /* A floated legend leaves the fieldset border, so the divider above a
+     group runs above its title, not through it. */
+  float: inline-start;
+  width: 100%;
+  padding: 0;
+  font-size: 18px;
+  font-weight: 600;
 }
-
-.seams-dropdown-toggle-tx-settings-content {
+.seams-transaction-group legend + * {
+  clear: both;
+}
+.seams-transaction-group > p {
+  margin: 6px 0 20px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.seams-transaction-choices {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+.seams-transaction-choice {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 16px;
+  gap: 14px;
+  padding: 12px 12px 16px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 16px;
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
   transition:
-    opacity 100ms ease,
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  opacity: 0;
-  transform: translateY(4px);
+    border-color 120ms ease,
+    background-color 120ms ease;
 }
-
-.seams-dropdown-tx-settings-root.is-expanded .seams-dropdown-toggle-tx-settings-content {
-  opacity: 1;
-  transform: translateY(0);
+.seams-transaction-choice-text {
+  display: grid;
+  gap: 6px;
+  padding-inline: 4px;
 }
-
-.seams-confirmation-options {
-  font-size: 12px;
-  margin-bottom: 6px;
+.seams-transaction-choice-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
-
-.seams-account-seg {
+.seams-transaction-choice strong {
+  font-size: 15px;
+  font-weight: 600;
+}
+.seams-transaction-choice-description {
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.seams-transaction-choice-indicator {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
   box-sizing: border-box;
-  min-width: 0;
-  position: relative;
-  min-height: 54px;
-  overflow: hidden;
-  padding: 5px;
-  border: none;
-  background: color-mix(in srgb, var(--seams-colors-textPrimary) 6%, var(--seams-colors-surface2));
-  border-radius: var(--seams-border-radius-xl);
+  border: 1.5px solid var(--seams-colors-borderPrimary);
+  border-radius: 50%;
 }
-
-.seams-account-seg-active {
-  position: absolute;
-  top: 5px;
-  bottom: 5px;
-  left: 5px;
-  width: calc((100% - 10px) / var(--seams-account-seg-count));
-  border-radius: inherit;
-  background: var(--seams-account-seg-active-bg);
-  transform: translateX(calc(var(--seams-account-seg-active-index) * 100%));
-  transition:
-    transform 220ms ease,
-    opacity 150ms ease;
-  pointer-events: none;
+.seams-transaction-choice[aria-pressed='true'] {
+  border-color: var(--seams-colors-primary);
+  box-shadow: inset 0 0 0 1px var(--seams-colors-primary);
+}
+.seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+  border: 5px solid var(--seams-colors-primary);
+}
+.seams-transaction-choice:hover:not(:disabled):not([aria-pressed='true']) {
+  background: var(--seams-colors-surface);
+}
+.seams-transaction-choice:focus-visible {
+  outline: 2px solid var(--seams-colors-primary);
+  outline-offset: 4px;
+}
+.seams-transaction-choice:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.seams-account-seg-grid {
-  position: relative;
-  z-index: 1;
+/* The switch row uses the card grid, so its edge lines up with the cards. */
+.seams-transaction-review {
   display: grid;
-  grid-template-columns: repeat(var(--seams-account-seg-count), minmax(0, 1fr));
-  gap: 4px;
-  height: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px 16px;
 }
-
-.seams-account-seg-btn {
-  min-width: 0;
-  min-height: 44px;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 1rem;
-  background: transparent;
-  color: color-mix(in srgb, var(--seams-colors-textSecondary), var(--seams-colors-textPrimary) 45%);
-  cursor: pointer;
+.seams-transaction-review > * {
+  grid-column: span 2;
+}
+.seams-transaction-review > p {
+  margin: 0;
+  padding-inline: 4px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.seams-transaction-review-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 16px;
+  background: var(--seams-colors-colorBackground);
+}
+.seams-transaction-review-text {
   display: grid;
-  place-items: center;
-  font-size: clamp(13px, 3.6vw, 15px);
+  gap: 6px;
+}
+.seams-transaction-review-text strong {
+  font-size: 16px;
   font-weight: 600;
-  text-align: center;
-  touch-action: manipulation;
-  transition: color 160ms ease;
-  white-space: normal;
-  -webkit-tap-highlight-color: transparent;
+}
+.seams-transaction-review-text > span {
+  color: var(--seams-colors-textSecondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.seams-transaction-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 44px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 13px;
+  background: var(--seams-colors-borderPrimary);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.seams-transaction-switch > span {
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-start: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+  transition: transform 150ms ease;
+}
+.seams-transaction-switch[aria-checked='true'] {
+  background: var(--seams-colors-primary);
+}
+.seams-transaction-switch[aria-checked='true'] > span {
+  transform: translateX(18px);
+}
+[dir='rtl'] .seams-transaction-switch[aria-checked='true'] > span {
+  transform: translateX(-18px);
+}
+.seams-transaction-switch:focus-visible {
+  outline: 2px solid var(--seams-colors-primary);
+  outline-offset: 3px;
+}
+.seams-transaction-switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-transaction-switch,
+  .seams-transaction-switch > span {
+    transition: none;
+  }
 }
 
-.seams-account-seg-btn.is-active {
+/* The preview draws a page with the review surface on top of it. */
+.seams-transaction-preview {
+  position: relative;
+  display: block;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--seams-colors-surface);
+  color: var(--seams-colors-textSecondary);
+}
+.seams-transaction-choice[aria-pressed='true'] .seams-transaction-preview {
   color: var(--seams-colors-textPrimary);
 }
+.seams-tp-page {
+  position: absolute;
+  inset: 14% 12%;
+  display: grid;
+  align-content: start;
+  gap: 8%;
+}
+.seams-tp-page i,
+.seams-tp-panel i {
+  display: block;
+  height: 6px;
+  border-radius: 3px;
+  background: currentColor;
+  opacity: 0.18;
+}
+.seams-tp-page i:nth-child(1) {
+  width: 38%;
+  height: 8px;
+  opacity: 0.28;
+}
+.seams-tp-page i:nth-child(3) {
+  width: 72%;
+}
+.seams-tp-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.1);
+}
+.seams-tp-panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 8px;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
+}
+.seams-tp-panel i:nth-child(1) {
+  width: 60%;
+  opacity: 0.32;
+}
+.seams-tp-panel b {
+  display: block;
+  align-self: flex-end;
+  width: 48%;
+  height: 10px;
+  margin-top: auto;
+  border-radius: 4px;
+  background: var(--seams-colors-primary);
+}
+[data-preview='modal'] .seams-tp-panel {
+  inset: 18% 26%;
+}
+[data-preview='drawer'] .seams-tp-panel {
+  inset-block: 0;
+  inset-inline: auto 0;
+  width: 40%;
+  padding-top: 14px;
+  border-block: 0;
+  border-inline-end: 0;
+  border-radius: 0;
+}
+
+@media (max-width: 600px) {
+  [data-presentation='page'] .seams-transaction-review > * {
+    grid-column: 1 / -1;
+  }
+  [data-presentation='page'] .seams-transaction-review-row {
+    padding: 16px;
+  }
+  [data-presentation='page'] .seams-transaction-choices {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+  }
+  [data-presentation='page'] .seams-transaction-choice {
+    flex-direction: row;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 14px 10px 10px;
+  }
+  [data-presentation='page'] .seams-transaction-preview {
+    flex-shrink: 0;
+    width: 104px;
+  }
+  [data-presentation='page'] .seams-transaction-choice-text {
+    flex: 1;
+    min-width: 0;
+    padding-inline: 0;
+  }
+  [data-presentation='page'] .seams-tp-panel {
+    gap: 4px;
+    padding: 6px;
+    border-radius: 5px;
+  }
+  [data-presentation='page'] .seams-tp-page i,
+  [data-presentation='page'] .seams-tp-panel i {
+    height: 4px;
+  }
+  [data-presentation='page'] .seams-tp-page i:nth-child(1) {
+    height: 5px;
+  }
+  [data-presentation='page'] .seams-tp-panel b {
+    height: 6px;
+    border-radius: 2px;
+  }
+}
 
-.seams-account-seg-btn:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--seams-colors-focus), transparent 60%);
-  outline: none;
+/* The account menu is about 300px wide: three small cards per row, labels
+   only, and smaller drawings. */
+.seams-transaction-page[data-presentation='menu'] {
+  gap: 16px;
+  padding-bottom: 4px;
+}
+[data-presentation='menu'] .seams-transaction-review + .seams-transaction-group {
+  padding-top: 16px;
+}
+[data-presentation='menu'] .seams-transaction-group legend {
+  font-size: 14px;
+}
+[data-presentation='menu'] .seams-transaction-group > p {
+  margin: 2px 0 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+[data-presentation='menu'] .seams-transaction-choices {
+  gap: 8px;
+}
+[data-presentation='menu'] .seams-transaction-choice {
+  gap: 8px;
+  padding: 5px 5px 8px;
+  border-radius: 12px;
+}
+[data-presentation='menu'] .seams-transaction-choice-text {
+  padding-inline: 3px;
+}
+[data-presentation='menu'] .seams-transaction-choice {
+  position: relative;
+}
+[data-presentation='menu'] .seams-transaction-choice strong {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+/* The dot sits on the drawing's corner, so a long label gets the full width. */
+[data-presentation='menu'] .seams-transaction-choice-indicator {
+  position: absolute;
+  inset-block-start: 10px;
+  inset-inline-end: 10px;
+  width: 14px;
+  height: 14px;
+  background: var(--seams-colors-colorBackground);
+}
+[data-presentation='menu'] .seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+  border-width: 4px;
+}
+[data-presentation='menu'] .seams-transaction-preview {
+  border-radius: 8px;
+}
+[data-presentation='menu'] .seams-tp-panel {
+  gap: 3px;
+  padding: 5px;
+  border-radius: 4px;
+}
+[data-presentation='menu'] .seams-tp-page i,
+[data-presentation='menu'] .seams-tp-panel i {
+  height: 3px;
+  border-radius: 2px;
+}
+[data-presentation='menu'] .seams-tp-page i:nth-child(1) {
+  height: 4px;
+}
+[data-presentation='menu'] .seams-tp-panel b {
+  height: 5px;
+  border-radius: 2px;
+}
+[data-presentation='menu'] [data-preview='drawer'] .seams-tp-panel {
+  padding-top: 7px;
+}
+[data-presentation='menu'] .seams-transaction-review > * {
+  grid-column: 1 / -1;
+}
+[data-presentation='menu'] .seams-transaction-review {
+  gap: 8px;
+}
+[data-presentation='menu'] .seams-transaction-review-row {
+  gap: 14px;
+  padding: 14px;
+  border-radius: 12px;
+}
+[data-presentation='menu'] .seams-transaction-review-text strong {
+  font-size: 14px;
+}
+[data-presentation='menu'] .seams-transaction-review-text > span,
+[data-presentation='menu'] .seams-transaction-review > p {
+  font-size: 12px;
+  line-height: 1.4;
 }