Studio: revises the styling for the export view to sync with the import view's UI

cms/static/sass/_base.scss

@@ -417,70 +417,6 @@ p, ul, ol, dl {
   > section {
     margin: 0 0 $baseline 0;
   }
-
-  .bit {
-    @extend %t-copy-sub1;
-    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 {
-      @extend %t-title7;
-      margin: 0 0 ($baseline/4) 0;
-      color: $gray-d2;
-      font-weight: 600;
-    }
-
-    p {
-      margin: 0 0 $baseline 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    // actions
-    .list-actions {
-      @extend %cont-no-list;
-
-      .action-item {
-        margin-bottom: ($baseline/4);
-        border-bottom: 1px dotted $gray-l4;
-        padding-bottom: ($baseline/4);
-
-
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    // navigation
-    .nav-related, .nav-page {
-
-      .nav-item {
-        margin-bottom: ($baseline/4);
-        border-bottom: 1px dotted $gray-l4;
-        padding-bottom: ($baseline/4);
-
-
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
 }
 
 // ====================

cms/static/sass/elements/_system-help.scss

@@ -211,3 +211,71 @@
     color: $gray;
   }
 }
+
+// ====================
+
+// informational bits (rename once UI pattern is further defined)
+.bit {
+  @extend %t-copy-sub1;
+  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, .title {
+    @extend %t-title7;
+    margin: 0 0 ($baseline/4) 0;
+    color: $gray-d2;
+    font-weight: 600;
+  }
+
+  p, .copy {
+    margin: 0 0 $baseline 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // actions
+  .list-actions {
+    @extend %cont-no-list;
+
+    .action-item {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+
+  // details
+  .list-details {
+    @extend %cont-no-list;
+
+    .item-detail {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+
+  // navigation
+  .nav-related, .nav-page {
+    @extend %cont-no-list;
+
+    .nav-item {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+}

cms/static/sass/views/_export.scss

@@ -3,12 +3,92 @@
 
 .view-export {
 
-  .export-overview {
-    @extend %ui-window;
-    @include clearfix;
-    padding: 30px 40px;
+  // UI: basic layout
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
   }
 
+  .content-primary {
+    width: flex-grid(9,12);
+    margin-right: flex-gutter();
+  }
+
+  .content-supplementary {
+    width: flex-grid(3,12);
+  }
+
+
+  // UI: introduction
+  .introduction {
+
+    .title {
+      @extend %cont-text-sr;
+    }
+  }
+
+  // UI: export controls
+  .export-controls {
+    @include box-sizing(border-box);
+    @extend %ui-window;
+    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
+
+    .title {
+      @extend %t-title4;
+    }
+
+    .action-export {
+      @extend %btn-primary-blue;
+      @extend %t-action1;
+      display: block;
+      margin: $baseline 0;
+      padding: ($baseline*0.75) $baseline;
+    }
+
+    .action {
+
+      [class^="icon"] {
+        @extend %t-icon2;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: ($baseline/4);
+      }
+
+      .copy {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+
+
+  // UI: export rules
+  .export-contents {
+    @include clearfix();
+    margin: ($baseline*2) 0;
+
+    .export-includes, .export-excludes {
+      width: flex-grid(4,9);
+
+      .item-detail {
+        @extend %t-copy-sub1;
+        @extend %wipe-last-child;
+        padding-bottom: ($baseline/4);
+        border-bottom: 1px solid $gray-l4;
+        margin-bottom: ($baseline/4);
+      }
+    }
+
+    .export-includes {
+      float: left;
+    }
+
+    .export-excludes {
+      float: right;
+    }
+  }
+
+  // OLD
   .description {
     float: left;
     width: 62%;

cms/static/sass/views/_import.scss

@@ -17,6 +17,13 @@
     width: flex-grid(3,12);
   }
 
+  // UI: export controls
+  .export-controls {
+    @extend %ui-window;
+    @include clearfix;
+    padding: 30px 40px;
+  }
+
   // UI: import form
   .import-form {
     @include box-sizing(border-box);
@@ -46,11 +53,23 @@
 
   // UI: default
   .action-choose-file {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-green;
     @extend %t-action1;
     display: block;
     margin: $baseline 0;
     padding: ($baseline*0.75) $baseline;
+
+    [class^="icon"] {
+      @extend %t-icon2;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: ($baseline/4);
+    }
+
+    .copy {
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
 
   // ====================