packages/chargebee/src/style.scss

   1 @use 'sass:map';
   2 @import '~@proton/styles/scss/lib';
   3 @import '~@proton/styles/scss/base/custom-properties';
   4 @import '~@proton/styles/scss/base/typo';
   5 @import '~@proton/styles/scss/utilities/spacing';
   6
   7 body {
   8         font-family:
   9                 Inter,
  10                 -apple-system,
  11                 BlinkMacSystemFont,
  12                 'Segoe UI',
  13                 Roboto,
  14                 Oxygen-Sans,
  15                 Ubuntu,
  16                 Cantarell,
  17                 'Helvetica Neue',
  18                 sans-serif;
  19         overflow: hidden;
  20         font-weight: normal;
  21 }
  22
  23 $card-number-base-width: 180;
  24 $card-expiry-base-width: 50;
  25 $card-cvc-base-width: 40;
  26
  27 .cb-input-element {
  28         position: relative;
  29
  30         $base-height: 16;
  31         $additional-height: 8;
  32
  33         block-size: rem($base-height + $additional-height);
  34
  35         iframe {
  36                 position: relative;
  37                 inset-block-start: rem(-1 + calc($additional-height / 2));
  38         }
  39
  40         .icon-error {
  41                 position: absolute;
  42                 inset-block-start: 50%;
  43                 inset-inline-end: rem(8);
  44                 transform: translateY(-50%);
  45                 color: var(--signal-danger);
  46         }
  47 }
  48
  49 .card-input--one-line {
  50         display: flex;
  51         min-inline-size: rem(($card-number-base-width + $card-expiry-base-width + $card-cvc-base-width) * 1.25);
  52         block-size: rem(34);
  53         border: 1px solid var(--field-norm);
  54         border-radius: var(--border-radius-md);
  55         align-items: center;
  56         padding-block: 0;
  57         background-color: var(--field-background-color);
  58
  59         &:focus-within,
  60         &.focus {
  61                 border-color: var(--focus-outline);
  62                 background-color: var(--field-focus-background-color);
  63                 color: var(--field-focus-text-color);
  64                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  65         }
  66 }
  67
  68 .card-input--one-line #card-number {
  69         flex: 1 0 rem($card-number-base-width);
  70         padding-inline: rem(12);
  71         margin-inline-end: rem(12);
  72         border-inline-end: 1px solid var(--border-norm);
  73 }
  74
  75 .card-input--one-line #card-expiry {
  76         flex: 0 0 rem($card-expiry-base-width);
  77         padding-inline-end: rem(12);
  78         margin-inline-end: rem(12);
  79         border-inline-end: 1px solid var(--border-norm);
  80 }
  81
  82 .card-input--one-line #card-cvc {
  83         flex: 0 0 rem($card-cvc-base-width);
  84         padding-inline-end: rem(4);
  85 }
  86
  87 .card-input--two-line {
  88         display: flex;
  89         flex-wrap: wrap;
  90         border: 1px solid var(--field-norm);
  91         border-radius: var(--border-radius-md);
  92 }
  93
  94 .card-input--two-line #card-number {
  95         flex: 1 1 100%;
  96         padding-block: rem(5);
  97         padding-inline: rem(12);
  98         border-start-start-radius: var(--border-radius-md);
  99         border-start-end-radius: var(--border-radius-md);
 100         background-color: var(--field-background-color);
 101
 102         &.focus {
 103                 border-color: var(--focus-outline);
 104                 background-color: var(--field-focus-background-color);
 105                 color: var(--field-focus-text-color);
 106                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 107         }
 108
 109         &.invalid {
 110                 border: 1px solid var(--field-norm);
 111                 margin: -1px;
 112                 z-index: map.get($z-indexes, 'up');
 113                 border-color: var(--signal-danger);
 114         }
 115 }
 116
 117 .card-input--two-line #card-expiry {
 118         flex: 1 0 rem($card-expiry-base-width);
 119         padding-block: rem(5);
 120         padding-inline: rem(12);
 121         border-block-start: 1px solid var(--field-norm);
 122         border-inline-end: 1px solid var(--field-norm);
 123         border-end-start-radius: var(--border-radius-md);
 124         background-color: var(--field-background-color);
 125
 126         &.focus {
 127                 border-color: var(--focus-outline);
 128                 background-color: var(--field-focus-background-color);
 129                 color: var(--field-focus-text-color);
 130                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 131         }
 132
 133         &.invalid {
 134                 border: 1px solid var(--field-norm);
 135                 margin-inline-start: -1px;
 136                 margin-block-end: -1px;
 137                 border-color: var(--signal-danger);
 138         }
 139 }
 140
 141 .card-input--two-line #card-cvc {
 142         // that's not a typo. In two line mode, we need to make the CVC field the same width as the expiry field
 143         flex: 1 0 rem($card-expiry-base-width);
 144         padding-block: rem(5);
 145         padding-inline: rem(12);
 146         border-block-start: 1px solid var(--field-norm);
 147         border-end-end-radius: var(--border-radius-md);
 148         background-color: var(--field-background-color);
 149
 150         &.focus {
 151                 border-color: var(--focus-outline);
 152                 background-color: var(--field-focus-background-color);
 153                 color: var(--field-focus-text-color);
 154                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 155         }
 156
 157         &.invalid {
 158                 border: 1px solid var(--field-norm);
 159                 margin-inline: -1px;
 160                 margin-block-end: -1px;
 161                 border-color: var(--signal-danger);
 162         }
 163 }
 164
 165 // ----------
 166
 167 input {
 168         font: inherit;
 169 }
 170
 171 .cb-input-label {
 172         margin-block-end: rem(4);
 173         font-weight: 600;
 174 }
 175
 176 $input-inner-size: 34;
 177 $input-border-size: 1;
 178
 179 .cb-assist {
 180         position: absolute;
 181         margin-block-start: 0.25rem;
 182         font-size: 0.75rem;
 183         color: var(--signal-danger);
 184         font-weight: 600;
 185 }
 186
 187 .cb-assist:empty::before {
 188         content: ' ';
 189         white-space: pre;
 190 }
 191
 192 .horizontal {
 193         display: flex;
 194         gap: rem(16);
 195 }
 196
 197 .placeholder,
 198 ::placeholder {
 199         color: var(--field-placeholder-color);
 200         font-style: normal;
 201         opacity: 1; // For Firefox -_-v
 202 }
 203
 204 :root,
 205 .ui-standard {
 206         --field-norm: #adaba8;
 207         --border-norm: #d1cfcd;
 208         --focus-outline: #6d4aff;
 209         --focus-ring: rgb(109 74 255 / 0.2);
 210         --text-hint: #8f8d8a;
 211         --signal-danger: #dc3251;
 212 }
 213
 214 .icon-16p {
 215         display: inline-block;
 216         vertical-align: middle;
 217         fill: currentcolor;
 218         inline-size: rem(16);
 219         block-size: rem(16);
 220 }
 221
 222 /* purgecss start ignore */
 223 .paypal-checkout-sandbox {
 224         display: none !important;
 225 }
 226
 227 /* purgecss end ignore */