@verdocs/web-sdk 6.12.1 → 6.13.1

package/dist/collection/components/embeds/verdocs-send/verdocs-send.css

@@ -1,91 +1,248 @@
 verdocs-send {
-  padding: 10px;
+  --send-ink: var(--verdocs-body-color, #111827);
+  --send-ink-2: #374151;
+  --send-muted: #6b7280;
+  --send-faint: #9ca3af;
+  --send-rule: #e5e7eb;
+  --send-control-border: #d1d5db;
+  --send-accent: var(--verdocs-link-color, #4c56cb);
+  --send-accent-tint: #f4f5fc;
+  --send-accent-tint-2: #e6e7f8;
+  --send-warning-bg: #fffbeb;
+  --send-warning-border: #fde68a;
+  --send-warning-icon: #d97706;
+  --send-warning-text: #78350f;
+  --send-radius: var(--verdocs-dialog-radius, 8px);
+  --send-min-height: 480px;
+  --send-max-width: 480px;
+  display: none;
   position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: var(--verdocs-send-max-width, var(--send-max-width));
+  box-sizing: border-box;
   background: #ffffff;
-  flex-direction: column;
+  color: var(--send-ink);
+  font-size: 14px;
+  border-radius: var(--send-radius);
+  border: 1px solid var(--send-rule);
   font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
 }
+verdocs-send * {
+  box-sizing: border-box;
+}
 verdocs-send.sendable {
-  display: flex;
+  display: block;
 }
-verdocs-send .recipients {
+verdocs-send .track {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--send-min-height);
+  transition: transform 220ms ease-out;
+}
+verdocs-send.detail-open .track {
+  transform: translateX(-100%);
+}
+@media (prefers-reduced-motion: reduce) {
+  verdocs-send .track {
+    transition: none;
+  }
+}
+verdocs-send .pane {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+verdocs-send .main-pane {
+  flex: 1;
 }
-verdocs-send .left-line {
-  top: 32px;
-  left: 20px;
-  z-index: 1;
-  width: 12px;
-  bottom: 30px;
+verdocs-send .detail-pane {
   position: absolute;
-  background: #ffffff;
-  border-left: 3px dotted #9b9b9b;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
 }
-verdocs-send .level {
+verdocs-send .detail {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  column-gap: 10px;
-  margin-left: 50px;
+  flex-direction: column;
+}
+verdocs-send .detail-body-wrap {
   position: relative;
-  flex-direction: row;
-  padding: 8px 0 4px 0;
-  border-bottom: 1px solid rgba(151, 151, 151, 0.2666666667);
-}
-verdocs-send .level .level-icon {
-  top: 14px;
-  z-index: 2;
-  left: -40px;
-  width: 24px;
-  height: 24px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+verdocs-send .detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+verdocs-send .scroll-fade {
   position: absolute;
-  background: #ffffff;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 36px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
+}
+verdocs-send .scrollable:not(.at-end) > .scroll-fade {
+  opacity: 1;
+}
+verdocs-send .recipient-detail verdocs-contact-picker {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+verdocs-send .section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--send-ink-2);
+  margin: 0 0 6px 0;
+}
+verdocs-send .delivery-title {
+  margin-top: 16px;
 }
-verdocs-send .level .level-icon svg {
-  fill: rgba(0, 0, 0, 0.537254902);
+verdocs-send .step {
+  font-size: 11px;
+  color: var(--send-muted);
+  padding: 10px 0 4px 0;
 }
-verdocs-send .level .recipient {
-  height: 30px;
+verdocs-send .recipient,
+verdocs-send .kv {
+  all: unset;
   display: flex;
-  flex: 0 0 30px;
-  color: #000000;
+  width: 100%;
   cursor: pointer;
-  font-size: 14px;
   align-items: center;
-  border-radius: 30px;
-  flex-direction: row;
-  background: #dddddd;
-  white-space: nowrap;
-  border: 2px solid #dddddd;
-  padding: 2px 10px 2px 14px;
+  column-gap: 10px;
+  border-top: 1px solid var(--send-rule);
+  color: var(--send-ink);
+  font-family: inherit;
 }
-verdocs-send .level .recipient .icon {
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  margin: 0 0 0 10px;
+verdocs-send .recipient:focus-visible,
+verdocs-send .kv:focus-visible {
+  outline: 2px solid var(--send-accent);
+  outline-offset: -2px;
+  border-radius: 4px;
 }
-verdocs-send .level .recipient .icon svg {
-  width: 22px;
-  height: 22px;
-  fill: #333333;
-  outline: none;
+verdocs-send .recipient .chevron,
+verdocs-send .kv .chevron {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  color: var(--send-faint);
+}
+verdocs-send .recipient .chevron svg,
+verdocs-send .kv .chevron svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+verdocs-send .recipient {
+  padding: 8px 6px 8px 0;
+}
+verdocs-send .recipient:last-child {
+  border-bottom: 1px solid var(--send-rule);
 }
-verdocs-send .level .complete {
+verdocs-send .recipient .who {
   flex: 1;
-  height: 30px;
+  min-width: 0;
   display: flex;
-  color: #000000;
-  font-size: 14px;
+  flex-direction: column;
+}
+verdocs-send .recipient .role-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+verdocs-send .recipient .who-detail {
+  font-size: 12px;
+  color: var(--send-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+verdocs-send .recipient .who-detail.configure {
+  color: var(--send-accent);
+  font-weight: 500;
+}
+verdocs-send .recipient .options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 3px;
+}
+verdocs-send .recipient .pill {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  display: inline-flex;
   align-items: center;
-  flex-direction: row;
-  padding: 3px 10px 3px 2px;
+  background: var(--send-accent-tint);
+  color: var(--send-ink-2);
+}
+verdocs-send .role-dot {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+verdocs-send .kv {
+  height: 40px;
+  padding: 0 6px 0 0;
+  font-size: 13px;
+}
+verdocs-send .kv:last-child {
+  border-bottom: 1px solid var(--send-rule);
+}
+verdocs-send .kv:disabled {
+  cursor: default;
+  color: var(--send-muted);
+}
+verdocs-send .kv .key {
+  flex: 0 0 84px;
+  color: var(--send-muted);
+}
+verdocs-send .kv .value {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+verdocs-send .kv .value small {
+  font-size: inherit;
+  font-weight: 400;
+  color: var(--send-muted);
+}
+verdocs-send .kv .value.off {
+  color: var(--send-warning-icon);
+}
+verdocs-send .main-spacer,
+verdocs-send .detail-spacer {
+  flex: 1;
 }
 verdocs-send .buttons {
   display: flex;
-  margin-top: 10px;
-  column-gap: 15px;
+  margin-top: 14px;
+  column-gap: 10px;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
+  justify-content: flex-end;
 }
 verdocs-send .buttons .error-message {
   width: 100%;
@@ -93,11 +250,293 @@ verdocs-send .buttons .error-message {
   font-size: 13px;
   margin-bottom: 10px;
 }
-verdocs-send verdocs-contact-picker {
-  left: 0;
-  top: 41px;
-  z-index: 10;
+verdocs-send .detail-header {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  margin: -2px 0 14px 0;
+}
+verdocs-send .detail-header .back {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--send-accent);
+  font-family: inherit;
+  flex: 0 0 52px;
+}
+verdocs-send .detail-header .back .icon,
+verdocs-send .detail-header .back .icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+verdocs-send .detail-header .back:focus-visible {
+  outline: 2px solid var(--send-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+verdocs-send .detail-header .detail-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+verdocs-send .detail-header .detail-header-spacer {
+  flex: 0 0 52px;
+}
+verdocs-send .detail-footer {
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--send-rule);
+}
+verdocs-send .detail-footer verdocs-button,
+verdocs-send .detail-footer verdocs-button button {
+  width: 100%;
+}
+verdocs-send .hint {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--send-muted);
+  margin: 10px 0 0 0;
+}
+verdocs-send .option-list {
+  display: flex;
+  flex-direction: column;
+}
+verdocs-send .option {
+  all: unset;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  column-gap: 10px;
+  padding: 10px 0;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--send-ink);
+  border-top: 1px solid var(--send-rule);
+}
+verdocs-send .option:first-child {
+  border-top: 0;
+}
+verdocs-send .option:focus-visible {
+  outline: 2px solid var(--send-accent);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+verdocs-send .option .radio {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--send-control-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-send .option.selected .radio {
+  border-color: var(--send-accent);
+}
+verdocs-send .option.selected .radio::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--send-accent);
+}
+verdocs-send .option .swatch {
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  color: #ffffff;
+  overflow: hidden;
+}
+verdocs-send .option .swatch.logo {
+  background: #ffffff;
+  border: 1px solid var(--send-rule);
+}
+verdocs-send .option .swatch img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+verdocs-send .option .option-label {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+verdocs-send .option .option-label small {
+  font-size: 11px;
+  color: var(--send-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+verdocs-send .option-divider {
+  height: 0;
+  margin: 2px 0;
+  border-top: 1px solid var(--send-control-border);
+}
+verdocs-send .option-divider + .option {
+  border-top: 0;
+}
+verdocs-send .hint a {
+  color: var(--send-accent);
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: 1px solid var(--send-accent-tint-2);
+}
+verdocs-send .hint a .icon,
+verdocs-send .hint a .icon svg {
+  width: 11px;
+  height: 11px;
+  display: inline-block;
+  vertical-align: -1px;
+  margin-left: 2px;
+}
+verdocs-send .expires-field {
+  position: relative;
+}
+verdocs-send .expires-field input {
+  width: 100%;
+  height: 36px;
+  padding: 0 52px 0 10px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--send-ink);
+  background: #ffffff;
+  border: 1px solid var(--send-control-border);
+  border-radius: 6px;
+  outline: none;
+}
+verdocs-send .expires-field input:focus {
+  border-color: var(--send-accent);
+  box-shadow: 0 0 0 2px var(--send-accent-tint-2);
+}
+verdocs-send .expires-field input::placeholder {
+  color: var(--send-faint);
+}
+verdocs-send .expires-field .suffix {
   position: absolute;
-  border: 1px solid #dddddd;
-  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
+  right: 10px;
+  top: 0;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--send-muted);
+  pointer-events: none;
+}
+verdocs-send .sender-field {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  margin: 0 0 10px 0;
+}
+verdocs-send .sender-field label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--send-ink-2);
+}
+verdocs-send .sender-field input {
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--send-ink);
+  background: #ffffff;
+  border: 1px solid var(--send-control-border);
+  border-radius: 6px;
+  outline: none;
+}
+verdocs-send .sender-field input:focus {
+  border-color: var(--send-accent);
+  box-shadow: 0 0 0 2px var(--send-accent-tint-2);
+}
+verdocs-send .sender-field .field-error {
+  font-size: 12px;
+  color: #cc0000;
+}
+verdocs-send .notice {
+  display: flex;
+  column-gap: 10px;
+  margin-top: 4px;
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 6px;
+  color: var(--send-ink-2);
+  background: var(--send-accent-tint);
+  border: 1px solid var(--send-accent-tint-2);
+}
+verdocs-send .notice > .icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  color: var(--send-accent);
+}
+verdocs-send .notice > .icon svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+verdocs-send .warning {
+  display: flex;
+  column-gap: 10px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 6px;
+  color: var(--send-warning-text);
+  background: var(--send-warning-bg);
+  border: 1px solid var(--send-warning-border);
+}
+verdocs-send .warning > .icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  color: var(--send-warning-icon);
+}
+verdocs-send .warning > .icon svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+verdocs-send .warning a {
+  color: var(--send-accent);
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: 1px solid var(--send-accent-tint-2);
+}
+verdocs-send .warning a .icon,
+verdocs-send .warning a .icon svg {
+  width: 11px;
+  height: 11px;
+  display: inline-block;
+  vertical-align: -1px;
+  margin-left: 2px;
+}
+verdocs-send verdocs-checkbox {
+  display: block;
+  padding: 4px 0;
+  font-size: 13px;
 }