style.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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-modal--wrapper {
  27. display: none;
  28. position: fixed;
  29. top: 0;
  30. left: 0;
  31. line-height: 1.5;
  32. width: calc(100% + 18px);
  33. height: calc(100% + 18px);
  34. color: #606266;
  35. 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;
  36. -webkit-transition: top .4s ease-in-out;
  37. transition: top .4s ease-in-out; }
  38. .vxe-modal--wrapper.is--active {
  39. display: block; }
  40. .vxe-modal--wrapper.is--visible.is--mask:before {
  41. background-color: rgba(0, 0, 0, 0.5); }
  42. .vxe-modal--wrapper.is--visible.type--message .vxe-modal--box {
  43. opacity: 1;
  44. -webkit-transform: translateY(0);
  45. transform: translateY(0); }
  46. .vxe-modal--wrapper.is--visible .vxe-modal--box {
  47. opacity: 1;
  48. visibility: visible; }
  49. .vxe-modal--wrapper.is--loading .vxe-modal--header,
  50. .vxe-modal--wrapper.is--loading .vxe-modal--footer {
  51. position: relative;
  52. border-bottom-color: rgba(0, 0, 0, 0.2); }
  53. .vxe-modal--wrapper.is--loading .vxe-modal--header:before,
  54. .vxe-modal--wrapper.is--loading .vxe-modal--footer:before {
  55. content: "";
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. width: 100%;
  60. height: 100%;
  61. z-index: 1;
  62. -webkit-user-select: none;
  63. -moz-user-select: none;
  64. -ms-user-select: none;
  65. user-select: none;
  66. background-color: rgba(0, 0, 0, 0.2); }
  67. .vxe-modal--wrapper:not(.lock--view) {
  68. pointer-events: none; }
  69. .vxe-modal--wrapper:not(.type--message).lock--scroll {
  70. overflow: hidden; }
  71. .vxe-modal--wrapper:not(.type--message):not(.lock--scroll) {
  72. overflow: auto; }
  73. .vxe-modal--wrapper.lock--view:before, .vxe-modal--wrapper.is--mask:before {
  74. content: "";
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. width: 100%;
  79. height: 100%;
  80. z-index: -1;
  81. pointer-events: auto; }
  82. .vxe-modal--wrapper.is--mask:before {
  83. background-color: rgba(0, 0, 0, 0); }
  84. .vxe-modal--wrapper.is--animat.is--mask:before {
  85. -webkit-transition: background-color 0.2s ease-in-out;
  86. transition: background-color 0.2s ease-in-out; }
  87. .vxe-modal--wrapper.is--animat.type--message .vxe-modal--box:not(.is--drag) {
  88. -webkit-transition: all 0.4s ease-out;
  89. transition: all 0.4s ease-out; }
  90. .vxe-modal--wrapper.type--message .vxe-modal--body, .vxe-modal--wrapper.type--alert .vxe-modal--body, .vxe-modal--wrapper.type--confirm .vxe-modal--body {
  91. white-space: normal;
  92. word-break: break-word; }
  93. .vxe-modal--wrapper.type--message {
  94. text-align: center; }
  95. .vxe-modal--wrapper.type--message .vxe-modal--box {
  96. display: inline-block;
  97. padding: 2px 0;
  98. margin-top: 0;
  99. width: auto;
  100. -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  101. box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  102. opacity: 0;
  103. -webkit-transform: translateY(-100%);
  104. transform: translateY(-100%); }
  105. .vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--body:after {
  106. content: '';
  107. display: block;
  108. clear: both;
  109. height: 0;
  110. overflow: hidden;
  111. visibility: hidden; }
  112. .vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--content {
  113. max-width: 800px;
  114. float: left; }
  115. .vxe-modal--wrapper.type--message .vxe-modal--status-wrapper {
  116. font-size: 1.4em;
  117. padding-right: 10px; }
  118. .vxe-modal--wrapper.type--modal .vxe-modal--box, .vxe-modal--wrapper.type--alert .vxe-modal--box, .vxe-modal--wrapper.type--confirm .vxe-modal--box {
  119. display: -webkit-box;
  120. display: -ms-flexbox;
  121. display: flex;
  122. -webkit-box-orient: vertical;
  123. -webkit-box-direction: normal;
  124. -ms-flex-direction: column;
  125. flex-direction: column;
  126. position: fixed;
  127. left: 50%;
  128. top: 0;
  129. -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  130. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); }
  131. .vxe-modal--wrapper.type--modal .vxe-modal--box .vxe-modal--header, .vxe-modal--wrapper.type--alert .vxe-modal--box .vxe-modal--header, .vxe-modal--wrapper.type--confirm .vxe-modal--box .vxe-modal--header {
  132. cursor: move; }
  133. .vxe-modal--wrapper.type--modal .vxe-modal--header {
  134. padding: 0.6em 4.6em 0.6em 1em; }
  135. .vxe-modal--wrapper.type--modal .vxe-modal--body {
  136. overflow: auto; }
  137. .vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content {
  138. overflow: auto; }
  139. .vxe-modal--wrapper.type--alert .vxe-modal--status-wrapper, .vxe-modal--wrapper.type--confirm .vxe-modal--status-wrapper {
  140. font-size: 1.6em;
  141. padding: 0 10px 0 2px; }
  142. .vxe-modal--wrapper .vxe-modal--box {
  143. visibility: hidden;
  144. width: 420px;
  145. background-color: #fff;
  146. border-radius: 4px;
  147. border: 1px solid #ebeef5;
  148. text-align: left;
  149. pointer-events: auto;
  150. opacity: 0; }
  151. .vxe-modal--wrapper .vxe-modal--box.is--drag {
  152. cursor: move; }
  153. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body:after,
  154. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--footer:after {
  155. content: "";
  156. position: absolute;
  157. top: 0;
  158. left: 0;
  159. width: 100%;
  160. height: 100%; }
  161. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body {
  162. overflow: hidden; }
  163. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content {
  164. overflow: hidden; }
  165. .vxe-modal--wrapper.status--info .vxe-modal--status-wrapper {
  166. color: #909399; }
  167. .vxe-modal--wrapper.status--warning .vxe-modal--status-wrapper, .vxe-modal--wrapper.status--question .vxe-modal--status-wrapper {
  168. color: #e6a23c; }
  169. .vxe-modal--wrapper.status--success .vxe-modal--status-wrapper {
  170. color: #67c23a; }
  171. .vxe-modal--wrapper.status--error .vxe-modal--status-wrapper {
  172. color: #f56c6c; }
  173. .vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper {
  174. color: #BFBFBF; }
  175. .vxe-modal--wrapper .vxe-modal--status-wrapper {
  176. -ms-flex-negative: 0;
  177. flex-shrink: 0;
  178. display: -webkit-box;
  179. display: -ms-flexbox;
  180. display: flex;
  181. -webkit-box-align: center;
  182. -ms-flex-align: center;
  183. align-items: center; }
  184. .vxe-modal--wrapper .vxe-modal--content {
  185. -webkit-box-flex: 1;
  186. -ms-flex-positive: 1;
  187. flex-grow: 1; }
  188. .vxe-modal--wrapper .vxe-modal--header,
  189. .vxe-modal--wrapper .vxe-modal--body,
  190. .vxe-modal--wrapper .vxe-modal--footer {
  191. position: relative; }
  192. .vxe-modal--wrapper .vxe-modal--body {
  193. display: -webkit-box;
  194. display: -ms-flexbox;
  195. display: flex;
  196. -webkit-box-flex: 1;
  197. -ms-flex-positive: 1;
  198. flex-grow: 1;
  199. padding: 0.6em 1em; }
  200. .vxe-modal--wrapper .vxe-modal--header {
  201. -ms-flex-negative: 0;
  202. flex-shrink: 0;
  203. font-size: 1.1em;
  204. font-weight: 700;
  205. padding: 0.6em 2.8em 0.6em 1em;
  206. border-bottom: 1px solid #ebeef5;
  207. background-color: #F8F8F8;
  208. border-radius: 4px 4px 0 0;
  209. -webkit-user-select: none;
  210. -moz-user-select: none;
  211. -ms-user-select: none;
  212. user-select: none; }
  213. .vxe-modal--wrapper .vxe-modal--header.is--ellipsis {
  214. overflow: hidden;
  215. text-overflow: ellipsis;
  216. white-space: nowrap; }
  217. .vxe-modal--wrapper .vxe-modal--zoom-btn,
  218. .vxe-modal--wrapper .vxe-modal--close-btn {
  219. position: absolute;
  220. right: 14px;
  221. top: 0.85em;
  222. z-index: 1;
  223. cursor: pointer; }
  224. .vxe-modal--wrapper .vxe-modal--zoom-btn:hover,
  225. .vxe-modal--wrapper .vxe-modal--close-btn:hover {
  226. color: #409eff; }
  227. .vxe-modal--wrapper .vxe-modal--zoom-btn {
  228. right: 44px; }
  229. .vxe-modal--wrapper .vxe-modal--footer {
  230. -ms-flex-negative: 0;
  231. flex-shrink: 0;
  232. text-align: right;
  233. padding: 0.8em 1em; }
  234. .vxe-modal--wrapper.is--maximize .vxe-modal--box .vxe-modal--header {
  235. cursor: default; }
  236. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .wl-resize,
  237. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .wr-resize,
  238. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .swst-resize,
  239. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .sest-resize,
  240. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .st-resize,
  241. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .swlb-resize,
  242. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .selb-resize,
  243. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .sb-resize {
  244. display: none; }
  245. .vxe-modal--wrapper .vxe-modal--resize .wl-resize,
  246. .vxe-modal--wrapper .vxe-modal--resize .wr-resize,
  247. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  248. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  249. .vxe-modal--wrapper .vxe-modal--resize .st-resize,
  250. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  251. .vxe-modal--wrapper .vxe-modal--resize .selb-resize,
  252. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  253. position: absolute;
  254. z-index: 100; }
  255. .vxe-modal--wrapper .vxe-modal--resize .wl-resize,
  256. .vxe-modal--wrapper .vxe-modal--resize .wr-resize {
  257. width: 8px;
  258. height: 100%;
  259. top: 0;
  260. cursor: w-resize; }
  261. .vxe-modal--wrapper .vxe-modal--resize .wl-resize {
  262. left: -5px; }
  263. .vxe-modal--wrapper .vxe-modal--resize .wr-resize {
  264. right: -5px; }
  265. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  266. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  267. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  268. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  269. width: 10px;
  270. height: 10px;
  271. z-index: 101; }
  272. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  273. .vxe-modal--wrapper .vxe-modal--resize .sest-resize {
  274. top: -8px; }
  275. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  276. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  277. bottom: -8px; }
  278. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  279. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize {
  280. cursor: sw-resize; }
  281. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  282. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  283. cursor: se-resize; }
  284. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  285. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize {
  286. left: -8px; }
  287. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  288. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  289. right: -8px; }
  290. .vxe-modal--wrapper .vxe-modal--resize .st-resize,
  291. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  292. width: 100%;
  293. height: 8px;
  294. left: 0;
  295. cursor: s-resize; }
  296. .vxe-modal--wrapper .vxe-modal--resize .st-resize {
  297. top: -5px; }
  298. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  299. bottom: -5px; }
  300. .vxe-modal--wrapper {
  301. font-size: 14px; }
  302. .vxe-modal--wrapper.size--medium {
  303. font-size: 14px; }
  304. .vxe-modal--wrapper.size--small {
  305. font-size: 13px; }
  306. .vxe-modal--wrapper.size--mini {
  307. font-size: 12px; }