Clean up content layout div styles

Fixes: CNVS-32644

This commit removes all CSS styles associated with
the #content and #content-wrapper divs, transferring
them to new classes that will be part of the
updated layout:
.ic-layout-contentMain
.ic-layout-contentWrapper

Test plan:
- Compile assets
- Canvas should look and function exactly as it did
  before.
- Check Conversations, Gradebook, the Login screen,
  and Speedgrader in particular, as I had to update
  styles in those parts of Canvas.

Change-Id: I8488a1762482f9d0d0e2e8890c02da84e03186dd
Reviewed-on: https://gerrit.instructure.com/92900
Reviewed-by: Pam Hiett <phiett@instructure.com>
Tested-by: Jenkins
QA-Review: Pierce Arner <pierce@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>

Author: Chris Hart

app/stylesheets/base/_ic_app_layout.scss

@@ -39,9 +39,35 @@ body:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
   min-width: 1px;
 }
 
-.ic-app-main-content__primary {
+.ic-layout-contentWrapper {
   box-sizing: border-box;
 }
+
+.ic-layout-contentMain {
+  padding: $ic-sp*2;
+
+  body.is-inside-submission-frame & {
+    padding-left: $ic-sp;
+    padding-right: $ic-sp;
+  }
+
+  body.no-headers & {
+    padding-top: 0;
+  }
+
+  body.embedded & {
+    padding: 0 1em 1em;
+  }
+
+  body.ic-framed-lti-tool & {
+    padding: 0 $ic-sp*2;
+  }
+
+  body.ic-full-screen-lti-tool & {
+    padding: 0;
+  }
+}
+
 .ic-app-main-content__secondary {
   box-sizing: border-box;
   padding: $ic-sp*2;
@@ -55,7 +81,7 @@ body.course-menu-expanded {
   &:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
     @include breakpoint(desktop--nav-open) { @include shared-main-content; }
   }
-  &:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content__primary {
+  &:not(.ic-no-flex-layout):not(.embedded) .ic-layout-contentWrapper {
     @include breakpoint(desktop--nav-open) {
       @include shared-primary;
     }
@@ -72,7 +98,7 @@ body:not(.course-menu-expanded) {
   &:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
     @include breakpoint(desktop) { @include shared-main-content; }
   }
-  &:not(.ic-no-flex-layout):not(.embedded)  .ic-app-main-content__primary {
+  &:not(.ic-no-flex-layout):not(.embedded)  .ic-layout-contentWrapper {
     @include breakpoint(desktop) {
       @include shared-primary;
     }
@@ -122,6 +148,12 @@ body:not(.course-menu-expanded) {
   box-sizing: border-box;
   min-height: 100vh;
 
+  body:not(.full-width) & {
+    // We want to add a max size to most pages in canvas
+    // unless it's a full-width app
+    max-width: 1366px;
+  }
+
   body:not(.ic-no-flex-layout):not(.embedded) & {
     display: flex;
     flex-direction: column;

app/stylesheets/base/_layout.scss

@@ -7,12 +7,6 @@ $layout-modal-font-color:           $ic-font-color-dark;
 $footer-links-color:                lighten($ic-font-color-dark, 16);
 $footer-links-border-color:         lighten($ic-color-dark, 16);
 
-body:not(.full-width) .ic-app-main-layout-vertical {
-  // We want to add a max size to most pages in canvas
-  // unless it's a full-width app
-  max-width: 1366px;
-}
-
 body {
   min-height: 100vh;
   &:not(.is-inside-submission-frame):not(.embedded) {
@@ -38,9 +32,6 @@ body {
       background-color: transparent;
       box-shadow: none;
     }
-    #content {
-      padding-top: 0;
-    }
   }
   &.embedded {
     #application, #wrapper, #main {
@@ -49,9 +40,6 @@ body {
     #main {
       min-height: 0;
     }
-    #content {
-      padding: 1em;
-    }
     h2, .h2 {
       @include ui-widget-header-bg-and-text;
       @include fontSize($ic-font-size--small);
@@ -86,20 +74,9 @@ body {
   z-index: 10;
 }
 
-#content {
-  padding: $ic-sp*2;
-  body.is-inside-submission-frame & {
-    padding-left: $ic-sp;
-    padding-right: $ic-sp;
-  }
-}
-
 // **********************************************************************************
 // all of the following are classes that should be applied to 'body' when appropriate
 
-body.ic-framed-lti-tool #content { padding: 0 $ic-sp*2; }
-body.ic-full-screen-lti-tool #content { padding: 0; }
-
 .with-left-side {
   #left-side {
     display: block;
@@ -130,14 +107,6 @@ body.ic-full-screen-lti-tool #content { padding: 0; }
   }
 }
 
-// This hides stuff till the javascript has done it's stuff
-.hide-content-while-scripts-not-loaded {
-  #content, #right-side-wrapper {
-    transiton: opacity 0.3s;
-    opacity: 1;
-  }
-}
-
 // **********************************************************************************
 // end classes applied to body
 

app/stylesheets/base/_print.scss

@@ -28,7 +28,7 @@
 
   // this is for firefox, if things dont have overflow:visible then it wont print any more than one page.
   .ic-app-main-layout-vertical,
-  #content,
+  .ic-layout-contentMain,
   #wiki_show_view_main {
     overflow: visible !important;
   }
@@ -42,7 +42,7 @@
     display: block !important;
   }
 
-  #content {
+  .ic-layout-contentMain {
     width: auto;
     // the padding:0 here is to revert the padding added by .with-scrolling-right-side, &.with-sidebar-pinned-to-bottom
     padding: 0 !important;

app/stylesheets/bundles/context_modules2.scss

@@ -83,7 +83,7 @@
       margin-bottom: 0;
     }
   }
-  #content {
+  .ic-layout-contentMain {
     padding: 0;
   }
   .btn {

app/stylesheets/bundles/speed_grader.scss

@@ -3,7 +3,7 @@
 @import "vendor/_xflex.scss";
 
 
-#content {
+.ic-layout-contentMain {
   padding: 0;
 }
 

app/stylesheets/components/_g_instructure.scss

@@ -1565,7 +1565,8 @@ body > #ui-datepicker-div {
   }
 }
 
-body.padless-content #content, #content.padless {
+body.padless-content .ic-layout-contentMain,
+.ic-layout-contentMain.padless {
   #sequence_footer {
     margin-left: 10px;
     margin-right: 10px;

app/stylesheets/pages/conversations/_conversations_new.scss

@@ -1,7 +1,10 @@
 @import "vendor/bootstrap/button-groups";
 @import "components/autocomplete";
 
-#not_right_side, #content-wrapper, #content, .conversations {
+#not_right_side,
+.ic-layout-contentWrapper,
+.ic-layout-contentMain,
+.conversations {
   height: 100%;
 }
 
@@ -18,7 +21,7 @@
   display: none;
 }
 
-#content {
+.ic-layout-contentMain {
   overflow: visible;
   padding: 0;
 }

app/stylesheets/pages/gradebook2/_gradebook2.scss

@@ -42,7 +42,7 @@ $cell_height: 33px;
 
 // ******* END overrides of the default slick.grid.css styles ********
 
-.gradebook2 #content {
+.gradebook2 .ic-layout-contentMain {
   position: relative;
   padding: 0 $ic-sp*2;
 }

app/stylesheets/pages/login/_ic-login.scss

@@ -35,7 +35,10 @@ $ic-Login-confirmation-bgd: #34444f;
 ////////////////////////////////////////
 // New Login Styles
 ////////////////////////////////////////
-#content {padding: 0;}
+.ic-layout-contentMain {
+  padding: 0;
+}
+
 body.ic-Login-Body { // apply the background to the body element so that you don't see white bg as you scroll
   background-color: $ic-brand-Login-body-bgd-color;
   background-image:

app/stylesheets/pages/login/_login_otp.scss

@@ -63,8 +63,8 @@ body.modal {
       margin: 0;
     }
   }
-  body.no-headers #content,
-  body.embedded #content {
+  body.no-headers .ic-layout-contentMain,
+  body.embedded .ic-layout-contentMain {
     padding: 10px;
   }
   #login_form {
@@ -73,4 +73,4 @@ body.modal {
   #footer {
     padding: 0 20px;
   }
-}
+}