layer.css 5.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /*
  2. layer mobile
  3. */
  4. .layui-m-layer{position:relative; z-index: 19891014;}
  5. .layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
  6. .layui-m-layershade,
  7. .layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
  8. .layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
  9. .layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
  10. .layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
  11. .layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;}
  12. .layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
  13. /* 弹出动画 */
  14. @-webkit-keyframes layui-m-anim-scale { /* 默认 */
  15. 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
  16. 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
  17. }
  18. @keyframes layui-m-anim-scale { /* 默认 */
  19. 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
  20. 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
  21. }
  22. .layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;}
  23. @-webkit-keyframes layui-m-anim-up{
  24. 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
  25. 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
  26. }
  27. @keyframes layui-m-anim-up{
  28. 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
  29. 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
  30. }
  31. .layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up}
  32. .layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
  33. .layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
  34. .layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
  35. .layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;}
  36. .layui-m-layerchild h3,
  37. .layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
  38. .layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;}
  39. .layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
  40. .layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
  41. .layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
  42. .layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}
  43. /* loading */
  44. @-webkit-keyframes layui-m-anim-loading{
  45. 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
  46. 40%{transform:scale(1); -webkit-transform:scale(1)}
  47. }
  48. @keyframes layui-m-anim-loading{
  49. 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
  50. 40%{transform:scale(1); -webkit-transform:scale(1)}
  51. }
  52. .layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
  53. .layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
  54. .layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
  55. .layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
  56. .layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
  57. .layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
  58. .layui-m-layerbtn span[yes]{color: #40AFFE;}
  59. .layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
  60. .layui-m-layerbtn span:active{background-color: #F6F6F6;}
  61. .layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
  62. .layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
  63. .layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
  64. /* 底部对话框风格 */
  65. body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;}
  66. .layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
  67. .layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
  68. .layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
  69. .layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
  70. .layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}
  71. /* 通用提示 */
  72. body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;}
  73. .layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;}