[Frontend] CSS and markup for iframe

WTD-1150
WTD-1145
CSS and markup to cause iframes to layout properly without double scroll bars

platform/commonUI/general/res/css/theme-espresso.css

@@ -1,5 +1,5 @@
 /* CONSTANTS */
-/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -20,38 +20,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
   display: block; }
 
@@ -2882,10 +2882,10 @@ input[type="text"] {
 .wait-spinner {
   display: block;
   position: absolute;
-  -webkit-animation: rotation 0.6s infinite linear;
+  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation 0.6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation 0.6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
-  animation: rotation 0.6s infinite linear;
+  animation: rotation .6s infinite linear;
   border-color: rgba(0, 153, 204, 0.25);
   border-top-color: #0099cc;
   border-style: solid;
@@ -2924,10 +2924,10 @@ input[type="text"] {
 .treeview .wait-spinner {
   display: block;
   position: absolute;
-  -webkit-animation: rotation 0.6s infinite linear;
+  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation 0.6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation 0.6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
-  animation: rotation 0.6s infinite linear;
+  animation: rotation .6s infinite linear;
   border-color: rgba(0, 153, 204, 0.25);
   border-top-color: #0099cc;
   border-style: solid;
@@ -3039,3 +3039,10 @@ input[type="text"] {
       .autoflow .l-autoflow-items .l-autoflow-col:first-child {
         border-left: none;
         padding-left: 0; }
+
+/* Styles for the iframe EmbeddedPageController element */
+/* line 4, ../sass/iframe.scss */
+.l-iframe iframe {
+  display: block;
+  height: 100%;
+  width: 100%; }

platform/commonUI/general/res/sass/_iframe.scss

@@ -0,0 +1,9 @@
+/* Styles for the iframe EmbeddedPageController element */
+
+.l-iframe {
+    iframe {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+}

platform/commonUI/general/res/sass/_main.scss

@@ -40,3 +40,4 @@
 @import "helpers/wait-spinner";
 @import "properties";
 @import "autoflow";
+@import "iframe";

platform/features/pages/res/iframe.html

@@ -1,4 +1,5 @@
+<div class="abs l-iframe">
 <iframe ng-controller="EmbeddedPageController as ctl"
-        style="width: 100%; height: 100%;"
         ng-src="{{ctl.trust(model.url)}}">
-</iframe>
+</iframe>
+</div>