123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- @import '../../styles/themes';
- @import '~bootstrap/scss/mixins/breakpoints';
- @import '~@nebular/theme/styles/global/breakpoints';
- @include nb-install-component() {
- nb-layout-column.small {
- flex: 0.15 !important;
- }
- nb-sidebar.settings-sidebar {
- $sidebar-width: 7.5rem;
- transition: width 0.3s ease;
- width: $sidebar-width;
- overflow: hidden;
- &.collapsed {
- width: 0;
- /deep/ .main-container {
- width: 0;
- .scrollable {
- width: $sidebar-width;
- padding: 1.25rem;
- }
- }
- }
- /deep/ .main-container {
- width: $sidebar-width;
- background: nb-theme(color-bg);
- transition: width 0.3s ease;
- overflow: hidden;
- .scrollable {
- width: $sidebar-width;
- }
- @include nb-for-theme(cosmic) {
- background: nb-theme(layout-bg);
- }
- }
- }
- nb-sidebar.menu-sidebar {
- margin-top: nb-theme(sidebar-header-gap);
- @include nb-for-theme(corporate) {
- margin-top: 0;
- }
- /deep/ .main-container {
- height:
- calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
- @include nb-ltr(border-top-right-radius, nb-theme(radius));
- @include nb-rtl(border-top-left-radius, nb-theme(radius));
- @include nb-for-theme(corporate) {
- border: 1px solid nb-theme(separator);
- height:
- calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
- }
- }
- /deep/ .scrollable {
- @include nb-for-theme(corporate) {
- padding-top: 0;
- .menu-item:first-child {
- border-top: none;
- }
- }
- }
- /deep/ nb-sidebar-header {
- padding-bottom: 0.5rem;
- text-align: center;
- }
- background: transparent;
- .main-btn {
- padding: 0.75rem 2.5rem;
- margin-top: -2rem;
- font-weight: bold;
- transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
- @include nb-for-theme(corporate) {
- border-radius: nb-theme(radius);
- }
- i {
- font-size: 2rem;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- }
- span {
- @include nb-ltr(padding-left, 0.25rem);
- @include nb-rtl(padding-right, 0.25rem);
- }
- i, span {
- vertical-align: middle;
- }
- }
- &.compacted {
- /deep/ nb-sidebar-header {
- padding-left: 0;
- padding-right: 0;
- }
- .main-btn {
- width: 46px;
- height: 44px;
- padding: 0.375rem;
- border-radius: 5px;
- transition: none;
- span {
- display: none;
- }
- }
- }
- }
- @include media-breakpoint-down(xs) {
- .main-content {
- padding: 0.75rem !important;
- }
- }
- @include media-breakpoint-down(sm) {
- nb-sidebar.menu-sidebar {
- margin-top: 0;
- /deep/ .main-container {
- height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
- @include nb-ltr(border-top-right-radius, 0);
- @include nb-rtl(border-top-left-radius, 0);
- .scrollable {
- padding-top: 0;
- }
- }
- }
- .main-btn {
- display: none;
- }
- }
- }
|