checkbox.scss 1.6 KB

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