checkbox.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**Variable**/
  2. @import './helpers/mixin.scss';
  3. @import './base/common.scss';
  4. @import './base/checked.scss';
  5. /*checkbox-group*/
  6. .vxe-checkbox-group {
  7. display: inline-block;
  8. vertical-align: middle;
  9. line-height: 1;
  10. }
  11. /*checkbox*/
  12. .vxe-checkbox {
  13. @extend %XECheckboxIcon;
  14. display: inline-block;
  15. vertical-align: middle;
  16. white-space: nowrap;
  17. line-height: 1;
  18. &+.vxe-checkbox {
  19. margin-left: 10px;
  20. }
  21. > input {
  22. &[type="checkbox"] {
  23. position: absolute;
  24. width: 0;
  25. height: 0;
  26. border: 0;
  27. appearance: none;
  28. }
  29. }
  30. &.is--indeterminate {
  31. > input {
  32. &:not(:checked) {
  33. &+.vxe-checkbox--icon {
  34. color: $vxe-primary-color;
  35. }
  36. }
  37. }
  38. }
  39. &:not(.is--disabled) {
  40. & > input {
  41. &:focus {
  42. &+.vxe-checkbox--icon {
  43. color: $vxe-primary-color;
  44. box-shadow: 0 0 0.2em 0 $vxe-primary-color;
  45. }
  46. }
  47. }
  48. &:hover {
  49. > input {
  50. &+.vxe-checkbox--icon {
  51. border-color: $vxe-primary-color;
  52. }
  53. }
  54. }
  55. }
  56. &.is--disabled {
  57. cursor: not-allowed;
  58. > input {
  59. &+.vxe-checkbox--icon {
  60. color: $vxe-input-disabled-color;
  61. &+.vxe-checkbox--label {
  62. color: $vxe-disabled-color;
  63. }
  64. }
  65. &:checked+.vxe-checkbox--icon {
  66. color: $vxe-input-disabled-color;
  67. }
  68. }
  69. }
  70. .vxe-checkbox--label {
  71. padding-left: 0.5em;
  72. vertical-align: middle;
  73. display: inline-block;
  74. max-width: 50em;
  75. @extend %TextEllipsis;
  76. }
  77. }
  78. .vxe-checkbox {
  79. font-size: $vxe-font-size;
  80. &.size--medium {
  81. font-size: $vxe-font-size-medium;
  82. }
  83. &.size--small {
  84. font-size: $vxe-font-size-small;
  85. }
  86. &.size--mini {
  87. font-size: $vxe-font-size-mini;
  88. }
  89. }