ly-tree.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. /* lyTree-start */
  2. .ly-tree {
  3. position: relative;
  4. cursor: default;
  5. background: #FFF;
  6. color: #606266;
  7. padding: 30rpx;
  8. }
  9. .ly-tree-node {
  10. white-space: nowrap;
  11. outline: 0
  12. }
  13. .ly-tree-node:focus>.ly-tree-node__content {
  14. background-color: #F5F7FA
  15. }
  16. .ly-tree-node__content {
  17. display: -webkit-box;
  18. display: -ms-flexbox;
  19. display: flex;
  20. -webkit-box-align: center;
  21. -ms-flex-align: center;
  22. align-items: center;
  23. height: 70rpx;
  24. cursor: pointer
  25. }
  26. .ly-tree-node__content>.ly-tree-node__expand-icon {
  27. padding: 12rpx;
  28. }
  29. .ly-tree-node__checkbox {
  30. display: flex;
  31. margin-right: 16rpx;
  32. width: 40rpx;
  33. height: 40rpx;
  34. }
  35. .ly-tree-node__checkbox>image {
  36. width: 40rpx;
  37. height: 40rpx;
  38. }
  39. .ly-tree-node__expand-icon {
  40. cursor: pointer;
  41. color: #C0C4CC;
  42. font-size: 28rpx;
  43. -webkit-transform: rotate(0);
  44. transform: rotate(0);
  45. -webkit-transition: -webkit-transform .3s ease-in-out;
  46. transition: -webkit-transform .3s ease-in-out;
  47. transition: transform .3s ease-in-out;
  48. transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
  49. }
  50. .ly-tree-node__expand-icon.expanded {
  51. -webkit-transform: rotate(90deg);
  52. transform: rotate(90deg)
  53. }
  54. .ly-tree-node__expand-icon.is-leaf {
  55. color: transparent;
  56. cursor: default
  57. }
  58. .ly-tree-node__icon {
  59. width: 34rpx;
  60. height: 34rpx;
  61. overflow: hidden;
  62. margin-right: 16rpx;
  63. }
  64. .ly-tree-node__label {
  65. font-size: 30rpx;
  66. padding-right: 30rpx;
  67. }
  68. .ly-tree-node__loading-icon {
  69. margin-right: 16rpx;
  70. font-size: 28rpx;
  71. color: #C0C4CC;
  72. -webkit-animation: rotating 2s linear infinite;
  73. animation: rotating 2s linear infinite
  74. }
  75. .ly-tree-node>.ly-tree-node__children {
  76. background-color: transparent
  77. }
  78. .ly-tree-node>.ly-tree-node__children.collapse-transition {
  79. transition: height .3s ease-in-out;
  80. }
  81. .ly-tree-node.is-expanded>.ly-tree-node__children {
  82. display: block
  83. }
  84. .ly-tree--highlight-current .ly-tree-node.is-current>.ly-tree-node__content {
  85. background-color: #F5F7FA;
  86. color:#0A8CD5;
  87. }
  88. .ly-tree-node_collapse {
  89. overflow: hidden;
  90. padding-top: 0;
  91. padding-bottom: 0;
  92. }
  93. /* lyTree-end */
  94. /* lyRadio/lyCheckbox-start */
  95. .ly-checkbox,
  96. .ly-radio {
  97. color: #606266;
  98. font-weight: 500;
  99. font-size: 28rpx;
  100. cursor: pointer;
  101. user-select: none;
  102. margin-right: 16rpx
  103. }
  104. .ly-checkbox__input,
  105. .ly-radio__input {
  106. cursor: pointer;
  107. outline: 0;
  108. line-height: 1;
  109. vertical-align: middle
  110. }
  111. .ly-checkbox__input.is-disabled .ly-checkbox__inner,
  112. .ly-radio__input.is-disabled .ly-radio__inner {
  113. background-color: #edf2fc;
  114. border-color: #DCDFE6;
  115. cursor: not-allowed
  116. }
  117. .ly-checkbox__input.is-disabled .ly-checkbox__inner::after,
  118. .ly-radio__input.is-disabled .ly-radio__inner::after {
  119. cursor: not-allowed;
  120. border-color: #C0C4CC
  121. }
  122. .ly-checkbox__input.is-disabled .ly-checkbox__inner+.ly-checkbox__label,
  123. .ly-radio__input.is-disabled .ly-radio__inner+.ly-radio__label {
  124. cursor: not-allowed
  125. }
  126. .ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner,
  127. .ly-radio__input.is-disabled.is-checked .ly-radio__inner {
  128. background-color: #F2F6FC;
  129. border-color: #DCDFE6
  130. }
  131. .ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner::after,
  132. .ly-radio__input.is-disabled.is-checked .ly-radio__inner::after {
  133. border-color: #C0C4CC
  134. }
  135. .ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner {
  136. background-color: #F2F6FC;
  137. border-color: #DCDFE6
  138. }
  139. .ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner::before {
  140. background-color: #C0C4CC;
  141. border-color: #C0C4CC
  142. }
  143. .ly-checkbox__input.is-checked .ly-checkbox__inner,
  144. .ly-radio__input.is-checked .ly-radio__inner,
  145. .ly-checkbox__input.is-indeterminate .ly-checkbox__inner {
  146. background-color: #409EFF;
  147. border-color: #409EFF
  148. }
  149. .ly-checkbox__input.is-disabled+text.ly-checkbox__label,
  150. .ly-radio__input.is-disabled+text.ly-radio__label {
  151. color: #C0C4CC;
  152. cursor: not-allowed
  153. }
  154. .ly-checkbox__input.is-checked .ly-checkbox__inner::after,
  155. .ly-radio__input.is-checked .ly-radio__inner::after {
  156. -webkit-transform: rotate(45deg) scaleY(1);
  157. transform: rotate(45deg) scaleY(1)
  158. }
  159. .ly-checkbox__input.is-checked+.ly-checkbox__label,
  160. .ly-radio__input.is-checked+.ly-radio__label {
  161. color: #409EFF
  162. }
  163. .ly-checkbox__input.is-focus .ly-checkbox__inner,
  164. .ly-radio__input.is-focus .ly-radio__inner {
  165. border-color: #409EFF
  166. }
  167. .ly-checkbox__input.is-indeterminate .ly-checkbox__inner::before {
  168. content: '';
  169. position: absolute;
  170. display: block;
  171. background-color: #FFF;
  172. height: 6rpx;
  173. -webkit-transform: scale(.5);
  174. transform: scale(.5);
  175. left: 0;
  176. right: 0;
  177. top: 10rpx
  178. }
  179. .ly-checkbox__input.is-indeterminate .ly-checkbox__inner::after {
  180. display: none
  181. }
  182. .ly-checkbox__inner,
  183. .ly-radio__inner {
  184. display: inline-block;
  185. position: relative;
  186. border: 2rpx solid #DCDFE6;
  187. border-radius: 4rpx;
  188. -webkit-box-sizing: border-box;
  189. box-sizing: border-box;
  190. width: 28rpx;
  191. height: 28rpx;
  192. background-color: #FFF;
  193. z-index: 1;
  194. -webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
  195. transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
  196. }
  197. .ly-radio__inner {
  198. border-radius: 50%;
  199. }
  200. .ly-checkbox__inner::after,
  201. .ly-radio__inner::after {
  202. -webkit-box-sizing: content-box;
  203. box-sizing: content-box;
  204. content: "";
  205. border: 2rpx solid #FFF;
  206. border-left: 0;
  207. border-top: 0;
  208. height: 14rpx;
  209. left: 10rpx;
  210. position: absolute;
  211. top: 2rpx;
  212. -webkit-transform: rotate(45deg) scaleY(0);
  213. transform: rotate(45deg) scaleY(0);
  214. width: 6rpx;
  215. -webkit-transition: -webkit-transform .15s ease-in .05s;
  216. transition: -webkit-transform .15s ease-in .05s;
  217. transition: transform .15s ease-in .05s;
  218. transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  219. -webkit-transform-origin: center;
  220. transform-origin: center
  221. }
  222. /* lyRadio/lyCheckbox-end */
  223. /* lyLoader-start */
  224. .ly-loader {
  225. margin-top: 100rpx;
  226. }
  227. .ly-loader-inner,
  228. .ly-loader-inner:before,
  229. .ly-loader-inner:after {
  230. background: #efefef;
  231. animation: load 1s infinite ease-in-out;
  232. width: .5em;
  233. height: 1em;
  234. }
  235. .ly-loader-inner:before,
  236. .ly-loader-inner:after {
  237. position: absolute;
  238. top: 0;
  239. content: '';
  240. }
  241. .ly-loader-inner:before {
  242. left: -1em;
  243. }
  244. .ly-loader-inner {
  245. text-indent: -9999em;
  246. position: relative;
  247. font-size: 22rpx;
  248. animation-delay: 0.16s;
  249. }
  250. .ly-loader-inner:after {
  251. left: 1em;
  252. animation-delay: 0.32s;
  253. }
  254. /* lyLoader-end */
  255. /* other-start */
  256. .ly-wrap {
  257. display: flex;
  258. flex-direction: row;
  259. flex-wrap: wrap;
  260. }
  261. .ly-space-between {
  262. display: flex;
  263. flex-direction: row;
  264. justify-content: space-between;
  265. }
  266. .ly-flex-center {
  267. display: flex;
  268. flex-direction: row;
  269. justify-content: center;
  270. }
  271. .ly-empty {
  272. width: 100%;
  273. display: flex;
  274. justify-content: center;
  275. margin-top: 100rpx;
  276. }
  277. /* other-end */
  278. /* iconfont-start */
  279. @font-face {
  280. font-family: "ly-iconfont";
  281. src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPsAAsAAAAACKwAAAOeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqFDIQPATYCJAMMCwgABCAFhG0HQBtfB8gekiSCdAwUAKgCFMA5Hj7H0PeTlABUr57PVyGqugqzSWJnNwWoWJjx/9rUr4TPL1ZSQpU2mycqwoRwIN3p+MkqMqyEW+OtMBLPSUBb8v//XtWMKTavxYIUsT/Wy1qbQzkBDOYEKGB7dVpPyVqgCnJNwvMvhZl10nMCtQbFoPVhY8ZDncJfF4grbqpQ13AqE52hWqgcOFrEQ6hWnW5VfMCD7Pfjn4WoI6nI/K0bl0MNGPBz0qcflVqYnvCA4vNDPUXGPFCIw8HgtsqiOK9SrW2smm6sVITElWlpISMdVBn8wyMJopLfXg+myZ48KCrSkvj9g37U1ItbXYke4APwXxK3N4TuehyBfmM0I3zbNdt7uk3VnjPtzX0rnIl7z7bZvb/thHohsu9QuykKo+Cws4nL7LsPmI3n2qN9B9upZEIKd4hu0NCKi0rt7fNtdl+I1N25hOJMDQK6odS123tROR7Pg8toEhDaF+kR0TYjxW6M58F5+ZNQOxmZHtE2g+IYjxjlNy/yIRQpCmrgq5R4/3jx8PvT8Ha8d3/xiLnt4EGyaDnznzRv8vpyZ+9TFHf/ntX9e59A+b6+fPHd5+dy0wYHVvHOroWbnWe879O9DnL53bN/gUHuwm28b/n8i/V3ry4E3IoXNqS6Rvs0LhJxeNVjoUkM3LKosU+0a6rh45FVvLt+2oz7Zd53b4QOy7/9snDXHbqVu+A+f8r7PnM2H8kXrWm5c8/vLu7LqRee7HW637mz3kHc5U/RCXf25d7G8tkdgEfwIpzpkknGpaMw3ww55q9Mn9OQNyua/wB/49OOWydn4eL/6roCfjx6FMmcxfJStYRKfd3UwoHiML4rF4uMSK+SvYTuNxMHrpl8yd3Q6v32cAeo/KFaowBJlQHIqo3zi3geKtRZhErVlqDWnOGn67QRKkWpwaw1AkKza5A0egFZszf8In4HFTp9h0rNUQm1NqP1lXUmgyuDBVUlNYi2gHA98FnokUreOZaac1xV1JlMMZGKEs+QdCLVrgynPhUcO0pzzYyUjDAReGSYeBl13YCEIrCpLhOWlGE+mWRD35TQAw8UawRKJVEGQrMAwekCPpaMlpTOz49FmeZwqcREX1t3Ikoo4dMTaQmpBfzhRn9R30uZXTKXKUOSmLSKEQIeYhjqKZcrcIzhMLLRrJMSrA35UF4yGMaWGhPHm733dwJq+Z/NkSJHUXemCirjgpuWrHMD1eC+mQUAAAA=') format('woff2');
  282. }
  283. .ly-iconfont {
  284. font-family: "ly-iconfont" !important;
  285. font-size: 30rpx;
  286. font-style: normal;
  287. -webkit-font-smoothing: antialiased;
  288. -moz-osx-font-smoothing: grayscale;
  289. }
  290. .ly-icon-caret-right:before {
  291. content: "\e8ee";
  292. }
  293. .ly-icon-loading:before {
  294. content: "\e657";
  295. }
  296. /* iconfont-end */
  297. /* animate-start */
  298. @keyframes rotating {
  299. 0% {
  300. -webkit-transform: rotateZ(0);
  301. transform: rotateZ(0)
  302. }
  303. 100% {
  304. -webkit-transform: rotateZ(360deg);
  305. transform: rotateZ(360deg)
  306. }
  307. }
  308. @keyframes load {
  309. 0%,
  310. 80%,
  311. 100% {
  312. box-shadow: 0 0 #efefef;
  313. height: 1em;
  314. }
  315. 40% {
  316. box-shadow: 0 -1.5em #efefef;
  317. height: 1.5em;
  318. }
  319. }
  320. /* animate-end */