Files
cachet-docker/resources/assets/sass/partials/_sidebar.scss
2016-07-12 16:28:28 +08:00

287 lines
7.7 KiB
SCSS
Vendored

body.dashboard {
.sidebar {
position: fixed;
left: $sidebar-normal-width;
width: 0;
height: 100%;
margin-left: -$sidebar-normal-width;
overflow-y: auto;
background: $sidebar-background-color;
@include box-shadow($sidebar-border-shadow);
z-index: 1000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
.sidebar-inner {
position: absolute;
top: 0;
width: $sidebar-normal-width;
margin: 0;
padding: 0;
list-style: none;
.profile {
text-align: center;
padding: 20px 10px;
margin-bottom: 0;
.dropdown-toggle {
text-decoration: none;
}
.dropdown-menu {
top: 108%;
}
.avatar {
width: 60px;
img {
border-radius: 50%;
width: 50px;
}
}
.username {
word-break: break-all;
margin-bottom: 0;
}
a {
color: $sidebar-text-color;
text-decoration: none;
}
}
.quick-add-incident {
@extend .text-center;
padding: 10px;
i {
@extend .visible-sm;
}
span {
@extend .hidden-sm;
}
}
ul {
clear: both;
margin: 0;
padding: 0;
list-style: none;
li {
font-size: $sidebar-text-size;
&.active {
background: lighten($sidebar-background-color, 2%);
a {
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid #6c818c;
border-bottom: 1px solid #6c818c;
color: $sidebar-text-active-color;
&:focus,
&:hover {
text-decoration: none;
}
}
}
a {
display: block;
padding: 15px;
color: $sidebar-text-color;
i {
font-size: 18px;
min-width: 17px;
text-align: center;
position: relative;
top: 1px;
margin-right: 5px;
}
&:focus,
&:hover {
text-decoration: none;
}
span {
&.label {
float: right;
margin: 6px 0;
&.label-info {
background-color: $cachet-primary;
}
}
}
}
&.sub-nav-item {
a {
padding-left: 40px;
}
}
}
}
& > ul > li > a {
& > span {
@extend .hidden-sm;
}
}
}
.bottom-menu-sidebar {
@extend .hidden-sm;
position: fixed;
bottom: 0;
width: 230px;
z-index: 999;
ul > li {
float: left;
display: block;
width: 33.333%;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
a {
color: #333333;
display: block;
position: relative;
text-align: center;
padding: 6px 0;
background: #fff;
}
}
}
}
// Sidebar media queries
@media (min-width: $screen-xs-max) {
.sidebar {
width: $sidebar-normal-width;
}
.wrapper.toggled .sidebar {
width: 0;
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sidebar {
width: 80px;
left: 150px;
margin-left: -150px;
.sidebar-inner {
width: 80px;
.profile .avatar img {
width: 40px;
}
.quick-add-incident {
.btn {
padding: 3px 6px;
}
i {
font-size: 20px;
}
}
& > ul > li > a {
text-align: center;
& > i {
font-size: 25px;
}
}
}
}
}
.sidebar-toggler {
float: left;
padding: 10px;
position: relative;
top: -15px;
left: -5px;
margin-right: 10px;
cursor: pointer;
i {
font-size: 25px;
}
}
.sub-sidebar {
left: 0;
top: 0;
bottom: 0;
position: fixed;
margin-left: 228px;
width: 22%;
background: #f9fdff;
border-right: 1px solid #E8ECF1;
h3 {
margin: 0;
text-align: center;
font-size: 19px;
padding: 30px 0;
}
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
li {
a {
color: #666;
display: block;
padding: 13px 30px;
font-size: 15px;
transition: all 0.2s linear;
text-decoration: none;
&.active {
color: $cachet-secondary;
}
&:hover {
color: $cachet-secondary;
}
}
i {
margin-right: 5px;
}
}
}
.sidebar-toggler {
position: absolute;
top: 3px;
left: 20px;
font-size: 36px;
cursor: pointer;
}
+ .content-wrapper {
top: 0;
position: relative;
margin-left: 26%;
padding-right: 40px !important;
}
}
// Sub-sidebar media queries
@media (max-width: $screen-xs-max) {
.sub-sidebar {
position: relative;
margin-left: 0;
width: 100%;
+ .content-wrapper {
margin-left: 0;
padding-left: 40px !important;
width: 100%;
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sub-sidebar {
margin-left: 80px;
width: 25%;
+ .content-wrapper {
padding-left: 45px !important;
}
}
}
}