Team:UCLA/Template/CSS test

From 2014.igem.org

(Difference between revisions)
Line 471: Line 471:
     color: #47a3da;
     color: #47a3da;
}
}
 +
 +
/* Orientation-dependent styles for the content of the menu */
 +
.cbp-spmenu-vertical {
.cbp-spmenu-vertical {
     width: 240px;
     width: 240px;
Line 482: Line 485:
     padding: 1em;
     padding: 1em;
}
}
 +
 +
.cbp-spmenu-horizontal {
 +
    width: 100%;
 +
    height: 150px;
 +
    left: 0;
 +
    z-index: 1000;
 +
    overflow: hidden;
 +
}
 +
 +
.cbp-spmenu-horizontal h3 {
 +
    height: 100%;
 +
    width: 20%;
 +
    float: left;
 +
}
 +
 +
.cbp-spmenu-horizontal a {
 +
    float: left;
 +
    width: 20%;
 +
    padding: 0.8em;
 +
    border-left: 1px solid #258ecd;
 +
}
 +
 +
/* Vertical menu that slides from the left or right */
 +
.cbp-spmenu-left {
.cbp-spmenu-left {
     left: -240px;
     left: -240px;
Line 497: Line 524:
     right: 0px;
     right: 0px;
}
}
 +
 +
/* Horizontal menu that slides from the top or bottom */
 +
 +
.cbp-spmenu-top {
 +
    top: -150px;
 +
}
 +
 +
.cbp-spmenu-bottom {
 +
    bottom: -150px;
 +
}
 +
 +
.cbp-spmenu-top.cbp-spmenu-open {
 +
    top: 0px;
 +
}
 +
 +
.cbp-spmenu-bottom.cbp-spmenu-open {
 +
    bottom: 0px;
 +
}
 +
 +
/* Push classes applied to the body */
 +
 +
.cbp-spmenu-push {
 +
    overflow-x: hidden;
 +
    position: relative;
 +
    left: 0;
 +
}
 +
 +
.cbp-spmenu-push-toright {
 +
    left: 240px;
 +
}
 +
 +
.cbp-spmenu-push-toleft {
 +
    left: -240px;
 +
}
 +
 +
/* Transitions */
 +
 +
.cbp-spmenu,
 +
.cbp-spmenu-push {
 +
    -webkit-transition: all 0.3s ease;
 +
    -moz-transition: all 0.3s ease;
 +
    transition: all 0.3s ease;
 +
}
 +
 +
/* Example media queries */
 +
 +
@media screen and (max-width: 55.1875em){
 +
 +
    .cbp-spmenu-horizontal {
 +
        font-size: 75%;
 +
        height: 110px;
 +
    }
 +
 +
    .cbp-spmenu-top {
 +
        top: -110px;
 +
    }
 +
 +
    .cbp-spmenu-bottom {
 +
        bottom: -110px;
 +
    }
 +
 +
}
 +
@media screen and (max-height: 26.375em){
@media screen and (max-height: 26.375em){
   
   
Line 516: Line 606:
         left: 190px;
         left: 190px;
     }
     }
 +
}
</style>
</style>
</html>
</html>

Revision as of 21:27, 6 August 2014

Retrieved from "http://2014.igem.org/Team:UCLA/Template/CSS_test"