radio.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @use '../helpers/baseMixin.scss';
  2. /*radio-group*/
  3. .vxe-radio-group {
  4. display: inline-block;
  5. vertical-align: middle;
  6. line-height: 1;
  7. font-size: 0;
  8. }
  9. .vxe-radio--readonly {
  10. color: var(--vxe-ui-font-color);
  11. display: inline-flex;
  12. }
  13. /*radio*/
  14. .vxe-radio {
  15. display: inline-block;
  16. vertical-align: middle;
  17. white-space: nowrap;
  18. line-height: 1;
  19. @include baseMixin.createRadioIcon();
  20. > input {
  21. &[type="radio"] {
  22. position: absolute;
  23. width: 0;
  24. height: 0;
  25. border: 0;
  26. appearance: none;
  27. }
  28. }
  29. .vxe-radio--label {
  30. vertical-align: middle;
  31. display: inline-block;
  32. max-width: 50em;
  33. overflow: hidden;
  34. text-overflow: ellipsis;
  35. white-space: nowrap;
  36. }
  37. &:not(.is--disabled) {
  38. > input {
  39. &:focus+.vxe-radio--icon {
  40. color: var(--vxe-ui-font-primary-darken-color);
  41. }
  42. }
  43. }
  44. }
  45. .vxe-radio {
  46. font-size: var(--vxe-ui-font-size-default);
  47. &.size--medium {
  48. font-size: var(--vxe-ui-font-size-medium);
  49. }
  50. &.size--small {
  51. font-size: var(--vxe-ui-font-size-small);
  52. }
  53. &.size--mini {
  54. font-size: var(--vxe-ui-font-size-mini);
  55. }
  56. &:last-of-type {
  57. margin-right: 0;
  58. }
  59. }
  60. .vxe-radio--default,
  61. .vxe-radio-group {
  62. margin-right: var(--vxe-ui-base-margin-gap-default);
  63. &.size--medium {
  64. margin-right: var(--vxe-ui-base-margin-gap-medium);
  65. }
  66. &.size--small {
  67. margin-right: var(--vxe-ui-base-margin-gap-small);
  68. }
  69. &.size--mini {
  70. margin-right: var(--vxe-ui-base-margin-gap-mini);
  71. }
  72. &:last-of-type {
  73. margin-right: 0;
  74. }
  75. }