components/shell/shell.component.scss

0001 /* shell.component.scss */
0002
0003 /* The overall shell layout */
0004 .display-shell {
0005   display: flex;
0006   flex-direction: column;
0007   height: 100vh;
0008   width: 100%;
0009   overflow: hidden;
0010   box-sizing: border-box;
0011 }
0012
0013 /* TOP BAR (header) styling */
0014 .top-toolbar {
0015   position: relative;
0016   z-index: 20;
0017   padding: 0 16px;
0018   background-color: var(--mat-sys-surface-container);
0019   color: var(--mat-sys-on-surface-container);
0020   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
0021 }
0022
0023 /** Left and right panels separator (which is movable by mouse) */
0024 .divider {
0025   width: 5px;
0026   margin: 1px 0;
0027   cursor: col-resize;
0028   background-color: var(--mat-sys-outline-variant);
0029   user-select: none;
0030   z-index: 15;
0031   // border-radius: 2px;
0032
0033 }
0034
0035 .left-divider {
0036   cursor: col-resize;
0037   background-color: var(--mat-sys-outline-variant);
0038   box-shadow:  2px 0 rgba(0, 0, 0, 0.1);
0039 }
0040 .right-divider {
0041   cursor: col-resize;
0042   background-color: var(--mat-sys-outline-variant);
0043   box-shadow:  -2px 0 rgba(0, 0, 0, 0.1);
0044 }
0045
0046 /* The main content area for left/right/center */
0047 .main-content {
0048   box-sizing: border-box;
0049   display: flex;
0050   flex: 1;
0051   overflow: hidden;
0052 }
0053
0054 /** Left and right panes */
0055 .pane {
0056   position: relative;
0057   z-index: 10;
0058   overflow: auto;
0059   min-width: 0;
0060 }
0061
0062 .left-pane {
0063   box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.2);
0064   background-color: var(--mat-sys-surface-container);
0065   // (!) Padding messes up all changing dimension! padding: 5px 5px 5px 10px;
0066 }
0067 .right-pane {
0068   background-color: var(--mat-sys-surface-container);
0069   box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.2);
0070   // (!) Padding messes up all changing dimension! padding: 5px 10px 5px 5px;
0071 }
0072
0073 .central-pane {
0074   background-color: var(--mat-sys-surface);
0075   flex: 1;
0076   overflow: auto;
0077
0078 }
0079
0080 /** BOTTOM BAR (footer) styling */
0081 .footer {
0082   display: flex;
0083   align-items: center;
0084   justify-content: space-between; /* space out left & right */
0085   min-height: 36px; /* or whatever height you want */
0086   width: 100%;
0087   position: relative;
0088   z-index: 20;
0089   background-color: var(--mat-sys-surface-container);
0090   color: var(--mat-sys-on-surface-container);
0091   box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.3);
0092   padding: 4px 8px;
0093 }
0094
0095 /* If you want columns, or just do standard flex children. */
0096 .footer-left {
0097   display: flex;
0098   align-items: center;
0099   gap: 8px;
0100 }
0101 .footer-center {
0102   flex: 1; /* fill space, center content if you like */
0103   display: flex;
0104   justify-content: center;
0105   align-items: center;
0106 }
0107 .footer-right {
0108   display: flex;
0109   align-items: center;
0110   gap: 8px;
0111 }
0112
0113 /* Hamburger vs. desktop nav style toggles */
0114 .hide-desktop {
0115   display: none;
0116 }
0117
0118 .hide-mobile {
0119   display: flex;
0120 }
0121
0122 /* For the nav items row on big screens */
0123 .nav-items.visible-nav {
0124   display: flex;
0125   align-items: center;
0126   gap: 12px;
0127 }
0128
0129 /* The "middle section" is the content projected by <ng-content select="[header]"> */
0130 .middle-section {
0131   margin-left: 24px;
0132   display: flex;
0133   align-items: center;
0134 }
0135
0136 /* Fills space to push theme toggle or hamburger to the right */
0137 .flex-spacer {
0138   flex: 1 1 auto;
0139 }
0140
0141 /* Position of theme toggle on large screens */
0142 .theme-toggle {
0143   margin-left: 16px;
0144 }
0145
0146 /* The mobile menu container (hidden by default) */
0147 .mobile-menu {
0148   display: none;
0149   flex-direction: column;
0150   position: absolute;
0151   top: 56px; /* same height as .top-toolbar */
0152   right: 16px;
0153   background-color: var(--mat-sys-surface);
0154   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
0155   padding: 16px;
0156   border-radius: 8px;
0157   transform: translateY(-20%);
0158   opacity: 0;
0159   visibility: hidden;
0160   transition: all 0.3s ease;
0161   gap: 12px;
0162 }
0163
0164 /* Show it if .open is set */
0165 .mobile-menu.open {
0166   transform: translateY(0%);
0167   opacity: 1;
0168   visibility: visible;
0169 }
0170
0171 .theme-toggle-mobile {
0172   margin-top: 16px;
0173 }
0174
0175
0176 /* Responsive breakpoints for small screens */
0177 @media (max-width: 768px) {
0178   .hide-desktop {
0179     display: inline-flex !important;
0180   }
0181   .hide-mobile {
0182     display: none !important;
0183   }
0184   .mobile-menu {
0185     display: flex;
0186   }
0187 }