add styles for lesson pages

Author: Awakich

projects/social_platform/src/app/office/courses/detail/course-detail.component.scss

@@ -13,9 +13,9 @@ $detail-bar-mb: 12px;
   margin: 0 20px;
 
   @include responsive.apply-desktop {
-    margin: 0;
     height: 100%;
-    padding-bottom: 0px;
+    padding-bottom: 0;
+    margin: 0;
   }
 
   &__body {
@@ -37,8 +37,8 @@ $detail-bar-mb: 12px;
   &__cover {
     position: relative;
     height: 136px;
-    border-radius: 15px;
     margin-bottom: 24px;
+    border-radius: 15px;
 
     @include responsive.apply-desktop {
       border-radius: 15px 15px 0 0;
@@ -120,14 +120,14 @@ $detail-bar-mb: 12px;
 
     @include responsive.apply-desktop {
       gap: 180px;
-      padding: 0px 0px 30px;
+      padding: 0 0 30px;
     }
-    
+
     &--task {
       display: flex;
       flex-direction: row-reverse;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
     }
 
     &--end {
@@ -152,10 +152,10 @@ $detail-bar-mb: 12px;
   &__lesson {
     color: var(--dark-grey);
   }
-  
+
   &__meta {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-}
+}

projects/social_platform/src/app/office/courses/lesson/complete/complete.component.scss

@@ -7,7 +7,7 @@
   background-color: var(--light-white);
   border: 0.5px solid var(--medium-grey-for-outline);
   border-radius: var(--rounded-lg);
-  
+
   @include responsive.apply-desktop {
     min-height: 358px;
   }

projects/social_platform/src/app/office/courses/lesson/lesson.component.scss

@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     order: -1;
-    
+
     @include responsive.apply-desktop {
       order: 0;
     }
@@ -35,7 +35,7 @@
   &__skill-name {
     color: var(--black);
   }
-  
+
   &__lesson {
     color: var(--grey-for-text);
   }
@@ -44,8 +44,8 @@
     display: flex;
     flex-direction: row;
     gap: 12px;
-    overflow-x: auto;
     padding-bottom: 0;
+    overflow-x: auto;
 
     @include responsive.apply-desktop {
       flex-direction: column;
@@ -81,10 +81,10 @@
 
 .progress {
   &__task {
-    height: 23px;
+    flex-shrink: 0;
     min-width: 42px;
+    height: 23px;
     padding: 4px 0;
-    flex-shrink: 0;
     text-align: center;
     background-color: var(--light-white);
     border-radius: var(--rounded-xl);
@@ -110,9 +110,9 @@
     position: fixed;
     bottom: 1%;
     left: 7%;
-    
+
     @include responsive.apply-desktop {
       position: static;
     }
   }
-}
+}

projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  
+
   @include responsive.apply-desktop {
     flex-direction: row;
     gap: 20px;

projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss

@@ -9,20 +9,20 @@
   @include responsive.apply-desktop {
     flex-direction: row;
     gap: 20px;
-    
+
     &--hasVideo {
       flex-direction: row;
     }
   }
 
   &__header,
   &__content {
-    min-height: 0px;
+    min-height: 0;
     padding: 12px;
     background: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
-    
+
     @include responsive.apply-desktop {
       min-height: 358px;
       padding: 24px;
@@ -43,14 +43,14 @@
         .control {
           max-height: 61px;
           border-radius: var(--rounded-lg);
-          
+
           @include responsive.apply-desktop {
             max-height: 83px;
           }
         }
       }
     }
-    
+
     @include responsive.apply-desktop {
       padding: 12px 24px;
     }

projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  
+
   @include responsive.apply-desktop {
     flex-direction: row;
     gap: 20px;

projects/social_platform/src/app/office/courses/lesson/shared/video-task/info-task.component.scss

@@ -12,10 +12,10 @@
     background-color: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
-    
+
     @include responsive.apply-desktop {
-      padding: 24px;
       gap: 24px;
+      padding: 24px;
     }
 
     iframe {
@@ -35,7 +35,7 @@
 
     &--hasImage {
       flex-direction: column;
-      
+
       @include responsive.apply-desktop {
         flex-direction: row-reverse;
       }
@@ -54,7 +54,7 @@
     &--hasVideo {
       flex-direction: column;
       flex-grow: 1;
-      
+
       @include responsive.apply-desktop {
         flex-direction: row;
       }
@@ -63,7 +63,7 @@
     &--hasImage {
       flex-direction: column-reverse;
       flex-grow: 1;
-      
+
       @include responsive.apply-desktop {
         flex-direction: row-reverse;
       }

projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.scss

@@ -8,7 +8,7 @@
   @include responsive.apply-desktop {
     flex-direction: row;
     gap: 20px;
-    
+
     &--hasVideo {
       flex-direction: row;
     }
@@ -20,7 +20,7 @@
     background: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
-    
+
     @include responsive.apply-desktop {
       min-height: 358px;
     }
@@ -34,7 +34,7 @@
     min-width: 333px;
     max-width: 350px;
     padding: 12px;
-    
+
     @include responsive.apply-desktop {
       padding: 12px 24px;
     }
@@ -64,7 +64,7 @@
       aspect-ratio: 16 / 9;
       border: 0;
       border-radius: var(--rounded-lg);
-      
+
       @include responsive.apply-desktop {
         height: 223px;
       }
@@ -98,14 +98,14 @@
   &__textarea {
     display: block;
     width: 100%;
+    min-height: 125px;
     padding: 12px 18px;
     resize: none;
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
     outline: none;
     scrollbar-width: none;
-    min-height: 125px;
-    
+
     @include responsive.apply-desktop {
       min-height: 341px;
     }