index.less 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .new1Radio {
  2. border: 1px solid #E2E5EA;
  3. border-radius: 999px;
  4. padding: 3px;
  5. display: inline-flex;
  6. gap: 4px;
  7. >div {
  8. height: 28px;
  9. padding: 0 20px;
  10. box-sizing: border-box;
  11. border-radius: 999px;
  12. align-items: center;
  13. position: relative;
  14. line-height: 28px;
  15. color: rgba(0, 0, 0, 0.95);
  16. font-weight: 500;
  17. cursor: pointer;
  18. user-select: none;
  19. >span {
  20. display: block;
  21. transition-property: opacity, transform, right, left;
  22. transition-duration: .2s;
  23. }
  24. >div {
  25. position: absolute;
  26. left: 12px;
  27. content: '';
  28. width: 16px;
  29. height: 16px;
  30. color: #1890ff;
  31. opacity: 0;
  32. }
  33. &.newRadioActive {
  34. background: #f2f4fa;
  35. >div {
  36. opacity: 1;
  37. }
  38. >span {
  39. transform: translateX(8px);
  40. font-weight: 600;
  41. }
  42. }
  43. &.disabled {
  44. color: rgb(196, 199, 204);
  45. cursor: not-allowed;
  46. }
  47. }
  48. }