Y-SLD/assets/playkit/examples/scss/apps/_base.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;
}
}