MAGETWO-34893: Required marker is displayed on wrong line in Backend

Author: zanilee

app/code/Magento/Ui/view/base/web/templates/massaction.html

@@ -8,11 +8,10 @@
     <button title="Actions" class="action-default scalable add" data-bind="click: onToggle('actionsVisible')">
         <span data-bind="text: $t('Actions')"></span>
     </button>
-    <button title="" class="action-toggle scalable  add" data-toggle="dropdown" data-bind="click: onToggle('actionsVisible'), css: {active: actionsVisible}">
-        <span>|</span>
+    <button title="" class="action-toggle scalable add" data-toggle="dropdown" data-bind="click: onToggle('actionsVisible'), css: {active: actionsVisible}">
+        <span data-bind="text: $t('Select')"></span>
     </button>
-
     <ul class="dropdown-menu" data-bind="css: {'active': actionsVisible}, foreach: {data: actions, as: 'action'}">
         <li data-bind="click: $parent.setAction(action)"><span class="item" data-bind="text: label"></span></li>
     </ul>
-</div>
+</div>

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

@@ -7,13 +7,13 @@
 //  Crosspage components
 //  _____________________________________________
 
-@import 'module/_menu';
-@import 'module/_header';
-@import 'module/_footer';
-@import 'module/_main';
+@import 'module/_menu.less';
+@import 'module/_header.less';
+@import 'module/_footer.less';
+@import 'module/_main.less';
 
 //
 //  Pages
 //  _____________________________________________
 
-@import 'module/pages/_dashboard';
+@import 'module/pages/_dashboard.less';

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_header.less

@@ -11,8 +11,8 @@
 //  Components
 //  ---------------------------------------------
 
-@import 'header/_actions-group';
-@import 'header/_headings-group';
+@import 'header/_actions-group.less';
+@import 'header/_headings-group.less';
 
 //  Variables
 //  ---------------------------------------------

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_main.less

@@ -11,4 +11,4 @@
 //  Components
 //  ---------------------------------------------
 
-@import 'main/_actions-bar';
+@import 'main/_actions-bar.less';

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/header/_actions-group.less

@@ -11,9 +11,9 @@
 //  Components
 //  ---------------------------------------------
 
-@import 'actions-group/_user';
-@import 'actions-group/_search';
-@import 'actions-group/_notifications';
+@import 'actions-group/_user.less';
+@import 'actions-group/_search.less';
+@import 'actions-group/_notifications.less';
 
 //
 //  Variables

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less

@@ -12,7 +12,7 @@
 //  Components
 //  ---------------------------------------------
 
-@import 'actions_bar/_store-switcher';
+@import 'actions_bar/_store-switcher.less';
 
 //
 //  Variables

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

@@ -3,4 +3,4 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@import 'module/_tabnav';
+@import 'module/_tabnav.less';

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less

@@ -229,39 +229,89 @@
 }
 
 .grid {
-  .actions-split .dropdown-menu {
-    right: auto;
-    left: auto;
-    text-align: left;
-    color: #676056;
-    font-weight: normal;
-
-    &:after  {
-      right: auto;
-      left: 9px;
-    }
-    &:before {
-      right: auto;
-      left: 10px;
+    .actions-split {
+        .clearfix();
+        display: inline-block;
+        position: relative;
+        z-index: 100;
+        &.active {
+            .dropdown-menu {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        .action-toggle,
+        .action-default {
+            float: left;
+            margin: 0;
+        }
+        .action-default {
+            margin-right: 3rem;
+        }
+        .action-toggle {
+            border-left-color: rgba(0, 0, 0, .2);
+            bottom: 0;
+            padding-left: 0;
+            padding-right: 3rem;
+            position: absolute;
+            right: 0;
+            top: 0;
+            &.active {
+                &:after {
+                    transform: rotate(180deg);
+                }
+            }
+            &:after {
+                border-color: #645d53 transparent transparent transparent;
+                border-style: solid;
+                border-width: .5rem .5rem 0 .5rem;
+                content: '';
+                height: 0;
+                margin-top: -.25rem;
+                position: absolute;
+                right: 1rem;
+                top: 50%;
+                width: 0;
+            }
+            &:hover {
+                &:after {
+                    border-color: darken(#645d53, 10%) transparent transparent transparent;
+                }
+            }
+            > span {
+                .visually-hidden();
+            }
+        }
+        .dropdown-menu {
+            > li {
+                padding: 4px 15px;
+                &:hover {
+                    background-color: #e8e8e8;
+                }
+                span {
+                    display: block;
+                }
+            }
+        }
     }
-  }
 
-  .grid-actions {
-    padding: 10px 0;
-  }
+    .grid-actions {
+        padding: 10px 0;
+    }
 
-  .hor-scroll {
-    padding-top: 10px;
-  }
+    .hor-scroll {
+        padding-top: 10px;
+    }
 
-  .select-box {
-    display: inline-block;
-    vertical-align: top;
-    margin: -12px -10px -7px;
-    padding: 12px 10px 7px;
-    width: 100%;
-  }
+    .select-box {
+        display: inline-block;
+        vertical-align: top;
+        margin: -12px -10px -7px;
+        padding: 12px 10px 7px;
+        width: 100%;
+    }
 }
+
 .filters {
     &-toggle {
         .button(
@@ -491,7 +541,7 @@
         li {
           margin: 0;
           padding: 4px 15px;
-          border-bottom: 1px solid #E5E5E5;
+          border-bottom: 1px solid #e5e5e5;
         }
         li:hover {
           background: #e8e8e8;
@@ -500,7 +550,7 @@
         span {
             font-weight: normal;
             font-size: 13px;
-            color: #645D53;
+            color: #645d53;
         }
         &.active {
             display: block;
@@ -530,7 +580,6 @@
     }
 }
 
-
 //
 // Form Component
 //
@@ -540,7 +589,7 @@
 .field .control select[disabled],
 .field .control select[disabled] ~ .addafter {
     background-color: #f4f4f4;
-    border-color: #dddddd;
+    border-color: #ddd;
     box-shadow: none;
     color: #999;
 }

app/design/adminhtml/Magento/backend/web/css/override.less

@@ -3337,7 +3337,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   transform: rotate(180deg);
 }
 .admin-user-account:hover:after {
-  border-color: #41362f transparent transparent transparent;
+  border-color: #060504 transparent transparent transparent;
 }
 .admin-user-account:before {
   content: '\e600';

app/design/adminhtml/Magento/backend/web/css/source/_components.less

@@ -7,4 +7,4 @@
 //  Components
 //  _____________________________________________
 
-@import 'components/_spinner';
+@import 'components/_spinner.less';