Team:Manchester/css/morph.css

From 2014.igem.org

/* Morph Button: Default Styles */

.morph-button { position: relative; display: block; margin: 0 auto; }

.morph-button > button { position: relative; padding: 0 0em; border: none; background-color: #e85657; color: #f9f6e5; text-transform: uppercase; letter-spacing: 0px; font-weight: 900; line-height: 0px; overflow: hidden; }

.morph-button.open > button { pointer-events: none; }

.morph-content { pointer-events: none; }

.morph-button.open .morph-content { pointer-events: auto; }

/* Common styles for overlay and modal type (fixed morph) */ .morph-button-fixed, .morph-button-fixed .morph-content { width: 130px; height: 50px; }

.morph-button-fixed > button { /*z-index: 1000;*/ width: 100%; height: 100%; -webkit-transition: opacity 0.1s 0.5s; transition: opacity 0.1s 0.5s; }

.morph-button-fixed.open > button { opacity: 0; -webkit-transition: opacity 0.1s; transition: opacity 0.1s; }

.morph-button-fixed .morph-content { position: fixed; z-index: 900; opacity: 0; -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; }

.morph-button-fixed.open .morph-content { opacity: 1; }

.morph-button-fixed .morph-content > div { visibility: hidden; height: 0; opacity: 0; -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; transition: opacity 0.1s, visibility 0s 0.1s, height 0.4s 0.1s; }

.morph-button-fixed.open .morph-content > div { visibility: visible; height: auto; opacity: 1; -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s; }

.morph-button-fixed.active > button { z-index: 2000; }

.morph-button-fixed.active .morph-content { z-index: 1900; }

/* Morph Button Style: Modal */ .morph-button-modal::before { position: fixed; top: 0; left: 0; z-index: 800; width: 100%; height: 100%; background: rgba(0,0,0,0.5); content: ; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; pointer-events: none; }

.morph-button-modal.open::before { opacity: 1; pointer-events: auto; }

.morph-button-modal.active::before { z-index: 1800; }

.morph-button-modal .morph-content { overflow: hidden; -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; }

.morph-button-modal.open .morph-content { top: 75% !important; left: 80.46% !important; margin: -210px 0 0 -300px; width: 600px; height: 420px; -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; }

.morph-button.morph-button-modal-2 { display: inline-block; margin: 0px 140px; float: right; }

.morph-button-modal-2 > button, .morph-button-modal-2 .morph-content { background-color: #471975; color: #ff9900; box-shadow: 4px 7px 8px rgba(0,0,0,0.5); }

.morph-button-modal-2.open .morph-content { margin: -290px 0 0 -270px; width: 340px; height: 350px; box-shadow: 4px 7px 8px rgba(0,0,0,0.5); }

.morph-button-modal-2.open .morph-content > div {

	-webkit-transition: opacity 0.3s 0.3s;

transition: opacity 0.3s 0.3s; }

.morph-content .morph-clone { padding: 0; font-weight: 700; font-size: 1.3em; line-height: 30px; }

/* Let's add some nice easing for all cases */ .morph-button .morph-content, .morph-button.open .morph-content,{ -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); }

/* No JS fallback: let's hide the button and show the content */ .no-js .morph-button > button { display: none; }

.no-js .morph-button { margin: 15px 0; float: none; }

.no-js .morph-button, .no-js .morph-button .morph-content, .no-js .morph-button .morph-content > div { position: relative; width: auto; height: auto; opacity: 1; visibility: visible; top: auto; left: auto; -webkit-transform: none; transform: none; pointer-events: auto; }

.no-js .morph-button .morph-content .icon-close { display: none; }

.no-transition { -webkit-transition: none !important; transition: none !important; }

/* Media Queries */

@media screen and (max-width: 600px) { .morph-button-modal.open .morph-content { top: 0% !important; left: 0% !important; margin: 0; width: 100%; height: 100%; overflow-y: scroll; -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; } }