style.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /*font*/
  2. /*size*/
  3. /*icon*/
  4. /*color*/
  5. /*input/radio/checkbox*/
  6. /*popup*/
  7. /*table*/
  8. /*filter*/
  9. /*menu*/
  10. /*loading*/
  11. /*validate*/
  12. /*grid*/
  13. /*toolbar*/
  14. /*tooltip*/
  15. /*pager*/
  16. /*modal*/
  17. /*checkbox*/
  18. /*radio*/
  19. /*button*/
  20. /*input*/
  21. /*textarea*/
  22. /*form*/
  23. /*select*/
  24. /*switch*/
  25. /*pulldown*/
  26. .vxe-custom--option {
  27. position: relative;
  28. -webkit-user-select: none;
  29. -moz-user-select: none;
  30. -ms-user-select: none;
  31. user-select: none;
  32. cursor: pointer; }
  33. .vxe-custom--option .vxe-checkbox--icon {
  34. display: none;
  35. position: absolute;
  36. height: 1em;
  37. width: 1em; }
  38. .vxe-custom--option .vxe-checkbox--icon {
  39. font-size: 16px; }
  40. .vxe-custom--option .vxe-checkbox--icon:before {
  41. content: "";
  42. position: absolute;
  43. height: 1em;
  44. width: 1em;
  45. top: 0;
  46. left: 0;
  47. background-color: #fff;
  48. border-radius: 2px;
  49. border: 2px solid #dcdfe6; }
  50. .vxe-custom--option .vxe-checkbox--unchecked-icon {
  51. display: inline-block; }
  52. .vxe-custom--option .vxe-checkbox--checked-icon:after {
  53. content: "";
  54. position: absolute;
  55. height: 0.64em;
  56. width: 0.32em;
  57. top: 50%;
  58. left: 50%;
  59. border: 2px solid #fff;
  60. border-left: 0;
  61. border-top: 0;
  62. -webkit-transform: translate(-50%, -50%) rotate(45deg);
  63. transform: translate(-50%, -50%) rotate(45deg); }
  64. .vxe-custom--option .vxe-checkbox--indeterminate-icon:after {
  65. content: "";
  66. position: absolute;
  67. top: 50%;
  68. left: 50%;
  69. height: 2px;
  70. width: 0.6em;
  71. background-color: #fff;
  72. -webkit-transform: translate(-50%, -50%);
  73. transform: translate(-50%, -50%); }
  74. .is--checked.vxe-custom--option, .is--indeterminate.vxe-custom--option {
  75. color: #409eff; }
  76. .is--checked.vxe-custom--option .vxe-checkbox--unchecked-icon, .is--indeterminate.vxe-custom--option .vxe-checkbox--unchecked-icon {
  77. display: none; }
  78. .is--checked.vxe-custom--option .vxe-checkbox--icon:before, .is--indeterminate.vxe-custom--option .vxe-checkbox--icon:before {
  79. border-color: #409eff;
  80. background-color: #409eff; }
  81. .is--checked.vxe-custom--option .vxe-checkbox--checked-icon {
  82. display: inline-block; }
  83. .is--indeterminate.vxe-custom--option .vxe-checkbox--indeterminate-icon {
  84. display: inline-block; }
  85. .vxe-custom--option:not(.is--disabled):hover .vxe-checkbox--icon:before {
  86. border-color: #409eff; }
  87. .is--disabled.vxe-custom--option {
  88. cursor: not-allowed;
  89. color: #BFBFBF; }
  90. .is--disabled.vxe-custom--option .vxe-checkbox--icon:before {
  91. border-color: #dcdfe6;
  92. background-color: #f3f3f3; }
  93. .is--disabled.vxe-custom--option .vxe-checkbox--icon:after {
  94. border-color: #c0c4cc; }
  95. /*toolbar*/
  96. .vxe-toolbar {
  97. position: relative;
  98. display: -webkit-box;
  99. display: -ms-flexbox;
  100. display: flex;
  101. -webkit-box-orient: horizontal;
  102. -webkit-box-direction: normal;
  103. -ms-flex-direction: row;
  104. flex-direction: row;
  105. -webkit-box-align: center;
  106. -ms-flex-align: center;
  107. align-items: center;
  108. color: #606266;
  109. font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  110. background-color: #fff; }
  111. .vxe-toolbar:after {
  112. content: "";
  113. display: block;
  114. clear: both;
  115. height: 0;
  116. overflow: hidden;
  117. visibility: hidden; }
  118. .vxe-toolbar.is--perfect {
  119. border: 1px solid #e8eaec;
  120. border-bottom-width: 0;
  121. background-color: #f8f8f9; }
  122. .vxe-toolbar.is--loading:before {
  123. content: "";
  124. position: absolute;
  125. top: 0;
  126. left: 0;
  127. width: 100%;
  128. height: 100%;
  129. z-index: 999;
  130. -webkit-user-select: none;
  131. -moz-user-select: none;
  132. -ms-user-select: none;
  133. user-select: none;
  134. background-color: rgba(0, 0, 0, 0.2); }
  135. .vxe-toolbar .vxe-button--wrapper {
  136. -webkit-box-flex: 1;
  137. -ms-flex-positive: 1;
  138. flex-grow: 1;
  139. text-align: left; }
  140. .vxe-toolbar .vxe-button--wrapper > .vxe-button + .vxe-button--item,
  141. .vxe-toolbar .vxe-button--wrapper > .vxe-button--item + .vxe-button,
  142. .vxe-toolbar .vxe-button--wrapper > .vxe-button--item + .vxe-button--item {
  143. margin-left: 0.8em; }
  144. .vxe-toolbar .vxe-button--wrapper > .vxe-button--item {
  145. display: inline-block; }
  146. .vxe-toolbar .vxe-tools--wrapper > .vxe-button {
  147. display: -webkit-box;
  148. display: -ms-flexbox;
  149. display: flex;
  150. -webkit-box-align: center;
  151. -ms-flex-align: center;
  152. align-items: center; }
  153. .vxe-toolbar .vxe-tools--wrapper,
  154. .vxe-toolbar .vxe-tools--operate {
  155. display: -webkit-box;
  156. display: -ms-flexbox;
  157. display: flex;
  158. -ms-flex-negative: 0;
  159. flex-shrink: 0;
  160. -webkit-box-align: center;
  161. -ms-flex-align: center;
  162. align-items: center; }
  163. .vxe-toolbar .vxe-custom--wrapper {
  164. position: relative;
  165. margin-left: 0.8em; }
  166. .vxe-toolbar .vxe-custom--wrapper.is--active > .vxe-button {
  167. background-color: #D9DADB;
  168. border-radius: 50%; }
  169. .vxe-toolbar .vxe-custom--wrapper.is--active .vxe-custom--option-wrapper {
  170. display: block; }
  171. .vxe-toolbar .vxe-custom--option-wrapper {
  172. display: none;
  173. position: absolute;
  174. right: 2px;
  175. text-align: left;
  176. background-color: #fff;
  177. z-index: 19;
  178. border: 1px solid #e8eaec;
  179. border-radius: 4px;
  180. -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  181. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
  182. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header {
  183. font-weight: 700;
  184. border-bottom: 1px solid #DADCE0; }
  185. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body .vxe-custom--option:hover {
  186. background-color: #f5f7fa; }
  187. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header,
  188. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body {
  189. padding: 0.2em 0;
  190. max-height: 17.6em; }
  191. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li,
  192. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li {
  193. max-width: 16em;
  194. min-width: 10em;
  195. padding: 0.2em 1em 0.2em 2.3em; }
  196. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--2,
  197. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--2 {
  198. padding-left: 3.5em; }
  199. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--2 .vxe-checkbox--icon,
  200. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--2 .vxe-checkbox--icon {
  201. left: 1.8em; }
  202. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--3,
  203. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--3 {
  204. padding-left: 4.5em; }
  205. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--3 .vxe-checkbox--icon,
  206. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--3 .vxe-checkbox--icon {
  207. left: 2.8em; }
  208. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--4,
  209. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--4 {
  210. padding-left: 5.5em; }
  211. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--4 .vxe-checkbox--icon,
  212. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--4 .vxe-checkbox--icon {
  213. left: 3.8em; }
  214. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--5,
  215. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--5 {
  216. padding-left: 6.5em; }
  217. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--5 .vxe-checkbox--icon,
  218. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--5 .vxe-checkbox--icon {
  219. left: 4.8em; }
  220. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--6,
  221. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--6 {
  222. padding-left: 7.5em; }
  223. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--6 .vxe-checkbox--icon,
  224. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--6 .vxe-checkbox--icon {
  225. left: 5.8em; }
  226. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--7,
  227. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--7 {
  228. padding-left: 8.5em; }
  229. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--7 .vxe-checkbox--icon,
  230. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--7 .vxe-checkbox--icon {
  231. left: 6.8em; }
  232. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--8,
  233. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--8 {
  234. padding-left: 9.5em; }
  235. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--header > li.level--8 .vxe-checkbox--icon,
  236. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--body > li.level--8 .vxe-checkbox--icon {
  237. left: 7.8em; }
  238. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer {
  239. border-top: 1px solid #DADCE0;
  240. padding: 0.45em 0.4em;
  241. text-align: right; }
  242. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer button {
  243. background-color: transparent;
  244. width: 50%;
  245. border: 0;
  246. color: #606266;
  247. text-align: center;
  248. cursor: pointer; }
  249. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer button:focus {
  250. outline: none; }
  251. .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer button:hover {
  252. color: #409eff; }
  253. .vxe-custom--option-wrapper .vxe-custom--header,
  254. .vxe-custom--option-wrapper .vxe-custom--body {
  255. list-style-type: none;
  256. overflow-x: hidden;
  257. overflow-y: auto;
  258. margin: 0;
  259. padding: 0;
  260. -webkit-user-select: none;
  261. -moz-user-select: none;
  262. -ms-user-select: none;
  263. user-select: none; }
  264. .vxe-custom--option-wrapper .vxe-custom--header > li,
  265. .vxe-custom--option-wrapper .vxe-custom--body > li {
  266. overflow: hidden;
  267. text-overflow: ellipsis;
  268. white-space: nowrap; }
  269. .vxe-custom--option .vxe-checkbox--icon {
  270. left: 0.6em;
  271. top: 0.38em; }
  272. .vxe-toolbar {
  273. font-size: 14px;
  274. height: 52px; }
  275. .vxe-toolbar .vxe-custom--option > .vxe-checkbox--icon {
  276. font-size: 16px; }
  277. .vxe-toolbar.size--medium {
  278. font-size: 14px;
  279. height: 50px; }
  280. .vxe-toolbar.size--medium .vxe-custom--option > .vxe-checkbox--icon {
  281. font-size: 15px; }
  282. .vxe-toolbar.size--small {
  283. font-size: 13px;
  284. height: 48px; }
  285. .vxe-toolbar.size--small .vxe-custom--option > .vxe-checkbox--icon {
  286. font-size: 14px; }
  287. .vxe-toolbar.size--mini {
  288. font-size: 12px;
  289. height: 46px; }
  290. .vxe-toolbar.size--mini .vxe-custom--option > .vxe-checkbox--icon {
  291. font-size: 14px; }