MAGETWO-34790: [UI] Manage Components

- Added Data Grid styles

Author: Evgeniy Kolesov

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_data-grid.less

@@ -0,0 +1,104 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+@component-indicator__size: 20px;
+
+//
+//  Component grid elements
+//  _____________________________________________
+
+.component-indicator {
+    border-radius: 50%;
+    cursor: help;
+    display: inline-block;
+    height: @component-indicator__size;
+    text-align: center;
+    width: @component-indicator__size;
+
+    &::before {
+        background: @color-white;
+        border-radius: 1px;
+        border: 1px solid @color-gray68;
+        box-shadow: 0 0 2px rgba(0,0,0,.4);
+        content: attr(data-label);
+        display: block;
+        font-size: @font-size__s;
+        margin: 34px 0 0 -10px;
+        min-width: 50px;
+        opacity: 0;
+        padding: 4px 5px;
+        position: absolute;
+        transition: opacity .2s linear;
+        visibility: hidden;
+    }
+    &::after {
+        background: @color-white;
+        border: 1px solid darken(@color-gray68, 8);
+        border-width: 1px 0 0 1px;
+        box-shadow: -1px -1px 1px rgba(0,0,0,.1);
+        content: '';
+        display: block;
+        height: 10px;
+        margin: 9px 0 0 5px;
+        opacity: 0;
+        position: absolute;
+        transform: rotate(45deg);
+        transition: opacity .2s linear .1s;
+        visibility: hidden;
+        width: 10px;
+    }
+    &:hover {
+        &::before,
+        &::after {
+            opacity: 1;
+            transition: opacity .2s linear 0;
+            visibility: visible;
+        }
+        &::after {
+            transition: opacity .2s linear 0;
+        }
+    }
+    span {
+        display: block;
+        height: @component-indicator__size;
+        overflow: hidden;
+        width: @component-indicator__size;
+        &:before {
+            content: '';
+            display: block;
+            font-family: @icons__font-family;
+            font-size: 20px;
+            height: 100%;
+            line-height: @component-indicator__size;
+            width: 100%;
+        }
+    }
+    &._on {
+        background: @color-green-apple;
+    }
+    &._off {
+        background: @color-red10;
+        span {
+            &:before {
+                background: @color-white;
+                height: 4px;
+                margin: 8px auto 20px;
+                width: 12px;
+            }
+        }
+    }
+    &._info {
+        background: transparent;
+        span {
+            width: 21px;
+            &:before {
+                color: @color-blue-dodger;
+                content: @icon-notice-messages__content;
+                font-family: @icons__font-family;
+                font-size: 21px;
+            }
+        }
+    }
+}

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/source/_variables.less

@@ -33,3 +33,7 @@
 @checkbox-check__font-size: 1.2rem;
 @checkbox-check__line-height: 1.2;
 
+//
+//  Tables
+//  ---------------------------------------------
+@table__color: @color-very-dark-gray-black;

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/updater.less

@@ -49,6 +49,11 @@
 @import '../../../../../Magento_Backend/web/css/source/module/_header.less';
 @import '../../../../../Magento_Backend/web/css/source/module/_menu.less';
 
+@import '../../../../../Magento_Ui/web/css/source/module/_data-grid.less';
+@import (reference) '../../../../../web/css/source/forms/_extends.less';
+@import '../../../../../web/css/source/forms/_controls.less';
+@import '../../../../../web/css/source/forms/_fields.less';
+
 //  Inherit Setup components
 @import '../../../setup/styles/less/components/_navigation-bar.less';
 @import '../../../setup/styles/less/components/_messages.less';
@@ -60,6 +65,7 @@
 @import 'components/_menu.less';
 @import 'components/_modals.less';
 @import 'components/_navigation-bar.less';
+@import 'components/_data-grid.less';
 
 //
 //  Pages