styling for LTI in a new window block

cms/static/sass/_mixins-inherited.scss

+../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file

cms/static/sass/_variables.scss

@@ -197,6 +197,10 @@ $lightBluishGrey: rgb(197, 207, 223);
 $lightBluishGrey2: rgb(213, 220, 228);
 $error-red: rgb(253, 87, 87);
 
+
+//carryover from LMS for xmodules
+$sidebar-color: rgb(246, 246, 246);
+
 // type
 $sans-serif: $f-sans-serif;
 $body-line-height: golden-ratio(.875em, 1);

common/lib/xmodule/xmodule/css/lti/lti.scss

@@ -2,6 +2,25 @@ div.lti {
     // align center
     margin: 0 auto;
 
+    .wrapper-lti-link {
+        @include font-size(14);
+        position: relative;
+        background-color: $sidebar-color;
+        padding: ($baseline*1.5) ($baseline*1.5) ($baseline*1.5) $baseline;
+
+        .lti-link {
+            position: absolute;
+            top: $baseline;
+            right: $baseline;
+
+             .link_lti_new_window {
+                @extend .gray-button;
+                @include font-size(13);
+                @include line-height(14);
+            }
+        }
+    }
+
     form.ltiLaunchForm {
         display: none;
     }

lms/templates/lti.html

@@ -32,15 +32,15 @@
 
 % if launch_url and launch_url !=  'http://www.example.com':
     % if open_in_a_new_page:
-        <p>
-            <span class="description">
+        <div class="wrapper-lti-link">
+            <h3 class="title">
                 ${display_name} (${_('External resource')})
-            </span>
-            <a href="#" class='link_lti_new_window'>
-                <i class="icon-external-link"></i>
+            </h3>
+            <p class="lti-link external"><a href="#" class='link_lti_new_window'>
                 ${_('View resource in a new window')}
-            </a>
-        </p>
+                 <i class="icon-external-link"></i>
+            </a></p>
+        </div>
     % else:
         ## The result of the form submit will be rendered here.
         <iframe