webapp/src/app/@theme/layouts/xds/xds.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     /deep/ .tooltip {
  62       animation-name: delayedFadeIn;
  63       animation-duration: 2s;
  64       width: 8rem;
  65     }
  66
  67     background: transparent;
  68
  69     .main-btn {
  70       padding: 0.75rem 2.5rem;
  71       margin-top: -2rem;
  72       font-weight: bold;
  73       transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
  74
  75       i {
  76         font-size: 2rem;
  77         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  78       }
  79       span {
  80         padding-left: 0.25rem;
  81       }
  82
  83       i, span {
  84         vertical-align: middle;
  85       }
  86     }
  87
  88     &.compacted {
  89
  90       /deep/ nb-sidebar-header {
  91         padding-left: 0;
  92         padding-right: 0;
  93       }
  94
  95       .main-btn {
  96         width: 46px;
  97         height: 44px;
  98         padding: 0.375rem;
  99         border-radius: 5px;
 100         transition: none;
 101
 102         span {
 103           display: none;
 104         }
 105       }
 106     }
 107
 108     &.left.expanded {
 109       #pin-sidebar {
 110           margin-left: 11rem;
 111       }
 112     }
 113   }
 114
 115   @include media-breakpoint-down(xs) {
 116     .main-content {
 117       padding: 0.75rem !important;
 118
 119     }
 120   }
 121
 122   @include media-breakpoint-down(sm) {
 123
 124     nb-sidebar.menu-sidebar {
 125
 126       margin-top: 0;
 127
 128       /deep/ .main-container {
 129         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
 130         border-top-right-radius: 0;
 131
 132         .scrollable {
 133           padding-top: 0;
 134         }
 135       }
 136     }
 137
 138     .main-btn {
 139       display: none;
 140     }
 141   }
 142 }
 143
 144 @Keyframes delayedFadeIn {
 145   0% {opacity: 0;}
 146   75% {opacity: 0;} /* Set this to 99% for no fade-in. */
 147   100% {opacity: 1;}
 148 }