"
Team:Manchester/css/morph.css
From 2014.igem.org
| Line 1: | Line 1: | ||
/* Morph Button: Default Styles */ | /* Morph Button: Default Styles */ | ||
| - | + | .morph-button { | |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
| Line 7: | Line 7: | ||
} | } | ||
| - | + | .morph-button > button { | |
position: relative; | position: relative; | ||
padding: 0 0em; | padding: 0 0em; | ||
| Line 20: | Line 20: | ||
} | } | ||
| - | + | .morph-button.open > button { | |
pointer-events: none; | pointer-events: none; | ||
} | } | ||
| - | + | .morph-content { | |
pointer-events: none; | pointer-events: none; | ||
} | } | ||
| - | + | .morph-button.open .morph-content { | |
pointer-events: auto; | pointer-events: auto; | ||
} | } | ||
/* Common styles for overlay and modal type (fixed morph) */ | /* Common styles for overlay and modal type (fixed morph) */ | ||
| - | + | .morph-button-fixed, | |
| - | + | .morph-button-fixed .morph-content { | |
width: 130px; | width: 130px; | ||
height: 50px; | height: 50px; | ||
} | } | ||
| - | + | .morph-button-fixed > button { | |
/*z-index: 1000;*/ | /*z-index: 1000;*/ | ||
width: 100%; | width: 100%; | ||
| Line 47: | Line 47: | ||
} | } | ||
| - | + | .morph-button-fixed.open > button { | |
opacity: 0; | opacity: 0; | ||
-webkit-transition: opacity 0.1s; | -webkit-transition: opacity 0.1s; | ||
| Line 53: | Line 53: | ||
} | } | ||
| - | + | .morph-button-fixed .morph-content { | |
position: fixed; | position: fixed; | ||
z-index: 900; | z-index: 900; | ||
| Line 61: | Line 61: | ||
} | } | ||
| - | + | .morph-button-fixed.open .morph-content { | |
opacity: 1; | opacity: 1; | ||
} | } | ||
| - | + | .morph-button-fixed .morph-content > div { | |
visibility: hidden; | visibility: hidden; | ||
height: 0; | height: 0; | ||
| Line 73: | Line 73: | ||
} | } | ||
| - | + | .morph-button-fixed.open .morph-content > div { | |
visibility: visible; | visibility: visible; | ||
height: auto; | height: auto; | ||
| Line 81: | Line 81: | ||
} | } | ||
| - | + | .morph-button-fixed.active > button { | |
z-index: 2000; | z-index: 2000; | ||
} | } | ||
| - | + | .morph-button-fixed.active .morph-content { | |
z-index: 1900; | z-index: 1900; | ||
} | } | ||
/* Morph Button Style: Modal */ | /* Morph Button Style: Modal */ | ||
| - | + | .morph-button-modal::before { | |
position: fixed; | position: fixed; | ||
top: 0; | top: 0; | ||
| Line 105: | Line 105: | ||
} | } | ||
| - | + | .morph-button-modal.open::before { | |
opacity: 1; | opacity: 1; | ||
pointer-events: auto; | pointer-events: auto; | ||
} | } | ||
| - | + | .morph-button-modal.active::before { | |
z-index: 1800; | z-index: 1800; | ||
} | } | ||
| - | + | .morph-button-modal .morph-content { | |
overflow: hidden; | 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; | -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; | ||
| Line 120: | Line 120: | ||
} | } | ||
| - | + | .morph-button-modal.open .morph-content { | |
top: 75% !important; | top: 75% !important; | ||
left: 80.46% !important; | left: 80.46% !important; | ||
| Line 130: | Line 130: | ||
} | } | ||
| - | + | .morph-button.morph-button-modal-2 { | |
display: inline-block; | display: inline-block; | ||
margin: 0px 140px; | margin: 0px 140px; | ||
| Line 136: | Line 136: | ||
} | } | ||
| - | + | .morph-button-modal-2 > button, | |
| - | + | .morph-button-modal-2 .morph-content { | |
background-color: #471975; | background-color: #471975; | ||
color: #ff9900; | color: #ff9900; | ||
| Line 143: | Line 143: | ||
} | } | ||
| - | + | .morph-button-modal-2.open .morph-content { | |
margin: -290px 0 0 -270px; | margin: -290px 0 0 -270px; | ||
width: 340px; | width: 340px; | ||
| Line 151: | Line 151: | ||
| - | + | .morph-button-modal-2.open .morph-content > div { | |
-webkit-transition: opacity 0.3s 0.3s; | -webkit-transition: opacity 0.3s 0.3s; | ||
transition: opacity 0.3s 0.3s; | transition: opacity 0.3s 0.3s; | ||
} | } | ||
| - | + | .morph-content .morph-clone { | |
padding: 0; | padding: 0; | ||
font-weight: 700; | font-weight: 700; | ||
| Line 165: | Line 165: | ||
/* Let's add some nice easing for all cases */ | /* 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); | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); | ||
-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); | -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1); | ||
| Line 173: | Line 173: | ||
/* No JS fallback: let's hide the button and show the content */ | /* No JS fallback: let's hide the button and show the content */ | ||
| - | + | .no-js .morph-button > button { | |
display: none; | display: none; | ||
} | } | ||
| - | + | .no-js .morph-button { | |
margin: 15px 0; | margin: 15px 0; | ||
float: none; | float: none; | ||
} | } | ||
| - | + | .no-js .morph-button, | |
| - | + | .no-js .morph-button .morph-content, | |
| - | + | .no-js .morph-button .morph-content > div { | |
position: relative; | position: relative; | ||
width: auto; | width: auto; | ||
| Line 197: | Line 197: | ||
} | } | ||
| - | + | .no-js .morph-button .morph-content .icon-close { | |
display: none; | display: none; | ||
} | } | ||
| - | + | .no-transition { | |
-webkit-transition: none !important; | -webkit-transition: none !important; | ||
transition: none !important; | transition: none !important; | ||
| Line 210: | Line 210: | ||
@media screen and (max-width: 600px) { | @media screen and (max-width: 600px) { | ||
| - | + | .morph-button-modal.open .morph-content { | |
top: 0% !important; | top: 0% !important; | ||
left: 0% !important; | left: 0% !important; | ||
Latest revision as of 21:06, 14 August 2014
/* 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; } }
