eleTree.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /* #region tree */
  2. .eleTree{
  3. min-width: 200px;
  4. position: relative;
  5. overflow: hidden;
  6. }
  7. .eleTree-hide{
  8. display: none;
  9. }
  10. .eleTree-node-content{
  11. cursor: pointer;
  12. height: 28px;
  13. line-height: 1.5;
  14. }
  15. .eleTree-node-content.eleTree-node-content-active{
  16. color: #1E9FFF;
  17. background-color: #eee;
  18. }
  19. .eleTree-node-content:hover{
  20. background-color: #eee;
  21. }
  22. /* #regionTree .eleTree-node-content-label{
  23. font-size: 15px;
  24. } */
  25. .eleTree-node-content-icon .layui-icon{
  26. padding: 6px 3px;
  27. color: #c0c4cc;
  28. font-size: 12px;
  29. display: inline-block;
  30. transform: rotate(0deg);
  31. transition: transform .3s ease-in-out;
  32. }
  33. .eleTree-node-content-iconfont .iconfont{
  34. padding: 0 0 0 5px;
  35. color: #999;
  36. font-size: 18px;
  37. display: inline-block;
  38. vertical-align: middle;
  39. }
  40. .eleTree-node-content-iconfont .icon-folder{
  41. color: #ff9800;
  42. }
  43. .eleTree-node-content-iconfont .icon-file{
  44. color: #457fd9;
  45. }
  46. .eleTree-node-content-btn{
  47. float: right;
  48. margin-top: 3px;
  49. }
  50. .eleTree-node-content-btn .layui-lock{
  51. color: #f8bf00;
  52. font-weight: bold;
  53. }
  54. .eleTree-node-content-btn .layui-forbid{
  55. color: red;
  56. font-weight: bold;
  57. }
  58. .eleTree-node-content-icon .layui-icon.icon-rotate{
  59. transform: rotate(90deg);
  60. }
  61. .eleTree-node-content .layui-form-checkbox[lay-skin=primary] i{
  62. width: 13px;
  63. height: 14px;
  64. line-height: 1.3;
  65. }
  66. .eleTree-node-content-label{
  67. padding-left: 5px;
  68. }
  69. /* checkbox第三种状态 */
  70. input.eleTree-hideen[type=checkbox]{
  71. display: none;
  72. }
  73. .eleTree-checkbox {
  74. height: auto!important;
  75. line-height: normal!important;
  76. min-height: 12px;
  77. border: none!important;
  78. margin-right: 0;
  79. padding-left: 18px;
  80. position: relative;
  81. display: inline-block;
  82. }
  83. .eleTree-checkbox i {
  84. left: 0;
  85. border: 1px solid #d2d2d2;
  86. font-size: 12px;
  87. border-radius: 2px;
  88. background-color: #fff;
  89. -webkit-transition: .1s linear;
  90. transition: .1s linear;
  91. position: absolute;
  92. top: 0;
  93. color: #fff;
  94. cursor: pointer;
  95. text-align: center;
  96. width: 13px;
  97. height: 14px;
  98. line-height: 1.3;
  99. }
  100. .eleTree-checkbox i:hover {
  101. border-color: #5FB878;
  102. }
  103. .eleTree-checkbox-checked i {
  104. border-color: #5FB878;
  105. background-color: #5FB878;
  106. color: #fff;
  107. }
  108. .eleTree-checkbox-line:after{
  109. content: "";
  110. position: relative;
  111. width: 8px;
  112. height: 1px;
  113. background-color: #fff;
  114. display: inline-block;
  115. top: -4px;
  116. }
  117. .eleTree-checkbox.eleTree-checkbox-disabled i{
  118. cursor: not-allowed;
  119. background-color: #f2f6fc;
  120. border-color: #dcdfe6;
  121. color: #c2c2c2;
  122. }
  123. .eleTree-checkbox.eleTree-checkbox-disabled i.eleTree-checkbox-line:after{
  124. background-color: #c2c2c2;
  125. }
  126. .eleTree-checkbox.eleTree-checkbox-disabled i:hover{
  127. border-color: #dcdfe6;
  128. }
  129. #tree-menu{
  130. position: absolute;
  131. z-index: 1001;
  132. border: 1px solid #e4e7ed;
  133. border-radius: 4px;
  134. background-color: #fff;
  135. box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  136. box-sizing: border-box;
  137. margin: 0;
  138. }
  139. #tree-menu li>a{
  140. display: block;
  141. padding: 0 1.5em;
  142. text-decoration: none;
  143. width: auto;
  144. color: #000;
  145. white-space: nowrap;
  146. line-height: 2.4em;
  147. text-shadow: 1px 1px 0 #fff;
  148. border-radius: 1px;
  149. font-size: 13px;
  150. }
  151. #tree-menu li>a:hover{
  152. background-color: #e8eff7;
  153. }
  154. .tree-menu-bg{
  155. background-color: #ccc;
  156. }
  157. /* #endregion */