table-checkbox.wxss 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. @charset "UTF-8";
  2. /**
  3. * 下方引入的为Tuniao UI的集成样式文件,为scss预处理器,其中包含了一些"tn-"开头的自定义变量
  4. * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
  5. * Tuniao UI自定义的css类名和scss变量,均以"tn-"开头,不会造成冲突,请放心使用
  6. */
  7. .uni-table-checkbox {
  8. display: flex;
  9. flex-direction: row;
  10. align-items: center;
  11. justify-content: center;
  12. position: relative;
  13. margin: 5px 0;
  14. cursor: pointer;
  15. }
  16. .uni-table-checkbox .checkbox__inner {
  17. flex-shrink: 0;
  18. box-sizing: border-box;
  19. position: relative;
  20. width: 16px;
  21. height: 16px;
  22. border: 1px solid #DCDFE6;
  23. border-radius: 2px;
  24. background-color: #fff;
  25. z-index: 1;
  26. }
  27. .uni-table-checkbox .checkbox__inner .checkbox__inner-icon {
  28. position: absolute;
  29. top: 2px;
  30. left: 5px;
  31. height: 7px;
  32. width: 3px;
  33. border: 1px solid #fff;
  34. border-left: 0;
  35. border-top: 0;
  36. opacity: 0;
  37. -webkit-transform-origin: center;
  38. transform-origin: center;
  39. -webkit-transform: rotate(45deg);
  40. transform: rotate(45deg);
  41. box-sizing: content-box;
  42. }
  43. .uni-table-checkbox .checkbox__inner.checkbox--indeterminate {
  44. border-color: #007aff;
  45. background-color: #007aff;
  46. }
  47. .uni-table-checkbox .checkbox__inner.checkbox--indeterminate .checkbox__inner-icon {
  48. position: absolute;
  49. opacity: 1;
  50. -webkit-transform: rotate(0deg);
  51. transform: rotate(0deg);
  52. height: 2px;
  53. top: 0;
  54. bottom: 0;
  55. margin: auto;
  56. left: 0px;
  57. right: 0px;
  58. bottom: 0;
  59. width: auto;
  60. border: none;
  61. border-radius: 2px;
  62. -webkit-transform: scale(0.5);
  63. transform: scale(0.5);
  64. background-color: #fff;
  65. }
  66. .uni-table-checkbox .checkbox__inner:hover {
  67. border-color: #007aff;
  68. }
  69. .uni-table-checkbox .checkbox__inner.is-disable {
  70. background-color: #F2F6FC;
  71. border-color: #DCDFE6;
  72. }
  73. .uni-table-checkbox .checkbox__inner.is-checked {
  74. border-color: #007aff;
  75. background-color: #007aff;
  76. }
  77. .uni-table-checkbox .checkbox__inner.is-checked .checkbox__inner-icon {
  78. opacity: 1;
  79. -webkit-transform: rotate(45deg);
  80. transform: rotate(45deg);
  81. }
  82. .uni-table-checkbox .checkbox__inner.is-checked.is-disable {
  83. opacity: 0.4;
  84. }