Team:UCLA/sams extra css

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<script type="text/css">
<script type="text/css">
<!--SLIDING SIDE BAR-->
<!--SLIDING SIDE BAR-->
-
#wrapper {
+
.nav-sidebar {  
-
  padding-left: 250px;
+
    width: 100%;
-
  transition: all 0.4s ease 0s;
+
    padding: 8px 0;
 +
    border-right: 1px solid #ddd;
}
}
-
 
+
.nav-sidebar a {
-
#sidebar-wrapper {
+
    color: #333;
-
  margin-left: -250px;
+
    -webkit-transition: all 0.08s linear;
-
  left: 250px;
+
    -moz-transition: all 0.08s linear;
-
  width: 250px;
+
    -o-transition: all 0.08s linear;
-
  background: #000;
+
    transition: all 0.08s linear;
-
  position: fixed;
+
    -webkit-border-radius: 4px 0 0 4px;  
-
  height: 100%;
+
    -moz-border-radius: 4px 0 0 4px;  
-
  overflow-y: auto;
+
    border-radius: 4px 0 0 4px;  
-
  z-index: 1000;
+
-
  transition: all 0.4s ease 0s;
+
}
}
-
 
+
.nav-sidebar .active a {  
-
#wrapper.active {
+
    cursor: default;
-
  padding-left: 0;
+
    background-color: #428bca;
 +
    color: #fff;
 +
    text-shadow: 1px 1px 1px #666;  
}
}
-
 
+
.nav-sidebar .active a:hover {
-
#wrapper.active #sidebar-wrapper {
+
    background-color: #428bca;  
-
  left: 0;
+
}
}
-
 
+
.nav-sidebar .text-overflow a,
-
#page-content-wrapper {
+
.nav-sidebar .text-overflow .media-body {
-
  width: 100%;
+
    white-space: nowrap;
 +
    overflow: hidden;
 +
    -o-text-overflow: ellipsis;
 +
    text-overflow: ellipsis;  
}
}
-
 
+
/* Right-aligned sidebar */
-
 
+
.nav-sidebar.pull-right {  
-
.sidebar-nav {
+
    border-right: 0;  
-
  position: absolute;
+
    border-left: 1px solid #ddd;  
-
  top: 0;
+
-
  width: 250px;
+
-
  list-style: none;
+
-
  margin: 0;
+
-
  padding: 0;
+
}
}
-
 
+
.nav-sidebar.pull-right a {
-
.sidebar-nav li {
+
    -webkit-border-radius: 0 4px 4px 0;
-
  line-height: 40px;
+
    -moz-border-radius: 0 4px 4px 0;  
-
  text-indent: 20px;
+
    border-radius: 0 4px 4px 0;  
}
}
-
 
-
.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;
 
-
}
 
-
 
-
}
 
-
</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>
</script>
</html>
</html>

Revision as of 00:08, 7 August 2014

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