quick-start-feature-box 1.0.4 → 1.0.5

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 (2) hide show
  1. package/dist/index.css +349 -376
  2. package/package.json +7 -3
package/dist/index.css CHANGED
@@ -1,113 +1,102 @@
1
1
  /* src/FeatureBox/index.less */
2
2
  .FeatureBox {
3
3
  flex: 1 1 auto;
4
- .FeatureItem {
5
- width: 100%;
6
- margin-bottom: 30px;
7
- border-radius: 12px;
8
- border-radius: 8px;
9
- border: 1px solid #ebebeb;
10
- background-color: #FFFFFF;
11
- box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.05);
12
- .header {
13
- color: #333333;
14
- display: flex;
15
- justify-content: space-between;
16
- align-items: center;
17
- padding: 20px 28px;
18
- .headerLeft {
19
- display: flex;
20
- align-items: flex-start;
21
- gap: 12px;
22
- .iconBox {
23
- width: 20px;
24
- height: 20px;
25
- }
26
- .title {
27
- font-size: 15px;
28
- font-weight: 500;
29
- :global {
30
- .iconfont {
31
- font-size: 13px;
32
- color: #7f7f7f;
33
- cursor: pointer;
34
- margin-left: 16px;
35
- &:hover {
36
- color: var(--color-primary);
37
- }
38
- }
39
- }
40
- }
41
- .summary {
42
- margin-top: 12px;
43
- }
44
- }
45
- .btn {
46
- font-size: 14px;
47
- border-radius: 5px;
48
- padding: 5px 18px;
49
- color: #333333;
50
- border: 1px solid #d9d9d9;
51
- transition: all 0.3s ease;
52
- }
53
- &:hover {
54
- text-decoration: none;
55
- .btn {
56
- color: var(--color-primary);
57
- border-color: var(--color-primary);
58
- }
59
- }
60
- }
61
- .wrapper {
62
- border-top: 1px solid #ebebeb;
63
- padding: 20px 28px;
64
- .contentBox {
65
- padding: 14px 20px;
66
- border-radius: 10px;
67
- display: flex;
68
- align-items: flex-start;
69
- background-color: #fafafa;
70
- border-radius: 10px;
71
- gap: 8px;
72
- margin-bottom: 28px;
73
- :global {
74
- .iconfont {
75
- color: #f59a23;
76
- font-size: 18px;
77
- }
78
- }
79
- .contentRight {
80
- .title {
81
- font-weight: 500;
82
- }
83
- .content {
84
- line-height: 1.8em;
85
- margin-top: 8px;
86
- :global {
87
- li::before {
88
- content: "\2022";
89
- font-size: 1em;
90
- font-weight: 300;
91
- margin-right: 10px;
92
- }
93
- }
94
- }
95
- }
96
- }
97
- .remark {
98
- color: #7f7f7f;
99
- }
100
- }
101
- }
102
- }
103
- :global {
104
- .pgant-tooltip-inner {
105
- min-height: unset;
106
- }
107
- .pgant-image-preview-img {
108
- max-width: 80vw;
109
- max-height: 80vh;
110
- }
4
+ }
5
+ .FeatureBox .FeatureItem {
6
+ width: 100%;
7
+ margin-bottom: 30px;
8
+ border-radius: 12px;
9
+ border-radius: 8px;
10
+ border: 1px solid #ebebeb;
11
+ background-color: #FFFFFF;
12
+ box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.05);
13
+ }
14
+ .FeatureBox .FeatureItem .header {
15
+ color: #333333;
16
+ display: flex;
17
+ justify-content: space-between;
18
+ align-items: center;
19
+ padding: 20px 28px;
20
+ }
21
+ .FeatureBox .FeatureItem .header .headerLeft {
22
+ display: flex;
23
+ align-items: flex-start;
24
+ gap: 12px;
25
+ }
26
+ .FeatureBox .FeatureItem .header .headerLeft .iconBox {
27
+ width: 20px;
28
+ height: 20px;
29
+ }
30
+ .FeatureBox .FeatureItem .header .headerLeft .title {
31
+ font-size: 15px;
32
+ font-weight: 500;
33
+ }
34
+ .FeatureBox .FeatureItem .header .headerLeft .title :global .iconfont {
35
+ font-size: 13px;
36
+ color: #7f7f7f;
37
+ cursor: pointer;
38
+ margin-left: 16px;
39
+ }
40
+ .FeatureBox .FeatureItem .header .headerLeft .title :global .iconfont:hover {
41
+ color: var(--color-primary);
42
+ }
43
+ .FeatureBox .FeatureItem .header .headerLeft .summary {
44
+ margin-top: 12px;
45
+ }
46
+ .FeatureBox .FeatureItem .header .btn {
47
+ font-size: 14px;
48
+ border-radius: 5px;
49
+ padding: 5px 18px;
50
+ color: #333333;
51
+ border: 1px solid #d9d9d9;
52
+ transition: all 0.3s ease;
53
+ }
54
+ .FeatureBox .FeatureItem .header:hover {
55
+ text-decoration: none;
56
+ }
57
+ .FeatureBox .FeatureItem .header:hover .btn {
58
+ color: var(--color-primary);
59
+ border-color: var(--color-primary);
60
+ }
61
+ .FeatureBox .FeatureItem .wrapper {
62
+ border-top: 1px solid #ebebeb;
63
+ padding: 20px 28px;
64
+ }
65
+ .FeatureBox .FeatureItem .wrapper .contentBox {
66
+ padding: 14px 20px;
67
+ display: flex;
68
+ align-items: flex-start;
69
+ background-color: #fafafa;
70
+ border-radius: 10px;
71
+ gap: 8px;
72
+ margin-bottom: 28px;
73
+ }
74
+ .FeatureBox .FeatureItem .wrapper .contentBox :global .iconfont {
75
+ color: #f59a23;
76
+ font-size: 18px;
77
+ }
78
+ .FeatureBox .FeatureItem .wrapper .contentBox .contentRight .title {
79
+ font-weight: 500;
80
+ }
81
+ .FeatureBox .FeatureItem .wrapper .contentBox .contentRight .content {
82
+ line-height: 1.8em;
83
+ margin-top: 8px;
84
+ }
85
+ .FeatureBox .FeatureItem .wrapper .contentBox .contentRight .content :global li::before {
86
+ content: "\2022";
87
+ font-size: 1em;
88
+ font-weight: 300;
89
+ margin-right: 10px;
90
+ }
91
+ .FeatureBox .FeatureItem .wrapper .remark {
92
+ color: #7f7f7f;
93
+ }
94
+ :global .pgant-tooltip-inner {
95
+ min-height: unset;
96
+ }
97
+ :global .pgant-image-preview-img {
98
+ max-width: 80vw;
99
+ max-height: 80vh;
111
100
  }
112
101
 
113
102
  /* src/StepAndQuote/index.less */
@@ -115,119 +104,111 @@
115
104
  display: block;
116
105
  position: relative;
117
106
  color: #333333;
118
- .tail {
119
- position: absolute;
120
- top: 24px;
121
- left: 12px;
122
- height: 100%;
123
- border-left: 1px solid #e1e1e1;
124
- }
125
- .circle {
126
- position: absolute;
127
- width: 24px;
128
- height: 24px;
129
- left: 0px;
130
- z-index: 1;
131
- background-color: #FFFFFF;
132
- border: 1px solid #e1e1e1;
133
- border-radius: 100px;
134
- display: flex;
135
- align-items: center;
136
- justify-content: center;
137
- font-size: 12px;
138
- }
139
- .content {
140
- margin-left: 60px;
141
- position: relative;
142
- word-break: break-all;
143
- }
144
- &.Step {
145
- padding-bottom: 32px;
146
- .title {
147
- font-size: 15px;
148
- font-weight: 650;
149
- margin-bottom: 5px;
150
- cursor: pointer;
151
- display: inline-block;
152
- :global {
153
- .iconfont {
154
- font-weight: normal;
155
- opacity: 0;
156
- width: 13px;
157
- height: 13px;
158
- color: #7f7f7f;
159
- cursor: pointer;
160
- padding: 0 8px;
161
- font-size: 13px;
162
- transition: opacity 0.3s ease-in-out;
163
- }
164
- }
165
- &:hover {
166
- :global {
167
- .iconfont {
168
- opacity: 100;
169
- color: var(--color-primary);
170
- }
171
- }
172
- }
173
- }
174
- }
175
- &.Quote {
176
- padding-bottom: 56px;
177
- position: relative;
178
- .line {
179
- width: 100%;
180
- height: 1px;
181
- margin-top: 56px;
182
- background-color: #e1e1e1;
183
- }
184
- .circle {
185
- top: 18px;
186
- }
187
- .tail {
188
- display: none;
189
- }
190
- .content {
191
- margin-left: 0;
192
- }
193
- .title {
194
- cursor: pointer;
195
- padding: 12px;
196
- border-radius: 5px;
197
- margin-left: 60px;
198
- border: 1px solid #e1e1e1;
199
- display: flex;
200
- align-items: center;
201
- justify-content: space-between;
202
- transition: all 0.3s ease-in-out;
203
- .QuoteBoxLeft {
204
- display: flex;
205
- align-items: center;
206
- gap: 8px;
207
- .QuoteIcon {
208
- width: 40px;
209
- height: auto;
210
- }
211
- .QuoteText {
212
- font-size: 15px;
213
- font-weight: 650;
214
- }
215
- }
216
- .QuoteBoxRight {
217
- display: flex;
218
- align-items: center;
219
- gap: 12px;
220
- }
221
- &:hover {
222
- box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
223
- }
224
- }
225
- }
226
- &:last-child {
227
- .tail {
228
- display: none;
229
- }
230
- }
107
+ }
108
+ .StepAndQuote .tail {
109
+ position: absolute;
110
+ top: 24px;
111
+ left: 12px;
112
+ height: 100%;
113
+ border-left: 1px solid #e1e1e1;
114
+ }
115
+ .StepAndQuote .circle {
116
+ position: absolute;
117
+ width: 24px;
118
+ height: 24px;
119
+ left: 0px;
120
+ z-index: 1;
121
+ background-color: #FFFFFF;
122
+ border: 1px solid #e1e1e1;
123
+ border-radius: 100px;
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ font-size: 12px;
128
+ }
129
+ .StepAndQuote .content {
130
+ margin-left: 60px;
131
+ position: relative;
132
+ word-break: break-all;
133
+ }
134
+ .StepAndQuote.Step {
135
+ padding-bottom: 32px;
136
+ }
137
+ .StepAndQuote.Step .title {
138
+ font-size: 15px;
139
+ font-weight: 650;
140
+ margin-bottom: 5px;
141
+ cursor: pointer;
142
+ display: inline-block;
143
+ }
144
+ .StepAndQuote.Step .title :global .iconfont {
145
+ font-weight: normal;
146
+ opacity: 0;
147
+ width: 13px;
148
+ height: 13px;
149
+ color: #7f7f7f;
150
+ cursor: pointer;
151
+ padding: 0 8px;
152
+ font-size: 13px;
153
+ transition: opacity 0.3s ease-in-out;
154
+ }
155
+ .StepAndQuote.Step .title:hover :global .iconfont {
156
+ opacity: 100;
157
+ color: var(--color-primary);
158
+ }
159
+ .StepAndQuote.Quote {
160
+ padding-bottom: 56px;
161
+ position: relative;
162
+ }
163
+ .StepAndQuote.Quote .line {
164
+ width: 100%;
165
+ height: 1px;
166
+ margin-top: 56px;
167
+ background-color: #e1e1e1;
168
+ }
169
+ .StepAndQuote.Quote .circle {
170
+ top: 18px;
171
+ }
172
+ .StepAndQuote.Quote .tail {
173
+ display: none;
174
+ }
175
+ .StepAndQuote.Quote .content {
176
+ margin-left: 0;
177
+ }
178
+ .StepAndQuote.Quote .title {
179
+ cursor: pointer;
180
+ padding: 12px;
181
+ border-radius: 5px;
182
+ margin-left: 60px;
183
+ border: 1px solid #e1e1e1;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: space-between;
187
+ transition: all 0.3s ease-in-out;
188
+ }
189
+ .StepAndQuote.Quote .title .QuoteBoxLeft {
190
+ display: flex;
191
+ align-items: center;
192
+ gap: 8px;
193
+ }
194
+ .StepAndQuote.Quote .title .QuoteBoxLeft .QuoteIcon {
195
+ width: 40px;
196
+ height: auto;
197
+ }
198
+ .StepAndQuote.Quote .title .QuoteBoxLeft .QuoteText {
199
+ font-size: 15px;
200
+ font-weight: 650;
201
+ }
202
+ .StepAndQuote.Quote .title .QuoteBoxRight {
203
+ display: flex;
204
+ align-items: center;
205
+ gap: 12px;
206
+ }
207
+ .StepAndQuote.Quote .title:hover {
208
+ box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
209
+ }
210
+ .StepAndQuote:last-child .tail {
211
+ display: none;
231
212
  }
232
213
 
233
214
  /* src/Tab/index.less */
@@ -236,121 +217,115 @@
236
217
  gap: 16px;
237
218
  padding: 10px 0 24px 0;
238
219
  border-bottom: 1px solid #ebebeb;
239
- .tabItem {
240
- padding: 16px 28px;
241
- border: 1px solid #e1e1e1;
242
- border-radius: 5px;
243
- transition: all 0.3s ease-in-out;
244
- cursor: pointer;
245
- display: flex;
246
- flex-direction: column;
247
- align-items: center;
248
- justify-content: center;
249
- gap: 5px;
250
- .tabIcon {
251
- width: 28px;
252
- height: 28px;
253
- color: #959595;
254
- fill: currentColor;
255
- transition: all 0.3s ease-in-out;
256
- }
257
- &:hover {
258
- color: var(--color-primary, #fb9332);
259
- .tabIcon {
260
- color: var(--color-primary, #fb9332);
261
- }
262
- }
263
- &.active {
264
- color: var(--color-primary, #fb9332);
265
- border-color: var(--color-primary, #fb9332);
266
- .tabIcon {
267
- color: var(--color-primary, #fb9332);
268
- }
269
- }
270
- &.noFirstTabsItem {
271
- padding: 10px 22px;
272
- }
273
- &.hasIcon {
274
- padding: 10px 28px;
275
- }
276
- }
277
- &.noFirstTab {
278
- padding: 24px 0 24px 0;
279
- }
280
- &.isInternalChanged {
281
- margin-bottom: 24px;
282
- }
220
+ }
221
+ .Tab .tabItem {
222
+ padding: 16px 28px;
223
+ border: 1px solid #e1e1e1;
224
+ border-radius: 5px;
225
+ transition: all 0.3s ease-in-out;
226
+ cursor: pointer;
227
+ display: flex;
228
+ flex-direction: column;
229
+ align-items: center;
230
+ justify-content: center;
231
+ gap: 5px;
232
+ }
233
+ .Tab .tabItem .tabIcon {
234
+ width: 28px;
235
+ height: 28px;
236
+ color: #959595;
237
+ fill: currentColor;
238
+ transition: all 0.3s ease-in-out;
239
+ }
240
+ .Tab .tabItem:hover {
241
+ color: var(--color-primary, #fb9332);
242
+ }
243
+ .Tab .tabItem:hover .tabIcon {
244
+ color: var(--color-primary, #fb9332);
245
+ }
246
+ .Tab .tabItem.active {
247
+ color: var(--color-primary, #fb9332);
248
+ border-color: var(--color-primary, #fb9332);
249
+ }
250
+ .Tab .tabItem.active .tabIcon {
251
+ color: var(--color-primary, #fb9332);
252
+ }
253
+ .Tab .tabItem.noFirstTabsItem {
254
+ padding: 10px 22px;
255
+ }
256
+ .Tab .tabItem.hasIcon {
257
+ padding: 10px 28px;
258
+ }
259
+ .Tab.noFirstTab {
260
+ padding: 24px 0 24px 0;
261
+ }
262
+ .Tab.isInternalChanged {
263
+ margin-bottom: 24px;
283
264
  }
284
265
  .Tab + .Tab {
285
266
  margin-top: -24px;
286
267
  }
287
268
 
288
269
  /* src/Article/index.less */
289
- .Article {
290
- a {
291
- text-decoration: underline;
292
- text-decoration-color: var(--color-primary, #FB9332);
293
- }
294
- img {
295
- border: 1px solid #eeeeee;
296
- }
297
- b {
298
- color: #333333;
299
- }
300
- :first-child {
301
- margin-top: 0 !important;
302
- }
303
- :global {
304
- .title {
305
- font-size: 14px;
306
- margin-top: 16px;
307
- margin-bottom: 8px;
308
- font-weight: 650;
309
- }
310
- .desc {
311
- color: #999999;
312
- margin-top: var(--desc-margin-top, 16px);
313
- margin-bottom: 8px;
314
- }
315
- .title + .desc {
316
- --desc-margin-top: -6px;
317
- }
318
- .img-container {
319
- position: relative;
320
- cursor: pointer;
321
- img {
322
- width: 100%;
323
- }
324
- .iconfont {
325
- display: none;
326
- transition: all 0.3s ease;
327
- opacity: 0;
328
- position: absolute;
329
- top: 5px;
330
- right: 5px;
331
- background-color: rgba(128, 128, 128, 0.92);
332
- color: #ffffff;
333
- border-radius: 4px;
334
- padding: 2px 4px;
335
- font-size: 16px;
336
- }
337
- &:hover {
338
- .iconfont {
339
- display: block;
340
- opacity: 1;
341
- }
342
- }
343
- }
344
- .img-container + .img-container {
345
- margin-top: 10px;
346
- }
347
- li::before {
348
- content: "\2022";
349
- font-size: 1em;
350
- font-weight: 300;
351
- margin-right: 8px;
352
- }
353
- }
270
+ .Article a {
271
+ text-decoration: underline;
272
+ text-decoration-color: var(--color-primary, #FB9332);
273
+ }
274
+ .Article img {
275
+ border: 1px solid #eeeeee;
276
+ }
277
+ .Article b {
278
+ color: #333333;
279
+ }
280
+ .Article :first-child {
281
+ margin-top: 0 !important;
282
+ }
283
+ .Article :global .title {
284
+ font-size: 14px;
285
+ margin-top: 16px;
286
+ margin-bottom: 8px;
287
+ font-weight: 650;
288
+ }
289
+ .Article :global .desc {
290
+ color: #999999;
291
+ margin-top: var(--desc-margin-top, 16px);
292
+ margin-bottom: 8px;
293
+ }
294
+ .Article :global .title + .desc {
295
+ --desc-margin-top: -6px;
296
+ }
297
+ .Article :global .img-container {
298
+ position: relative;
299
+ cursor: pointer;
300
+ }
301
+ .Article :global .img-container img {
302
+ width: 100%;
303
+ }
304
+ .Article :global .img-container .iconfont {
305
+ display: none;
306
+ transition: all 0.3s ease;
307
+ opacity: 0;
308
+ position: absolute;
309
+ top: 5px;
310
+ right: 5px;
311
+ background-color: rgba(128, 128, 128, 0.92);
312
+ color: #ffffff;
313
+ border-radius: 4px;
314
+ padding: 2px 4px;
315
+ font-size: 16px;
316
+ }
317
+ .Article :global .img-container:hover .iconfont {
318
+ display: block;
319
+ opacity: 1;
320
+ }
321
+ .Article :global .img-container + .img-container {
322
+ margin-top: 10px;
323
+ }
324
+ .Article :global li::before {
325
+ content: "\2022";
326
+ font-size: 1em;
327
+ font-weight: 300;
328
+ margin-right: 8px;
354
329
  }
355
330
 
356
331
  /* src/Dictionary/index.less */
@@ -358,28 +333,28 @@
358
333
  display: flex;
359
334
  margin-top: 10px;
360
335
  gap: 20px;
361
- .item {
362
- display: flex;
363
- flex-direction: column;
364
- align-items: center;
365
- justify-content: center;
366
- gap: 4px;
367
- padding: 12px 20px 8px;
368
- border: 1px solid #e1e1e1;
369
- border-radius: 5px;
370
- cursor: pointer;
371
- text-decoration: none;
372
- .dicIcon {
373
- width: 16px;
374
- height: 16px;
375
- }
376
- .title {
377
- color: #333333;
378
- }
379
- &:hover {
380
- border-color: var(--color-primary, #fb9332);
381
- }
382
- }
336
+ }
337
+ .Dictionary .item {
338
+ display: flex;
339
+ flex-direction: column;
340
+ align-items: center;
341
+ justify-content: center;
342
+ gap: 4px;
343
+ padding: 12px 20px 8px;
344
+ border: 1px solid #e1e1e1;
345
+ border-radius: 5px;
346
+ cursor: pointer;
347
+ text-decoration: none;
348
+ }
349
+ .Dictionary .item .dicIcon {
350
+ width: 16px;
351
+ height: 16px;
352
+ }
353
+ .Dictionary .item .title {
354
+ color: #333333;
355
+ }
356
+ .Dictionary .item:hover {
357
+ border-color: var(--color-primary, #fb9332);
383
358
  }
384
359
 
385
360
  /* src/HelpModal/index.less */
@@ -388,28 +363,26 @@
388
363
  bottom: 0;
389
364
  padding: 40px;
390
365
  height: 100vh;
391
- :global {
392
- .pgant-modal-content {
393
- width: 100%;
394
- height: 100%;
395
- padding: 0;
396
- .pgant-modal-body {
397
- padding: 0;
398
- height: 100%;
399
- }
400
- }
401
- }
402
- .HelpModalSkeleton {
403
- padding: 40px;
404
- width: 100%;
405
- height: 100%;
406
- box-sizing: border-box;
407
- }
408
- .HelpModalIframe {
409
- width: 100%;
410
- height: 100%;
411
- border: none;
412
- }
366
+ }
367
+ .HelpModal :global .pgant-modal-content {
368
+ width: 100%;
369
+ height: 100%;
370
+ padding: 0;
371
+ }
372
+ .HelpModal :global .pgant-modal-content .pgant-modal-body {
373
+ padding: 0;
374
+ height: 100%;
375
+ }
376
+ .HelpModal .HelpModalSkeleton {
377
+ padding: 40px;
378
+ width: 100%;
379
+ height: 100%;
380
+ box-sizing: border-box;
381
+ }
382
+ .HelpModal .HelpModalIframe {
383
+ width: 100%;
384
+ height: 100%;
385
+ border: none;
413
386
  }
414
387
 
415
388
  /* src/Extra/index.less */
@@ -419,7 +392,7 @@
419
392
  top: 0;
420
393
  display: flex;
421
394
  gap: 12px;
422
- .ExtraButton {
423
- border-radius: 3px;
424
- }
395
+ }
396
+ .Extra .ExtraButton {
397
+ border-radius: 3px;
425
398
  }
package/package.json CHANGED
@@ -1,7 +1,10 @@
1
1
  {
2
2
  "name": "quick-start-feature-box",
3
- "version": "1.0.4",
4
- "keywords": ["react", "components"],
3
+ "version": "1.0.5",
4
+ "keywords": [
5
+ "react",
6
+ "components"
7
+ ],
5
8
  "author": "",
6
9
  "license": "MIT",
7
10
  "type": "module",
@@ -21,6 +24,7 @@
21
24
  "react-router-dom": "^6.3.0 || ^6.23.0"
22
25
  },
23
26
  "devDependencies": {
27
+ "esbuild-plugin-less": "^1.3.20",
24
28
  "less": "^4.2.2",
25
29
  "less-loader": "^12.2.0",
26
30
  "tsup": "^8.3.5",
@@ -36,4 +40,4 @@
36
40
  },
37
41
  "./dist/index.css": "./dist/index.css"
38
42
  }
39
- }
43
+ }