[Frontend] In-progress checkin:

WTD-894
Added scss file for fixed position styles;
Mods in progress to fixed.html to remove inline styling and change grid method to background gradient approach;

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

@@ -1,5 +1,5 @@
 /* CONSTANTS */
-/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/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/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/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/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/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/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/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; }
 
@@ -351,6 +351,21 @@ span {
 .vscroll {
   overflow-y: auto; }
 
+/* line 2, ../sass/_fixed-position.scss */
+.t-fixed-position.l-fixed-position {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  bottom: 2px;
+  left: 0;
+  width: auto;
+  height: auto; }
+  /* line 8, ../sass/_fixed-position.scss */
+  .t-fixed-position.l-fixed-position .l-grid-cell {
+    position: absolute;
+    border-top: 1px solid #404040;
+    border-left: 1px solid #404040; }
+
 /* line 3, ../sass/_about.scss */
 .t-about {
   line-height: 120%; }
@@ -2567,10 +2582,10 @@ input[type="text"] {
 .wait-spinner {
   display: block;
   position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
+  -webkit-animation: rotation 0.6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
+  -moz-animation: rotation 0.6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
+  -o-animation: rotation 0.6s infinite linear;
-  animation: rotation .6s infinite linear;
+  animation: rotation 0.6s infinite linear;
   border-color: rgba(0, 153, 204, 0.25);
   border-top-color: #0099cc;
   border-style: solid;
@@ -2609,10 +2624,10 @@ input[type="text"] {
 .treeview .wait-spinner {
   display: block;
   position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
+  -webkit-animation: rotation 0.6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
+  -moz-animation: rotation 0.6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
+  -o-animation: rotation 0.6s infinite linear;
-  animation: rotation .6s infinite linear;
+  animation: rotation 0.6s infinite linear;
   border-color: rgba(0, 153, 204, 0.25);
   border-top-color: #0099cc;
   border-style: solid;

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -0,0 +1,28 @@
+.t-fixed-position {
+	&.l-fixed-position {
+//		@include test(red);
+		position: absolute;
+		top: 0; right: 2px; bottom: 2px; left: 0;
+		width: auto; height: auto;
+
+		.l-grid-cell {
+			$brd: 1px solid lighten($colorBodyBg, 5%);
+			position: absolute;
+			border-top: $brd;
+			border-left: $brd;
+		}
+	}
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

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

@@ -9,6 +9,7 @@
 @import "global";
 @import "fonts";
 @import "user-environ/layout";
+@import "fixed-position";
 @import "about";
 @import "badges";
 @import "icons";

platform/features/layout/res/templates/fixed.html

@@ -1,15 +1,19 @@
-<div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"
+<div class="t-fixed-position l-fixed-position"
      ng-controller="FixedController as controller"
      mct-resize="controller.setBounds(bounds)">
 
     <!-- Background grid -->
     <span ng-click="controller.clearSelection()">
-        <div ng-repeat="cell in controller.getCellStyles()"
+        <!--div ng-repeat="cell in controller.getCellStyles()"
-             style="position: absolute; border: 1px gray solid; background: black;"
+             class="l-grid-cell s-grid-cell"
              ng-style="cell">
-        </div>
+        </div-->
+	    <span class="s-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></span>
+	    <span class="s-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></span>
     </span>
 
+
+
     <!-- Fixed position elements -->
     <mct-include ng-repeat="element in controller.getElements()"
                  style="position: absolute;"
@@ -23,7 +27,7 @@
 
     <!-- Selection highlight, handles -->
     <span ng-if="controller.selected()">
-        <div class="test"
+        <div class="s-fixed-position-item-selected"
              style="position: absolute;"
              mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
              mct-drag="controller.moveHandle().continueDrag(delta)"