authgear-server/authui/src/authflowv2/components/otp-input.css at b27ad728a9980ebc499661fcc873e70c86bf44d4 · tung2744/authgear-server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@layer components {
  :root {
    --otp-input__spacing: 21px;
    --otp-input__bg-color: transparent;

    --otp-input__digit-color: var(--color-neutral-700);
    --otp-input__digit-ring-color: var(--color-neutral-200);
    --otp-input__digit-ring-color--focus: var(--color-primary-theme-primary);
    --otp-input__digit-ring-color--error: var(--color-error);
    --otp-input__digit-ring-width: 1.5px;
    --otp-input__digit-ring-width--focus: 1.5px;
    --otp-input__digit-ring-width--error: 1.5px;
    --otp-input__digit-border-radius: var(--border-radius-rounded-large);
    --otp-input__digit-width: 2.5rem;
    --otp-input__digit-height: 2.75rem;

    /* Not actually using css-masks features, ignoring stylelint false positive */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    --otp-input__digit-mask-color: var(--color-neutral-700);
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    --otp-input__digit-mask-size: 0.625rem;

    --otp-input__dev-1511-color-transparent: transparent;

    --otp-input-error-message__margin-top: 0.5rem;
    --otp-input-error-message__text-color: var(--color-error);
    --otp-input-error-message__font-family: var(
      --typography-body-medium__font-family
    );
    --otp-input-error-message__font-size: var(
      --typography-body-medium__font-size
    );
    --otp-input-error-message__line-height: var(
      --typography-body-medium__line-height
    );
    --otp-input-error-message__letter-spacing: var(
      --typography-body-medium__letter-spacing
    );
    --otp-input-error-message__font-weight: var(
      --typography-body-medium__font-weight
    );
  }

  :root.dark {
    --otp-input__digit-ring-color: var(--color-neutral-500);
    --otp-input__digit-color: var(--color-neutral-100);
    /* Not actually using css-masks features, ignoring stylelint false positive */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    --otp-input__digit-mask-color: var(--color-neutral-100);
  }

  .otp-input {
    @apply relative;
    @apply w-full;

    input {
      @apply w-full;

      &.with-js {
        height: var(--otp-input__digit-height);
        @apply outline-none;
        @apply selection:bg-white/0;
        @apply caret-white/0;
        /* iOS treats element with `opacity: 0` as not interactable, set text to transparent instead */
        @apply text-transparent;
        /* https://linear.app/authgear/issue/DEV-1511 */
        /* When iOS autofills a code from SMS, the filled text will use -webkit-text-fill-color */
        /* instead of color as text color, so we need to set both property to transparent. */
        /* Simple transparent does not work on safari so we have to use var() here https://stackoverflow.com/questions/31289537/webkit-text-fill-color-transparent-not-working-in-safari-7-1-7  */
        -webkit-text-fill-color: var(--otp-input__dev-1511-color-transparent);
        background-color: var(--otp-input__bg-color);
      }
    }
  }

  .otp-input__digits-container {
    @apply absolute;
    @apply inset-0;
    @apply flex justify-center;
    @apply items-stretch;
    @apply gap-x-[var(--otp-input\_\_spacing)];
    @apply pointer-events-none;
  }

  .otp-input__digit {
    @apply relative;
    @apply flex;
    @apply items-center;
    @apply justify-center;

    width: var(--otp-input__digit-width);
    height: var(--otp-input__digit-height);
    border-radius: var(--otp-input__digit-border-radius);
    color: var(--otp-input__digit-color);

    @apply ring-inset
      ring-[length:var(--otp-input\_\_digit-ring-width)]
      ring-[color:var(--otp-input\_\_digit-ring-color)];

    &.otp-input__digit--masked {
      &::before {
        content: "";
        @apply absolute;
        @apply left-1/2;
        @apply transform;
        @apply -translate-x-1/2;
        @apply rounded-full;

        width: var(--otp-input__digit-mask-size);
        height: var(--otp-input__digit-mask-size);
        background-color: var(--otp-input__digit-mask-color);
      }
    }

    &.otp-input__digit--focus {
      @apply ring-inset
        ring-[length:var(--otp-input\_\_digit-ring-width--focus)]
        ring-[color:var(--otp-input\_\_digit-ring-color--focus)];
    }
  }

  .otp-input__error-message {
    margin-top: var(--otp-input-error-message__margin-top);
    color: var(--otp-input-error-message__text-color);
    font-family: var(--otp-input-error-message__font-family);
    font-size: var(--otp-input-error-message__font-size);
    line-height: var(--otp-input-error-message__line-height);
    letter-spacing: var(--otp-input-error-message__letter-spacing);
    font-weight: var(--otp-input-error-message__font-weight);
  }

  .otp-input {
    &.otp-input--error {
      .otp-input__digit {
        @apply ring-inset
          ring-[length:var(--otp-input\_\_digit-ring-width--error)]
          ring-[color:var(--otp-input\_\_digit-ring-color--error)];
      }
    }
  }
}