@vchasno/ui-kit 0.3.20 → 0.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Datepicker/index.cjs.js +1 -1
  3. package/dist/Datepicker/index.js +1 -1
  4. package/dist/Datepicker/types/components/Button/Button.d.ts +1 -1
  5. package/dist/Menu/types/components/Button/Button.d.ts +1 -1
  6. package/dist/ProjectsPopover/types/components/Button/Button.d.ts +1 -1
  7. package/dist/Select/types/components/Button/Button.d.ts +1 -1
  8. package/dist/SelectCreatable/types/components/Button/Button.d.ts +1 -1
  9. package/dist/Snackbar/index.cjs.js +1 -1
  10. package/dist/Snackbar/index.js +1 -1
  11. package/dist/Snackbar/types/components/Button/Button.d.ts +1 -1
  12. package/dist/css/Alert.global.css +79 -0
  13. package/dist/css/BubbleBox.global.css +47 -0
  14. package/dist/css/Button.global.css +189 -0
  15. package/dist/css/Checkbox.global.css +74 -0
  16. package/dist/css/DatePicker.global.css +625 -0
  17. package/dist/css/FollowUs.global.css +25 -0
  18. package/dist/css/Input.global.css +89 -0
  19. package/dist/css/InputMeta.global.css +25 -0
  20. package/dist/css/LabelText.global.css +75 -0
  21. package/dist/css/MaskInput.global.css +16 -0
  22. package/dist/css/Menu.global.css +117 -0
  23. package/dist/css/MenuButton.global.css +18 -0
  24. package/dist/css/MenuItem.global.css +30 -0
  25. package/dist/css/MobileAppLinks.global.css +22 -0
  26. package/dist/css/Pagination.global.css +51 -0
  27. package/dist/css/Paragraph.global.css +9 -0
  28. package/dist/css/ProjectsPopover.global.css +111 -0
  29. package/dist/css/Select.global.css +190 -0
  30. package/dist/css/Snackbar.global.css +31 -0
  31. package/dist/css/Spinner.global.css +47 -0
  32. package/dist/css/SplashLogo.global.css +29 -0
  33. package/dist/css/SvgBorder.global.css +32 -0
  34. package/dist/css/Switch.global.css +82 -0
  35. package/dist/css/Tabs.global.css +122 -0
  36. package/dist/css/Text.global.css +73 -0
  37. package/dist/css/TextAreaInput.global.css +41 -0
  38. package/dist/css/TextInput.global.css +22 -0
  39. package/dist/css/Title.global.css +44 -0
  40. package/dist/css/_theme.css +2 -0
  41. package/dist/index.d.ts +1 -1
  42. package/dist/index.js +1 -1
  43. package/dist/types/components/Button/Button.d.ts +1 -1
  44. package/package.json +1 -1
package/dist/css/Button.global.css ADDED
@@ -0,0 +1,189 @@
1
+ .vchasno-ui-button {
2
+ display: inline-flex;
3
+ min-height: 40px;
4
+ align-items: center;
5
+ justify-content: center;
6
+ border: 0;
7
+ border-radius: 8px;
8
+ background-color: var(--vchasno-ui-btn-default-bg);
9
+ color: var(--vchasno-ui-btn-default-color);
10
+ font-size: var(--vchasno-ui-btn-font-size);
11
+ font-weight: 700;
12
+ gap: 5px;
13
+ transition:
14
+ background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
15
+ color var(--vchasno-ui-transition-duration-sec, 0.3s);
16
+ user-select: none;
17
+ }
18
+
19
+ .vchasno-ui-button:disabled {
20
+ cursor: not-allowed;
21
+ opacity: 0.8;
22
+ }
23
+
24
+ .vchasno-ui-button:not(:disabled):hover {
25
+ background-color: var(--vchasno-ui-btn-default-hover-bg);
26
+ color: var(--vchasno-ui-btn-default-hover-color);
27
+ cursor: pointer;
28
+ }
29
+
30
+ .vchasno-ui-button.--sm {
31
+ min-width: 40px;
32
+ padding: 0 15px;
33
+ }
34
+
35
+ .vchasno-ui-button.--md {
36
+ min-width: 145px;
37
+ padding: 0 20px;
38
+ }
39
+
40
+ .vchasno-ui-button.--lg {
41
+ min-width: 200px;
42
+ min-height: 50px;
43
+ padding: 0 20px;
44
+ }
45
+
46
+ .vchasno-ui-button.--wide {
47
+ width: 100%;
48
+ }
49
+
50
+ .vchasno-ui-button.--primary {
51
+ border: 1px solid transparent;
52
+ background-color: var(--vchasno-ui-btn-primary-bg);
53
+ color: var(--vchasno-ui-btn-primary-color);
54
+ }
55
+
56
+ .vchasno-ui-button.--primary.--outline {
57
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
58
+ background-color: transparent;
59
+ box-shadow: none;
60
+ color: var(--vchasno-ui-btn-primary-bg);
61
+ }
62
+
63
+ .vchasno-ui-button.--secondary {
64
+ background-color: var(--vchasno-ui-btn-secondary-bg);
65
+ color: var(--vchasno-ui-btn-secondary-color);
66
+ }
67
+
68
+ .vchasno-ui-button:disabled.--primary,
69
+ .vchasno-ui-button:disabled.--secondary {
70
+ border-color: #b6cadb;
71
+ background-color: #b6cadb;
72
+ color: var(--vchasno-ui-btn-primary-color);
73
+ }
74
+
75
+ .vchasno-ui-button.--primary:not(:disabled):hover {
76
+ background-color: var(--vchasno-ui-btn-primary-hover-bg);
77
+ color: var(--vchasno-ui-btn-primary-color);
78
+ }
79
+
80
+ .vchasno-ui-button.--primary.--outline:not(:disabled):hover {
81
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
82
+ background-color: var(--vchasno-ui-btn-default-hover-bg);
83
+ color: var(--vchasno-ui-btn-primary-bg);
84
+ }
85
+
86
+ .vchasno-ui-button.--secondary.--outline {
87
+ border: 1px solid var(--vchasno-ui-btn-secondary-bg);
88
+ background-color: transparent;
89
+ box-shadow: none;
90
+ color: var(--vchasno-ui-btn-secondary-bg);
91
+ }
92
+
93
+ .vchasno-ui-button.--secondary:not(:disabled):hover {
94
+ background-color: var(--vchasno-ui-btn-secondary-hover-bg);
95
+ color: var(--vchasno-ui-btn-secondary-color);
96
+ }
97
+
98
+ .vchasno-ui-button.--secondary.--outline:not(:disabled):hover {
99
+ border: 1px solid var(--vchasno-ui-btn-secondary-bg);
100
+ background-color: rgb(0 0 0 / 10%);
101
+ color: var(--vchasno-ui-btn-secondary-bg);
102
+ }
103
+
104
+ .vchasno-ui-button.--pink {
105
+ background-color: var(--vchasno-ui-btn-pink-bg);
106
+ color: var(--vchasno-ui-btn-primary-color);
107
+ }
108
+
109
+ .vchasno-ui-button.--pink.--outline {
110
+ border: 1px solid var(--vchasno-ui-btn-pink-bg);
111
+ background-color: transparent;
112
+ color: var(--vchasno-ui-btn-pink-bg);
113
+ }
114
+
115
+ .vchasno-ui-button.--pink:not(:disabled):hover {
116
+ background-color: var(--vchasno-ui-btn-pink-hover-bg);
117
+ color: var(--vchasno-ui-btn-primary-color);
118
+ }
119
+
120
+ .vchasno-ui-button.--pink.--outline:not(:disabled):hover {
121
+ border: 1px solid var(--vchasno-ui-btn-pink-bg);
122
+ background-color: transparent;
123
+ color: var(--vchasno-ui-btn-pink-bg);
124
+ }
125
+
126
+ .vchasno-ui-button.--danger {
127
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
128
+ background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));
129
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
130
+ }
131
+
132
+ .vchasno-ui-button.--danger.--outline {
133
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
134
+ background-color: transparent;
135
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
136
+ }
137
+
138
+ .vchasno-ui-button:disabled.--danger {
139
+ border: 1px solid #b6cadb;
140
+ background-color: rgb(182 202 219 / 20%);
141
+ color: #b6cadb;
142
+ }
143
+
144
+ .vchasno-ui-button.--danger:not(:disabled):hover {
145
+ background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);
146
+ color: var(--vchasno-ui-btn-danger-hover-color, #fff);
147
+ }
148
+
149
+ .vchasno-ui-button.--danger.--outline:not(:disabled):hover {
150
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
151
+ background-color: rgb(0 0 0 / 10%);
152
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
153
+ }
154
+
155
+ .vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {
156
+ stroke: var(--vchasno-ui-btn-default-color);
157
+ transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);
158
+ }
159
+
160
+ .vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {
161
+ stroke: var(--vchasno-ui-btn-default-hover-color);
162
+ }
163
+
164
+ .vchasno-ui-button:disabled.--transparent {
165
+ color: #b6cadb;
166
+ }
167
+
168
+ .vchasno-ui-button.--light {
169
+ border: 1px solid transparent;
170
+ background-color: var(--vchasno-ui-btn-light-bg, #fff);
171
+ color: var(--vchasno-ui-btn-light-color);
172
+ }
173
+
174
+ .vchasno-ui-button:disabled.--light {
175
+ border: none;
176
+ background-color: rgb(182 202 219 / 20%);
177
+ color: #b6cadb;
178
+ }
179
+
180
+ .vchasno-ui-button.--light.--outline {
181
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
182
+ background-color: var(--vchasno-ui-btn-primary-color);
183
+ color: var(--vchasno-ui-btn-primary-bg);
184
+ }
185
+
186
+ .vchasno-ui-button.--light:not(:disabled):hover {
187
+ background-color: var(--vchasno-ui-btn-light-hover-bg);
188
+ color: var(--vchasno-ui-btn-primary-bg);
189
+ }
package/dist/css/Checkbox.global.css ADDED
@@ -0,0 +1,74 @@
1
+ .vchasno-ui-checkbox {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ cursor: pointer;
5
+ gap: 10px;
6
+ user-select: none;
7
+ }
8
+
9
+ .vchasno-ui-checkbox__box {
10
+ display: inline-flex;
11
+ width: 16px;
12
+ height: 16px;
13
+ flex-shrink: 0;
14
+ align-items: center;
15
+ justify-content: center;
16
+ border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);
17
+ border-radius: 3px;
18
+ outline: 2px solid transparent;
19
+ transition:
20
+ background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
21
+ border var(--vchasno-ui-transition-duration-sec, 0.3s),
22
+ outline var(--vchasno-ui-transition-duration-sec, 0.3s);
23
+ }
24
+
25
+ .vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {
26
+ stroke: var(--vchasno-ui-checkbox-bg-color);
27
+ }
28
+
29
+ .vchasno-ui-checkbox__svg {
30
+ color: transparent;
31
+ transform: scale(0) translateZ(0);
32
+ transition:
33
+ color var(--vchasno-ui-transition-duration-sec),
34
+ transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);
35
+ }
36
+
37
+ .vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {
38
+ display: none;
39
+ }
40
+
41
+ .vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {
42
+ border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);
43
+ background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);
44
+ }
45
+
46
+ .vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {
47
+ color: var(--vchasno-ui-checkbox-icon-color);
48
+ transform: scale(1) translateZ(0);
49
+ }
50
+
51
+ .vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,
52
+ .vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {
53
+ border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);
54
+ outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);
55
+ }
56
+
57
+ .vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {
58
+ background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
59
+ }
60
+
61
+ .vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {
62
+ stroke: var(--vchasno-ui-checkbox-icon-color);
63
+ }
64
+
65
+ .vchasno-ui-checkbox__label {
66
+ font-size: var(--vchasno-ui-checkbox-font-size);
67
+ line-height: 1;
68
+ user-select: none;
69
+ }
70
+
71
+ .vchasno-ui-checkbox.--disabled {
72
+ color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
73
+ cursor: not-allowed;
74
+ }