1 @import '../../styles/themes';
2 @import '~bootstrap/scss/mixins/breakpoints';
3 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
5 @include nb-install-component() {
6 nb-layout-column.small {
10 nb-sidebar.settings-sidebar {
11 $sidebar-width: 7.5rem;
13 transition: width 0.3s ease;
14 width: $sidebar-width;
20 /deep/ .main-container {
24 width: $sidebar-width;
30 /deep/ .main-container {
31 width: $sidebar-width;
32 background: nb-theme(color-bg);
33 transition: width 0.3s ease;
37 width: $sidebar-width;
40 @include nb-for-theme(cosmic) {
41 background: nb-theme(layout-bg);
46 nb-sidebar.menu-sidebar {
48 margin-top: nb-theme(sidebar-header-gap);
50 /deep/ .main-container {
52 calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
53 border-top-right-radius: nb-theme(radius);
56 /deep/ nb-sidebar-header {
57 padding-bottom: 0.5rem;
61 background: transparent;
64 padding: 0.75rem 2.5rem;
67 transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
71 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
74 padding-left: 0.25rem;
78 vertical-align: middle;
84 /deep/ nb-sidebar-header {
103 @include media-breakpoint-down(xs) {
105 padding: 0.75rem !important;
110 @include media-breakpoint-down(sm) {
112 nb-sidebar.menu-sidebar {
116 /deep/ .main-container {
117 height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
118 border-top-right-radius: 0;