UNPKG

zmp-ui

Version:

Zalo Mini App framework

66 lines (59 loc) • 3.41 kB
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
//===== LIGHT ====== @light-input-border-color: var(--zaui-light-input-border-color, @ng40); @light-input-hover-border-color: var(--zaui-light-input-hover-border-color, @b60); @light-input-placeholder-color: var(--zaui-light-input-placeholder-color, @ng40); @light-input-text-color: var(--zaui-light-input-text-color, @ng100); @light-input-background-color: var(--zaui-light-input-background-color, @wht-a100); @light-input-helper-text-color: var(--zaui-light-input-helper-text-color, @ng60); @light-input-helper-icon-background-color: var(--zaui-light-input-helper-icon-background-color, @ng60); @light-input-error-text-color: var(--zaui-light-input-error-text-color, @r60); @light-input-error-icon-background-color: var(--zaui-light-input-error-icon-background-color, @r60); @light-input-clear-icon-color: var(--zaui-light-input-clear-icon-color, @ng100); @light-input-status-success-icon-focus-visible-color: var(--zaui-light-input-status-success-icon-focus-visible-color, @gr60); @light-input-status-success-icon-color: var(--zaui-light-input-status-success-icon-color, @gr60); @light-input-status-error: var(--zaui-light-input-status-error, @r60); @light-input-disabled-color: var(--zaui-light-input-disabled-color, @ng60); @light-input-disabled-background-color: var(--zaui-light-input-disabled-background-color, @blk-a10); //========= ======= //===== DARK ====== @dark-input-border-color: var(--zaui-dark-input-border-color, @ng60); @dark-input-hover-border-color: var(--zaui-dark-input-hover-border-color, @b60); @dark-input-placeholder-color: var(--zaui-dark-input-placeholder-color, @ng70); @dark-input-text-color: var(--zaui-dark-input-text-color, @ng10); @dark-input-background-color: var(--zaui-dark-input-background-color, @ng100); @dark-input-helper-text-color: var(--zaui-dark-input-helper-text-color, @ng50); @dark-input-helper-icon-background-color: var(--zaui-dark-input-helper-icon-background-color, @ng50); @dark-input-error-text-color: var(--zaui-dark-input-error-text-color, @r60); @dark-input-error-icon-background-color: var(--zaui-dark-input-error-icon-background-color, @r60); @dark-input-clear-icon-color: var(--zaui-dark-input-clear-icon-color, @ng10); @dark-input-status-success-icon-focus-visible-color: var(--zaui-dark-input-status-success-icon-focus-visible-color, @ng10); @dark-input-status-success-icon-color: var(--zaui-dark-input-status-success-icon-color, @gr60); @dark-input-status-error: var(--zaui-dark-input-status-error, @r60); @dark-input-disabled-color: var(--zaui-dark-input-disabled-color, @ng50); @dark-input-disabled-background-color: var(--zaui-dark-input-disabled-background-color, @wht-a10); //========= ======= @input-prefix-cls: ~"@{zaui-prefix}-input"; @input-border-radius: 8px; @input-border-width: 1px; @input-height-small: 32px; @input-height-medium: 48px; @input-height-large: 56px; @input-padding: 12px; @input-margin: 4px; @input-font-weight: 400; @input-font-size: 16px; @input-line-height: 22px; @input-icon-space: 12px; @input-label-font-size: 14px; @input-label-line-height: 18px; @input-helper-text-font-size: 13px; @input-helper-text-line-height: @input-label-line-height; @input-helper-icon-padding-right: 4px; @input-textarea-min-height: 120px; @input-otp-height: 56px; @input-otp-width: 52px; @input-otp-padding: 11px 16px; @input-otp-font-size: 27px; @input-otp-line-height: 34px; @input-otp-font-weight: 500; @input-otp-gap: 8px;