|
19 | 19 | @use 'sass:math';
|
20 | 20 | @import 'functions';
|
21 | 21 |
|
| 22 | + |
| 23 | +:root { |
| 24 | + --body-container-margin: 8px; |
| 25 | + --body-container-radius: var(--border-radius-large); |
| 26 | +} |
| 27 | + |
| 28 | +@media screen and (max-width: 768px) { |
| 29 | + :root { |
| 30 | + --body-container-margin: 0; |
| 31 | + --body-container-radius: 0; |
| 32 | + } |
| 33 | +} |
| 34 | + |
| 35 | + |
| 36 | +html { |
| 37 | + width: 100%; |
| 38 | + height: 100%; |
| 39 | + position: absolute; |
| 40 | + background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); |
| 41 | + background-size: cover; |
| 42 | + background-position: top center; |
| 43 | +} |
| 44 | + |
22 | 45 | body {
|
23 |
| - background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); |
24 |
| - background-size: contain; |
25 |
| - position: fixed; |
| 46 | + background: url('/apps/dashboard/img/kamil-porembinski-clouds.jpg'); |
| 47 | + background-size: cover; |
| 48 | + background-position: top center; |
| 49 | + position: fixed; |
| 50 | + width: 100%; |
| 51 | + height: 100%; |
26 | 52 | }
|
27 | 53 |
|
28 | 54 | /* BASE STYLING ------------------------------------------------------------ */
|
@@ -615,12 +641,11 @@ kbd {
|
615 | 641 | position: static;
|
616 | 642 | // padding is included in height
|
617 | 643 | min-height: 100%;
|
618 |
| - margin: 8px; |
| 644 | + margin: var(--body-container-margin); |
619 | 645 | margin-top: 50px;
|
620 | 646 | display: flex;
|
621 |
| - height: calc(100vh - 50px - 8px); |
622 |
| - border-radius: var(--border-radius-large); |
623 |
| - box-sizing: content-box; |
| 647 | + height: calc(100vh - 50px - var(--body-container-margin)); |
| 648 | + border-radius: var(--body-container-radius); |
624 | 649 | overflow-y: scroll;
|
625 | 650 | }
|
626 | 651 |
|
@@ -1345,3 +1370,53 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
1345 | 1370 | display: flex;
|
1346 | 1371 | }
|
1347 | 1372 | }
|
| 1373 | + |
| 1374 | +#app-sidebar-vue:not(.app-sidebar--full) { |
| 1375 | + position: initial; |
| 1376 | + border-radius: 0 var(--body-container-radius) var(--body-container-radius) 0; |
| 1377 | + max-height: 100%; |
| 1378 | + min-height: 100%; |
| 1379 | +} |
| 1380 | + |
| 1381 | +#app-navigation, #app-navigation-vue { |
| 1382 | + position: relative; // TODO: Fix on mobile/desktop |
| 1383 | + height: 100%; |
| 1384 | + max-height: 100%; |
| 1385 | + min-height: 100%; |
| 1386 | + padding: 12px; |
| 1387 | +} |
| 1388 | + |
| 1389 | +#content, #content-vue { |
| 1390 | + box-sizing: border-box; |
| 1391 | + position: static; |
| 1392 | + // padding is included in height |
| 1393 | + min-height: 100%; |
| 1394 | + margin: var(--body-container-margin); |
| 1395 | + margin-top: 50px; |
| 1396 | + display: flex; |
| 1397 | + height: calc(100vh - 50px - var(--body-container-margin)); |
| 1398 | + border-radius: var(--body-container-radius); |
| 1399 | + position: fixed; |
| 1400 | + overflow: hidden; |
| 1401 | + width: calc(100% - var(--body-container-margin) * 2); |
| 1402 | + max-height: calc(100% - 50px - var(--body-container-margin)); |
| 1403 | + min-height: calc(100% - 50px - var(--body-container-margin)); |
| 1404 | + |
| 1405 | + padding: 0; |
| 1406 | +} |
| 1407 | + |
| 1408 | +#app-content, #app-content-vue { |
| 1409 | + position: initial; |
| 1410 | + max-height: 100%; |
| 1411 | + min-height: 100%; |
| 1412 | + overflow: scroll; |
| 1413 | +} |
| 1414 | + |
| 1415 | + |
| 1416 | +// mobile.scss |
| 1417 | + |
| 1418 | +@media only screen and (max-width: variables.$breakpoint-mobile) { |
| 1419 | + #app-navigation { |
| 1420 | + position: fixed; |
| 1421 | + } |
| 1422 | +} |
0 commit comments