Team:UT-Dallas/isotope-css
From 2014.igem.org
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none; z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling {
-webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */ /*html, body {
height: 100%;
}*/
- container {
border: 1px solid #666; padding: 5px; margin-bottom: 20px;
}
.element {
width: 110px; height: 110px; margin: 5px; float: left; overflow: hidden; position: relative; background: #888; color: #222; -webkit-border-top-right-radius: 1.2em; -moz-border-radius-topright: 1.2em; border-top-right-radius: 1.2em;
}
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } .element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } .element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } .element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } .element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } .element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } .element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } .element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } .element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } .element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
.element * {
position: absolute; margin: 0;
}
.element .symbol {
left: 0.2em; top: 0.4em; font-size: 3.8em; line-height: 1.0em; color: #FFF;
} .element.large .symbol {
font-size: 4.5em;
}
.element.fake .symbol {
color: #000;
}
.element .name {
left: 0.5em; bottom: 1.6em; font-size: 1.05em;
}
.element .weight {
font-size: 0.9em; left: 0.5em; bottom: 0.5em;
}
.element .number {
font-size: 1.25em; font-weight: bold; color: hsla(0,0%,0%,.5); right: 0.5em; top: 0.5em;
}
.variable-sizes .element.width2 { width: 230px; }
.variable-sizes .element.height2 { height: 230px; }
.variable-sizes .element.width2.height2 {
font-size: 2.0em;
}
.element.large, .variable-sizes .element.large, .variable-sizes .element.large.width2.height2 {
font-size: 3.0em; width: 350px; height: 350px; z-index: 100;
}
.clickable .element:hover {
cursor: pointer;
}
.clickable .element:hover h3 {
text-shadow: 0 0 10px white, 0 0 10px white ;
}
.clickable .element:hover h2 {
color: white;
}