Merge remote-tracking branch 'origin/MAGETWO-41995' into bugs

Author: Natalia Momotenko

app/code/Magento/Translation/view/adminhtml/templates/translate_inline.phtml

@@ -17,7 +17,7 @@
 <script id="translate-form-template" type="text/x-magento-template">
     <form id="<%- data.id %>">
         <% _.each(data.items, function(item, i) { %>
-            <div class="magento_table_container">
+            <div class="translate-table-container">
                 <table class="table">
                     <% _.each(item, function(value, index) { %>
                         <tr>

app/code/Magento/Translation/view/frontend/templates/translate_inline.phtml

@@ -18,7 +18,7 @@
 <script id="translate-form-template" type="text/x-magento-template">
     <form id="<%- data.id %>">
         <% _.each(data.items, function(item, i) { %>
-            <div class="magento_table_container">
+            <div class="translate-table-container">
                 <table cellspacing="0" class="table">
                     <% _.each(item, function(value, index) { %>
                         <tr>

app/design/adminhtml/Magento/backend/Magento_Translation/web/css/source/_module.less

@@ -0,0 +1,69 @@
+// /**
+//  * Copyright © 2016 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Inline translations
+//  _____________________________________________
+
+//
+//  Variables
+//  ---------------------------------------------
+
+@translate-inline-title__z-index: @menu__z-index + 1;
+
+//
+//  Form
+//  ---------------------------------------------
+
+.translate-table-container {
+    table {
+        width: 100%;
+    }
+
+    td {
+        background: none;
+        padding: @indent__xs;
+        text-align: left;
+
+        &.value {
+            .input-text {
+                width: 100%;
+            }
+        }
+    }
+
+    th {
+        &.label {
+            border: none;
+            font-weight: @font-weight__bold;
+            padding: @indent__xs;
+            text-align: left;
+            width: 150px;
+        }
+    }
+}
+
+//
+//  Special tags
+//  ---------------------------------------------
+
+.translate-inline-title {
+    display: block;
+    left: 0;
+    position: absolute;
+    top: 0;
+    z-index: @translate-inline-title__z-index;
+}
+
+//  Script tag that placed between menu and page wrapper
+.translate-inline-script {
+    .menu-wrapper ~ & {
+        display: block;
+        left: @menu__width;
+        position: absolute;
+        top: 0;
+        z-index: @translate-inline-title__z-index;
+    }
+}

lib/web/mage/translate-inline.css

@@ -5,45 +5,53 @@
 
 .trnslate-inline-area [data-translate],
 .trnslate-inline-area .translate-inline {
-	outline:  dotted 1px red!important;
+    outline: dotted 1px red !important;
 }
+
 * html .translate-inline,
-*+html .translate-inline{
-	border:  dotted 1px red !important;
+* + html .translate-inline {
+    border: dotted 1px red !important;
 }
-.translate-inline-script, .translate-inline-title {
-	background: yellow;
-	color: black;
-	font-weight: bold;
+
+.translate-inline-script,
+.translate-inline-title {
+    background: yellow;
+    color: black;
+    font-weight: bold;
 }
+
 #translate-inline-trig {
-	position: absolute;
-	left: -1000px; 
-	opacity: .8;
-	filter: alpha(opacity=80);
-	cursor: pointer; 
-	margin-top: 10px;
-	z-index: 2000;
+    cursor: pointer;
+    filter: alpha(opacity=80);
+    left: -1000px;
+    margin-top: 10px;
+    opacity: .8;
+    position: absolute;
+    z-index: 2000;
 }
 
 .data.table.translate table {
-	width: 100%;
+    width: 100%;
 }
+
 .data.table.translate td {
-	background: none;
-	padding: 5px 5px 5px 0;
-	text-align: left;
+    background: none;
+    padding: 5px 5px 5px 0;
+    text-align: left;
 }
+
 .data.table.translate th.label {
-	border: none;
-	font-weight: bold;
-	text-align: left;
-	padding: 5px 5px 5px 0;
-	width: 150px;
+    border: none;
+    font-weight: bold;
+    padding: 5px 5px 5px 0;
+    text-align: left;
+    width: 150px;
 }
+
 .data.table.translate td.value .input-text {
-	width: 98%;
+    width: 98%;
 }
+
 p.accent {
-	color: #d12c01;
+    color: #d12c01;
 }