radio-button.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .vxe-radio--button {
  2. .vxe-radio--label {
  3. background-color: var(--vxe-ui-layout-background-color);
  4. }
  5. &:first-child {
  6. .vxe-radio--label {
  7. border-left: 1px solid var(--vxe-ui-input-border-color);
  8. border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
  9. }
  10. }
  11. &:last-child {
  12. .vxe-radio--label {
  13. border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
  14. }
  15. }
  16. > input {
  17. &:checked+.vxe-radio--label {
  18. color: #fff;
  19. background-color: var(--vxe-ui-font-primary-color);
  20. }
  21. }
  22. .vxe-radio--label {
  23. padding: 0 1em;
  24. line-height: calc(var(--vxe-ui-button-height-default) - 2px);
  25. display: inline-block;
  26. border-style: solid;
  27. border-color: var(--vxe-ui-input-border-color);
  28. border-width: 1px 1px 1px 0;
  29. max-width: 50em;
  30. overflow: hidden;
  31. text-overflow: ellipsis;
  32. white-space: nowrap;
  33. }
  34. & > input {
  35. &:focus {
  36. &+.vxe-radio--label {
  37. border-color: var(--vxe-ui-font-primary-color);
  38. box-shadow: 0 0 0.2em 0 var(--vxe-ui-font-primary-color);
  39. }
  40. }
  41. }
  42. &.size--medium {
  43. .vxe-radio--label {
  44. line-height: calc(var(--vxe-ui-button-height-medium) - 2px);
  45. }
  46. }
  47. &.size--small {
  48. .vxe-radio--label {
  49. line-height: calc(var(--vxe-ui-button-height-small) - 2px);
  50. }
  51. }
  52. &.size--mini {
  53. .vxe-radio--label {
  54. line-height: calc(var(--vxe-ui-button-height-mini) - 2px);
  55. }
  56. }
  57. }