Learning area responsive design improved

Author: sazedul-haque

assets/core/scss/utilities/_borders.scss

@@ -60,15 +60,6 @@ $radius-directions: (
 // =============================================================================
 // SMART BORDER UTILITIES
 // =============================================================================
-
-// Base borders
-.tutor-border {
-  border: 1px solid $tutor-border-idle;
-}
-.tutor-border-0 {
-  border: none;
-}
-
 // Generate border-width utilities
 @each $width-key, $width-value in $border-widths {
   .tutor-border-#{$width-key} {

assets/src/scss/frontend/learning-area/_lesson-content.scss

@@ -1,7 +1,45 @@
 // Lesson Content Styles
-// Individual lesson content display and formatting
+@use '@Core/scss/tokens' as *;
+@use '@Core/scss/mixins' as *;
 
 .tutor-lesson-content {
-  // Lesson content styles will go here
-  // Text content, images, embedded media, formatting
-}
+  @include tutor-breakpoint-up(sm) {
+    margin-top: $tutor-spacing-4;
+
+    .tutor-lesson-content-tab {
+      background-color: $tutor-surface-l1;
+      border: 1px solid $tutor-border-idle;
+      border-radius: $tutor-radius-lg;
+      overflow: hidden;
+    }
+  }
+
+  @include tutor-breakpoint-down(sm) {
+    .tutor-lesson-content-tab {
+      padding-inline: $tutor-spacing-6;
+
+      .tutor-lesson-video-wrapper {
+        margin-inline: -$tutor-spacing-6;
+        margin-bottom: $tutor-spacing-6;
+      }
+
+      .tutor-tabs-nav {
+        background-color: $tutor-surface-l1;
+        padding: $tutor-spacing-2;
+        border: 1px solid $tutor-border-idle;
+        border-radius: $tutor-radius-2xl;
+        margin-bottom: $tutor-spacing-5;
+      }
+
+      .tutor-tabs-tab {
+        flex: 1;
+      }
+
+      .tutor-tabs-content {
+        background-color: $tutor-surface-l1;
+        border: 1px solid $tutor-border-idle;
+        border-radius: $tutor-radius-2xl;
+      }
+    }
+  }
+}

assets/src/scss/frontend/learning-area/layout/_footer.scss

@@ -9,4 +9,19 @@
   padding-block: $tutor-spacing-6;
   position: sticky;
   bottom: 0;
+
+  @include tutor-breakpoint-down(sm) {
+    position: fixed;
+    padding-block: $tutor-spacing-5;
+    width: 100%;
+
+    a.tutor-btn {
+      @include tutor-button-size(x-small);
+    }
+
+    button.tutor-btn {
+      @include tutor-button-size(medium);
+      gap: $tutor-spacing-4;
+    }
+  }
 }

assets/src/scss/frontend/learning-area/layout/_header.scss

@@ -10,12 +10,14 @@
   top: 0;
   z-index: $tutor-z-header;
 
-  .tutor-has-admin-bar & {
-    top: 32px;
+  @include tutor-breakpoint-up(sm) {
+    .tutor-has-admin-bar & {
+      top: 32px;
+    }
   }
 
   @include tutor-breakpoint-down(sm) {
-    padding: 0px $tutor-spacing-6 0px $tutor-spacing-6;
+    padding: $tutor-spacing-2 $tutor-spacing-6;
   }
 
   &-inner {
@@ -53,13 +55,10 @@
     }
   }
 
-  &-mobile {
-    margin-inline-start: auto;
-  }
-
   &-toggle-mobile {
     @include tutor-button-reset();
     @include tutor-flex-center();
+    margin-inline-start: auto;
     height: 44px;
     width: 44px;
 

assets/src/scss/frontend/learning-area/layout/_layout.scss

@@ -4,7 +4,7 @@
 @use '@Core/scss/tokens' as *;
 
 .tutor-learning-area {
-  &-body {
+  .tutor-learning-area-body {
     padding-inline-start: 320px;
     position: relative;
     @include tutor-transition(padding);
@@ -14,7 +14,7 @@
     }
   }
 
-  &.is-fullscreen &-body {
+  &.is-fullscreen .tutor-learning-area-body {
     padding-inline-start: 0;
   }
 
@@ -31,7 +31,14 @@
 
   .tutor-learning-area-container {
     max-width: 780px;
-    padding: 0 $tutor-spacing-6;
     margin: 0 auto;
+
+    @include tutor-breakpoint-up(sm) {
+      padding-inline: $tutor-spacing-6;
+    }
+
+    @include tutor-breakpoint-down(sm) {
+      padding-bottom: 62px;
+    }
   }
 }