Team:Aalto-Helsinki/stylesheet.css

From 2014.igem.org

(Difference between revisions)
Line 21: Line 21:
}
}
-
p {
+
#sidebar.affix-top{
-
/* font-size:50px; */
+
position: static;
 +
margin-top:30px;
 +
width:228px;
}
}
-
.navbar td{
+
#sidebar.affix {
-
text-align:center;
+
position: fixed;
 +
top:70px;
 +
width:228px;
}
}
-
.navbar .menu-link {
+
/*sidebar.css*/
-
border:1px solid black;
+
#wrapper {
-
height:45px;
+
  padding-left: 250px;
-
background-color: #e7e7e7;
+
  transition: all 0.4s ease 0s;
}
}
-
.menu-link a {
+
#sidebar-wrapper {
-
color:#000000;
+
  margin-left: -250px;
 +
  left: 250px;
 +
  width: 250px;
 +
  background: #000;
 +
  position: fixed;
 +
  height: 100%;
 +
  overflow-y: auto;
 +
  z-index: 1000;
 +
  transition: all 0.4s ease 0s;
}
}
-
.navbar td:hover{
+
#page-content-wrapper {
-
background-color: #d3d3d3;
+
  width: 100%;
}
}
-
#sidebar.affix-top{
+
.sidebar-nav {
-
position: static;
+
  position: absolute;
-
margin-top:30px;
+
  top: 0;
-
width:228px;
+
  width: 250px;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
}
}
-
#sidebar.affix {
+
.sidebar-nav li {
-
position: fixed;
+
  line-height: 40px;
-
top:70px;
+
  text-indent: 20px;
-
width:228px;
+
}
 +
 
 +
.sidebar-nav li a {
 +
  color: #999999;
 +
  display: block;
 +
  text-decoration: none;
 +
}
 +
 
 +
.sidebar-nav li a:hover {
 +
  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 {
 +
  display: none;
 +
}
 +
 
 +
.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;
}
}

Revision as of 08:11, 11 June 2014

p { /* font-size:50px; */ }

.navbar td{ text-align:center; }

.navbar .menu-link { border:1px solid black; height:45px; background-color: #e7e7e7; }

.menu-link a { color:#000000; }

.navbar td:hover{ background-color: #d3d3d3; }

  1. sidebar.affix-top{

position: static; margin-top:30px; width:228px; }

  1. sidebar.affix {

position: fixed; top:70px; width:228px; }

/*sidebar.css*/

  1. wrapper {
 padding-left: 250px;
 transition: all 0.4s ease 0s;

}

  1. sidebar-wrapper {
 margin-left: -250px;
 left: 250px;
 width: 250px;
 background: #000;
 position: fixed;
 height: 100%;
 overflow-y: auto;
 z-index: 1000;
 transition: all 0.4s ease 0s;

}

  1. page-content-wrapper {
 width: 100%;

}

.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;

}

.sidebar-nav li a:hover {

 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;

}

  1. menu-toggle {
 display: none;

}

.inset {

 padding: 20px;

}

@media (max-width:767px) {

  1. wrapper {
 padding-left: 0;

}

  1. sidebar-wrapper {
 left: 0;

}

  1. wrapper.active {
 position: relative;
 left: 250px;

}

  1. wrapper.active #sidebar-wrapper {
 left: 250px;
 width: 250px;
 transition: all 0.4s ease 0s;

}

  1. menu-toggle {
 display: inline-block;

}

.inset {

 padding: 15px;

}