@topvisor/ui 0.0.5-0 → 0.0.8

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 (23) hide show
  1. package/README.md +8 -0
  2. package/c/_plugin-vue_export-helper-cb5c78ba.js +12 -0
  3. package/c/_plugin-vue_export-helper-cb5c78ba.js.map +1 -0
  4. package/c/_plugin-vue_export-helper-cc2b3d55.js +11 -0
  5. package/c/_plugin-vue_export-helper-cc2b3d55.js.map +1 -0
  6. package/c/button/button.amd.js +93 -4
  7. package/c/button/button.amd.js.map +1 -0
  8. package/c/button/button.js +94 -4
  9. package/c/button/button.js.map +1 -0
  10. package/c/example/example.amd.js +35 -0
  11. package/c/example/example.amd.js.map +1 -0
  12. package/c/example/example.js +36 -0
  13. package/c/example/example.js.map +1 -0
  14. package/c/style.css +234 -0
  15. package/core.css +174 -0
  16. package/dark.css +60 -66
  17. package/l/forms/forms.amd.js +94 -6
  18. package/l/forms/forms.amd.js.map +1 -0
  19. package/l/forms/forms.js +93 -6
  20. package/l/forms/forms.js.map +1 -0
  21. package/l/style.css +234 -0
  22. package/light.css +77 -71
  23. package/package.json +22 -19
package/l/style.css ADDED
@@ -0,0 +1,234 @@
1
+ .top-button {
2
+ cursor: pointer;
3
+ box-shadow: var(--top-button-box-shadow);
4
+ background-color: var(--top-button-background-color);
5
+ height: var(--g-forms-base-height);
6
+ padding: 0 var(--g-forms-padding);
7
+ color: var(--top-button-color);
8
+ line-height: 1;
9
+ white-space: nowrap;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+
14
+ transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
15
+ }
16
+ .top-button:hover {
17
+ box-shadow: var(--top-button-box-shadow-hover);
18
+ background-color: var(--top-button-background-color-hover);
19
+ }
20
+ .top-button:active {
21
+ box-shadow: var(--top-button-box-shadow-active);
22
+ background-color: var(--top-button-background-color-active);
23
+ }
24
+ .top-button.g-active {
25
+ box-shadow: var(--top-button-box-shadow-selected);
26
+ background-color: var(--top-button-background-color-selected);
27
+ }
28
+ .top-button.top-button-progress {
29
+ cursor: help;
30
+ box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
31
+ background-image:
32
+ linear-gradient(-45deg,
33
+ rgba(255, 255, 255, 0.2) 25%,
34
+ transparent 25%,
35
+ transparent 50%,
36
+ rgba(255, 255, 255, 0.2) 50%,
37
+ rgba(255, 255, 255, 0.2) 75%,
38
+ transparent 75%,
39
+ transparent);
40
+ background-size: 32px 32px;
41
+ animation: top-progress 1s linear infinite;
42
+ }
43
+ @keyframes top-progress {
44
+ 0% {
45
+ background-position-x: 0px;
46
+ }
47
+ 100% {
48
+ background-position-x: 32px;
49
+ }
50
+ }
51
+ a.top-button,
52
+ button.top-button {
53
+ min-width: 135px;
54
+ text-decoration: none;
55
+ }
56
+ a.top-button,
57
+ a.top-button:hover {
58
+ min-width: var(--g-forms-base-height);
59
+ text-decoration: none;
60
+ }
61
+ .top-button[data-g-icon]:not(:empty),
62
+ .top-button[data-g-icon2]:not(:empty) {
63
+ justify-content: flex-start;
64
+ text-align: left;
65
+ }
66
+ .top-button[data-g-icon] {
67
+ padding-left: 0;
68
+ }
69
+ .top-button[data-g-icon2] {
70
+ padding-right: var(--g_select_arrow-width);
71
+ }
72
+ .top-button[data-g-icon2]:after {
73
+ margin-left: auto;
74
+ }
75
+ .top-button:empty {
76
+ min-width: var(--g-forms-base-height);
77
+ }
78
+ .top-button[data-g-icon]:empty,
79
+ .top-button[data-g-icon2]:empty {
80
+ padding: 0;
81
+ }
82
+ .top-button.g-color_blue {
83
+ --top-button-background-color: var(--color-blue-500);
84
+ }
85
+ .top-button.g-color_green {
86
+ --top-button-background-color: var(--color-green-500);
87
+ }
88
+ .top-button.g-color_orange {
89
+ --top-button-background-color: var(--color-orange-500);
90
+ }
91
+ .top-button.g-color_red {
92
+ --top-button-background-color: var(--color-red-500);
93
+ }
94
+ .top-button.g-color_pink {
95
+ --top-button-background-color: var(--color-pink-500);
96
+ }
97
+ .top-button.g-color_theme {
98
+ --top-button-box-shadow-hover: none;
99
+ --top-button-box-shadow-active: none;
100
+ --top-button-box-shadow-selected: none;
101
+
102
+ --g-icon-color: var(--color-text-2);
103
+ --g-icon2-color: var(--color-text-2);
104
+
105
+ --top-button-color: var(--color-text-1);
106
+ --top-button-background-color: transparent;
107
+ --top-button-background-color-hover: var(--color-secondary-opacity);
108
+ --top-button-background-color-active: var(--color-secondary-2-opacity);
109
+ --top-button-background-color-selected: var(--color-secondary-2-opacity);
110
+ }
111
+ .top-button.g-color_theme.g-active {
112
+ --g-icon-color: var(--color-text-2);
113
+ }
114
+ .top-button.g-style_outline {
115
+ --top-button-box-shadow: none;
116
+ --top-button-box-shadow-hover: none;
117
+ --top-button-box-shadow-active: none;
118
+ --top-button-box-shadow-selected: none;
119
+
120
+ --g-forms-border-color: var(--g-style_outline-color);
121
+
122
+ --g-style_outline-color: var(--color-steel-400);
123
+
124
+ --top-button-color: var(--g-style_outline-color);
125
+ --top-button-background-color: var(--content-background-color);
126
+ --top-button-background-color-hover: var(--color-theme-100);
127
+ --top-button-background-color-active: var(--color-theme-150);
128
+ --top-button-background-color-selected: var(--color-theme-125);
129
+
130
+ --g-forms-border-width: 1px;
131
+ }
132
+ .top-button.g-style_outline.g-color_theme {
133
+ --top-button-color: var(--color-text);
134
+ }
135
+ .top-button.g-style_outline.g-color_blue {
136
+ --g-style_outline-color: var(--color-blue-500);
137
+ }
138
+ .top-button.g-style_outline.g-color_green {
139
+ --g-style_outline-color: var(--color-green-500);
140
+ }
141
+ .top-button.g-style_outline.g-color_orange {
142
+ --g-style_outline-color: var(--color-orange-500);
143
+ }
144
+ .top-button.g-style_outline.g-color_red {
145
+ --g-style_outline-color: var(--color-red-500);
146
+ }
147
+ .top-button.g-style_outline.g-color_pink {
148
+ --g-style_outline-color: var(--color-pink-500);
149
+ }
150
+ .top-button.g-style_soft {
151
+ --g-shadow-darken: none;
152
+ --g-shadow-darken-2: none;
153
+ --g-shadow-darken-3: none;
154
+
155
+ --top-button-color: var(--color-text);
156
+ --top-button-background-color: var(--color-secondary-opacity);
157
+ --top-button-background-color-hover: var(--color-secondary-2-opacity);
158
+ --top-button-background-color-active: var(--color-secondary-3-opacity);
159
+ --top-button-background-color-selected: var(--color-secondary-3-opacity);
160
+ }
161
+ .top-button.g-style_soft.g-color_blue {
162
+ --top-button-color: var(--color-blue-500);
163
+ }
164
+ .top-button.g-style_soft.g-color_orange {
165
+ --top-button-color: var(--color-orange-500);
166
+ }
167
+ .top-button.g-style_soft.g-color_green {
168
+ --top-button-color: var(--color-green-500);
169
+ }
170
+ .top-button.g-style_soft.g-color_red {
171
+ --top-button-color: var(--color-red-500);
172
+ }
173
+ .top-button.g-style_soft.g-color_pink {
174
+ --top-button-color: var(--color-pink-500);
175
+ }
176
+ .top-button.g-style_transparent {
177
+ --g-shadow-darken: none;
178
+ --g-shadow-darken-2: none;
179
+ --g-shadow-darken-3: none;
180
+
181
+ --top-button-color: var(--color-text);
182
+ --top-button-background-color: transparent;
183
+ --top-button-background-color-hover: transparent;
184
+ --top-button-background-color-active: transparent;
185
+ --top-button-background-color-selected: var(--color-steel-200);
186
+ }
187
+ .top-button.g-style_transparent:hover {
188
+ opacity: 0.8;
189
+ }
190
+ .top-button.g-style_transparent.g-color_blue {
191
+ --top-button-color: var(--color-blue-450);
192
+ }
193
+ .top-button.g-style_transparent.g-color_green {
194
+ --top-button-color: var(--color-green-450);
195
+ }
196
+ .top-button.g-style_transparent.g-color_orange {
197
+ --top-button-color: var(--color-orange-450);
198
+ }
199
+ .top-button.g-style_transparent.g-color_red {
200
+ --top-button-color: var(--color-red-450);
201
+ }
202
+ .top-button.g-style_transparent.g-color_pink {
203
+ --top-button-color: var(--color-pink-450);
204
+ }
205
+ .top-button {
206
+ --top-button-color: var(--color-white);
207
+ --top-button-background-color: transparent;
208
+ --top-button-background-color-hover: var(--top-button-background-color);
209
+ --top-button-background-color-active: var(--top-button-background-color-hover);
210
+ --top-button-background-color-selected: var(--top-button-background-color-hover);
211
+ --top-button-box-shadow: none;
212
+ --top-button-box-shadow-hover: var(--g-shadow-darken-2);
213
+ --top-button-box-shadow-active: var(--g-shadow-darken-3);
214
+ --top-button-box-shadow-selected: var(--g-shadow-darken-3);
215
+ --g-forms-border-width: 0px;
216
+ --g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
217
+ --g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));
218
+ }
219
+ .top-button.g-size_l {
220
+ --g-forms-padding: var(--g-forms-padding_l);
221
+ --g-forms-base-height: var(--g-forms-base-height_l);
222
+ }
223
+ .top-button.g-size_xl {
224
+ --g-forms-padding: var(--g-forms-padding_xl);
225
+ --g-forms-base-height: var(--g-forms-base-height_xl);
226
+ }
227
+ .top-button-progress {}
228
+
229
+ .top-example {
230
+ background: var(--811e7836);
231
+ }
232
+ .top-example.g-active {
233
+ background: green;
234
+ }
package/light.css CHANGED
@@ -1,32 +1,42 @@
1
- :root{
1
+ :root {
2
2
  /* Main */
3
3
  --color-primary: var(--color-blue-500);
4
4
  --color-primary-2: var(--color-blue-550);
5
5
 
6
- --color-secondary-opacity: rgba(14,65,142,0.06); /* Основан на Blue-700 */
7
- --color-secondary-2-opacity: rgba(14,65,142,0.08); /* Основан на Blue-700 */
8
- --color-secondary-3-opacity: rgba(14,65,142,0.12); /* Основан на Blue-700 */
6
+ --color-secondary-opacity: rgba(14, 65, 142, 0.06);
7
+ /* Основан на Blue-700 */
8
+ --color-secondary-2-opacity: rgba(14, 65, 142, 0.08);
9
+ /* Основан на Blue-700 */
10
+ --color-secondary-3-opacity: rgba(14, 65, 142, 0.12);
11
+ /* Основан на Blue-700 */
9
12
 
10
13
  --color-positive: var(--color-green-500);
11
- --color-positive-opacity: rgba(22,196,96,0.3); /* Основан на Green-500 */
14
+ --color-positive-opacity: rgba(22, 196, 96, 0.3);
15
+ /* Основан на Green-500 */
12
16
  --color-positive-light: var(--color-green-100);
13
- --color-positive-light-opacity: rgba(22,196,96,0.06); /* Основан на Green-500 */
17
+ --color-positive-light-opacity: rgba(22, 196, 96, 0.06);
18
+ /* Основан на Green-500 */
14
19
 
15
20
  --color-warning: var(--color-orange-500);
16
- --color-warning-opacity: rgba(255,170,51,0.3); /* Основан на Orange-500 */
21
+ --color-warning-opacity: rgba(255, 170, 51, 0.3);
22
+ /* Основан на Orange-500 */
17
23
  --color-warning-light: var(--color-orange-100);
18
- --color-warning-light-opacity: rgba(255,170,51,0.06); /* Основан на Orange-500 */
24
+ --color-warning-light-opacity: rgba(255, 170, 51, 0.06);
25
+ /* Основан на Orange-500 */
19
26
 
20
27
  --color-negative: var(--color-red-500);
21
- --color-negative-opacity: rgba(234,65,50,0.3); /* Основан на Red-500 */
28
+ --color-negative-opacity: rgba(234, 65, 50, 0.3);
29
+ /* Основан на Red-500 */
22
30
  --color-negative-light: var(--color-red-100);
23
- --color-negative-light-opacity: rgba(234,65,50,0.06); /* Основан на Red-500 */
31
+ --color-negative-light-opacity: rgba(234, 65, 50, 0.06);
32
+ /* Основан на Red-500 */
24
33
 
25
34
  /* Text */
26
35
  --color-text-1: var(--color-theme-925);
27
36
  --color-text-2: var(--color-theme-750);
28
37
  --color-text-3: var(--color-theme-650);
29
38
  --color-text-4: var(--color-theme-450);
39
+ --color-text: var(--color-text-1);
30
40
 
31
41
  --color-text-secondary: var(--color-gray-250);
32
42
  --color-text-secondary-2: var(--color-gray-350);
@@ -34,6 +44,11 @@
34
44
  --color-text-link: var(--color-blue-450);
35
45
  --color-text-link-hover: var(--color-blue-300);
36
46
 
47
+ --color-overlay: rgba(0, 0, 0, 0.5);
48
+
49
+ --color-placeholder: var(--color-gray-500);
50
+ --color-placeholder-active: var(--color-gray-300);
51
+
37
52
  /* Background colors */
38
53
  --color-bg-1: var(--color-steel-300);
39
54
  --color-bg-2: var(--color-steel-150);
@@ -43,81 +58,72 @@
43
58
  --color-line-1-opacity: rgba(14, 65, 142, 0.1);
44
59
  --color-line-2-opacity: rgba(14, 65, 142, 0.2);
45
60
 
46
- /* Модули */
47
-
48
- /* Page colors */
49
- --color-text: var(--color-text-1);
61
+ /* Scroll */
50
62
  --scroll-thumb-color: var(--color-theme-250);
51
63
  --scroll-thumb-color-hover: var(--color-theme-350);
52
64
  --scroll-thumb-color-active: var(--color-theme-500);
65
+
66
+ /* Page */
53
67
  --body-background-color: var(--content-background-color);
54
68
  --content-background-color: var(--color-bg-3);
55
- --color-overlay: rgba(0, 0, 0, 0.5);
56
-
57
- /* Forms colors */
58
- --color-placeholder: var(--color-gray-500);
59
- --color-placeholder-active: var(--color-gray-300);
60
- --input-color: var(--color-text);
61
- --input-border-color: var(--color-line-opacity);
62
- --input-border-color-hover: var(--color-line-2-opacity-opacity);
63
- --input-background-color: var(--color-bg-3);
64
- --input-background-color-hover: var(--color-bg-3);
65
69
 
66
70
  /* Theme */
67
- --color-theme-0: var(--color-bg-3);
68
- --color-theme-25: rgba(251,252,253,1);
69
- --color-theme-50: rgba(248,250,252,1);
70
- --color-theme-75: rgba(241,243,247,1);
71
- --color-theme-100: rgba(233,238,243,1);
72
- --color-theme-125: rgba(226,232,238,1);
73
- --color-theme-150: rgba(220,226,234,1);
74
- --color-theme-200: rgba(213,220,230,1);
75
- --color-theme-250: rgba(206,215,226,1);
76
- --color-theme-300: rgba(199,209,222,1);
77
- --color-theme-350: rgba(191,203,218,1);
78
- --color-theme-400: rgba(181,193,208,1);
79
- --color-theme-450: rgba(172,183,198,1);
80
- --color-theme-500: rgba(161,173,188,1);
81
- --color-theme-525: rgba(151,162,178,1);
82
- --color-theme-550: rgba(141,152,167,1);
83
- --color-theme-600: rgba(129,142,161,1);
84
- --color-theme-650: rgba(117,131,150,1);
85
- --color-theme-700: rgba(105,118,135,1);
86
- --color-theme-750: rgba(94,105,120,1);
87
- --color-theme-800: rgba(82,92,105,1);
88
- --color-theme-850: rgba(70,79,90,1);
89
- --color-theme-875: rgba(59,66,75,1);
90
- --color-theme-900: rgba(47,52,60,1);
91
- --color-theme-925: rgba(35,39,45,1);
92
- --color-theme-950: rgba(23,26,30,1);
93
- --color-theme-975: rgba(12,13,15,1);
94
- --color-theme-1000: rgba(0,0,0,1);
95
-
96
- /* g_shadow */
97
- --g_shadow-s:
71
+ --color-theme-0: var(--color-bg-3);
72
+ --color-theme-25: rgba(251, 252, 253, 1);
73
+ --color-theme-50: rgba(248, 250, 252, 1);
74
+ --color-theme-75: rgba(241, 243, 247, 1);
75
+ --color-theme-100: rgba(233, 238, 243, 1);
76
+ --color-theme-125: rgba(226, 232, 238, 1);
77
+ --color-theme-150: rgba(220, 226, 234, 1);
78
+ --color-theme-200: rgba(213, 220, 230, 1);
79
+ --color-theme-250: rgba(206, 215, 226, 1);
80
+ --color-theme-300: rgba(199, 209, 222, 1);
81
+ --color-theme-350: rgba(191, 203, 218, 1);
82
+ --color-theme-400: rgba(181, 193, 208, 1);
83
+ --color-theme-450: rgba(172, 183, 198, 1);
84
+ --color-theme-500: rgba(161, 173, 188, 1);
85
+ --color-theme-525: rgba(151, 162, 178, 1);
86
+ --color-theme-550: rgba(141, 152, 167, 1);
87
+ --color-theme-600: rgba(129, 142, 161, 1);
88
+ --color-theme-650: rgba(117, 131, 150, 1);
89
+ --color-theme-700: rgba(105, 118, 135, 1);
90
+ --color-theme-750: rgba(94, 105, 120, 1);
91
+ --color-theme-800: rgba(82, 92, 105, 1);
92
+ --color-theme-850: rgba(70, 79, 90, 1);
93
+ --color-theme-875: rgba(59, 66, 75, 1);
94
+ --color-theme-900: rgba(47, 52, 60, 1);
95
+ --color-theme-925: rgba(35, 39, 45, 1);
96
+ --color-theme-950: rgba(23, 26, 30, 1);
97
+ --color-theme-975: rgba(12, 13, 15, 1);
98
+ --color-theme-1000: rgba(0, 0, 0, 1);
99
+
100
+ /* g-shadow */
101
+ --g-shadow-s:
98
102
  0px 0px 3px rgba(112, 144, 176, 0.07),
99
- 0px 5px 25px rgba(112, 144, 176, 0.12)
100
- ;
101
- --g_shadow:
103
+ 0px 5px 25px rgba(112, 144, 176, 0.12);
104
+ --g-shadow:
102
105
  0px 0px 4px rgba(4, 9, 84, 0.08),
103
- 0px 4px 32px rgba(4, 9, 84, 0.1)
104
- ;
105
- --g_shadow-b:
106
+ 0px 4px 32px rgba(4, 9, 84, 0.1);
107
+ --g-shadow-b:
106
108
  0px 0px 4px rgba(4, 36, 84, 0.08),
107
- 0px 18px 32px rgba(4, 25, 84, 0.18)
108
- ;
109
+ 0px 18px 32px rgba(4, 25, 84, 0.18);
110
+
111
+ --g-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
112
+ --g-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
113
+ --g-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
109
114
  }
110
115
 
111
116
  /* forms */
112
- :root{
113
- --g_input-border-color: var(--color-theme-100);
114
- --g_input-border-color-hover: var(--color-theme-300);
117
+ :root {
118
+ --g-forms-color: var(--color-text);
115
119
 
116
- --g_input-background-color: var(--color-bg-3);
117
- --g_input-background-color-hover: var(--color-bg-3);
120
+ --g-forms-border-color: var(--color-line-1-opacity);
121
+ --g-forms-border-color-hover: var(--color-line-2-opacity);
118
122
 
119
- --g_input-color: var(--color-text);
123
+ --g-forms-background-color: var(--color-bg-3);
124
+ --g-forms-background-color-hover: var(--color-bg-3);
120
125
 
121
- --g_radio-color: var(--color-primary);
122
- --g_radio-color-hover: var(--color-primary-2);
126
+ /* g-radio */
127
+ --g-radio-color: var(--color-primary);
128
+ --g-radio-color-hover: var(--color-primary-2);
123
129
  }
package/package.json CHANGED
@@ -1,19 +1,22 @@
1
- {
2
- "name": "@topvisor/ui",
3
- "private": false,
4
- "version": "0.0.5-0",
5
- "type": "module",
6
- "description": "Topvisor UI-kit Vue",
7
- "author": "Topvisor",
8
- "keywords": [
9
- "topvisor",
10
- "vue",
11
- "ui framework",
12
- "component framework",
13
- "component library"
14
- ],
15
- "license": "MIT",
16
- "peerDependencies": {
17
- "vue": "^3.0.0"
18
- }
19
- }
1
+ {
2
+ "name": "@topvisor/ui",
3
+ "private": false,
4
+ "version": "0.0.8",
5
+ "type": "module",
6
+ "description": "Topvisor UI-kit Vue",
7
+ "author": "Topvisor",
8
+ "keywords": [
9
+ "topvisor",
10
+ "vue",
11
+ "ui framework",
12
+ "component framework",
13
+ "component library"
14
+ ],
15
+ "license": "MIT",
16
+ "peerDependencies": {
17
+ "vue": "^3.0.0"
18
+ },
19
+ "dependencies": {
20
+ "@storybook/addon-storysource": "^7.4.0"
21
+ }
22
+ }