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">
-
@media (min-width: 768px){
+
#wrapper {
-
   .affix-content .container {
+
   padding-left: 250px;
-
    width: 700px;
+
  transition: all 0.4s ease 0s;
-
  }  
+
}
-
  html,body{
+
#sidebar-wrapper {
-
    background-color: #f8f8f8;
+
  margin-left: -250px;
-
    height: 100%;
+
  left: 250px;
-
    overflow: hidden;
+
  width: 250px;
-
   }
+
  background: #000;
-
    .affix-content .container .page-header{
+
  position: fixed;
-
    margin-top: 0;
+
  height: 100%;
-
  }
+
  overflow-y: auto;
 +
   z-index: 1000;
 +
  transition: all 0.4s ease 0s;
 +
}
-
  .affix-sidebar{
+
#wrapper.active {
-
    padding-right:0;
+
  padding-left: 0;
-
    font-size:small;
+
-
    padding-left: 0;
+
-
  } 
+
-
  .affix-row, .affix-container, .affix-content{
+
-
    height: 100%;
+
-
    overflow: scroll;
+
-
    margin-left: 0;
+
-
    margin-right: 0;   
+
-
  }
+
-
  .affix-content{
+
-
    background-color:white;
+
-
  }
+
-
  .sidebar-nav .navbar .navbar-collapse {
+
-
    padding: 0;
+
-
    max-height: none;
+
-
  }
+
-
  .sidebar-nav .navbar{
+
-
    border-radius:0;
+
-
    margin-bottom:0;
+
-
    border:0;
+
-
  }
+
-
  .sidebar-nav .navbar ul {
+
-
    float: none;
+
-
    display: block;
+
-
  }
+
-
  .sidebar-nav .navbar li {
+
-
    float: none;
+
-
    display: block;
+
-
  }
+
-
  .sidebar-nav .navbar li a {
+
-
    padding-top: 12px;
+
-
    padding-bottom: 12px;
+
-
  } 
+
}
}
-
@media (min-width: 769px){
+
#wrapper.active #sidebar-wrapper {
-
  .affix-content .container {
+
   left: 0;
-
    width: 600px;
+
-
   }
+
-
    .affix-content .container .page-header{
+
-
    margin-top: 0;
+
-
  } 
+
}
}
-
@media (min-width: 992px){
+
#page-content-wrapper {
-
  .affix-content .container {
+
   width: 100%;
-
   width: 900px;
+
-
  }
+
-
    .affix-content .container .page-header{
+
-
    margin-top: 0;
+
-
  }
+
}
}
-
@media (min-width: 1220px){
 
-
  .affix-row{
 
-
    overflow: hidden;
 
-
  }
 
-
  .affix-content{
 
-
    overflow: auto;
 
-
  }
 
-
   .affix-content .container {
+
.sidebar-nav {
-
     width: 1000px;
+
   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;
 +
}
 +
 
 +
.btn-menu {
 +
  color: #000;
 +
}
 +
 
 +
.inset {
 +
  padding: 20px;
 +
}
 +
 
 +
@media (max-width:767px) {
 +
 
 +
#wrapper {
 +
  padding-left: 0;
 +
}
 +
 
 +
#sidebar-wrapper {
 +
   left: 0;
 +
}
 +
 
 +
#wrapper.active {
 +
  position: relative;
 +
  left: 250px;
 +
}
 +
 
 +
#wrapper.active #sidebar-wrapper {
 +
  left: 250px;
 +
  width: 250px;
 +
  transition: all 0.4s ease 0s;
 +
}
 +
 
 +
#menu-toggle {
 +
  display: inline-block;
 +
}
 +
 
 +
.inset {
 +
  padding: 15px;
 +
}
-
  .affix-content .container .page-header{
 
-
    margin-top: 0;
 
-
  }
 
-
  .affix-content{
 
-
    padding-right: 30px;
 
-
    padding-left: 30px;
 
-
  } 
 
-
  .affix-title{
 
-
    border-bottom: 1px solid #ecf0f1;
 
-
    padding-bottom:10px;
 
-
  }
 
-
  .navbar-nav {
 
-
    margin: 0;
 
-
  }
 
-
  .navbar-collapse{
 
-
    padding: 0;
 
-
  }
 
-
  .sidebar-nav .navbar li a:hover {
 
-
    background-color: #428bca;
 
-
    color: white;
 
-
  }
 
-
  .sidebar-nav .navbar li a > .caret {
 
-
    margin-top: 8px;
 
-
  } 
 
}
}
</script>
</script>
 +
<script type="text/javascript">
 +
$("#menu-toggle").click(function(e) {
 +
        e.preventDefault();
 +
        $("#wrapper").toggleClass("active");
 +
    });
 +
 +
    $('body').scrollspy({ target: '#spy', offset:80});
 +
 +
    $('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>
</html>
</html>

Revision as of 00:19, 7 August 2014

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