@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/css/components/credit-card.css

@@ -0,0 +1,288 @@
+/* components/credit-card/credit-card.css */
+/* credit-card — a dark card that fills in as you type (front: chip, brand, number, holder, expiry; back: stripe and CVC),
+   above Melonmind fields (16 px radius, surface-container, 3 px focus ring). The engine rolls the characters in, glides
+   the frame and turns the card in 3D. */
+.mk-credit-card,
+mk-credit-card {
+  --mk-card-width: 22rem;
+  --mk-card-bg: linear-gradient(145deg, #2b2c30 0%, #121315 55%, #050506 100%);
+  --mk-card-text: #f2f3f5;
+  --mk-card-muted: rgb(242 243 245 / 0.55);
+  --mk-card-radius: 20px;
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-visual] {
+  width: min(100%, var(--mk-card-width));
+  aspect-ratio: 1.586;
+  container-type: inline-size;
+  perspective: 1200px;
+  cursor: pointer;
+  user-select: none;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-inner] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 7% 7.5%;
+  border-radius: var(--mk-card-radius);
+  background: var(--mk-card-bg);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.12),
+    inset 0 0 0 1px rgb(255 255 255 / 0.06),
+    0 24px 48px -20px rgb(0 0 0 / 0.6);
+  color: var(--mk-card-text);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+/* A soft sheen across the face. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 80% at 15% 0%, rgb(255 255 255 / 0.1), transparent 55%);
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] {
+  padding: 0;
+  transform: rotateY(180deg);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-chip] {
+  position: absolute;
+  top: 12%;
+  left: 7.5%;
+  width: 13%;
+  aspect-ratio: 1.3;
+  border-radius: 6px;
+  background:
+    linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 0.25) 33% 35%, transparent 36% 64%, rgb(0 0 0 / 0.25) 65% 67%, transparent 68%),
+    linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.25) 46% 54%, transparent 55%),
+    linear-gradient(135deg, #e9e1c4, #b9ad86);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-brand] {
+  position: absolute;
+  top: 11%;
+  right: 7.5%;
+  font-size: clamp(0.9rem, 4.6cqi, 1.35rem);
+  font-style: italic;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] [data-mk-card-brand] {
+  top: auto;
+  bottom: 11%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region] {
+  position: absolute;
+  display: grid;
+  gap: 0.15rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='number'] {
+  bottom: 13%;
+  left: 7.5%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='name'] {
+  bottom: 33%;
+  left: 7.5%;
+  max-width: 58%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='expiry'] {
+  right: 7.5%;
+  bottom: 33%;
+  text-align: right;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-caption] {
+  color: var(--mk-card-muted);
+  font-size: 0.5625rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) {
+  display: inline-flex;
+  overflow: hidden;
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  white-space: pre;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) > span {
+  display: inline-block;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] {
+  font-size: clamp(1rem, 5.4cqi, 1.45rem);
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] [data-mk-space] {
+  width: 0.6em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-name] {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-overflow: ellipsis;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-expiry] {
+  justify-content: flex-end;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-placeholder] {
+  color: var(--mk-card-muted);
+}
+
+/* The frame around the part being edited. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-frame] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  box-shadow:
+    inset 0 0 0 1.5px rgb(255 255 255 / 0.55),
+    0 0 18px rgb(255 255 255 / 0.12);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-stripe] {
+  position: absolute;
+  top: 14%;
+  inset-inline: 0;
+  height: 20%;
+  background: #050506;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-signature] {
+  position: absolute;
+  top: 44%;
+  left: 7.5%;
+  right: 7.5%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 18%;
+  padding: 0 0.75rem;
+  border-radius: 6px;
+  background: repeating-linear-gradient(135deg, #e9e9ec 0 6px, #dcdce0 6px 12px);
+  color: #121315;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] {
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 0.875rem;
+  font-style: italic;
+  font-weight: 600;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] [data-mk-placeholder] {
+  color: #9a9ca3;
+}
+
+/* Fields (Melonmind input: surface-container-high, 16 px radius, 3 px focus ring). */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-fields] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  width: min(100%, var(--mk-card-width));
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-label] {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-label='number'], [data-mk-card-label='name']) {
+  grid-column: 1 / -1;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 1rem;
+  border: 0;
+  border-radius: 16px;
+  outline: none;
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  transition:
+    box-shadow 0.5s,
+    background-color 0.5s;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-field='number'], [data-mk-card-field='expiry'], [data-mk-card-field='cvc']) {
+  font-family: var(--mk-font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]:hover {
+  background: var(--mk-surface-5);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]:focus {
+  background: var(--mk-surface-2);
+  box-shadow:
+    0 0 0 3px var(--mk-outline-soft),
+    0 0.5px 2.5px rgb(0 0 0 / 0.3);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field][aria-invalid='true'] {
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error] {
+  min-height: 0;
+  color: var(--mk-error);
+  font-size: 0.75rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error]:empty {
+  display: none;
+}
+
+mk-credit-card {
+  display: grid;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+    transition: none;
+  }
+}