Sidebar Abgrenzung

Closes #4877

Merge request studip/studip!3655

resources/assets/stylesheets/scss/layouts.scss

@@ -52,6 +52,7 @@ body {
     overflow-x: auto;
     padding: $page-margin;
     padding-bottom: calc($page-margin + 35px);
+    padding-left: $page-margin * 2;
     vertical-align: top;
 
     .oversized & {

resources/assets/stylesheets/scss/responsive.scss

@@ -316,6 +316,7 @@ $sidebarOut: -330px;
     #sidebar {
         background-color: var(--white);
         max-height: calc(100vh - 100px);
+        margin-top: 60px;
         left: 15px;
         position: absolute;
         top: 116px;
@@ -487,7 +488,9 @@ $sidebarOut: -330px;
     }
 
     #sidebar {
+        border-right: none;
         height: calc(100% - 100px);
+        margin-top: 0;
         overflow-y: auto;
         position: fixed;
         transform: translateX($sidebarOut);
@@ -496,7 +499,7 @@ $sidebarOut: -330px;
         z-index: 100;
 
         &.responsive-show {
-            width: 100%;
+            width: calc(100% - 15px);
 
             .sidebar-widget {
                 width: calc(100% - 30px);
@@ -543,7 +546,7 @@ $sidebarOut: -330px;
             grid-template-columns: ($sidebar-width + $sidebar-padding) calc(100vw - $sidebar-width - $sidebar-padding - 35px);
 
             #content-wrapper {
-                max-width: 100%;
+                max-width: calc(100% - $sidebar-padding);
             }
         }
 

resources/assets/stylesheets/scss/sidebar.scss

@@ -2,14 +2,15 @@ $icon-size: 20px;
 
 #sidebar {
     background: var(--white);
-    border-left: 0;
+    border-right: solid thin var(--color--sidebar-divider);
     display: inline-block;
     height: max-content;
     margin-bottom: $page-margin + 35px;
-    padding: 0 5px 7px 15px;
+    padding: 0 15px 7px 15px;
     position: sticky;
     text-align: left;
     top: 50px;
+    height: calc(100% - 20px);
     width: $sidebar-width;
     z-index: 2;