_ui-dialog.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
  1. .ui-dialog {
  2. *zoom:1;
  3. position: relative;
  4. background-color: #FFF;
  5. // border: 1px solid #999;
  6. border-radius: 6px;
  7. outline: 0;
  8. background-clip: padding-box;
  9. font-family: Helvetica, arial, sans-serif;
  10. font-size: 14px;
  11. line-height: 1.428571429;
  12. color: #333;
  13. opacity: 0;
  14. -webkit-transform: scale(0);
  15. transform: scale(0);
  16. -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out;
  17. transition: transform .15s ease-in-out, opacity .15s ease-in-out;
  18. }
  19. .ui-popup-show .ui-dialog {
  20. opacity: 1;
  21. -webkit-transform: scale(1);
  22. transform: scale(1);
  23. }
  24. .ui-popup-focus .ui-dialog {
  25. // box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  26. }
  27. .ui-popup-modal .ui-dialog {
  28. // box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
  29. }
  30. .ui-dialog-grid {
  31. width: auto;
  32. margin: 0;
  33. border: 0 none;
  34. border-collapse:collapse;
  35. border-spacing: 0;
  36. background: transparent;
  37. }
  38. .ui-dialog-header,
  39. .ui-dialog-body,
  40. .ui-dialog-footer {
  41. padding: 0;
  42. border: 0 none;
  43. text-align: center;
  44. background: transparent;
  45. }
  46. .ui-dialog-header {
  47. white-space: nowrap;
  48. border-bottom: 1px solid #E5E5E5;
  49. }
  50. .ui-dialog-close {
  51. position: relative;
  52. float: right;
  53. top: 13px;
  54. right: 13px;
  55. padding: 0 4px;
  56. font-size: 21px;
  57. font-weight: bold;
  58. line-height: 1;
  59. color: #000;
  60. text-shadow: 0 1px 0 #FFF;
  61. opacity: .2;
  62. filter: alpha(opacity=20);
  63. cursor: pointer;
  64. background: transparent;
  65. border: 0;
  66. -webkit-appearance: none;
  67. }
  68. .ui-dialog-close:hover,
  69. .ui-dialog-close:focus {
  70. color: #000000;
  71. text-decoration: none;
  72. cursor: pointer;
  73. outline: 0;
  74. opacity: 0.5;
  75. }
  76. .ui-dialog-title {
  77. margin: 0;
  78. line-height: 1.428571429;
  79. min-height: 16.428571429px;
  80. padding: 15px;
  81. overflow:hidden;
  82. white-space: nowrap;
  83. text-overflow: ellipsis;
  84. font-weight: bold;
  85. cursor: default;
  86. }
  87. .ui-dialog-body {
  88. padding: 20px;
  89. text-align: center;
  90. }
  91. .ui-dialog-content {
  92. display: inline-block;
  93. position: relative;
  94. vertical-align: middle;
  95. text-align: left;
  96. padding: 5px 0;
  97. }
  98. .ui-dialog-footer {
  99. padding: 0 20px 20px 20px;
  100. }
  101. .ui-dialog-statusbar {
  102. float: left;
  103. margin-right: 20px;
  104. padding: 6px 0;
  105. line-height: 1.428571429;
  106. font-size: 14px;
  107. color: #888;
  108. white-space: nowrap;
  109. }
  110. .ui-dialog-statusbar label:hover {
  111. color: #333;
  112. }
  113. .ui-dialog-statusbar input,
  114. .ui-dialog-statusbar .label {
  115. vertical-align: middle;
  116. }
  117. .ui-dialog-button {
  118. white-space: nowrap;
  119. }
  120. .ui-dialog-footer button+button {
  121. margin-bottom: 0;
  122. margin-left: 20px;
  123. }
  124. .ui-dialog-footer button {
  125. width:auto;
  126. overflow:visible;
  127. display: inline-block;
  128. padding: 6px 12px;
  129. margin-bottom: 0;
  130. font-size: 14px;
  131. font-weight: normal;
  132. line-height: 1.428571429;
  133. text-align: center;
  134. white-space: nowrap;
  135. vertical-align: middle;
  136. cursor: pointer;
  137. outline: none;
  138. background-image: none;
  139. border: 1px solid transparent;
  140. border-radius: 4px;
  141. -webkit-user-select: none;
  142. -moz-user-select: none;
  143. -ms-user-select: none;
  144. -o-user-select: none;
  145. user-select: none;
  146. }
  147. .ui-dialog-footer button:focus {
  148. outline: thin dotted #333;
  149. outline: 5px auto -webkit-focus-ring-color;
  150. outline-offset: -2px;
  151. }
  152. .ui-dialog-footer button:hover,
  153. .ui-dialog-footer button:focus {
  154. color: #333333;
  155. text-decoration: none;
  156. }
  157. .ui-dialog-footer button:active {
  158. background-image: none;
  159. outline: 0;
  160. // -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  161. // box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  162. }
  163. .ui-dialog-footer button[disabled] {
  164. pointer-events: none;
  165. cursor: not-allowed;
  166. opacity: 0.65;
  167. // -webkit-box-shadow: none;
  168. // box-shadow: none;
  169. }
  170. .ui-dialog-footer button {
  171. color: #333333;
  172. background-color: #ffffff;
  173. border-color: #cccccc;
  174. }
  175. .ui-dialog-footer button:hover,
  176. .ui-dialog-footer button:focus,
  177. .ui-dialog-footer button:active {
  178. color: #333333;
  179. background-color: #ebebeb;
  180. border-color: #adadad;
  181. }
  182. .ui-dialog-footer button:active{
  183. background-image: none;
  184. }
  185. .ui-dialog-footer button[disabled],
  186. .ui-dialog-footer button[disabled]:hover,
  187. .ui-dialog-footer button[disabled]:focus,
  188. .ui-dialog-footer button[disabled]:active {
  189. background-color: #ffffff;
  190. border-color: #cccccc;
  191. }
  192. .ui-dialog-footer button.ui-dialog-autofocus {
  193. color: #ffffff;
  194. background-color: #ea5151;
  195. border-color: #ea5151;
  196. }
  197. .ui-dialog-footer button.ui-dialog-autofocus:hover,
  198. .ui-dialog-footer button.ui-dialog-autofocus:focus,
  199. .ui-dialog-footer button.ui-dialog-autofocus:active {
  200. color: #ffffff;
  201. background-color: #ea5151;
  202. border-color: #ea5151;
  203. }
  204. .ui-dialog-footer button.ui-dialog-autofocus:active {
  205. background-image: none;
  206. }
  207. .ui-popup-top-left .ui-dialog,
  208. .ui-popup-top .ui-dialog,
  209. .ui-popup-top-right .ui-dialog {
  210. top: -8px;
  211. }
  212. .ui-popup-bottom-left .ui-dialog,
  213. .ui-popup-bottom .ui-dialog,
  214. .ui-popup-bottom-right .ui-dialog {
  215. top: 8px;
  216. }
  217. .ui-popup-left-top .ui-dialog,
  218. .ui-popup-left .ui-dialog,
  219. .ui-popup-left-bottom .ui-dialog {
  220. left: -8px;
  221. }
  222. .ui-popup-right-top .ui-dialog,
  223. .ui-popup-right .ui-dialog,
  224. .ui-popup-right-bottom .ui-dialog {
  225. left: 8px;
  226. }
  227. .ui-dialog-arrow-a,
  228. .ui-dialog-arrow-b {
  229. position: absolute;
  230. display: none;
  231. width: 0;
  232. height: 0;
  233. overflow:hidden;
  234. border:8px dashed transparent;
  235. }
  236. .ui-popup-follow .ui-dialog-arrow-a,
  237. .ui-popup-follow .ui-dialog-arrow-b{
  238. display: block;
  239. }
  240. .ui-popup-top-left .ui-dialog-arrow-a,
  241. .ui-popup-top .ui-dialog-arrow-a,
  242. .ui-popup-top-right .ui-dialog-arrow-a {
  243. bottom: -16px;
  244. border-top:8px solid #7C7C7C;
  245. }
  246. .ui-popup-top-left .ui-dialog-arrow-b,
  247. .ui-popup-top .ui-dialog-arrow-b,
  248. .ui-popup-top-right .ui-dialog-arrow-b {
  249. bottom: -15px;
  250. border-top:8px solid #fff;
  251. }
  252. .ui-popup-top-left .ui-dialog-arrow-a,
  253. .ui-popup-top-left .ui-dialog-arrow-b {
  254. left: 15px;
  255. }
  256. .ui-popup-top .ui-dialog-arrow-a,
  257. .ui-popup-top .ui-dialog-arrow-b {
  258. left: 50%;
  259. margin-left: -8px;
  260. }
  261. .ui-popup-top-right .ui-dialog-arrow-a,
  262. .ui-popup-top-right .ui-dialog-arrow-b {
  263. right: 15px;
  264. }
  265. .ui-popup-bottom-left .ui-dialog-arrow-a,
  266. .ui-popup-bottom .ui-dialog-arrow-a,
  267. .ui-popup-bottom-right .ui-dialog-arrow-a {
  268. top: -16px;
  269. border-bottom:8px solid #7C7C7C;
  270. }
  271. .ui-popup-bottom-left .ui-dialog-arrow-b,
  272. .ui-popup-bottom .ui-dialog-arrow-b,
  273. .ui-popup-bottom-right .ui-dialog-arrow-b {
  274. top: -15px;
  275. border-bottom:8px solid #fff;
  276. }
  277. .ui-popup-bottom-left .ui-dialog-arrow-a,
  278. .ui-popup-bottom-left .ui-dialog-arrow-b {
  279. left: 15px;
  280. }
  281. .ui-popup-bottom .ui-dialog-arrow-a,
  282. .ui-popup-bottom .ui-dialog-arrow-b {
  283. margin-left: -8px;
  284. left: 50%;
  285. }
  286. .ui-popup-bottom-right .ui-dialog-arrow-a,
  287. .ui-popup-bottom-right .ui-dialog-arrow-b {
  288. right: 15px;
  289. }
  290. .ui-popup-left-top .ui-dialog-arrow-a,
  291. .ui-popup-left .ui-dialog-arrow-a,
  292. .ui-popup-left-bottom .ui-dialog-arrow-a {
  293. right: -16px;
  294. border-left:8px solid #7C7C7C;
  295. }
  296. .ui-popup-left-top .ui-dialog-arrow-b,
  297. .ui-popup-left .ui-dialog-arrow-b,
  298. .ui-popup-left-bottom .ui-dialog-arrow-b {
  299. right: -15px;
  300. border-left:8px solid #fff;
  301. }
  302. .ui-popup-left-top .ui-dialog-arrow-a,
  303. .ui-popup-left-top .ui-dialog-arrow-b {
  304. top: 15px;
  305. }
  306. .ui-popup-left .ui-dialog-arrow-a,
  307. .ui-popup-left .ui-dialog-arrow-b {
  308. margin-top: -8px;
  309. top: 50%;
  310. }
  311. .ui-popup-left-bottom .ui-dialog-arrow-a,
  312. .ui-popup-left-bottom .ui-dialog-arrow-b {
  313. bottom: 15px;
  314. }
  315. .ui-popup-right-top .ui-dialog-arrow-a,
  316. .ui-popup-right .ui-dialog-arrow-a,
  317. .ui-popup-right-bottom .ui-dialog-arrow-a {
  318. left: -16px;
  319. border-right:8px solid #7C7C7C;
  320. }
  321. .ui-popup-right-top .ui-dialog-arrow-b,
  322. .ui-popup-right .ui-dialog-arrow-b,
  323. .ui-popup-right-bottom .ui-dialog-arrow-b {
  324. left: -15px;
  325. border-right:8px solid #fff;
  326. }
  327. .ui-popup-right-top .ui-dialog-arrow-a,
  328. .ui-popup-right-top .ui-dialog-arrow-b {
  329. top: 15px;
  330. }
  331. .ui-popup-right .ui-dialog-arrow-a,
  332. .ui-popup-right .ui-dialog-arrow-b {
  333. margin-top: -8px;
  334. top: 50%;
  335. }
  336. .ui-popup-right-bottom .ui-dialog-arrow-a,
  337. .ui-popup-right-bottom .ui-dialog-arrow-b {
  338. bottom: 15px;
  339. }
  340. @-webkit-keyframes ui-dialog-loading {
  341. 0% {
  342. -webkit-transform: rotate(0deg);
  343. }
  344. 100% {
  345. -webkit-transform: rotate(360deg);
  346. }
  347. }
  348. @keyframes ui-dialog-loading {
  349. 0% {
  350. transform: rotate(0deg);
  351. }
  352. 100% {
  353. transform: rotate(360deg);
  354. }
  355. }
  356. .ui-dialog-loading {
  357. vertical-align: middle;
  358. position: relative;
  359. display: block;
  360. *zoom: 1;
  361. *display: inline;
  362. overflow: hidden;
  363. width: 32px;
  364. height: 32px;
  365. top: 50%;
  366. margin: -16px auto 0 auto;
  367. font-size: 0;
  368. text-indent: -999em;
  369. color: #666;
  370. }
  371. .ui-dialog-loading {
  372. width: 100%\9;
  373. text-indent: 0\9;
  374. line-height: 32px\9;
  375. text-align: center\9;
  376. font-size: 12px\9;
  377. }
  378. .ui-dialog-loading::after {
  379. // position: absolute;
  380. // content: '';
  381. // width: 3px;
  382. // height: 3px;
  383. // margin: 14.5px 0 0 14.5px;
  384. // border-radius: 100%;
  385. // box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
  386. // -webkit-transform: rotate(360deg);
  387. // -webkit-animation: ui-dialog-loading 1.5s infinite linear;
  388. // transform: rotate(360deg);
  389. // animation: ui-dialog-loading 1.5s infinite linear;
  390. // display: none\9;
  391. }
  392. .ui-popup-backdrop{
  393. -webkit-transform: translate3d(0, 0, 0);
  394. transform: translate3d(0, 0, 0);
  395. }
  396. .o-noframe-dialog{
  397. box-shadow: none!important;
  398. background: none;
  399. border: none;
  400. .ui-dialog-body{
  401. padding: 0;
  402. }
  403. }
  404. .weui-dialog{
  405. box-shadow: none!important;
  406. background: none;
  407. border: none;
  408. background-color: #FAFAFC;
  409. text-align: center;
  410. border-radius: 3px;
  411. .ui-dialog-title{
  412. line-height: initial;
  413. min-height: auto;
  414. padding: 0;
  415. margin: 0;
  416. font-weight: 400;
  417. font-size: 17px;
  418. }
  419. .ui-dialog-close{
  420. display: none;
  421. }
  422. .ui-dialog-header{
  423. border-bottom: none;
  424. padding: 1.2em 20px .5em;
  425. }
  426. .ui-dialog-body{
  427. padding: 0 20px;
  428. font-size: 15px;
  429. color: #888;
  430. text-align: left;
  431. }
  432. .ui-dialog-content{
  433. padding: 15px 0;
  434. }
  435. .ui-dialog-footer{
  436. padding: 0;
  437. line-height: 42px;
  438. font-size: 17px;
  439. .ui-dialog-button{
  440. position: relative;
  441. width: 100%;
  442. display: -webkit-box;
  443. display: -webkit-flex;
  444. display: -ms-flexbox;
  445. display: flex;
  446. margin-top: 20px;
  447. &:after{
  448. content: " ";
  449. position: absolute;
  450. left: 0;
  451. top: 0;
  452. width: 100%;
  453. height: 1px;
  454. border-top: 1px solid #D5D5D6;
  455. color: #D5D5D6;
  456. -webkit-transform-origin: 0 0;
  457. transform-origin: 0 0;
  458. -webkit-transform: scaleY(0.5);
  459. transform: scaleY(0.5);
  460. }
  461. }
  462. button{
  463. line-height: 42px;
  464. border: none;
  465. padding: 0;
  466. margin: 0;
  467. display: block;
  468. -webkit-box-flex: 1;
  469. -webkit-flex: 1;
  470. -ms-flex: 1;
  471. flex: 1;
  472. color: #3CC51F;
  473. text-decoration: none;
  474. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  475. position: relative;
  476. &:after{
  477. content: " ";
  478. position: absolute;
  479. left: 0;
  480. top: 0;
  481. width: 1px;
  482. height: 100%;
  483. border-left: 1px solid #D5D5D6;
  484. color: #D5D5D6;
  485. -webkit-transform-origin: 0 0;
  486. transform-origin: 0 0;
  487. -webkit-transform: scaleX(0.5);
  488. transform: scaleX(0.5);
  489. }
  490. &[i-id="cancel"]{
  491. color: #353535;
  492. background: none;
  493. }
  494. &[i-id="ok"]{
  495. color: #0BB20C;
  496. background: none;
  497. }
  498. &:active{
  499. background-color: #EEEEEE;
  500. }
  501. }
  502. }
  503. }