style.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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(255, 255, 255, 0.5); }
  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(255, 255, 255, 0.5); }
  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-left: 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--body, .vxe-modal--wrapper.type--alert .vxe-modal--body, .vxe-modal--wrapper.type--confirm .vxe-modal--body {
  132. overflow: auto; }
  133. .vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content, .vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--content, .vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--content {
  134. overflow: auto; }
  135. .vxe-modal--wrapper.type--alert .vxe-modal--status-wrapper, .vxe-modal--wrapper.type--confirm .vxe-modal--status-wrapper {
  136. font-size: 1.6em;
  137. padding-left: 10px; }
  138. .vxe-modal--wrapper .vxe-modal--box {
  139. visibility: hidden;
  140. width: 420px;
  141. background-color: #fff;
  142. border-radius: 4px;
  143. border: 1px solid #ebeef5;
  144. text-align: left;
  145. pointer-events: auto;
  146. opacity: 0; }
  147. .vxe-modal--wrapper .vxe-modal--box.is--drag {
  148. cursor: move; }
  149. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body:after,
  150. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--footer:after {
  151. content: "";
  152. position: absolute;
  153. top: 0;
  154. left: 0;
  155. width: 100%;
  156. height: 100%; }
  157. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body {
  158. overflow: hidden; }
  159. .vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content {
  160. overflow: hidden; }
  161. .vxe-modal--wrapper.status--info .vxe-modal--status-wrapper {
  162. color: #909399; }
  163. .vxe-modal--wrapper.status--warning .vxe-modal--status-wrapper, .vxe-modal--wrapper.status--question .vxe-modal--status-wrapper {
  164. color: #e6a23c; }
  165. .vxe-modal--wrapper.status--success .vxe-modal--status-wrapper {
  166. color: #67c23a; }
  167. .vxe-modal--wrapper.status--error .vxe-modal--status-wrapper {
  168. color: #f56c6c; }
  169. .vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper {
  170. color: #BFBFBF; }
  171. .vxe-modal--wrapper .vxe-modal--status-wrapper {
  172. -ms-flex-negative: 0;
  173. flex-shrink: 0;
  174. display: -webkit-box;
  175. display: -ms-flexbox;
  176. display: flex;
  177. -webkit-box-align: center;
  178. -ms-flex-align: center;
  179. align-items: center; }
  180. .vxe-modal--wrapper .vxe-modal--content {
  181. -webkit-box-flex: 1;
  182. -ms-flex-positive: 1;
  183. flex-grow: 1;
  184. padding: 0.8em 1em;
  185. white-space: pre-line; }
  186. .vxe-modal--wrapper .vxe-modal--header,
  187. .vxe-modal--wrapper .vxe-modal--body,
  188. .vxe-modal--wrapper .vxe-modal--footer {
  189. position: relative; }
  190. .vxe-modal--wrapper .vxe-modal--body {
  191. display: -webkit-box;
  192. display: -ms-flexbox;
  193. display: flex;
  194. -webkit-box-flex: 1;
  195. -ms-flex-positive: 1;
  196. flex-grow: 1; }
  197. .vxe-modal--wrapper .vxe-modal--header {
  198. display: -webkit-box;
  199. display: -ms-flexbox;
  200. display: flex;
  201. -webkit-box-orient: horizontal;
  202. -webkit-box-direction: normal;
  203. -ms-flex-direction: row;
  204. flex-direction: row;
  205. -ms-flex-negative: 0;
  206. flex-shrink: 0;
  207. font-size: 1.1em;
  208. font-weight: 700;
  209. border-bottom: 1px solid #ebeef5;
  210. background-color: #F8F8F8;
  211. border-radius: 4px 4px 0 0;
  212. -webkit-user-select: none;
  213. -moz-user-select: none;
  214. -ms-user-select: none;
  215. user-select: none; }
  216. .vxe-modal--wrapper .vxe-modal--header.is--draggable .vxe-modal--header-title {
  217. cursor: move; }
  218. .vxe-modal--wrapper .vxe-modal--header.is--ellipsis .vxe-modal--header-title {
  219. overflow: hidden;
  220. text-overflow: ellipsis;
  221. white-space: nowrap; }
  222. .vxe-modal--wrapper .vxe-modal--header-title {
  223. -webkit-box-flex: 1;
  224. -ms-flex-positive: 1;
  225. flex-grow: 1;
  226. padding: 0.6em 0 0.6em 1em; }
  227. .vxe-modal--wrapper .vxe-modal--header-right {
  228. -ms-flex-negative: 0;
  229. flex-shrink: 0;
  230. padding: 0.6em 1em 0.6em 0; }
  231. .vxe-modal--wrapper .vxe-modal--zoom-btn,
  232. .vxe-modal--wrapper .vxe-modal--close-btn {
  233. cursor: pointer;
  234. margin-left: 0.6em; }
  235. .vxe-modal--wrapper .vxe-modal--zoom-btn:hover,
  236. .vxe-modal--wrapper .vxe-modal--close-btn:hover {
  237. color: #409eff; }
  238. .vxe-modal--wrapper .vxe-modal--footer {
  239. -ms-flex-negative: 0;
  240. flex-shrink: 0;
  241. text-align: right;
  242. padding: 0.4em 1em 0.8em 1em; }
  243. .vxe-modal--wrapper.is--maximize .vxe-modal--box .vxe-modal--header {
  244. cursor: default; }
  245. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .wl-resize,
  246. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .wr-resize,
  247. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .swst-resize,
  248. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .sest-resize,
  249. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .st-resize,
  250. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .swlb-resize,
  251. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .selb-resize,
  252. .vxe-modal--wrapper.is--maximize .vxe-modal--resize .sb-resize {
  253. display: none; }
  254. .vxe-modal--wrapper .vxe-modal--resize .wl-resize,
  255. .vxe-modal--wrapper .vxe-modal--resize .wr-resize,
  256. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  257. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  258. .vxe-modal--wrapper .vxe-modal--resize .st-resize,
  259. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  260. .vxe-modal--wrapper .vxe-modal--resize .selb-resize,
  261. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  262. position: absolute;
  263. z-index: 100; }
  264. .vxe-modal--wrapper .vxe-modal--resize .wl-resize,
  265. .vxe-modal--wrapper .vxe-modal--resize .wr-resize {
  266. width: 8px;
  267. height: 100%;
  268. top: 0;
  269. cursor: w-resize; }
  270. .vxe-modal--wrapper .vxe-modal--resize .wl-resize {
  271. left: -5px; }
  272. .vxe-modal--wrapper .vxe-modal--resize .wr-resize {
  273. right: -5px; }
  274. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  275. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  276. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  277. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  278. width: 10px;
  279. height: 10px;
  280. z-index: 101; }
  281. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  282. .vxe-modal--wrapper .vxe-modal--resize .sest-resize {
  283. top: -8px; }
  284. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize,
  285. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  286. bottom: -8px; }
  287. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  288. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize {
  289. cursor: sw-resize; }
  290. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  291. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  292. cursor: se-resize; }
  293. .vxe-modal--wrapper .vxe-modal--resize .swst-resize,
  294. .vxe-modal--wrapper .vxe-modal--resize .swlb-resize {
  295. left: -8px; }
  296. .vxe-modal--wrapper .vxe-modal--resize .sest-resize,
  297. .vxe-modal--wrapper .vxe-modal--resize .selb-resize {
  298. right: -8px; }
  299. .vxe-modal--wrapper .vxe-modal--resize .st-resize,
  300. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  301. width: 100%;
  302. height: 8px;
  303. left: 0;
  304. cursor: s-resize; }
  305. .vxe-modal--wrapper .vxe-modal--resize .st-resize {
  306. top: -5px; }
  307. .vxe-modal--wrapper .vxe-modal--resize .sb-resize {
  308. bottom: -5px; }
  309. .vxe-modal--wrapper {
  310. font-size: 14px; }
  311. .vxe-modal--wrapper.size--medium {
  312. font-size: 14px; }
  313. .vxe-modal--wrapper.size--small {
  314. font-size: 13px; }
  315. .vxe-modal--wrapper.size--mini {
  316. font-size: 12px; }