Ticket #4674 - Studio: Grids and related menus.

studio/template/css/common.less

@@ -62,7 +62,7 @@ div.bx-db-note {
 .bx-popup-applied.bx-popup-chain .bx-popup-chain-item {
     margin: 0.5rem;
 
-    .radius(3px);
+    .radius(16px);
 
     -webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
     -moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);

studio/template/css/menu.css

@@ -22,3 +22,39 @@ ul.bx-menu-toolbar li a .sys-icon-a {
 .bx-popup .bx-menu-ver li div > span {
     white-space: nowrap;
 }
+
+/* --------------- Vertical in Popup */
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm {
+    border-radius: 16px;
+}
+
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil:hover,
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm:hover, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps:hover, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm:hover {
+    background-color: rgba(243, 244, 246, 1);
+}
+
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm a {
+    color: rgba(55, 65, 81, 1);
+}
+
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil:hover a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm:hover a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps:hover a, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm:hover a {
+    color: rgba(17, 24, 39, 1);
+}
+
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil .bx-menu-item-icon, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm .bx-menu-item-icon, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps .bx-menu-item-icon, 
+.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm .bx-menu-item-icon {
+    margin-right: 0.75rem;
+}

template/css/common.css

@@ -811,10 +811,12 @@ svg .gray .outer .p2 {
     text-decoration:none;
 }
 .bx-btn img {
-    width:1.2em;
-    height:1.2em;
-    vertical-align:middle;
-    background-size:1.2em 1.2em;
+    width:1.2rem;
+    height:1.2rem;
+    max-width: none;
+
+    background-size: contain;
+    background-repeat: no-repeat;
     background-position:center center;
 }
 .bx-btn .bx-def-valign-center{

template/css/menu.css

@@ -90,7 +90,6 @@ ul.bx-menu-custom-ver {
 
 .bx-menu-verlit li a,
 .bx-menu-ver li a {
-    display:block;
     text-decoration:none;
 }