"
Team:Manchester/css/morph-content.css
From 2014.igem.org
(Style for the morph button content) |
|||
| Line 13: | Line 13: | ||
} | } | ||
| - | .icon-close { | + | #content .icon-close { |
z-index: 100; | z-index: 100; | ||
display: block; | display: block; | ||
| Line 24: | Line 24: | ||
} | } | ||
| - | .icon:before { | + | #content .icon:before { |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
| Line 39: | Line 39: | ||
} | } | ||
| - | .icon-close::before { | + | #content .icon-close::before { |
content: "\e601"; | content: "\e601"; | ||
} | } | ||
| - | .icon-close { | + | #content .icon-close { |
position: absolute; | position: absolute; | ||
top: 20px; | top: 20px; | ||
| Line 49: | Line 49: | ||
} | } | ||
| - | .icon-close:hover { | + | #content .icon-close:hover { |
color: #a50a05; | color: #a50a05; | ||
} | } | ||
/* Style for the morphing buttons */ | /* Style for the morphing buttons */ | ||
| - | .content-style-form { | + | #content .content-style-form { |
position: relative; | position: relative; | ||
text-align: left; | text-align: left; | ||
} | } | ||
| - | .content-style-form h2 { | + | #content .content-style-form h2 { |
margin: 0; | margin: 0; | ||
padding: 0.4em 0 0.3em; | padding: 0.4em 0 0.3em; | ||
| Line 67: | Line 67: | ||
} | } | ||
| - | .content-style-form form { | + | #content .content-style-form form { |
padding: 10px 30px; | padding: 10px 30px; | ||
} | } | ||
| - | .content-style-form form p { | + | #content .content-style-form form p { |
margin: 0 0 5px 0; | margin: 0 0 5px 0; | ||
font-size: 1em; | font-size: 1em; | ||
} | } | ||
| - | .content-style-form label { | + | #content .content-style-form label { |
display: block; | display: block; | ||
padding: 10px 0 0; | padding: 10px 0 0; | ||
| Line 86: | Line 86: | ||
} | } | ||
| - | .content-style-form input[type="text"] { | + | #content .content-style-form input[type="text"] { |
padding: 10px; | padding: 10px; | ||
width: 100%; | width: 100%; | ||
| Line 96: | Line 96: | ||
} | } | ||
| - | .content-style-form input[type="text"]:focus { | + | #content .content-style-form input[type="text"]:focus { |
border-color: #ff9900; | border-color: #ff9900; | ||
color: #ff9900; | color: #ff9900; | ||
} | } | ||
| - | .content-style-form input:focus { | + | #content .content-style-form input:focus { |
outline: 0; | outline: 0; | ||
} | } | ||
| - | .content-style-form button { | + | #content .content-style-form button { |
display: block; | display: block; | ||
margin-top: 2.5em; | margin-top: 2.5em; | ||
| Line 120: | Line 120: | ||
} | } | ||
| - | .content-style-form .icon-close { | + | #content .content-style-form .icon-close { |
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
| Line 127: | Line 127: | ||
} | } | ||
| - | .content-style-form .icon-close:hover { | + | #content .content-style-form .icon-close:hover { |
color: #e75854; | color: #e75854; | ||
} | } | ||
| - | .js .content-style-form-1 h2, | + | #content .js .content-style-form-1 h2, |
| - | .js .content-style-form-1 p, | + | #content .js .content-style-form-1 p, |
| - | .js .content-style-form-1 .icon-close { | + | #content .js .content-style-form-1 .icon-close { |
opacity: 0; | opacity: 0; | ||
-webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s; | -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s; | ||
| Line 141: | Line 141: | ||
} | } | ||
| - | .content-style-form-1 p:first-child { | + | #content .content-style-form-1 p:first-child { |
-webkit-transition-delay: 0.4s; | -webkit-transition-delay: 0.4s; | ||
transition-delay: 0.4s; | transition-delay: 0.4s; | ||
} | } | ||
| - | .content-style-form-1 p:nth-child(2) { | + | #content .content-style-form-1 p:nth-child(2) { |
-webkit-transition-delay: 0.45s; | -webkit-transition-delay: 0.45s; | ||
transition-delay: 0.45s; | transition-delay: 0.45s; | ||
} | } | ||
| - | .content-style-form-1 p:nth-child(3) { | + | #content .content-style-form-1 p:nth-child(3) { |
-webkit-transition-delay: 0.5s; | -webkit-transition-delay: 0.5s; | ||
transition-delay: 0.5s; | transition-delay: 0.5s; | ||
} | } | ||
| - | .morph-button.open .content-style-form-1 h2, | + | #content .morph-button.open .content-style-form-1 h2, |
| - | .morph-button.open .content-style-form-1 p, | + | #content .morph-button.open .content-style-form-1 p, |
| - | .morph-button.open .content-style-form-1 .icon-close { | + | #content .morph-button.open .content-style-form-1 .icon-close { |
opacity: 1; | opacity: 1; | ||
-webkit-transform: scale(1); | -webkit-transform: scale(1); | ||
transform: scale(1); | transform: scale(1); | ||
} | } | ||
Latest revision as of 23:28, 13 August 2014
/* Icons */ /* This effect has been adapted from one of the tutorials on the codrops website */ @font-face { font-weight: normal; font-style: normal;
font-family: 'icomoon'; src:url('../../fonts/icomoon/icomoon.eot?i64fx9'); src:url('../../fonts/icomoon/icomoon.eot?#iefixi64fx9') format('embedded-opentype'), url('../../fonts/icomoon/icomoon.woff?i64fx9') format('woff'), url('../../fonts/icomoon/icomoon.ttf?i64fx9') format('truetype'), url('../../fonts/icomoon/icomoon.svg?i64fx9#icomoon') format('svg'); }
- content .icon-close {
z-index: 100; display: block; overflow: hidden; width: 3em; height: 3em; text-align: center; line-height: 3; cursor: pointer; }
- content .icon:before {
position: relative; display: block; width: 100%; height: 100%; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- content .icon-close::before {
content: "\e601"; }
- content .icon-close {
position: absolute; top: 20px; right: 20px; }
- content .icon-close:hover {
color: #a50a05; }
/* Style for the morphing buttons */
- content .content-style-form {
position: relative; text-align: left; }
- content .content-style-form h2 {
margin: 0; padding: 0.4em 0 0.3em; text-align: center; font-weight: 300; font-size: 3.5em; }
- content .content-style-form form {
padding: 10px 30px; }
- content .content-style-form form p {
margin: 0 0 5px 0; font-size: 1em; }
- content .content-style-form label {
display: block; padding: 10px 0 0; color: #ff9900; text-transform: uppercase; letter-spacing: 0px; font-weight: bold; font-size: small; }
- content .content-style-form input[type="text"] {
padding: 10px; width: 100%; border: 2px solid #ebd3bd; background: transparent; color: #b09a86; font-weight: 300; font-size: 1.5em; }
- content .content-style-form input[type="text"]:focus {
border-color: #ff9900; color: #ff9900; }
- content .content-style-form input:focus {
outline: 0; }
- content .content-style-form button {
display: block; margin-top: 2.5em; padding: 1.5em; width: 100%; border: none; background: #330066; color: #ff9900; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; font-size: 1.25em; box-shadow: 4px 6px 7px rgba(0,0,0,0.5); }
- content .content-style-form .icon-close {
top: 0; right: 0; color: #ebd3bd; font-size: 75%; }
- content .content-style-form .icon-close:hover {
color: #e75854; }
- content .js .content-style-form-1 h2,
- content .js .content-style-form-1 p,
- content .js .content-style-form-1 .icon-close {
opacity: 0; -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s; transition: opacity 0.2s 0.35s, transform 0.2s 0.35s; -webkit-transform: scale(0.85); transform: scale(0.85); }
- content .content-style-form-1 p:first-child {
-webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
- content .content-style-form-1 p:nth-child(2) {
-webkit-transition-delay: 0.45s; transition-delay: 0.45s; }
- content .content-style-form-1 p:nth-child(3) {
-webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
- content .morph-button.open .content-style-form-1 h2,
- content .morph-button.open .content-style-form-1 p,
- content .morph-button.open .content-style-form-1 .icon-close {
opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
