webapp/src/app/@theme/layouts/two-columns/two-columns.layout.scss

   1 @import '../../styles/themes';
   2 @import '~bootstrap/scss/mixins/breakpoints';
   3 @import '~@nebular/theme/styles/global/bootstrap/breakpoints';
   4
   5 @include nb-install-component() {
   6   nb-layout-column.small {
   7     flex: 0.15 !important;
   8   }
   9
  10   nb-sidebar.settings-sidebar {
  11     $sidebar-width: 7.5rem;
  12
  13     transition: width 0.3s ease;
  14     width: $sidebar-width;
  15     overflow: hidden;
  16
  17     &.collapsed {
  18       width: 0;
  19
  20       /deep/ .main-container {
  21         width: 0;
  22
  23         .scrollable {
  24           width: $sidebar-width;
  25           padding: 1.25rem;
  26         }
  27       }
  28     }
  29
  30     /deep/ .main-container {
  31       width: $sidebar-width;
  32       background: nb-theme(color-bg);
  33       transition: width 0.3s ease;
  34       overflow: hidden;
  35
  36       .scrollable {
  37         width: $sidebar-width;
  38       }
  39
  40       @include nb-for-theme(cosmic) {
  41         background: nb-theme(layout-bg);
  42       }
  43     }
  44   }
  45
  46   nb-sidebar.menu-sidebar {
  47
  48     margin-top: nb-theme(sidebar-header-gap);
  49
  50     /deep/ .main-container {
  51       height:
  52         calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
  53       border-top-right-radius: nb-theme(radius);
  54     }
  55
  56     /deep/ nb-sidebar-header {
  57       padding-bottom: 0.5rem;
  58       text-align: center;
  59     }
  60
  61     background: transparent;
  62
  63     .main-btn {
  64       padding: 0.75rem 2.5rem;
  65       margin-top: -2rem;
  66       font-weight: bold;
  67       transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
  68
  69       i {
  70         font-size: 2rem;
  71         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  72       }
  73       span {
  74         padding-left: 0.25rem;
  75       }
  76
  77       i, span {
  78         vertical-align: middle;
  79       }
  80     }
  81
  82     &.compacted {
  83
  84       /deep/ nb-sidebar-header {
  85         padding-left: 0;
  86         padding-right: 0;
  87       }
  88
  89       .main-btn {
  90         width: 46px;
  91         height: 44px;
  92         padding: 0.375rem;
  93         border-radius: 5px;
  94         transition: none;
  95
  96         span {
  97           display: none;
  98         }
  99       }
 100     }
 101   }
 102
 103   @include media-breakpoint-down(xs) {
 104     .main-content {
 105       padding: 0.75rem !important;
 106
 107     }
 108   }
 109
 110   @include media-breakpoint-down(sm) {
 111
 112     nb-sidebar.menu-sidebar {
 113
 114       margin-top: 0;
 115
 116       /deep/ .main-container {
 117         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
 118         border-top-right-radius: 0;
 119
 120         .scrollable {
 121           padding-top: 0;
 122         }
 123       }
 124     }
 125
 126     .main-btn {
 127       display: none;
 128     }
 129   }
 130 }