x-ui-design 0.6.70 → 0.6.72

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 (4) hide show
  1. package/dist/index.esm.js +1 -1
  2. package/dist/index.js +1 -1
  3. package/lib/components/Button/style.css +32 -32
  4. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1428,7 +1428,7 @@ const SkeletonInput$1 = dynamic$1(() => Promise.resolve().then(function () { ret
1428
1428
  ssr: false
1429
1429
  });
1430
1430
 
1431
- var css_248z$k = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}.xUi-button-shape-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-shape-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-shape-circle.xUi-button-size-large{height:44px;width:44px}.xUi-button-shape-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-hover);border-color:var(--xui-primary-color-hover);color:#fff}.xUi-button-variant-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-variant-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-variant-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-variant-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-variant-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-variant-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-variant-outlined{color:#fff}.xUi-button-variant-filled,.xUi-button-variant-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-variant-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
1431
+ var css_248z$k = "html .xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}html .xUi-button,html .xUi-button-content,html .xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}html .xUi-button-icon{line-height:0;margin-right:.5em}html .xUi-button-icon:last-child{margin-left:.5em;margin-right:0}html .xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html .xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}html .xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}html .xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}html .xUi-button-shape-circle{border-radius:50%;justify-content:center;padding:0}html .xUi-button-shape-circle .xUi-button-size-small{height:24px;width:24px}html .xUi-button-shape-circle .xUi-button-size-large{height:44px;width:44px}html .xUi-button-shape-round{border-radius:9999px}html .xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}html .xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}html .xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}html .xUi-button-primary:hover{background-color:var(--xui-primary-color-hover);border-color:var(--xui-primary-color-hover);color:#fff}html .xUi-button-variant-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}html .xUi-button-variant-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}html .xUi-button-variant-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}html .xUi-button-variant-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}html .xUi-button-variant-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}html .xUi-button-variant-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}html .xUi-button-variant-outlined{background-color:transparent;border-color:var(--xui-border-color);color:#fff}html .xUi-button-variant-filled{background-color:transparent;border-color:var(--xui-border-color);color:var(--xui-text-color)}html .xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}html .xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}html .xUi-button-ghost{opacity:0}html .xUi-button-ghost:hover{opacity:1}html .xUi-button-block{display:flex;width:100%}html .xUi-button-disabled,html .xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}html .xUi-button-loading{background-color:transparent}";
1432
1432
  styleInject(css_248z$k);
1433
1433
 
1434
1434
  const ButtonComponent = ({
package/dist/index.js CHANGED
@@ -1430,7 +1430,7 @@ const SkeletonInput$1 = dynamic$1(() => Promise.resolve().then(function () { ret
1430
1430
  ssr: false
1431
1431
  });
1432
1432
 
1433
- var css_248z$k = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}.xUi-button-shape-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-shape-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-shape-circle.xUi-button-size-large{height:44px;width:44px}.xUi-button-shape-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-hover);border-color:var(--xui-primary-color-hover);color:#fff}.xUi-button-variant-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-variant-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-variant-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-variant-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-variant-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-variant-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-variant-outlined{color:#fff}.xUi-button-variant-filled,.xUi-button-variant-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-variant-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
1433
+ var css_248z$k = "html .xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}html .xUi-button,html .xUi-button-content,html .xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}html .xUi-button-icon{line-height:0;margin-right:.5em}html .xUi-button-icon:last-child{margin-left:.5em;margin-right:0}html .xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html .xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}html .xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}html .xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}html .xUi-button-shape-circle{border-radius:50%;justify-content:center;padding:0}html .xUi-button-shape-circle .xUi-button-size-small{height:24px;width:24px}html .xUi-button-shape-circle .xUi-button-size-large{height:44px;width:44px}html .xUi-button-shape-round{border-radius:9999px}html .xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}html .xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}html .xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}html .xUi-button-primary:hover{background-color:var(--xui-primary-color-hover);border-color:var(--xui-primary-color-hover);color:#fff}html .xUi-button-variant-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}html .xUi-button-variant-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}html .xUi-button-variant-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}html .xUi-button-variant-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}html .xUi-button-variant-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}html .xUi-button-variant-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}html .xUi-button-variant-outlined{background-color:transparent;border-color:var(--xui-border-color);color:#fff}html .xUi-button-variant-filled{background-color:transparent;border-color:var(--xui-border-color);color:var(--xui-text-color)}html .xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}html .xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}html .xUi-button-ghost{opacity:0}html .xUi-button-ghost:hover{opacity:1}html .xUi-button-block{display:flex;width:100%}html .xUi-button-disabled,html .xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}html .xUi-button-loading{background-color:transparent}";
1434
1434
  styleInject(css_248z$k);
1435
1435
 
1436
1436
  const ButtonComponent = ({
package/lib/components/Button/style.css CHANGED
@@ -1,4 +1,4 @@
1
- .xUi-button {
1
+ html .xUi-button {
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -13,13 +13,13 @@
13
13
  line-height: 1.5715;
14
14
  }
15
15
 
16
- .xUi-button-content {
16
+ html .xUi-button-content {
17
17
  display: inline-flex;
18
18
  align-items: center;
19
19
  justify-content: center;
20
20
  }
21
21
 
22
- .xUi-button-icon {
22
+ html .xUi-button-icon {
23
23
  display: inline-flex;
24
24
  align-items: center;
25
25
  justify-content: center;
@@ -27,12 +27,12 @@
27
27
  margin-right: 0.5em;
28
28
  }
29
29
 
30
- .xUi-button-icon:last-child {
30
+ html .xUi-button-icon:last-child {
31
31
  margin-right: 0;
32
32
  margin-left: 0.5em;
33
33
  }
34
34
 
35
- .xUi-button-spinner {
35
+ html .xUi-button-spinner {
36
36
  width: 1em;
37
37
  height: 1em;
38
38
  border: 1px solid transparent;
@@ -50,140 +50,140 @@
50
50
  }
51
51
  }
52
52
 
53
- .xUi-button-size-small {
53
+ html .xUi-button-size-small {
54
54
  padding: 4px 12px;
55
55
  font-size: 12px;
56
56
  height: 24px;
57
57
  }
58
58
 
59
- .xUi-button-size-middle {
59
+ html .xUi-button-size-middle {
60
60
  padding: 0 16px;
61
61
  font-size: 14px;
62
62
  height: 32px;
63
63
  }
64
64
 
65
- .xUi-button-size-large {
65
+ html .xUi-button-size-large {
66
66
  padding: 8px 20px;
67
67
  font-size: 16px;
68
68
  height: 44px;
69
69
  }
70
70
 
71
- .xUi-button-shape-circle {
71
+ html .xUi-button-shape-circle {
72
72
  padding: 0;
73
73
  border-radius: 50%;
74
74
  justify-content: center;
75
75
  }
76
76
 
77
- .xUi-button-shape-circle.xUi-button-size-small {
77
+ html .xUi-button-shape-circle .xUi-button-size-small {
78
78
  width: 24px;
79
79
  height: 24px;
80
80
  }
81
81
 
82
- .xUi-button-shape-circle.xUi-button-size-large {
82
+ html .xUi-button-shape-circle .xUi-button-size-large {
83
83
  width: 44px;
84
84
  height: 44px;
85
85
  }
86
86
 
87
- .xUi-button-shape-round {
87
+ html .xUi-button-shape-round {
88
88
  border-radius: 9999px;
89
89
  }
90
90
 
91
- .xUi-button-default {
91
+ html .xUi-button-default {
92
92
  background-color: #fff;
93
93
  border-color: var(--xui-border-color);
94
94
  color: rgba(0, 0, 0, 0.85);
95
95
  }
96
96
 
97
- .xUi-button-default:hover {
97
+ html .xUi-button-default:hover {
98
98
  border-color: var(--xui-primary-color);
99
99
  color: var(--xui-primary-color);
100
100
  }
101
101
 
102
- .xUi-button-primary {
102
+ html .xUi-button-primary {
103
103
  background-color: var(--xui-primary-color);
104
104
  border-color: var(--xui-primary-color);
105
105
  color: #fff;
106
106
  }
107
107
 
108
- .xUi-button-primary:hover {
108
+ html .xUi-button-primary:hover {
109
109
  background-color: var(--xui-primary-color-hover);
110
110
  border-color: var(--xui-primary-color-hover);
111
111
  color: #fff;
112
112
  }
113
113
 
114
- .xUi-button-variant-dashed {
114
+ html .xUi-button-variant-dashed {
115
115
  border-style: dashed;
116
116
  background-color: #fff;
117
117
  color: rgba(0, 0, 0, 0.85);
118
118
  border-color: var(--xui-border-color);
119
119
  }
120
120
 
121
- .xUi-button-variant-dashed:hover {
121
+ html .xUi-button-variant-dashed:hover {
122
122
  border-color: var(--xui-primary-color);
123
123
  color: var(--xui-primary-color);
124
124
  }
125
125
 
126
- .xUi-button-variant-text {
126
+ html .xUi-button-variant-text {
127
127
  background-color: transparent;
128
128
  border-color: transparent !important;
129
129
  color: rgba(0, 0, 0, 0.88);
130
130
  }
131
131
 
132
- .xUi-button-variant-text:hover {
132
+ html .xUi-button-variant-text:hover {
133
133
  color: rgba(0, 0, 0, 0.88);
134
134
  border-color: transparent;
135
135
  background-color: rgba(0, 0, 0, 0.04);
136
136
  }
137
137
 
138
- .xUi-button-variant-link {
138
+ html .xUi-button-variant-link {
139
139
  background-color: transparent;
140
140
  border-color: transparent !important;
141
141
  color: var(--xui-primary-color);
142
142
  }
143
143
 
144
- .xUi-button-variant-link:hover {
144
+ html .xUi-button-variant-link:hover {
145
145
  border-color: transparent;
146
146
  color: var(--xui-primary-color-light);
147
147
  }
148
148
 
149
- .xUi-button-variant-outlined {
149
+ html .xUi-button-variant-outlined {
150
150
  background-color: transparent;
151
151
  border-color: var(--xui-border-color);
152
152
  color: #fff;
153
153
  }
154
154
 
155
- .xUi-button-variant-filled {
155
+ html .xUi-button-variant-filled {
156
156
  background-color: transparent;
157
157
  color: var(--xui-text-color);
158
158
  border-color: var(--xui-border-color);
159
159
  }
160
160
 
161
- .xUi-button-danger {
161
+ html .xUi-button-danger {
162
162
  background-color: transparent;
163
163
  border-color: var(--xui-error-color);
164
164
  color: var(--xui-error-color);
165
165
  }
166
166
 
167
- .xUi-button-danger:hover {
167
+ html .xUi-button-danger:hover {
168
168
  color: var(--xui-error-color-light);
169
169
  border-color: var(--xui-error-color-light);
170
170
  }
171
171
 
172
- .xUi-button-ghost {
172
+ html .xUi-button-ghost {
173
173
  opacity: 0;
174
174
  }
175
175
 
176
- .xUi-button-ghost:hover {
176
+ html .xUi-button-ghost:hover {
177
177
  opacity: 1;
178
178
  }
179
179
 
180
- .xUi-button-block {
180
+ html .xUi-button-block {
181
181
  display: flex;
182
182
  width: 100%;
183
183
  }
184
184
 
185
- .xUi-button-disabled,
186
- .xUi-button-loading {
185
+ html .xUi-button-disabled,
186
+ html .xUi-button-loading {
187
187
  cursor: not-allowed;
188
188
  opacity: 0.5;
189
189
  color: var(--xui-text-color);
@@ -192,6 +192,6 @@
192
192
  pointer-events: none;
193
193
  }
194
194
 
195
- .xUi-button-loading {
195
+ html .xUi-button-loading {
196
196
  background-color: transparent
197
197
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x-ui-design",
3
- "version": "0.6.70",
3
+ "version": "0.6.72",
4
4
  "license": "ISC",
5
5
  "author": "Gabriel Boyajyan",
6
6
  "main": "dist/index.js",