Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p> Open Source version comming soon </p>
            
          
!
            
              !function(){function t(t,e){var i;for(i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}function e(){this.overlay=document.createElement("div"),this.overlay.style.fontFamily="Roboto, sans-serif",this.overlay.style.position="fixed",this.overlay.style.left=0,this.overlay.style.right=0,this.overlay.style.top=0,this.overlay.style.bottom=0,this.overlay.style.width="100%",this.overlay.style.height="100%",this.overlay.style.opacity="1",this.overlay.style.backgroundColor=this.colorOverlay,this.overlay.style.transitionProperty="opacity",this.overlay.style.transitionDuration="300ms",this.overlay.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",document.body.appendChild(this.overlay),this.timePicker.body=document.createElement("div");var t=document.createAttribute("unselectable");t.value="on",this.timePicker.body.setAttributeNode(t);var t=document.createAttribute("onselectstart");t.value="return false;",this.timePicker.body.setAttributeNode(t);var t=document.createAttribute("onmousedown");t.value="return false;",this.timePicker.body.setAttributeNode(t);var t=document.createAttribute("style");t.value="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;position:relative;margin:auto;width:200px;height:400px;outline:1px solid #ddd;background:#fff;overflow:hidden;margin-top:30px;",this.timePicker.body.setAttributeNode(t),this.overlay.appendChild(this.timePicker.body),this.timePicker.body.style.color=this.fontColorDark,this.timePicker.body.head=document.createElement("div");var t=document.createAttribute("style");t.value="display: table;padding-top: 20px;margin: auto;font-size: 33px;",this.timePicker.body.head.setAttributeNode(t),this.timePicker.body.appendChild(this.timePicker.body.head),this.timePicker.body.head.hours=document.createElement("div");var t=document.createAttribute("style");t.value="display: inline-block;cursor: pointer;",this.timePicker.body.head.hours.setAttributeNode(t),this.timePicker.body.head.appendChild(this.timePicker.body.head.hours);var e=this.dateForm?this.dateForm.value:"12:00 AM",i=/\d+(?=:)/,r=e.match(i);this.timePicker.body.head.hours.innerHTML=r,this.timePicker.body.head.hours.style.color=this.fontColorLight,this.timePicker.body.head.seperator=document.createElement("div");var t=document.createAttribute("style");this.timePicker.body.head.seperator.setAttributeNode(t);var t=document.createAttribute("style");t.value="display: inline-block;",this.timePicker.body.head.seperator.setAttributeNode(t),this.timePicker.body.head.appendChild(this.timePicker.body.head.seperator),this.timePicker.body.head.seperator.innerHTML=":",this.timePicker.body.head.minutes=document.createElement("div");var t=document.createAttribute("style");t.value="display: inline-block;cursor: pointer;",this.timePicker.body.head.minutes.setAttributeNode(t),this.timePicker.body.head.appendChild(this.timePicker.body.head.minutes);var i=/\d+[^\d+(?=:)]/,r=e.match(i);this.timePicker.body.head.minutes.innerHTML=r[0].replace(/\s+/g,""),this.timePicker.body.head.origin=document.createElement("div");var t=document.createAttribute("style");this.timePicker.body.head.origin.setAttributeNode(t);var t=document.createAttribute("style");t.value="display: table;margin: auto;font-size: large;transition-property: color;transition-duration: 0.5s;",this.timePicker.body.head.origin.setAttributeNode(t),this.timePicker.body.head.appendChild(this.timePicker.body.head.origin);var i=/[A-Z]+/,r=e.match(i);this.timePicker.body.head.origin.innerHTML=r[0].replace(/\s+/g,""),this.timePicker.body.time=document.createElement("ol");var t=document.createAttribute("style");t.value="cursor: move;margin: 0;padding: 0;list-style: none;position: absolute;height: 150px;width: 150px;left: 50%;top: 60%;transform: translate(-50%, -50%);font-size: 15px;",this.timePicker.body.time.setAttributeNode(t),this.timePicker.body.appendChild(this.timePicker.body.time),a.call(this),this.timePicker.body.time.picker=document.createElement("div");var t=document.createAttribute("style");t.value="position: absolute;transform-origin: 50% bottom 0px;-ms-transform-origin: 50% bottom 0px;-webkit-transform-origin: 50% bottom 0px;transform: translate(-50%, -100%) rotateZ(0deg);left: 50%;top:50%;height: 75px;width: 3px;border-radius: 50px;-webkit-border-radius: 50px;-moz-border-radius: 50px;background: #ccc;",this.timePicker.body.time.picker.setAttributeNode(t),this.timePicker.body.time.appendChild(this.timePicker.body.time.picker),this.timePicker.body.time.picker.head=document.createElement("div");var t=document.createAttribute("style");t.value="position: absolute;transform: translate(-50%, -50%);left: 50%;top:0%;height: 30px;width: 30px;border-radius: 50px;-webkit-border-radius: 50px;-moz-border-radius: 50px;background: #ccc;color: #2d2d2d;text-align: center;vertical-align: middle;line-height: 30px;color: white;",this.timePicker.body.time.picker.head.setAttributeNode(t),this.timePicker.body.time.picker.appendChild(this.timePicker.body.time.picker.head),d.call(this),n.call(this,{parent:this.timePicker.body.time,left:"-5%",bottom:"-25%",content:"AM",display:this.timePicker.body.head.origin}),n.call(this,{parent:this.timePicker.body.time,right:"-5%",bottom:"-25%",content:"PM",display:this.timePicker.body.head.origin}),n.call(this,{parent:this.timePicker.body,left:"0",bottom:"0",width:"50%",content:"CANCEL",cancel:!0}),n.call(this,{parent:this.timePicker.body,right:"0",bottom:"0",width:"50%",content:"OK",ok:!0}),this.timePicker.body.timeminutes=document.createElement("ol");var t=document.createAttribute("style");t.value="margin: 0;padding: 0;list-style: none;position: absolute;height: 150px;width: 150px;left: 150%;top: 60%;transform: translate(-50%, -50%);font-size: 15px;",this.timePicker.body.timeminutes.setAttributeNode(t),this.timePicker.body.appendChild(this.timePicker.body.timeminutes),m.call(this),this.timePicker.body.timeminutes.picker=document.createElement("div");var t=document.createAttribute("style");t.value="position: absolute;transform-origin: 50% bottom 0px;-ms-transform-origin: 50% bottom 0px;-webkit-transform-origin: 50% bottom 0px;transform: translate(-50%, -100%) rotateZ(0deg);left: 50%;top:50%;height: 75px;width: 3px;border-radius: 50px;-webkit-border-radius: 50px;-moz-border-radius: 50px;background: #ccc;",this.timePicker.body.timeminutes.picker.setAttributeNode(t),this.timePicker.body.timeminutes.appendChild(this.timePicker.body.timeminutes.picker),this.timePicker.body.timeminutes.picker.head=document.createElement("div");var t=document.createAttribute("style");t.value="position: absolute;transform: translate(-50%, -50%);left: 50%;top:0%;height: 30px;width: 30px;border-radius: 50px;-webkit-border-radius: 50px;-moz-border-radius: 50px;background: #ccc;color: #2d2d2d;text-align: center;vertical-align: middle;line-height: 30px;color: white;",this.timePicker.body.timeminutes.picker.head.setAttributeNode(t),this.timePicker.body.timeminutes.picker.appendChild(this.timePicker.body.timeminutes.picker.head),c.call(this)}function i(t){console.log("im closing");var e=t.target,i=null;if("UI_MD_ok"==e.getAttribute("id"))i=!0;else if("UI_MD_cancel"!=e.getAttribute("id"))return!1;var r=this,o=r.timePicker.body.head.hours.textContent+":"+r.timePicker.body.head.minutes.textContent+" "+r.timePicker.body.head.origin.textContent;i&&(this.dateForm.value=o),this.overlay.addEventListener(this.transitionEnd,function(t){r.overlay==t.target})}function r(t){if("mousedown"==t.type&&(this.isMouseDown=1),"OL"!=t.target.tagName&&"LI"!=t.target.tagName&&t.target!=this.timePicker.body.time.picker&&t.target!=this.timePicker.body.time.picker.head)return!1;if(this.isMouseDown){var e=Math.ceil(t.clientX-this.timePicker.body.time.getBoundingClientRect().left),i=Math.ceil(t.clientY-this.timePicker.body.time.getBoundingClientRect().top);this.timePicker.body.time.picker.style.boxShadow="0px -1px 2px 0px #aaa",this.timePicker.body.time.picker.head.style.boxShadow="0px 0px 4px 0px #aaa";var r=this.timePicker.body.time.offsetWidth/2,o=this.timePicker.body.time.offsetHeight/2,s=Math.atan2(i-o,e-r),n=Math.round(180*s/Math.PI),a=null;n>=-165&&-135>n?(a=10,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(300deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-300deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=-135&&-105>n?(a=11,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(330deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-330deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=-105&&-75>n?(a=12,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(0deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(0deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=-75&&-45>n?(a=1,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(30deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-30deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=-45&&-15>n?(a=2,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(60deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-60deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=-15&&15>n?(a=3,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(90deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-90deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=15&&45>n?(a=4,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(120deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-120deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=45&&75>n?(a=5,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(150deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-150deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=75&&105>n?(a=6,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(180deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-180deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=105&&135>n?(a=7,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(210deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-210deg)",this.timePicker.body.time.picker.head.innerHTML=a):n>=135&&165>n?(a=8,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(240deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-240deg)",this.timePicker.body.time.picker.head.innerHTML=a):(a=9,this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(270deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-270deg)",this.timePicker.body.time.picker.head.innerHTML=a),this.timePicker.body.head.hours.textContent=a>9?""+a:"0"+a}}function o(t){if("mousedown"==t.type&&(this.isMouseDown=1),"OL"!=t.target.tagName&&"LI"!=t.target.tagName&&t.target!=this.timePicker.body.timeminutes.picker&&t.target!=this.timePicker.body.timeminutes.picker.head)return!1;if(this.isMouseDown){var e=Math.ceil(t.clientX-this.timePicker.body.timeminutes.getBoundingClientRect().left),i=Math.ceil(t.clientY-this.timePicker.body.timeminutes.getBoundingClientRect().top);this.timePicker.body.timeminutes.picker.style.boxShadow="0px -1px 2px 0px #aaa",this.timePicker.body.timeminutes.picker.head.style.boxShadow="0px 0px 4px 0px #aaa";for(var r=this.timePicker.body.timeminutes.offsetWidth/2,o=this.timePicker.body.timeminutes.offsetHeight/2,s=Math.atan2(i-o,e-r),n=Math.round(180*s/Math.PI),a=null,m=-93,d=0;59>=d;d++){var c=m+6;45==d&&(c=-1*c,c+=6),n>=m&&c>n&&(a=d,this.timePicker.body.timeminutes.picker.style.transform="translate(-50%, -100%) rotateZ("+6*d+"deg)",this.timePicker.body.timeminutes.picker.head.style.transform="translate(-50%, -50%) rotateZ(-"+6*d+"deg)",d%5==0?(this.timePicker.body.timeminutes.picker.head.innerHTML=a,this.timePicker.body.timeminutes.picker.style.width="3px",this.timePicker.body.timeminutes.picker.head.style.width="30px",this.timePicker.body.timeminutes.picker.head.style.height="30px",this.timePicker.body.timeminutes.picker.head.textContent=d):(this.timePicker.body.timeminutes.picker.style.width="1px",this.timePicker.body.timeminutes.picker.head.style.width="7px",this.timePicker.body.timeminutes.picker.head.style.height="7px",this.timePicker.body.timeminutes.picker.head.textContent="")),m=c}(n>=177&&180>=n||n>=-180&&-177>=n)&&(a=45,this.timePicker.body.timeminutes.picker.style.transform="translate(-50%, -100%) rotateZ(270deg)",this.timePicker.body.timeminutes.picker.head.style.transform="translate(-50%, -50%) rotateZ(-270deg)",this.timePicker.body.timeminutes.picker.head.innerHTML=a,this.timePicker.body.timeminutes.picker.style.width="3px",this.timePicker.body.timeminutes.picker.head.style.width="30px",this.timePicker.body.timeminutes.picker.head.style.height="30px",this.timePicker.body.timeminutes.picker.head.textContent=a),this.timePicker.body.head.minutes.textContent=a>9?""+a:"0"+a}}function s(t){"mouseup"==t.type&&(this.isMouseDown=0),this.timePicker.body.time.removeEventListener("mousemove",r.bind(this)),this.timePicker.body.time.picker.style.boxShadow="none",this.timePicker.body.time.picker.head.style.boxShadow="none",this.timePicker.body.timeminutes.removeEventListener("mousemove",o.bind(this)),this.timePicker.body.timeminutes.picker.style.boxShadow="none",this.timePicker.body.timeminutes.picker.head.style.boxShadow="none"}function n(t){var e=this,i=document.createElement("div"),r=document.createAttribute("style");r.value="font-weight: 500;font-size: 14px;background: transparent;color: #9e9e9e;height: 36px;text-align: center;line-height: 36px;text-transform: uppercase;position: absolute;overflow: hidden;cursor: pointer;",i.setAttributeNode(r),i.style.transitionProperty="background",i.style.transitionDuration="500ms",i.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",t.left&&(i.style.left=t.left),t.right&&(i.style.right=t.right),t.top&&(i.style.top=t.top),t.bottom&&(i.style.bottom=t.bottom),t.width&&(i.style.width=t.width),t.parent.appendChild(i),i.innerHTML=t.content;var o=document.createElement("span");o.style.position="absolute",o.style.backgroundColor="rgba(0,0,0,0.3)",o.style.borderRadius="100%",o.style.transform="translate(-50%, -50%)",o.style.height=o.style.width=0,i.appendChild(o),i.onmousedown=function(r){t.display&&(t.display.style.transitionDuration="0s",t.display.style.color=e.fontColorLight),o.style.transitionDuration="0s",o.style.transitionProperty="width,height,opacity",o.style.height=o.style.width=0,o.style.opacity=1;var s=i.getBoundingClientRect(),n=r.pageY-s.top-o.offsetHeight/2-document.body.scrollTop,a=r.pageX-s.left-o.offsetWidth/2-document.body.scrollLeft;o.style.top=n+"px",o.style.left=a+"px"},i.onmouseup=function(i){t.display&&(t.display.style.transitionDuration=".5s",t.display.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1);",t.display.style.color=e.fontColorDark),o.style.transitionDuration="0.5s",o.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1);";var r=i.target.getBoundingClientRect();o.style.height=o.style.width=Math.max(r.width,r.height)+"px",o.style.opacity=0},i.onmouseover=function(){this.style.backgroundColor="#eee"},i.onmouseout=function(){this.style.backgroundColor="transparent"},i.addEventListener("click",function(e){if(t.display&&(t.display.innerHTML=i.textContent),t.cancel){var r=document.createAttribute("id");r.value="UI_MD_cancel",i.setAttributeNode(r)}if(t.ok){var r=document.createAttribute("id");r.value="UI_MD_ok",i.setAttributeNode(r)}})}function a(){for(var t=this.timePicker.body.time,e=t.offsetWidth/2,i="",r=1;12>=r;r++){var o=(r-3)/6*Math.PI,s=e+e*Math.cos(o),n=e+e*Math.sin(o);i+='<li style="position: absolute;transform: translate(-50%, -50%);left:'+s+"px; top:"+n+'px">'+r+"</li>"}t.innerHTML=i}function m(){for(var t=this.timePicker.body.timeminutes,e=t.offsetWidth/2,i="",r=1;12>=r;r++){var o=(r-3)/6*Math.PI,s=e+e*Math.cos(o),n=e+e*Math.sin(o),a=5*r==60?0:5*r;i+='<li style="position: absolute;transform: translate(-50%, -50%);left:'+s+"px; top:"+n+'px">'+a+"</li>"}t.innerHTML=i}function d(){var t=this.timePicker.body.head.hours.textContent;"12"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(0deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(0deg)",this.timePicker.body.time.picker.head.textContent="12"):"01"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(30deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-30deg)",this.timePicker.body.time.picker.head.textContent="1"):"02"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(60deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-60deg)",this.timePicker.body.time.picker.head.textContent="2"):"03"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(90deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-90deg)",this.timePicker.body.time.picker.head.textContent="3"):"04"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(120deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-120deg)",this.timePicker.body.time.picker.head.textContent="4"):"05"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(150deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-150deg)",this.timePicker.body.time.picker.head.textContent="5"):"06"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(180deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-180deg)",this.timePicker.body.time.picker.head.textContent="6"):"07"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(210deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-210deg)",this.timePicker.body.time.picker.head.textContent="7"):"08"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(240deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-240deg)",this.timePicker.body.time.picker.head.textContent="8"):"09"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(270deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-270deg)",this.timePicker.body.time.picker.head.textContent="9"):"10"===t?(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(300deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-300deg)",this.timePicker.body.time.picker.head.textContent="10"):"11"===t&&(this.timePicker.body.time.picker.style.transform="translate(-50%, -100%) rotateZ(330deg)",this.timePicker.body.time.picker.head.style.transform="translate(-50%, -50%) rotateZ(-330deg)",this.timePicker.body.time.picker.head.textContent="11")}function c(){for(var t=this.timePicker.body.head.minutes.textContent,e=0;59>=e;e++)t==e&&(this.timePicker.body.timeminutes.picker.style.transform="translate(-50%, -100%) rotateZ("+6*e+"deg)",this.timePicker.body.timeminutes.picker.head.style.transform="translate(-50%, -50%) rotateZ(-"+6*e+"deg)",e%5==0?(this.timePicker.body.timeminutes.picker.style.width="3px",this.timePicker.body.timeminutes.picker.head.style.width="30px",this.timePicker.body.timeminutes.picker.head.style.height="30px",this.timePicker.body.timeminutes.picker.head.textContent=e):(this.timePicker.body.timeminutes.picker.style.width="1px",this.timePicker.body.timeminutes.picker.head.style.width="7px",this.timePicker.body.timeminutes.picker.head.style.height="7px",this.timePicker.body.timeminutes.picker.head.textContent=""))}function h(){this.timePicker.body.head.hours.style.transitionProperty="color",this.timePicker.body.head.hours.style.transitionDuration="400ms",this.timePicker.body.head.hours.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.head.hours.style.color=this.fontColorLight,this.timePicker.body.head.minutes.style.transitionProperty="color",this.timePicker.body.head.minutes.style.transitionDuration="400ms",this.timePicker.body.head.minutes.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.head.minutes.style.color=this.fontColorDark,this.timePicker.body.time.style.transitionProperty="left,right,top,bottom",this.timePicker.body.time.style.transitionDuration="400ms",this.timePicker.body.time.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.time.style.left="50%",this.timePicker.body.timeminutes.style.transitionProperty="left,right,top,bottom",this.timePicker.body.timeminutes.style.transitionDuration="400ms",this.timePicker.body.timeminutes.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.timeminutes.style.left="150%"}function l(){this.timePicker.body.head.hours.style.transitionProperty="color",this.timePicker.body.head.hours.style.transitionDuration="400ms",this.timePicker.body.head.hours.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.head.hours.style.color=this.fontColorDark,this.timePicker.body.head.minutes.style.transitionProperty="color",this.timePicker.body.head.minutes.style.transitionDuration="400ms",this.timePicker.body.head.minutes.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.head.minutes.style.color=this.fontColorLight,this.timePicker.body.time.style.transitionProperty="left,right,top,bottom",this.timePicker.body.time.style.transitionDuration="400ms",this.timePicker.body.time.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.time.style.left="-50%",this.timePicker.body.timeminutes.style.transitionProperty="left,right,top,bottom",this.timePicker.body.timeminutes.style.transitionDuration="400ms",this.timePicker.body.timeminutes.style.transitionTimingFunction="cubic-bezier(.55,0,.1,1)",this.timePicker.body.timeminutes.style.left="50%"}function y(){var t=document.createElement("div");return t.style.WebkitTransition?"webkitTransitionEnd":t.style.OTransition?"oTransitionEnd":"transitionend"}function k(){this.overlay&&(this.overlay.addEventListener("click",i.bind(this)),this.overlay.addEventListener("mouseup",s.bind(this))),this.timePicker.body.time&&(this.timePicker.body.time.addEventListener("mousedown",r.bind(this)),this.timePicker.body.time.addEventListener("mousemove",r.bind(this))),this.timePicker.body.timeminutes&&(this.timePicker.body.timeminutes.addEventListener("mousedown",o.bind(this)),this.timePicker.body.timeminutes.addEventListener("mousemove",o.bind(this))),this.timePicker.body.head.hours&&this.timePicker.body.head.hours.addEventListener("click",h.bind(this)),this.timePicker.body.head.minutes&&this.timePicker.body.head.minutes.addEventListener("click",l.bind(this))}this.UI_MD_TimePicker=function(){console.log("im cunstructing"),this.timePicker={},this.overlay=null,this.dateForm=null,this.isMouseDown=0,this.transitionEnd=y();var e={theme:"light",lang:"en"};switch(arguments[0]&&"object"==typeof arguments[0]&&(this.options=t(e,arguments[0])),this.options.theme){case"light":this.colorOverlay="#f9f9f9",this.fontColorDark="#212121",this.fontColorLight="#bdbdbd"}},UI_MD_TimePicker.prototype.open=function(t){console.log("im openning"),t.form&&(this.dateForm=t.form),e.call(this),k.call(this)}}();

var timePicker=new UI_MD_TimePicker({});
timePicker.open({});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console