packages/components/containers/payments/CreditCard.scss

   1 @use "sass:map";
   2 @import '~@proton/styles/scss/lib';
   3
   4 .card-information {
   5         .exp,
   6         .cvv {
   7                 flex: initial;
   8         }
   9
  10         .exp {
  11                 .input-element {
  12                         // ems should scale accordingly on mobile.
  13                         max-inline-size: 5.5em;
  14                 }
  15         }
  16
  17         .cvv {
  18                 .input-element {
  19                         // ems should scale accordingly on mobile.
  20                         max-inline-size: 3em;
  21                 }
  22         }
  23
  24         .input-adornment {
  25                 margin-inline: 0;
  26
  27                 .input-element {
  28                         border-radius: 0;
  29                 }
  30         }
  31 }
  32
  33 // for larger version
  34 .field-two--bigger {
  35         .exp:not(.exp--small),
  36         .cvv:not(.cvv--small) {
  37                 .input-element {
  38                         padding-block: rem(6);
  39                 }
  40         }
  41 }
  42
  43 .country-select {
  44         .input-adornment {
  45                 color: var(--text-norm);
  46                 margin-inline: 0;
  47
  48                 .input-element {
  49                         border-radius: 0;
  50                         padding-inline-start: rem(12) !important;
  51                 }
  52
  53                 // we want the country dropdown to take exactly half of the width
  54                 &:first-child {
  55                         flex: 0 0 50%;
  56                 }
  57
  58                 &:last-child {
  59                         border: none !important;
  60                 }
  61         }
  62 }
  63
  64 .error-container {
  65         color: var(--signal-danger);
  66         min-block-size: rem(20);
  67 }
  68
  69 .card-number--small,
  70 .exp--small,
  71 .cvv--small {
  72         &.error {
  73                 z-index: map.get($z-indexes, 'up');
  74         }
  75
  76         &:focus-within {
  77                 // we want the focus frame to be displayed over error frame
  78                 z-index: map.get($z-indexes, 'up') + 1;
  79         }
  80 }
  81
  82 .card-number--small {
  83         &#{&} {
  84                 border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  85                 margin-block-end: -1px;
  86         }
  87 }
  88
  89 .exp--small {
  90         &#{&} {
  91                 border-radius: 0 0 0 var(--border-radius-md);
  92         }
  93 }
  94
  95 .cvv--small {
  96         &#{&} {
  97                 border-radius: 0 0 var(--border-radius-md) 0;
  98                 margin-inline-start: -1px;
  99         }
 100 }