painless-ui
Version:
2 lines (1 loc) • 2.11 kB
CSS
.ui-dialog-container{position:fixed;top:0;right:0;z-index:3000}.ui-dialog-container.left{text-align:left !important;right:inherit;left:0}.ui-dialog-container.left .dialog.on-x{transform:translate3d(-100%, 0, 0) }.ui-dialog-container.top .dialog.on-y{transform:translate3d(0, -100%, 0) }.ui-dialog-container.bottom{vertical-align:bottom ;top:inherit;bottom:0}.ui-dialog-container.bottom .dialog.on-y{transform:translate3d(0, 100%, 0) }.ui-dialog-container:hover .close{opacity:0.2}.ui-dialog-container .dialog{color:#303030;border-radius:6px;max-width:320px;box-shadow:0 4px 4px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.08);cursor:default;opacity:.98;font-size:0;line-height:1.3;background:#f9fafc;margin:20px;overflow:hidden;text-align:left;transform:translate3d(0, 0, 0);transition:all 0.75s, height 0s;transition-timing-function:cubic-bezier(0.25, 1.37, 0.44, 0.93);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.ui-dialog-container .dialog.on-x{transform:translate3d(100%, 0, 0) }.ui-dialog-container .dialog:hover{opacity:1;transition:0.35s}.ui-dialog-container .dialog:hover .close{opacity:0.2}.ui-dialog-container .dialog .close{padding:14px;margin:0px;position:absolute;border-radius:40px;font-size:0;top:0;right:0;cursor:pointer;transition:color 0.35s, background 0.15s;opacity:0;z-index:10}.ui-dialog-container .dialog .close:after,.ui-dialog-container .dialog .close:before{content:"";width:16px;height:2px;background:#666;transform:rotate(45deg);position:absolute;right:6px;top:13px;opacity:1}.ui-dialog-container .dialog .close:hover,.ui-dialog-container .dialog .close:active{opacity:1;transition:opacity 0.35s,transform 0.35s cubic-bezier(0.35, 1.35, 0.5, 1);transform:rotate(90deg);color:#262626}.ui-dialog-container .dialog .close:active{opacity:1}.ui-dialog-container .dialog .close:before{transform:rotate(-45deg)}.ui-dialog-container .dialog .dialogContent{padding:20px;font-size:15px}.ui-dialog-container .dialog:nth-child(1){transition-delay:0.1s}@media (max-width: 435px){.ui-dialog-container .dialog{margin:10px;max-width:100%}}