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;
62 animation-name: delayedFadeIn;
63 animation-duration: 2s;
67 background: transparent;
70 padding: 0.75rem 2.5rem;
73 transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
77 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
80 padding-left: 0.25rem;
84 vertical-align: middle;
90 /deep/ nb-sidebar-header {
115 @include media-breakpoint-down(xs) {
117 padding: 0.75rem !important;
122 @include media-breakpoint-down(sm) {
124 nb-sidebar.menu-sidebar {
128 /deep/ .main-container {
129 height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
130 border-top-right-radius: 0;
144 @Keyframes delayedFadeIn {
146 75% {opacity: 0;} /* Set this to 99% for no fade-in. */