.wc-block-card-elements { display: flex; width: 100%; .wc-block-components-validation-error { position: static; } } .wc-block-gateway-container { position: relative; margin-bottom: em($gap-large); white-space: nowrap; &.wc-card-number-element { flex-basis: 15em; flex-grow: 1; // Currently, min() CSS function calls need to be wrapped with unquote. min-width: unquote("min(15em, 60%)"); } &.wc-card-expiry-element { flex-basis: 7em; margin-left: $gap-small; min-width: unquote("min(7em, calc(24% - #{$gap-small}))"); } &.wc-card-cvc-element { flex-basis: 7em; margin-left: $gap-small; // Notice the min width ems value is smaller than flex-basis. That's because // by default we want it to have the same width as `expiry-element`, but // if available space is scarce, `cvc-element` should get smaller faster. min-width: unquote("min( 5em, calc(16% - #{$gap-small}))"); } .wc-block-gateway-input { @include font-size(regular); line-height: 1.375; // =22px when font-size is 16px. background-color: #fff; padding: em($gap-small) 0 em($gap-small) $gap; border-radius: 4px; border: 1px solid $input-border-gray; width: 100%; font-family: inherit; margin: 0; box-sizing: border-box; height: 3em; color: $input-text-active; cursor: text; &:focus { background-color: #fff; } } &:focus { background-color: #fff; } label { @include reset-typography(); @include font-size(regular); line-height: 1.375; // =22px when font-size is 16px. position: absolute; transform: translateY(0.75em); left: 0; top: 0; transform-origin: top left; color: $gray-50; transition: transform 200ms ease; margin: 0 0 0 #{$gap + 1px}; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - #{$gap + $gap-smaller}); cursor: text; @media screen and (prefers-reduced-motion: reduce) { transition: none; } } &.wc-inline-card-element { label { // $gap is the padding of the input box, 1.5em the width of the card // icon and $gap-smaller the space between the card // icon and the label. margin-left: calc(#{$gap + $gap-smaller} + 1.5em); } .wc-block-gateway-input.focused.empty, .wc-block-gateway-input:not(.empty) { & + label { margin-left: $gap; transform: translateY(#{$gap-smallest}) scale(0.75); } } & + .wc-block-components-validation-error { position: static; margin-top: -$gap-large; } } .wc-block-gateway-input.focused.empty, .wc-block-gateway-input:not(.empty) { padding: em($gap-large) 0 em($gap-smallest) $gap; & + label { transform: translateY(#{$gap-smallest}) scale(0.75); } } .wc-block-gateway-input.has-error { border-color: $error-red; &:focus { outline-color: $error-red; } } .wc-block-gateway-input.has-error + label { color: $error-red; } } // These elements have available space below, so we can display errors with a // larger line height. .is-medium, .is-large { .wc-card-expiry-element, .wc-card-cvc-element { .wc-block-components-validation-error > p { line-height: 16px; padding-top: 4px; } } } .is-mobile, .is-small { .wc-card-expiry-element, .wc-card-cvc-element { .wc-block-components-validation-error > p { min-height: 28px; } } } .wc-blocks-credit-card-images { padding-top: $gap-small; display: flex; .wc-blocks-credit-cart-icon { height: 18px; width: auto; margin-right: $gap-small; &:last-child { margin-right: 0; } } } .wc-block-components-checkout-payment-methods * { pointer-events: all; // Overrides parent disabled component in editor context } .is-mobile, .is-small { .wc-block-card-elements { flex-wrap: wrap; } .wc-block-gateway-container.wc-card-number-element { flex-basis: 100%; } .wc-block-gateway-container.wc-card-expiry-element { flex-basis: calc(50% - #{$gap-smaller}); margin-left: 0; margin-right: $gap-smaller; } .wc-block-gateway-container.wc-card-cvc-element { flex-basis: calc(50% - #{$gap-smaller}); margin-left: $gap-smaller; } }