#637: Form field/field group viewport scope - added mobile icon and finalized styling

yolouiese · yolouiese · commit 539353c899a7 · 2020-11-06T18:32:15.000+08:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/images/form/element/mobile-icon.svg b/app/code/Magento/PageBuilder/view/adminhtml/web/css/images/form/element/mobile-icon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18">
+    <path id="Path_371"
+          data-name="Path 371"
+          d="M13,0H5A1,1,0,0,0,4,1V17a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V1A1,1,0,0,0,13,0ZM8.5,1h1a.52.52,0,0,1,.5.5.52.52,0,0,1-.5.5h-1A.511.511,0,0,1,8,1.5.512.512,0,0,1,8.5,1ZM9,17.55a1.05,1.05,0,1,1,1.05-1.05A1.05,1.05,0,0,1,9,17.55ZM13,15H5V3h8Z"
+          transform="translate(-4)"
+          fill="#707070"
+    />
+</svg>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_mobile.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_mobile.less
@@ -9,30 +9,31 @@
 .admin__fieldset .admin__field.admin__field-min-height-mobile {
     .admin__field-control._with-tooltip {
         display: flex;
-        width: 18.6rem;
+        width: 19.6rem;
 
         .admin__control-addon {
             max-width: inherit;
         }
 
         .admin__field-tooltip {
-            margin-left: 15px;
+            margin-left: 19px;
         }
 
         .admin__field-tooltip-action {
             &:before {
-                //content: url();
+                content: url("@{baseDir}Magento_PageBuilder/css/images/form/element/mobile-icon.svg");
             }
         }
 
         .admin__field-tooltip-content {
-            background: rgba(49, 48, 43, .8);
+            background: #707070;
             border: none;
             bottom: auto;
             box-shadow: unset;
-            left: -1.5rem;
+            left: -1.9rem;
+            opacity: 0.9;
             padding: 6px 15px 2px;
-            top: 3.5rem;
+            top: 3rem;
             right: auto;
             width: 16rem;
 
@@ -42,16 +43,16 @@
             }
 
             &:before {
-                border-bottom: 4px solid rgba(49, 48, 43, .8);
-                border-left: 5px solid transparent;
-                border-right: 5px solid transparent;
+                border-bottom: 7px solid #707070;
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
                 border-top: unset;
                 content: '';
                 height: 0;
-                left: 23px;
+                left: 20px;
                 opacity: 0.9;
                 position: absolute;
-                top: -4px;
+                top: -5px;
                 width: 0;
             }
 
