Team:UCLA/Template/CSS test

From 2014.igem.org

(Difference between revisions)
Line 442: Line 442:
<!--SLIDING SIDE MENU-->
<!--SLIDING SIDE MENU-->
-
.cbp-spmenu {
+
body {
-
     background: #47a3da;
+
    overflow-x: hidden
 +
}
 +
#wrapper {
 +
    position: relative;
 +
    z-index: 10;
 +
    top: 0;
 +
    left: 0;
 +
    -webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
 +
section {
 +
    margin-bottom: 30px
 +
}
 +
section h1 {
 +
    font-family: "Oswald", sans-serif;
 +
    margin-bottom: 10px;
 +
}
 +
section p {
 +
    margin-bottom: 30px
 +
}
 +
section p:last-child {
 +
    margin-bottom: 0
 +
}
 +
section:last-child {
 +
    margin-bottom: 0
 +
}
 +
section.toggle {
 +
    text-align: center
 +
}
 +
.mask {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    z-index: 15;
 +
    width: 100%;
 +
    height: 100%;
 +
     background: rgba(0, 0, 0, 0.8);
 +
nav.menu {
     position: fixed;
     position: fixed;
 +
    z-index: 20;
 +
    background-color: #67b5d1;
 +
    overflow: hidden;
 +
    -webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
}
}
-
+
nav.menu ul {
-
.cbp-spmenu h3 {
+
     list-style-type: none;
-
     color: #afdefa;
+
-
    font-size: 1.9em;
+
-
    padding: 20px;
+
     margin: 0;
     margin: 0;
 +
    padding: 0;
 +
}
 +
nav.menu a {
     font-weight: 300;
     font-weight: 300;
-
     background: #0d77b6;
+
     color: #fff;
}
}
-
+
button.close-menu {
-
.cbp-spmenu a {
+
     background-color: #3184a1;
-
     display: block;
+
     color: #fff;
     color: #fff;
-
    font-size: 1.1em;
 
-
    font-weight: 300;
 
}
}
-
+
button.close-menu:focus {
-
.cbp-spmenu a:hover {
+
     outline: none
-
     background: #258ecd;
+
nav.slide-menu-left {
 +
    top: 0;
 +
    width: 300px;
 +
    height: 100%;
}
}
-
+
nav.slide-menu-left li {
-
.cbp-spmenu a:active {
+
     display: block;
-
     background: #afdefa;
+
    text-align: center;
-
     color: #47a3da;
+
    border-bottom: solid 1px #3184a1;
 +
     border-top: solid 1px #b5dbe9;
}
}
-
+
nav.slide-menu-left li:first-child {
-
/* Orientation-dependent styles for the content of the menu */
+
     border-top: none
-
+
-
.cbp-spmenu-vertical {
+
-
     width: 240px;
+
-
    height: 100%;
+
-
    top: 0;
+
-
    z-index: 1000;
+
}
}
-
+
nav.slide-menu-left li:last-child {
-
.cbp-spmenu-vertical a {
+
     border-bottom: none
-
     border-bottom: 1px solid #258ecd;
+
-
    padding: 1em;
+
}
}
-
+
nav.slide-menu-left a {
-
/* Vertical menu that slides from the left or right */
+
    display: block;
-
+
    padding: 10px;
-
.cbp-spmenu-left {
+
    font-size: 18px;
-
     left: -240px;
+
}
 +
nav.slide-menu-left button.close-menu {
 +
     margin: 10px 0;
 +
    padding: 10px 30px;
 +
    background-color: #3184a1;
 +
    color: #fff;
}
}
-
+
nav.slide-menu-left {
-
.cbp-spmenu-left.cbp-spmenu-open {
+
     left: -300px
-
     left: 0px;
+
}
}
-
+
body.sml-open nav.slide-menu-left {
-
@media screen and (max-height: 26.375em){
+
     left: 0
-
+
-
    .cbp-spmenu-vertical {
+
-
        font-size: 90%;
+
-
        width: 190px;
+
-
    }
+
-
+
-
    .cbp-spmenu-left,
+
-
     .cbp-spmenu-push-toleft {
+
-
        left: -190px;
+
-
    }
+
}
}
</style>
</style>
</html>
</html>

Revision as of 23:40, 6 August 2014

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