Team:Aalto-Helsinki/stylesheet.css
From 2014.igem.org
(Difference between revisions)
Vaakapallo (Talk | contribs) |
Vaakapallo (Talk | contribs) |
||
Line 21: | Line 21: | ||
} | } | ||
- | + | #sidebar.affix-top{ | |
- | + | position: static; | |
+ | margin-top:30px; | ||
+ | width:228px; | ||
} | } | ||
- | . | + | #sidebar.affix { |
- | + | position: fixed; | |
+ | top:70px; | ||
+ | width:228px; | ||
} | } | ||
- | . | + | /*sidebar.css*/ |
- | + | #wrapper { | |
- | + | padding-left: 250px; | |
- | + | transition: all 0.4s ease 0s; | |
} | } | ||
- | + | #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; | ||
} | } | ||
- | + | #page-content-wrapper { | |
- | + | width: 100%; | |
} | } | ||
- | + | .sidebar-nav { | |
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | width: 250px; | |
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
} | } | ||
- | #sidebar. | + | .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; | ||
+ | } | ||
+ | |||
+ | #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; }
- sidebar.affix-top{
position: static; margin-top:30px; width:228px; }
- sidebar.affix {
position: fixed; top:70px; width:228px; }
/*sidebar.css*/
- wrapper {
padding-left: 250px; transition: all 0.4s ease 0s;
}
- 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;
}
- 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;
}
- 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;
}