Team:UCLA/sams extra css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<script type="text/css">
<script type="text/css">
-
#wrapper {
+
#sidebar-wrapper {
-
  padding-left: 250px;
+
    margin-right: -250px;
-
  transition: all 0.4s ease 0s;
+
    right: 0;
-
}
+
    width: 250px;
 +
    background: rgb(0,0,0);
 +
    position: fixed;
 +
    height: 100%;
 +
    overflow-y: auto;
 +
    z-index: 1000;
 +
    transition: all 0.5s ease-in 0s;
 +
    -webkit-transition: all 0.5s ease-in 0s;
 +
    -moz-transition: all 0.5s ease-in 0s;
 +
    -ms-transition: all 0.5s ease-in 0s;
 +
    -o-transition: all 0.5s ease-in 0s;
 +
  }
-
#sidebar-wrapper {
+
  .sidebar-nav {
-
  margin-left: -250px;
+
    position: absolute;
-
  left: 250px;
+
    top: 0;
-
  width: 250px;
+
    width: 250px;
-
  background: #000;
+
    list-style: none;
-
  position: fixed;
+
    margin: 0;
-
  height: 100%;
+
    padding: 0;
-
  overflow-y: auto;
+
  }
-
  z-index: 1000;
+
-
  transition: all 0.4s ease 0s;
+
-
}
+
-
#wrapper.active {
+
  .sidebar-nav li {
-
  padding-left: 0;
+
    line-height: 50px;
-
}
+
    text-indent: 20px;
 +
  }
-
#wrapper.active #sidebar-wrapper {
+
  .sidebar-nav li a {
-
  left: 0;
+
    color: #999999;
-
}
+
    display: block;
 +
    text-decoration: none;
 +
  }
-
#page-content-wrapper {
+
  .sidebar-nav li a:hover {
-
  width: 100%;
+
    color: #fff;
-
}
+
    background: rgba(255,255,255,0.2);
 +
    text-decoration: none;
 +
  }
-
 
+
   .sidebar-nav li a:active, .sidebar-nav li a:focus {
-
 
+
-
.sidebar-nav {
+
-
   position: absolute;
+
-
  top: 0;
+
-
  width: 250px;
+
-
  list-style: none;
+
-
  margin: 0;
+
-
  padding: 0;
+
-
}
+
-
 
+
-
.sidebar-nav li {
+
-
  line-height: 40px;
+
-
  text-indent: 20px;
+
-
}
+
-
 
+
-
.sidebar-nav li a {
+
-
  color: #999999;
+
-
  display: block;
+
-
  text-decoration: none;
+
-
  padding-left: 60px;
+
-
}
+
-
 
+
-
.sidebar-nav li a span:before {
+
-
  position: absolute;
+
-
  left: 0;
+
-
  color: #41484c;
+
-
  text-align: center;
+
-
  width: 20px;
+
-
  line-height: 18px;
+
-
}
+
-
 
+
-
.sidebar-nav li a:hover,
+
-
.sidebar-nav li.active {
+
-
  color: #fff;
+
-
  background: rgba(255,255,255,0.2);
+
-
  text-decoration: none;
+
-
}
+
-
 
+
-
.sidebar-nav li a:active,
+
-
.sidebar-nav li a:focus {
+
-
  text-decoration: none;
+
-
}
+
-
 
+
-
.sidebar-nav > .sidebar-brand {
+
-
  height: 65px;
+
-
  line-height: 60px;
+
-
  font-size: 18px;
+
-
}
+
-
 
+
-
.sidebar-nav > .sidebar-brand a {
+
-
  color: #999999;
+
-
}
+
-
 
+
-
.sidebar-nav > .sidebar-brand a:hover {
+
-
  color: #fff;
+
-
  background: none;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
.content-header {
+
-
  height: 65px;
+
-
  line-height: 65px;
+
-
}
+
-
 
+
-
.content-header h1 {
+
-
  margin: 0;
+
-
  margin-left: 20px;
+
-
  line-height: 65px;
+
-
  display: inline-block;
+
-
}
+
-
 
+
-
#menu-toggle {
+
     text-decoration: none;
     text-decoration: none;
-
}
+
  }
-
.btn-menu {
+
  .sidebar-nav > .sidebar-brand {
-
  color: #000;
+
    height: 55px;
-
}  
+
    line-height: 55px;
 +
    font-size: 18px;
 +
  }
-
.inset {
+
  .sidebar-nav > .sidebar-brand a {
-
  padding: 20px;
+
    color: #999999;
-
}
+
  }
-
@media (max-width:767px) {
+
  .sidebar-nav > .sidebar-brand a:hover {
 +
    color: #fff;
 +
    background: none;
 +
  }
-
#wrapper {
+
  #menu-toggle {
-
  padding-left: 0;
+
    top: 0;
-
}
+
    right: 0;
 +
    position: fixed;
 +
    z-index: 1;
 +
  }
-
#sidebar-wrapper {
+
  #sidebar-wrapper.active {
-
  left: 0;
+
    right: 250px;
-
}
+
    width: 250px;
 +
    transition: all 0.5s ease-out 0s;
 +
    -webkit-transition: all 0.5s ease-out 0s;
 +
    -moz-transition: all 0.5s ease-out 0s;
 +
    -ms-transition: all 0.5s ease-out 0s;
 +
    -o-transition: all 0.5s ease-out 0s;
 +
  }
-
#wrapper.active {
+
   .toggle {
-
   position: relative;
+
    margin: 5px 5px 0 0;
-
  left: 250px;
+
   }
-
}
+
-
 
+
-
#wrapper.active #sidebar-wrapper {
+
-
  left: 250px;
+
-
  width: 250px;
+
-
  transition: all 0.4s ease 0s;
+
-
}
+
-
 
+
-
#menu-toggle {
+
-
   display: inline-block;
+
-
}
+
-
 
+
-
.inset {
+
-
  padding: 15px;
+
-
}
+
-
 
+
-
}
+
</script>
</script>
<script type="text/javascript">
<script type="text/javascript">
-
$("#menu-toggle").click(function(e) {
+
  $("#menu-close").click(function(e) {
-
        e.preventDefault();
+
    e.preventDefault();
-
        $("#wrapper").toggleClass("active");
+
    $("#sidebar-wrapper").toggleClass("active");
-
    });
+
  });
-
 
+
  $("#menu-toggle").click(function(e) {
-
    $('body').scrollspy({ target: '#spy', offset:80});
+
    e.preventDefault();
-
 
+
    $("#sidebar-wrapper").toggleClass("active");
-
    $('a[href*=#]:not([href=#])').click(function() {
+
  });
-
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
+
-
 
+
-
            var target = $(this.hash);
+
-
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+
-
            if (target.length) {
+
-
                $('html,body').animate({
+
-
                    scrollTop: target.offset().top
+
-
                }, 1000);
+
-
                return false;
+
-
            }
+
-
        }
+
-
    });
+
</script>
</script>
</html>
</html>

Revision as of 00:23, 7 August 2014

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