diff options
Diffstat (limited to 'webapp/src/app/@theme/layouts/one-column/one-column.layout.scss')
-rw-r--r-- | webapp/src/app/@theme/layouts/one-column/one-column.layout.scss | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss b/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss new file mode 100644 index 0000000..7ccf7b7 --- /dev/null +++ b/webapp/src/app/@theme/layouts/one-column/one-column.layout.scss @@ -0,0 +1,130 @@ +@import '../../styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/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); + + /deep/ .main-container { + height: + calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important; + border-top-right-radius: nb-theme(radius); + } + + /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); + + i { + font-size: 2rem; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + span { + padding-left: 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; + border-top-right-radius: 0; + + .scrollable { + padding-top: 0; + } + } + } + + .main-btn { + display: none; + } + } +} |