Improvement: Adjusted tab appearance for in-course settings.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2021-08-16 - Improvement: Adjusted tab appearance for in-course settings.
 * 2021-08-16 - Adjusted settings_link_page.mustache template due to upstream changes in theme Boost.
 * 2021-08-16 - Adjusted loginform.mustache template due to upstream changes in theme Boost.
 * 2021-08-16 - Bugfix: Remove overwritten template full_header.mustache. If the setting showsettingsincourse is enabled, this will place the cog icon _over_ instead of _near_ the edit button. This will fix a presentation issue with the in-course settings menu on smaller screens.  

scss/post.scss

@@ -952,23 +952,46 @@ body.scrolled #goto-top-link {
 #boost-campus-activity-settings {
     /* Initially do not display the settings. Visibility will be changed on click with incoursesettings.js. */
     display: none;
+
+    /* Improve layout and look of the settings as they are now placed within the page header. */
     margin-bottom: 1rem;
-    padding: 0 1rem 1.3rem 1rem;
+    .tab-content .card {
+        border: none;
+    }
 
+    /* Improve styling of the tabs so that they look more like real tabs. */
     .nav-tabs {
         border: none;
+    }
+    .tab-content .card {
+        background-color: darken($body-bg, 5%);
+    }
+
+    /* Do some more tweaks on smaller screens and bigger screens differently as Moodle uses different styles. */
+    @include media-breakpoint-up(md) {
+        /* Add some space. */
+        padding: 0 1rem 1.3rem 1rem;
+
+        /* Highlight the active tab. */
+        .nav-tabs {
             .active {
                 background-color: darken($body-bg, 5%);
                 border-color: darken($body-bg, 5%);
             }
         }
-    /* Improve color of tab content so it looks more like a real tab. */
-    .tab-content .card {
-        background-color: darken($body-bg, 5%);
+    }
+    @include media-breakpoint-down(sm) {
+        /* Add some space. */
+        padding: 1rem 0 1.3rem 0;
+
+        /* Remove the border around the course settings card as it would be incomplete. */
+        &.card {
             border: none;
         }
     }
 
+}
+
 /* As this is already placed within the activity content card, the border around the settings card should be removed. */
 #boost-campus-activity-settings {
     border: none;