reitanlage-oranienburg/css/sidebar.css

209 lines
3.8 KiB
CSS

/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
#wrapper, #sidebar-wrapper, #menu-toggle-icon {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
top 0;
left: 0;
width: 100%;
height: 3em;
overflow-y: auto;
background: #000;
padding: 10px;
padding-left: 0;
border-width: thin;
border-color: white;
}
#wrapper.toggled #sidebar-wrapper {
height: 100%;
}
#wrapper.toggled #menu-toggle-icon {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
#menu-toggle, #menu-toggle-icon {
display: block-inline;
}
#menu-toggle
{
z-index: 1500;
position: absolute;
width: 100%;
top: 0;
height: 2em;
padding: 0.5em;
text-align: center;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.content-wrapper {
margin-top: 3em;
position: relative;
}
/* Sidebar Styles */
.sidebar-nav {
white-space: nowrap;
opacity: 0;
visibility: hidden;
overflow-x: hidden;
position: absolute;
width: 100%;
top: 0;
margin: 0;
padding: 0;
padding-bottom: 3em;
list-style: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper .sidebar-nav {
opacity: 1;
visibility: visible;
overflow-x: visible;
width: 100%;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li.sidebar-brand {
text-align: center;
text-indent: 0;
padding: 0 20px 0 20px;
margin: 0.5em 0 0.5em 0;
}
.sidebar-nav li.sidebar-brand a img {
filter: invert(100%);
}
.sidebar-nav li.sidebar-brand a img,
.sidebar-nav li.sidebar-brand {
height: 5em;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #bbb;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #eee;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
.sidebar-nav>.sidebar-toggle {
width: 100%;
text-indent: 0;
z-index: -1000;
}
.sidebar-nav>.sidebar-spacer {
height: 3em;
}
@media (min-width: 576px) {
.sidebar-nav {
width: 0;
}
#sidebar-wrapper {
left: 250px;
width: 3em;
height: 100%;
margin-left: -250px;
border-right-style: solid;
}
#wrapper {
padding-top: 0em;
padding-left: 3em;
}
.content-wrapper {
margin-top: 0;
position: relative;
}
#wrapper.toggled #menu-toggle-icon {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled {
padding-left: 250px;
}
#wrapper.toggled #sidebar-wrapper .sidebar-nav {
width: 100%;
}
#menu-toggle {
width: auto;
text-align: right;
}
}