Ticket #2349 - Popup menus (from Timeline card, Auto-More menus, etc)

modules/boonex/decorous/data/template/system/css/menu.less

@@ -160,56 +160,90 @@
 
 /*--- Add Content Menu ---*/
 @media (min-width:720px) {
-	#bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
-	    left: auto !important;
-	    right: 0px !important;
-	    width: auto !important;
-	}
+    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
+        left: auto !important;
+        right: 0px !important;
+        width: auto !important;
+    }
 }
 #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-menu-object-sys_add_content {
-	display: block;
+    display: block;
     width: 100%;
 }
 
-/*--- Custom Menu with More Auto ---*/
-.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item a,
-.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn,
-.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon {
-    color: inherit;
-}
-
 
 /*--- Popup menus (vertical) ---*/
-ul.bx-menu-custom.bx-menu-custom-ver {
+.bx-popup ul.bx-menu-ver,
+.bx-popup ul.bx-menu-custom.bx-menu-ver,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver {
     margin: -0.5rem;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li {
+.bx-popup ul.bx-menu-ver li,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li {
     margin-top: 0;
     margin-bottom: 0;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li > span,
-ul.bx-menu-custom.bx-menu-custom-ver li > .bx-def-margin-thd-topbottom {
+.bx-popup ul.bx-menu-custom.bx-menu-ver.bx-menu-submenu-more-auto li.bx-menu-item {
+    padding: 0.25rem 0.5rem;
+    line-height: normal;
+}
+.bx-popup ul.bx-menu-ver li div.bx-def-padding-sec,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > .bx-def-margin-thd-topbottom {
     margin: 0;
     padding: 0.25rem 0.5rem;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li > span > a,
-ul.bx-menu-custom.bx-menu-custom-ver li > span > span,
-ul.bx-menu-custom.bx-menu-custom-ver li > span > span > a,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-menu-item-link,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-element-holder,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-do-report {
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > .bx-def-margin-thd-topbottom {
+    margin: 0;
+}
+.bx-popup ul.bx-menu-ver li > a,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-menu-item-link,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-element-holder,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-do-report {
     margin: 0;
     padding: 0;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li a > span {
+.bx-popup ul.bx-menu-ver li a > div span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > span {
     margin-left: 1.0rem;
     line-height: 1.5rem;
     .font-size(@bx-font-size-middle);
 }
-ul.bx-menu-custom.bx-menu-custom-ver li a > img,
-ul.bx-menu-custom.bx-menu-custom-ver li a > .sys-icon {
+.bx-popup ul.bx-menu-custom.bx-menu-ver.bx-menu-submenu-more-auto li.bx-menu-item a {
+    display: block;
+    line-height: 1.5rem;
+}
+.bx-popup ul.bx-menu-ver li a > div img,
+.bx-popup ul.bx-menu-ver li a > div .sys-icon,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > img,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > .sys-icon,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > img,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > .sys-icon {
     width: 1.0rem;
     height: 1.0rem;
     line-height: 1.0rem;
     font-size: 1.0rem;
+}
+
+
+/*--- Custom Menu with More Auto ---*/
+.bx-menu-main-submenu.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn,
+.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item a,
+.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn {
+    font-weight: normal;
+    color: @bx-color-link-body;
+}
+
+.bx-menu-main-submenu.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon,
+.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon {
+    color: @bx-color-icon-body;
 }

modules/boonex/lucid/data/template/system/css/menu.css → modules/boonex/lucid/data/template/system/css/menu.less

@@ -604,9 +604,16 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
 	background-color: transparent;
 }
 
+
 /*--- Custom Menu with More Auto ---*/
+.bx-menu-main-submenu.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn,
 .bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item a,
-.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn,
-.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon {
-    color: inherit;
+.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn {
+    font-weight: normal;
+    color: @bx-color-link-body;
 }
+
+.bx-menu-main-submenu.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon,
+.bx-menu-custom.bx-menu-hor.bx-menu-more-auto .bx-menu-submenu-more-auto .bx-menu-item .bx-btn .sys-icon {
+    color: @bx-color-icon-body;
+}

modules/boonex/protean/data/template/system/css/menu.less

@@ -33,40 +33,77 @@ ul.bx-menu-ver.bx-menu-profile-stats li.bx-menu-item-profile-stats-profile .bx-m
 }
 
 
-/* --------------- popup menus (vertical) */
-ul.bx-menu-custom.bx-menu-custom-ver {
+/*
+ * Popup menus (vertical)
+ *
+ * ul.bx-menu-ver - Common vertical menus, like Timeline -> Share.
+ * ul.bx-menu-custom.bx-menu-ver - Custom menus with Auto More functionality, like content view page -> Action buttons and Page Submenu on view profile pages.
+ * ul.bx-menu-custom.bx-menu-custom-ver - Other custom menus, like in Timeline cards.
+ */
+.bx-popup ul.bx-menu-custom.bx-menu-ver {
+    margin: -1.0rem;
+}
+.bx-popup ul.bx-menu-ver,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver {
     margin: -1.25rem;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li {
+.bx-popup ul.bx-menu-ver li,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li {
     margin-top: 0;
     margin-bottom: 0;
     border-top: @bx-border-width @bx-border-type @bx-border-color-hr;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li:first-child {
+.bx-popup ul.bx-menu-custom.bx-menu-ver.bx-menu-submenu-more-auto li.bx-menu-item {
+    padding: 0.5rem 1.0rem;
+    line-height: normal;
+}
+.bx-popup ul.bx-menu-ver li:first-child,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li:first-child,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li:first-child {
     border-top-width: 0;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li > span,
-ul.bx-menu-custom.bx-menu-custom-ver li > .bx-def-margin-thd-topbottom {
+.bx-popup ul.bx-menu-ver li div.bx-def-padding-sec,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > .bx-def-margin-thd-topbottom {
     margin: 0;
     padding: 0.5rem 1.0rem;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li > span > a,
-ul.bx-menu-custom.bx-menu-custom-ver li > span > span,
-ul.bx-menu-custom.bx-menu-custom-ver li > span > span > a,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-menu-item-link,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-element-holder,
-ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-do-report {
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > .bx-def-margin-thd-topbottom {
+    margin: 0;
+}
+.bx-popup ul.bx-menu-ver li > a,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li > span > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li > span > span > a,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-menu-item-link,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-element-holder,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li .bx-report-do-report {
     margin: 0;
     padding: 0;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li a > span {
+.bx-popup ul.bx-menu-ver li a > div span,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > span,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > span {
     margin-left: 1.0rem;
     line-height: 1.5rem;
 }
-ul.bx-menu-custom.bx-menu-custom-ver li a > img,
-ul.bx-menu-custom.bx-menu-custom-ver li a > .sys-icon {
+.bx-popup ul.bx-menu-custom.bx-menu-ver.bx-menu-submenu-more-auto li.bx-menu-item a {
+    display: block;
+    line-height: 1.5rem;
+}
+.bx-popup ul.bx-menu-ver li a > div img,
+.bx-popup ul.bx-menu-ver li a > div .sys-icon,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > img,
+.bx-popup ul.bx-menu-custom.bx-menu-ver li a > .sys-icon,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > img,
+.bx-popup ul.bx-menu-custom.bx-menu-custom-ver li a > .sys-icon {
     width: 1.0rem;
     height: 1.0rem;
     line-height: 1.0rem;
     font-size: 1.0rem;
-}
+}

modules/boonex/protean/install/sql/install.sql

@@ -776,8 +776,8 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_form_input_shadow', @iMixId, 'inset 0px 0px 2px 1px rgba(0, 0, 0, 0.01)'),
 ('bx_protean_form_input_editor_skin', @iMixId, 'gray'),
 ('bx_protean_general_item_bg_color_active', @iMixId, 'rgba(243, 244, 245, 1)'),
-('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(233, 234, 235, 1)'),
-('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(243, 244, 245, 0.8)'),
+('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(0, 0, 0, 0.05)'),
+('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(0, 0, 0, 0.03)'),
 ('bx_protean_header_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_protean_header_bg_image', @iMixId, '0'),
 ('bx_protean_header_bg_image_attachment', @iMixId, 'scroll'),
@@ -1029,8 +1029,8 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_form_input_shadow', @iMixId, 'none'),
 ('bx_protean_form_input_editor_skin', @iMixId, 'dark'),
 ('bx_protean_general_item_bg_color_active', @iMixId, 'rgba(34, 51, 68, 1)'),
-('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(233, 234, 235, 1)'),
-('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 1)'),
+('bx_protean_general_item_bg_color_disabled', @iMixId, 'rgba(255, 255, 255, 0.1)'),
+('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(0, 0, 0, 0.05)'),
 ('bx_protean_header_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
 ('bx_protean_header_bg_image', @iMixId, '0'),
 ('bx_protean_header_bg_image_attachment', @iMixId, 'scroll'),

template/css/cmts.css

@@ -145,7 +145,7 @@
         padding: 0px 5px;
         padding: 0px 0.3rem;
     }
-    div.cmt-cont .cmt-body p:first-child {
+    div.cmt-cont .cmt-body > p:first-child {
         margin-top: 0;
         margin-bottom: 0;
     }

template/menu_vertical.html

@@ -3,9 +3,7 @@
         <li class="bx-def-round-corners bx-def-color-bg-hl-hover __class_add__">
             <a href="__link__" target="__target__" onclick="__onclick__">
                 <div class="bx-def-padding-sec">
-                    <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                    <bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                    <span>__title__</span>
+                    <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon><bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image><span>__title__</span>
                 </div>
             </a>
         </li>