@aloudata/aloudata-design 0.4.8-beta.11 → 0.4.8-beta.12

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 (5) hide show
  1. package/dist/Radio/components/Group/index.js +4 -2
  2. package/dist/Radio/components/Radio/index.js +4 -0
  3. package/dist/Radio/interface/radioGroup.d.ts +1 -1
  4. package/dist/Radio/style/index.less +78 -16
  5. package/package.json +1 -1
package/dist/Radio/components/Group/index.js CHANGED
@@ -70,8 +70,10 @@ export default function RadioGroup(props) {
70
70
  }
71
71
  }, /*#__PURE__*/React.createElement("div", {
72
72
  className: getWrapperClass()
73
- }, children, radioGroupStyle === 'filled' && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
74
- className: "ald-radio-filled-slider",
73
+ }, children, (radioGroupStyle === 'filled' || radioGroupStyle === 'filter') && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
74
+ className: classNames('ald-radio-filled-slider ', {
75
+ 'ald-radio-filled-slider-filter': radioGroupStyle === 'filter'
76
+ }),
75
77
  ref: sliderRef
76
78
  }) : null));
77
79
  }
package/dist/Radio/components/Radio/index.js CHANGED
@@ -37,6 +37,8 @@ export default function Radio(props) {
37
37
  otherClass = 'ald-radio-button-wrapper-filled';
38
38
  } else if (groupContext.radioGroupStyle === 'border') {
39
39
  otherClass = 'ald-radio-button-wrapper-border';
40
+ } else if (groupContext.radioGroupStyle === 'filter') {
41
+ otherClass = 'ald-radio-button-wrapper-filter';
40
42
  } else {
41
43
  otherClass = 'ald-radio-button-wrapper-border-primary';
42
44
  }
@@ -45,6 +47,8 @@ export default function Radio(props) {
45
47
  otherClass = 'ald-radio-icon-button-wrapper-filled';
46
48
  } else if (groupContext.radioGroupStyle === 'border') {
47
49
  otherClass = 'ald-radio-icon-button-wrapper-border';
50
+ } else if (groupContext.radioGroupStyle === 'filter') {
51
+ otherClass = 'ald-radio-icon-button-wrapper-filter';
48
52
  } else {
49
53
  otherClass = 'ald-radio-icon-button-wrapper-border-primary';
50
54
  }
package/dist/Radio/interface/radioGroup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary';
2
+ export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary' | 'filter';
3
3
  export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
4
4
  export declare type TRadioType = 'radio' | 'button' | 'iconButton';
5
5
  export interface IRadioGroupProps {
package/dist/Radio/style/index.less CHANGED
@@ -12,7 +12,7 @@
12
12
  @radio-button-padding-middle: 12px;
13
13
 
14
14
  // Radio组件基础样式
15
- [class^="ald-radio"] {
15
+ [class^='ald-radio'] {
16
16
  box-sizing: border-box;
17
17
  }
18
18
 
@@ -120,7 +120,9 @@
120
120
  .ald-radio-button-wrapper-border-primary,
121
121
  .ald-radio-button-wrapper-border,
122
122
  .ald-radio-icon-button-wrapper-border,
123
- .ald-radio-icon-button-wrapper-border-primary {
123
+ .ald-radio-icon-button-wrapper-border-primary,
124
+ .ald-radio-button-wrapper-filter,
125
+ .ald-radio-icon-button-wrapper-filter {
124
126
  &.ald-radio-label.ald-radio-wrapper-disabled {
125
127
  opacity: 0.5;
126
128
 
@@ -167,6 +169,11 @@
167
169
  transition: width, left, height 0.3s, 0.3s, 0.3s ease;
168
170
  }
169
171
 
172
+ .ald-radio-filled-slider-filter {
173
+ background: @B90;
174
+ border: 0;
175
+ }
176
+
170
177
  // button状态下的样式
171
178
  .ald-radio-group-button,
172
179
  .ald-radio-group-icon-button {
@@ -241,34 +248,37 @@
241
248
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border,
242
249
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
243
250
  background: @BG80;
244
- transition: background 0.5s ease;
251
+ transition: background 0.3s ease;
245
252
 
246
253
  .ald-radio-desc {
247
254
  position: relative;
248
255
  color: @NL0;
249
- transition: text-shadow 0.5s ease;
256
+ transition: text-shadow 0.3s ease, color 0.3s ease;
250
257
  }
251
258
  }
252
259
 
253
260
  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
254
261
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
255
262
  background: @B40;
256
- transition: background 0.5s ease;
263
+ transition: background 0.3s ease;
257
264
 
258
265
  .ald-radio-desc {
259
266
  position: relative;
260
267
  color: @ND0;
261
- transition: text-shadow 0.5s ease;
268
+ transition: text-shadow 0.3s ease, color 0.3s ease;
262
269
  }
263
270
  }
264
271
 
265
272
  // filled样式的button
266
- .ald-radio-button-wrapper-filled {
273
+ .ald-radio-button-wrapper-filled,
274
+ .ald-radio-button-wrapper-filter {
267
275
  padding: 0 @radio-button-padding;
268
276
  }
269
277
 
270
278
  .ald-radio-button-wrapper-filled,
271
- .ald-radio-icon-button-wrapper-filled {
279
+ .ald-radio-icon-button-wrapper-filled,
280
+ .ald-radio-button-wrapper-filter,
281
+ .ald-radio-icon-button-wrapper-filter {
272
282
  position: relative;
273
283
  display: flex;
274
284
  align-items: center;
@@ -300,21 +310,41 @@
300
310
  }
301
311
 
302
312
  .ald-radio-desc {
303
- font-weight: 400;
313
+ font-weight: 600;
304
314
  }
305
315
  }
306
316
 
317
+ .ald-radio-button-wrapper-filter,
318
+ .ald-radio-icon-button-wrapper-filter {
319
+ background-color: @BG100;
320
+ }
321
+
307
322
  .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
308
323
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filled {
309
324
  position: relative;
310
325
 
311
326
  .ald-radio-desc {
312
327
  position: relative;
313
- font-weight: 400;
328
+ font-weight: 600;
329
+ z-index: 2;
330
+ color: @NL0;
331
+ }
332
+ }
333
+
334
+ .ald-radio-wrapper-checked.ald-radio-button-wrapper-filter,
335
+ .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filter {
336
+ position: relative;
337
+ border-radius: @border-radius-middle;
338
+ background-color: @B90;
339
+
340
+ .ald-radio-desc {
341
+ position: relative;
342
+ font-weight: 600;
314
343
  z-index: 2;
315
344
  color: @NL0;
316
345
  }
317
346
  }
347
+
318
348
  // 各种大小
319
349
  &.ald-radio-group-middle {
320
350
  height: @radio-group-height-middle;
@@ -325,8 +355,15 @@
325
355
  }
326
356
  }
327
357
 
328
- .ald-radio-icon-button-wrapper-filled {
358
+ .ald-radio-icon-button-wrapper-filled,
359
+ .ald-radio-icon-button-wrapper-filter {
329
360
  padding: 0 @radio-icon-button-padding-middle;
361
+
362
+ &.ald-radio-label {
363
+ .ald-radio-desc {
364
+ font-size: @font-size-middle + 1;
365
+ }
366
+ }
330
367
  }
331
368
 
332
369
  .ald-radio-button-wrapper-border,
@@ -335,8 +372,9 @@
335
372
  }
336
373
 
337
374
  .ald-radio-icon-button-wrapper-border,
338
- .ald-radio-icon-button-wrapper-border-primary {
339
- padding: 0 @radio-icon-button-padding-middle - 1;
375
+ .ald-radio-icon-button-wrapper-border-primary,
376
+ .ald-radio-icon-button-wrapper-filter {
377
+ padding: 0 @radio-icon-button-padding-middle;
340
378
 
341
379
  &.ald-radio-label .ald-radio-desc {
342
380
  font-size: 14px;
@@ -358,8 +396,15 @@
358
396
  }
359
397
  }
360
398
 
361
- .ald-radio-icon-button-wrapper-filled {
399
+ .ald-radio-icon-button-wrapper-filled,
400
+ .ald-radio-icon-button-wrapper-filter {
362
401
  padding: 0 @radio-icon-button-padding-small;
402
+
403
+ &.ald-radio-label {
404
+ .ald-radio-desc {
405
+ font-size: 14px;
406
+ }
407
+ }
363
408
  }
364
409
 
365
410
  .ald-radio-button-wrapper-border,
@@ -369,7 +414,7 @@
369
414
 
370
415
  .ald-radio-icon-button-wrapper-border,
371
416
  .ald-radio-icon-button-wrapper-border-primary {
372
- padding: 0 @radio-icon-button-padding-small - 1;
417
+ padding: 0 @radio-icon-button-padding-small;
373
418
 
374
419
  &.ald-radio-label .ald-radio-desc {
375
420
  font-size: 14px;
@@ -396,6 +441,11 @@
396
441
  }
397
442
  }
398
443
 
444
+ .ald-radio-button-wrapper-filter,
445
+ .ald-radio-icon-button-wrapper-filter {
446
+ border-radius: @border-radius-small;
447
+ }
448
+
399
449
  .ald-radio-filled-slider {
400
450
  border-radius: @border-radius-small;
401
451
  }
@@ -410,8 +460,15 @@
410
460
  }
411
461
  }
412
462
 
413
- .ald-radio-icon-button-wrapper-filled {
463
+ .ald-radio-icon-button-wrapper-filled,
464
+ .ald-radio-icon-button-wrapper-filter {
414
465
  padding: 0 @radio-icon-button-padding-large;
466
+
467
+ &.ald-radio-label {
468
+ .ald-radio-desc {
469
+ font-size: 20px;
470
+ }
471
+ }
415
472
  }
416
473
 
417
474
  .ald-radio-button-wrapper-border,
@@ -448,6 +505,11 @@
448
505
  }
449
506
  }
450
507
 
508
+ .ald-radio-button-wrapper-filter,
509
+ .ald-radio-icon-button-wrapper-filter {
510
+ border-radius: @border-radius-large;
511
+ }
512
+
451
513
  .ald-radio-filled-slider {
452
514
  border-radius: @border-radius-large;
453
515
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.4.8-beta.11",
3
+ "version": "0.4.8-beta.12",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",