146 lines
2.3 KiB
SCSS
146 lines
2.3 KiB
SCSS
@import '../base';
|
|
|
|
.app-wrapper {
|
|
display: flex;
|
|
font-family: 'Raleway', sans-serif;
|
|
width: 100%;
|
|
border: 1px solid $border-color-default;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1 1 0%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid $border-color-default;
|
|
background: $bg-faded;
|
|
}
|
|
|
|
.app-main-header {
|
|
height: 90px;
|
|
background: #fff;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid $border-color-default;
|
|
}
|
|
|
|
.app-main-heading {
|
|
margin-bottom: 0;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.app-main-content {
|
|
flex: 2 2 0%;
|
|
}
|
|
|
|
//= App-panel style
|
|
.app-panel {
|
|
height: calc(100% - #{$navbar-height});
|
|
top: $navbar-height;
|
|
position: fixed;
|
|
width: 340px;
|
|
left: -340px;
|
|
right: auto;
|
|
z-index: 997;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
transition: left .5s, top .5s;
|
|
flex: 0 0 340px;
|
|
&.show {
|
|
left: 0;
|
|
}
|
|
box-shadow: 2px 0 4px rgba(0,0,0,.08);
|
|
|
|
body.navbar-collapse-in & {
|
|
top: 2 * $navbar-height;
|
|
}
|
|
|
|
body.menubar-open & {
|
|
left: -340px;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
position: static;
|
|
height: auto;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.app-panel-inner {
|
|
height: auto;
|
|
@include media-breakpoint-down(sm) {
|
|
height: calc(100% - 90px);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.app-panel-toggle {
|
|
position: absolute;
|
|
top: 25%;
|
|
right: -30px;
|
|
display: block;
|
|
width: 30px;
|
|
height: 50px;
|
|
background: #fff;
|
|
box-shadow: 2px 2px 6px rgba(0,0,0,.08);
|
|
|
|
.fa {
|
|
text-align: center;
|
|
line-height: 50px;
|
|
width: 25px;
|
|
font-size: 1.13rem;
|
|
}
|
|
|
|
.fa-chevron-left {
|
|
display: none;
|
|
}
|
|
|
|
.show & .fa-chevron-left {
|
|
display: block;
|
|
}
|
|
|
|
.show & .fa-chevron-right {
|
|
display: none;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.panel-item {
|
|
border: 1px solid $border-color-default;
|
|
border-radius: $border-radius;
|
|
margin-bottom: .5rem;
|
|
padding: .75rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
a.panel-item {
|
|
display: block;
|
|
}
|
|
|
|
.app-search {
|
|
position: relative;
|
|
height: 90px;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid $border-color-default;
|
|
|
|
.search-field {
|
|
@include reset-input;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: .75rem;
|
|
border-radius: 500px;
|
|
border: 1px solid $border-color-default;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
top: 2.25rem;
|
|
right: 2.25rem;
|
|
}
|
|
} |