studio - settings: revamp of tabs to views WIP

cms/static/sass/_account.scss

-// login and sign up UI
+// Studio - Sign In/Up
+// ====================
 .signup, .signin {
 
   .wrapper-content {
@@ -25,7 +26,6 @@
 
       h1 {
         @include font-size(32);
-        float: none;
         margin: 0;
         padding: 0;
         font-weight: 600;
@@ -244,6 +244,8 @@
   }
 }
 
+// ====================
+
 // messages
 .message {
   @include font-size(14);

cms/static/sass/_base.scss

-// -------------------------------------
-//
-//  Universal
-//
-// -------------------------------------
+// studio base styling
+// ====================
 
+// basic reset
 html {
   font-size: 62.5%;
 }
 
 body {
+  @include font-size(16);
   min-width: 980px;
   background: $gray-l5;
-    font-size: 16px;
   line-height: 1.6;
   color: $baseFontColor;
 }
 
-body,
-input {
+body, input {
   font-family: 'Open Sans', sans-serif;
 }
 
@@ -32,10 +29,8 @@ a {
 }
 
 h1 {
-    float: left;
-    font-size: 28px;
+  @include font-size(28);
   font-weight: 300;
-    margin: 24px 6px;
 }
 
 .waiting {
@@ -52,6 +47,114 @@ h1 {
   width: 100%;
 }
 
+// ====================
+
+// layout - basic
+.wrapper-content {
+  margin: 0;
+  padding: 0 $baseline;
+  position: relative;
+}
+
+.content {
+  @include clearfix();
+  @include font-size(16);
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  width: flex-grid(12);
+  margin: 0 auto;
+  color: $gray-d2;
+
+  header {
+    position: relative;
+    margin-bottom: $baseline;
+    border-bottom: 1px solid $gray-l4;
+    padding-bottom: ($baseline/2);
+
+    .title-sub {
+      @include font-size(14);
+      display: block;
+      margin: 0;
+      color: $gray-l2;
+    }
+
+    .title, .title-1 {
+      @include font-size(32);
+      margin: 0;
+      padding: 0;
+      font-weight: 600;
+      color: $gray-d3;
+    }
+  }
+
+  .introduction {
+    @include font-size(14);
+    margin: 0 0 $baseline 0;
+  }
+}
+
+.content-primary, .content-supplementary {
+  @include box-sizing(border-box);
+}
+
+.content-primary {
+
+  .title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
+    color: $gray-d3;
+  }
+
+  .title-1 {
+
+  }
+
+  .title-2 {
+    @include font-size(24);
+    margin: 0 0 ($baseline/2) 0;
+    font-weight: 600;
+  }
+
+  .title-3 {
+    @include font-size(16);
+    margin: 0 0 ($baseline/4) 0;
+    font-weight: 500;
+  }
+
+  .title-4 {
+
+  }
+
+  .title-5 {
+
+  }
+}
+
+.content-supplementary {
+
+  .bit {
+    @include font-size(13);
+    margin: 0 0 $baseline 0;
+    border-bottom: 1px solid $gray-l4;
+    padding: 0 0 $baseline 0;
+    color: $gray-l1;
+
+    &:last-child {
+      margin-bottom: 0;
+      border: none;
+      padding-bottom: 0;
+    }
+
+    h3 {
+      @include font-size(14);
+      margin: 0 0 ($baseline/4) 0;
+      color: $gray-d2;
+      font-weight: 600;
+    }
+  }
+}
+
+// ====================
+
+// layout - grandfathered
 .main-wrapper {
   position: relative;
   margin: 0 40px;
@@ -80,6 +183,9 @@ h1 {
   float: right;
 }
 
+// ====================
+
+// forms
 input[type="text"],
 input[type="email"],
 input[type="password"],
@@ -108,6 +214,7 @@ textarea.text {
   }
 }
 
+// forms - specific
 input.search {
   padding: 6px 15px 8px 30px;
   @include box-sizing(border-box);
@@ -152,6 +259,22 @@ code {
   font-family: Monaco, monospace;
 }
 
+// ====================
+
+// UI - chrome
+.window {
+  @include clearfix();
+  @include border-radius(3px);
+  @include box-shadow(0 1px 1px $shadow-l1);
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
+  padding: $baseline ($baseline*1.5);
+}
+
+// ====================
+
+// UI - actions
 .new-unit-item,
 .new-subsection-item,
 .new-policy-item {
@@ -182,6 +305,13 @@ code {
   }
 }
 
+// ====================
+
+// misc
+hr.divide {
+  @include text-sr();
+}
+
 .item-details {
     float: left;
     padding: 10px 0;
@@ -194,11 +324,11 @@ code {
 }
 
 .window {
-    margin-bottom: 20px;
-    border: 1px solid $mediumGrey;
-    border-radius: 3px;
-    background: #fff;
-    @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+  // @include border-radius(3px);
+  // @include box-shadow(0 1px 1px $shadow-l1);
+  // margin-bottom: $baseline;
+  // border: 1px solid $gray-l2;
+  // background: $white;
 
   .window-contents {
     padding: 20px;
@@ -241,34 +371,9 @@ code {
   }
 }
 
-body.hide-wip {
-    .wip, .wip-box {
-        display: none !important;
-    }
-}
-
-body.show-wip {
-    .wip {
-        outline: 1px solid #f00 !important;
-        position: relative;
-    }
-
-    .wip-box {
-        @extend .wip;
-        &:after {
-            content: "WIP";
-            font-size: 8px;
-            padding: 2px;
-            background: #f00;
-            color: #fff;
-            @include position(absolute, 0px 0px 0 0);
-        }
-    }
-}
-
-.waiting {
+// ====================
 
-}
+// system notifications
 .toast-notification {
   display: none;
   position: fixed;
@@ -396,6 +501,7 @@ body.show-wip {
   }
 }
 
+// misc
 .tooltip {
   position: absolute;
   top: 0;

cms/static/sass/_header.scss

@@ -29,6 +29,10 @@
     margin: 0 auto;
     color: $gray-l1;
   }
+
+  nav .nav-item {
+    display: inline-block;
+  }
 }
 
 // ====================
@@ -51,9 +55,6 @@
 
 // general nav styles
 // ====================
-nav .nav-item {
-  display: inline-block;
-}
 
 // ====================
 
@@ -81,10 +82,10 @@ nav .nav-item {
 
 // specific elements - course name/info
 .info-course {
+  @include font-size(14);
   position: relative;
   margin: -3px ($baseline/2) 0 0;
   padding-right: ($baseline*0.75);
-  @include font-size(14);
 
   &:before {
     @extend .faded-vertical-divider;

cms/static/sass/_index.scss

@@ -311,6 +311,11 @@
     .content-cta {
       border-top: 1px solid $gray-l4;
 
+      header {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
 
       .list-actions {
         position: relative;

cms/templates/login.html

@@ -8,7 +8,7 @@
 <div class="wrapper-content wrapper">
   <section class="content">
     <header>
-      <h1>Sign into edX Studio</h1>
+      <h1 class="title title-1">Sign into edX Studio</h1>
       <a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
     </header>
 
@@ -45,7 +45,7 @@
       <h2 class="sr">Studio Support</h2>
 
       <div class="bit">
-        <h3>Need Help?</h3>
+        <h3 class="title-3">Need Help?</h3>
         <p>Having trouble with your account? Use <a href="" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
       </div>
     </aside>

cms/templates/signup.html

@@ -9,7 +9,7 @@
 <div class="wrapper-content wrapper">
   <section class="content">
     <header>
-      <h1>Sign Up for edX Studio</h1>
+      <h1 class="title title-1">Sign Up for edX Studio</h1>
       <a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
     </header>
 
@@ -77,17 +77,17 @@
       <h2 class="sr">Common Studio Questions</h2>
 
       <div class="bit">
-        <h3>Who is Studio for?</h3>
+        <h3 class="title-3">Who is Studio for?</h3>
         <p>Studio is for anyone that wants to create online courses that leverage the global edX platform. Our users are often faculty members, teaching assistants and course staff, and members of instructional technology groups.</p>
       </div>
 
       <div class="bit">
-        <h3>How technically savvy do I need to be to create courses in Studio?</h3>
+        <h3 class="title-3">How technically savvy do I need to be to create courses in Studio?</h3>
         <p>Studio is designed to be easy to use by almost anyone familiar with common web-based authoring environments (Wordpress, Moodle, etc.). No programming knowledge is required, but for some of the more advanced features, a technical background would be helpful. As always, we are here to help, so don't hesitate to dive right in.</p>
       </div>
 
       <div class="bit">
-        <h3>I've never authored a course online before. Is there help?</h3>
+        <h3 class="title-3">I've never authored a course online before. Is there help?</h3>
         <p>Absolutely. We have created an online course, edX101, that describes some best practices: from filming video, creating exercises, to the basics of running an online course. Additionally, we're always here to help, just drop us a note.</p>
       </div>
     </aside>