File: src/tomloprodModal-1.0.2.min.css

Recommend this page to a friend!
  Classes of tomloprod   tomloprod Modal   src/tomloprodModal-1.0.2.min.css   Download  
File: src/tomloprodModal-1.0.2.min.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: tomloprod Modal
Create modal windows without using frameworks
Author: By
Last change: Update of src/tomloprodModal-1.0.2.min.css
Date: 3 years ago
Size: 4,008 bytes
 

Contents

Class file image Download
/*! tomloprodModal - v1.0.2 - 2016-09-27 * Copyright (c) 2016 Tomas Lopez; Licensed MIT */ .tm-avoidSelection{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tm-modal{position:fixed;top:50%;left:50%;width:50%;max-width:500px;min-width:320px;height:auto;z-index:999999999;visibility:hidden;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%)}.tm-title{max-height:90px;margin:0;text-align:center;font-size:2.4em;height:90px}.tm-content{position:relative;margin:0 auto 20px;max-height:300px;overflow-y:auto;overflow-x:hidden;padding:0 2em}.tm-center{padding-left:25%;padding-right:25%}.tm-XButton:active,.tm-XButton:hover{transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);-ms-transform:scale(1.5,1.5);-o-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);-ms-transform-origin:center center;-webkit-transform-origin:center center;transform-origin:center center}.tm-XButton{backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;transition:transform .8s;-webkit-transition:-webkit-transform .8s;-moz-transition:-moz-transform .8s;-ms-transition:-ms-transform .8s;-o-transition:-o-transform .8s;position:absolute;top:10px;left:15px;width:28px;height:28px;line-height:28px;cursor:pointer}.tm-XButton:after{font-family:Verdana!important;font-size:29px;display:block;content:"×"}@media (max-width:768px){.tm-title{box-shadow:0 4px 8px -5px rgba(0,0,0,.8)}.tm-modal{width:100%;height:100%;left:50%!important;top:50%!important;max-width:100%}.tm-content{color:#5c7d98;position:relative;margin:0 auto;height:100%;max-height:100%;overflow-y:scroll;padding:15px 40px 30px}.tm-content:after{padding-bottom:120px;content:"";display:block}}.tm-showModal{visibility:visible}.tm-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:1040;opacity:0;background:rgba(0,0,0,.8);-webkit-transition:-webkit-transform .3s,opacity .3s,visibility .3s;-moz-transition:-webkit-transform .3s,opacity .3s,visibility .3s;-ms-transition:-webkit-transform .3s,opacity .3s,visibility .3s;-o-transition:-webkit-transform .3s,opacity .3s,visibility .3s;transition:-webkit-transform .3s,opacity .3s,visibility .3s;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.tm-showModal~.tm-overlay{opacity:1;visibility:visible}.tm-wrapper{height:100%;box-shadow:0 0 5px rgba(0,0,0,.8);background-color:#FFF;overflow:hidden;color:#5c7d98}.tm-MainContainer{-webkit-overflow-scrolling:touch;-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;-o-transition:-o-transform .5s;transition:transform .5s;-ms-transition:-ms-transform .5s;-ms-transform-origin:center top;-webkit-transform-origin:center top;transform-origin:center top}.tm-MainContainer.tm-effect{-webkit-transform:scale(.8);-moz-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.tm-effect .tm-wrapper{-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-o-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);opacity:0;-webkit-transition:-webkit-transform .5s,opacity .5s,visibility .5s;-moz-transition:-moz-transform .5s,opacity .5s,visibility .5s;-o-transition:-o-transform .5s,opacity .5s,visibility .5s;transition:transform .5s,opacity .5s,visibility .5s;-ms-transition:-ms-transform .5s,opacity .5s,visibility .5s}.tm-showModal.tm-effect .tm-wrapper{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.tm-modal h3{max-height:90px;margin:0;font-size:24px;text-align:center;padding-top:34px}.tm-content>p{margin-top:20px}.tm-content button{display:block;margin:0 auto;font-size:.8em}