Ticket #3148

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

@@ -448,13 +448,12 @@ a.bx-def-font-h3:hover {
     background-color: @bx-color-block-title;
 }
 .bx-db-header .bx-db-title {
+    line-height: 1.2;
     font-family: @bx-font-family-block-title;
+    font-size: @bx-font-size-block-title;
     font-weight: @bx-font-weight-block-title;
     color: @bx-color-font-block-title;
 }
-.bx-db-header .bx-db-title.bx-def-font-h2 {
-    font-size: @bx-font-size-block-title;
-}
 .bx-db-divider {
     border-top:@bx-height-block-title-div @bx-border-type @bx-color-block-title-div;
 }

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

@@ -176,8 +176,8 @@
 
 
 /*--- Popup menus (vertical) ---*/
-.bx-popup ul.bx-menu-ver,
-.bx-popup ul.bx-menu-custom.bx-menu-custom-ver {
+.bx-popup .bx-popup-content-indent ul.bx-menu-ver,
+.bx-popup .bx-popup-content-indent ul.bx-menu-custom.bx-menu-custom-ver {
     margin: -0.5rem;
 }
 .bx-popup ul.bx-menu-ver li,

modules/boonex/decorous/data/template/system/designbox_1.html

@@ -1,6 +1,6 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/decorous/data/template/system/designbox_11.html

@@ -1,6 +1,6 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/decorous/data/template/system/designbox_14.html

@@ -1,6 +1,6 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
 <div class="bx-db-container bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/decorous/data/template/system/designbox_4.html

@@ -1,6 +1,6 @@
 <!-- Design Box 4 [start]: Content + title -->
 <div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/decorous/install/sql/install.sql

@@ -133,14 +133,14 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_block_border_radius'), '_bx_decorous_stg_cpt_option_block_border_radius', '4px', 'digit', '', '', '', 9),
 (@iCategoryId, CONCAT(@sName, '_block_shadow'), '_bx_decorous_stg_cpt_option_block_shadow', '', 'digit', '', '', '', 10),
 (@iCategoryId, CONCAT(@sName, '_block_title_bg_color'), '_bx_decorous_stg_cpt_option_block_title_bg_color', '', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_decorous_stg_cpt_option_block_title_padding', '0.5rem 1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_decorous_stg_cpt_option_block_title_padding', '0.75rem 1.0rem', 'digit', '', '', '', 12),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_color'), '_bx_decorous_stg_cpt_option_block_title_border_color', '', 'rgba', '', '', '', 13),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_size'), '_bx_decorous_stg_cpt_option_block_title_border_size', '', 'digit', '', '', '', 14),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_radius'), '_bx_decorous_stg_cpt_option_block_title_border_radius', '4px 4px 0px 0px', 'digit', '', '', '', 15),
 (@iCategoryId, CONCAT(@sName, '_block_title_font_family'), '_bx_decorous_stg_cpt_option_block_title_font_family', '-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif', 'digit', '', '', '', 16),
-(@iCategoryId, CONCAT(@sName, '_block_title_font_size'), '_bx_decorous_stg_cpt_option_block_title_font_size', '1rem', 'digit', '', '', '', 17),
+(@iCategoryId, CONCAT(@sName, '_block_title_font_size'), '_bx_decorous_stg_cpt_option_block_title_font_size', '1.25rem', 'digit', '', '', '', 17),
 (@iCategoryId, CONCAT(@sName, '_block_title_font_color'), '_bx_decorous_stg_cpt_option_block_title_font_color', 'rgba(0, 0, 0, 0.85);', 'rgba', '', '', '', 18),
-(@iCategoryId, CONCAT(@sName, '_block_title_font_weight'), '_bx_decorous_stg_cpt_option_block_title_font_weight', '500', 'digit', '', '', '', 19),
+(@iCategoryId, CONCAT(@sName, '_block_title_font_weight'), '_bx_decorous_stg_cpt_option_block_title_font_weight', '700', 'digit', '', '', '', 19),
 (@iCategoryId, CONCAT(@sName, '_block_title_div_height'), '_bx_decorous_stg_cpt_option_block_title_div_height', '1px', 'digit', '', '', '', 20),
 (@iCategoryId, CONCAT(@sName, '_block_title_div_bg_color'), '_bx_decorous_stg_cpt_option_block_title_div_bg_color', 'rgba(240, 240, 240, 1)', 'rgba', '', '', '', 21);
 
@@ -340,11 +340,11 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_button_lg_border_radius'), '_bx_decorous_stg_cpt_option_button_lg_border_radius', '4px', 'digit', '', '', '', 7),
 (@iCategoryId, CONCAT(@sName, '_button_lg_shadow'), '_bx_decorous_stg_cpt_option_button_lg_shadow', '0px 2px 0px 0px rgba(0, 0, 0, 0.016)', 'digit', '', '', '', 8),
 (@iCategoryId, CONCAT(@sName, '_button_lg_font_family'), '_bx_decorous_stg_cpt_option_button_lg_font_family', '-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_decorous_stg_cpt_option_button_lg_font_size', '0.875rem', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_decorous_stg_cpt_option_button_lg_font_size', '0.75rem', 'digit', '', '', '', 10),
 (@iCategoryId, CONCAT(@sName, '_button_lg_font_color'), '_bx_decorous_stg_cpt_option_button_lg_font_color', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 11),
 (@iCategoryId, CONCAT(@sName, '_button_lg_font_color_hover'), '_bx_decorous_stg_cpt_option_button_lg_font_color_hover', 'rgba(255, 255, 255, 1)', 'rgba', '', '', '', 12),
 (@iCategoryId, CONCAT(@sName, '_button_lg_font_shadow'), '_bx_decorous_stg_cpt_option_button_lg_font_shadow', '0px -1px 0px; rgba(0, 0, 0, 0.12)', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_decorous_stg_cpt_option_button_lg_font_weight', '400', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_decorous_stg_cpt_option_button_lg_font_weight', '600', 'digit', '', '', '', 14);
 
 -- SETTINGS: Decorous template Styles Small Buttons
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -352,7 +352,7 @@ INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALU
 SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
-(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_decorous_stg_cpt_option_button_sm_height', '2rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_decorous_stg_cpt_option_button_sm_height', '1.75rem', 'digit', '', '', '', 1),
 (@iCategoryId, CONCAT(@sName, '_button_sm_bg_color'), '_bx_decorous_stg_cpt_option_button_sm_bg_color', 'rgba(255, 255, 255, 1)', 'rgba', '', '', '', 2),
 (@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_hover'), '_bx_decorous_stg_cpt_option_button_sm_bg_color_hover', 'rgba(255, 255, 255, 1)', 'rgba', '', '', '', 3),
 (@iCategoryId, CONCAT(@sName, '_button_sm_border_color'), '_bx_decorous_stg_cpt_option_button_sm_border_color', 'rgba(217, 217, 217, 1)', 'rgba', '', '', '', 4),

modules/boonex/lucid/data/template/system/css/common.css

@@ -1,10 +1,5 @@
 @import url(../../../../../../../template/css/common.css);
 
-/* --- Design boxes --- */
-.bx-db-container .bx-db-header {
-    height: 40px;
-}
-
 /*--- Design Boxes Menu ---*/
 .bx-db-menu ul.bx-menu-hor li.bx-menu-tab-active,
 .bx-db-menu ul.bx-menu-custom.bx-menu-custom-hor li.bx-menu-tab-active {

modules/boonex/lucid/data/template/system/css/default.less

@@ -443,12 +443,11 @@ a.bx-def-font-h3:hover {
     background-color: @bx-color-block-title;
 }
 .bx-db-header .bx-db-title {
-	font-family: @bx-font-family-block-title;
-	font-weight: @bx-font-weight-block-title;
-	color: @bx-color-font-block-title;
-}
-.bx-db-header .bx-db-title.bx-def-font-h2 {
-	font-size: @bx-font-size-block-title;
+    line-height: 1.2;
+    font-family: @bx-font-family-block-title;
+    font-size: @bx-font-size-block-title;
+    font-weight: @bx-font-weight-block-title;
+    color: @bx-color-font-block-title;
 }
 .bx-db-divider {
 	border-top:@bx-height-block-title-div @bx-border-type @bx-color-block-title-div;
@@ -853,60 +852,61 @@ a.bx-def-font-h3:hover {
 
 /* button (normal) */
 .bx-btn {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button;
-	line-height: (@bx-height-button - 0.1);
+    height: @bx-height-button;
+    line-height: (@bx-height-button - 0.2);
 
-	.background-color (@bx-color-button);
+    .background-color (@bx-color-button);
 
-	border-width: @bx-border-width-button;
-	border-style: solid;
-	border-color: @bx-color-border-button;
+    border-width: @bx-border-width-button;
+    border-style: solid;
+    border-color: @bx-color-border-button;
 
-        border-radius: @bx-border-radius-button;
-	background-clip: padding-box;
+    border-radius: @bx-border-radius-button;
+    background-clip: padding-box;
 
-	-webkit-box-shadow: @bx-shadow-button;
-	-moz-box-shadow: @bx-shadow-button;
-	box-shadow: @bx-shadow-button;
+    -webkit-box-shadow: @bx-shadow-button;
+    -moz-box-shadow: @bx-shadow-button;
+    box-shadow: @bx-shadow-button;
 
-	text-shadow: @bx-shadow-font-button;
+    text-shadow: @bx-shadow-font-button;
+    text-transform: uppercase;
 
-	font-family: @bx-font-family-button;
-	font-size: @bx-font-size-button;
-	font-weight: @bx-font-weight-button;
-	color: @bx-font-color-button;
+    font-family: @bx-font-family-button;
+    font-size: @bx-font-size-button;
+    font-weight: @bx-font-weight-button;
+    color: @bx-font-color-button;
 }
 .bx-btn.bx-btn-primary {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button-primary;
-	line-height: (@bx-height-button-primary - 0.1);
+    height: @bx-height-button-primary;
+    line-height: (@bx-height-button-primary - 0.1);
 
-	.background-color (@bx-color-button-primary);
+    .background-color (@bx-color-button-primary);
 
-	border-width: @bx-border-width-button-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-primary;
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+    border-color: @bx-color-border-button-primary;
 
-        border-radius: @bx-border-radius-button-primary;
-	background-clip: padding-box;
+    border-radius: @bx-border-radius-button-primary;
+    background-clip: padding-box;
 
-	-webkit-box-shadow: @bx-shadow-button-primary;
-	-moz-box-shadow: @bx-shadow-button-primary;
-	box-shadow: @bx-shadow-button-primary;
+    -webkit-box-shadow: @bx-shadow-button-primary;
+    -moz-box-shadow: @bx-shadow-button-primary;
+    box-shadow: @bx-shadow-button-primary;
 
-	text-shadow: @bx-shadow-font-button-primary;
+    text-shadow: @bx-shadow-font-button-primary;
 
-	font-family: @bx-font-family-button-primary;
-	font-size: @bx-font-size-button-primary;
-	font-weight: @bx-font-weight-button-primary;
-	color: @bx-font-color-button-primary;
+    font-family: @bx-font-family-button-primary;
+    font-size: @bx-font-size-button-primary;
+    font-weight: @bx-font-weight-button-primary;
+    color: @bx-font-color-button-primary;
 }
 .bx-btn-height {
-	height: @bx-height-button;
-	line-height: @bx-height-button;
+    height: @bx-height-button;
+    line-height: @bx-height-button;
 }
 .bx-btn-border {
     border-width: @bx-border-width-button;
@@ -914,259 +914,331 @@ a.bx-def-font-h3:hover {
     border-color: transparent;
 }
 .bx-btn-height.bx-btn-primary {
-	height: @bx-height-button-primary;
-	line-height: @bx-height-button-primary;
+    height: @bx-height-button-primary;
+    line-height: @bx-height-button-primary;
 }
 .bx-btn-border.bx-btn-primary {
-	border-width: @bx-border-width-button-primary;
-	border-style: solid;
-	border-color: transparent;
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+    border-color: transparent;
 }
 .bx-btn:hover,
 .bx-btn:active {
-	border-width: @bx-border-width-button;
-	border-style: solid;
-	border-color: @bx-color-border-button-hover;
+    border-width: @bx-border-width-button;
+    border-style: solid;
+}
+.bx-btn:hover {
+    border-color: @bx-color-border-button-hover;
 
-	.background-color (@bx-color-button-hover);
+    .background-color (@bx-color-button-hover);
 
-	color: @bx-font-color-button-hover;
+    color: @bx-font-color-button-hover;
+}
+.bx-btn:active {
+    border-color: @bx-color-border-button-click;
+
+    .background-color (@bx-color-button-click);
+    box-shadow: @bx-shadow-color-button-click;
+
+    color: @bx-font-color-button-click;
 }
 .bx-btn.bx-btn-primary:hover,
 .bx-btn.bx-btn-primary:active {
-	border-width: @bx-border-width-button-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-primary-hover;
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-primary-hover;
+
+    .background-color (@bx-color-button-primary-hover);
+
+    color: @bx-font-color-button-primary-hover;
+}
+.bx-btn.bx-btn-primary:active {
+    border-color: @bx-color-border-button-primary-click;
 
-	.background-color (@bx-color-button-primary-hover);
+    .background-color (@bx-color-button-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
 
-	color: @bx-font-color-button-primary-hover;
+    color: @bx-font-color-button-primary-click;
 }
 .bx-btn .sys-icon:not(.sys-colored) {
-	color: @bx-font-color-button;
+    color: @bx-font-color-button;
 }
 .bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
-	color: @bx-font-color-button-primary;
+    color: @bx-font-color-button-primary;
+}
+.bx-btn:hover .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-hover;
 }
-.bx-btn:hover .sys-icon:not(.sys-colored),
 .bx-btn:active .sys-icon:not(.sys-colored) {
-	color: @bx-font-color-button-hover;
+    color: @bx-font-color-button-click;
+}
+.bx-btn.bx-btn-primary:hover .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-primary-hover;
 }
-.bx-btn.bx-btn-primary:hover .sys-icon:not(.sys-colored),
 .bx-btn.bx-btn-primary:active .sys-icon:not(.sys-colored) {
-	color: @bx-font-color-button-primary-hover;
+    color: @bx-font-color-button-primary-click;
 }
 
 /* button (large) */
 .bx-btn.bx-btn-large {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button-large;
-	line-height: (@bx-height-button-large - 0.2);
+    height: @bx-height-button-large;
+    line-height: (@bx-height-button-large - 0.2);
 
-	.background-color (@bx-color-button-large);
+    .background-color (@bx-color-button-large);
 
-	border-width: @bx-border-width-button-large;
-	border-style: solid;
-	border-color: @bx-color-border-button-large;
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+    border-color: @bx-color-border-button-large;
 
-        border-radius: @bx-border-radius-button-large;
-	background-clip: padding-box;
+    border-radius: @bx-border-radius-button-large;
+    background-clip: padding-box;
 
-	-webkit-box-shadow: @bx-shadow-button-large;
-	-moz-box-shadow: @bx-shadow-button-large;
-	box-shadow: @bx-shadow-button-large;
+    -webkit-box-shadow: @bx-shadow-button-large;
+    -moz-box-shadow: @bx-shadow-button-large;
+    box-shadow: @bx-shadow-button-large;
 
-	text-shadow: @bx-shadow-font-button-large;
+    text-shadow: @bx-shadow-font-button-large;
 
-	font-family: @bx-font-family-button-large;
-	font-size: @bx-font-size-button-large;
-	font-weight: @bx-font-weight-button-large;
-	color: @bx-font-color-button-large;
+    font-family: @bx-font-family-button-large;
+    font-size: @bx-font-size-button-large;
+    font-weight: @bx-font-weight-button-large;
+    color: @bx-font-color-button-large;
 }
 .bx-btn.bx-btn-large.bx-btn-primary {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button-large-primary;
-	line-height: (@bx-height-button-large-primary - 0.2);
+    height: @bx-height-button-large-primary;
+    line-height: (@bx-height-button-large-primary - 0.2);
 
-	.background-color (@bx-color-button-large-primary);
+    .background-color (@bx-color-button-large-primary);
 
-	border-width: @bx-border-width-button-large-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-large-primary;
+    border-width: @bx-border-width-button-large-primary;
+    border-style: solid;
+    border-color: @bx-color-border-button-large-primary;
+
+    border-radius: @bx-border-radius-button-large-primary;
+    background-clip: padding-box;
 
-        border-radius: @bx-border-radius-button-large-primary;
-	background-clip: padding-box;
+    -webkit-box-shadow: @bx-shadow-button-large-primary;
+    -moz-box-shadow: @bx-shadow-button-large-primary;
+    box-shadow: @bx-shadow-button-large-primary;
 
-	-webkit-box-shadow: @bx-shadow-button-large-primary;
-	-moz-box-shadow: @bx-shadow-button-large-primary;
-	box-shadow: @bx-shadow-button-large-primary;
-	
-	text-shadow: @bx-shadow-font-button-large-primary;
+    text-shadow: @bx-shadow-font-button-large-primary;
 
-	font-family: @bx-font-family-button-large-primary;
-	font-size: @bx-font-size-button-large-primary;
-	font-weight: @bx-font-weight-button-large-primary;
-	color: @bx-font-color-button-large-primary;
+    font-family: @bx-font-family-button-large-primary;
+    font-size: @bx-font-size-button-large-primary;
+    font-weight: @bx-font-weight-button-large-primary;
+    color: @bx-font-color-button-large-primary;
 }
 .bx-btn-large-height {
-	height: @bx-height-button-large;
-	line-height: @bx-height-button-large;
+    height: @bx-height-button-large;
+    line-height: @bx-height-button-large;
 }
 .bx-btn-large-height.bx-btn-primary {
-	height: @bx-height-button-large-primary;
-	line-height: @bx-height-button-large-primary;
+    height: @bx-height-button-large-primary;
+    line-height: @bx-height-button-large-primary;
 }
 .bx-btn-large-border {
-	border-width: @bx-border-width-button-large;
-	border-style: solid;
-	border-color: transparent;
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+    border-color: transparent;
 }
 .bx-btn-large-border.bx-btn-primary {
-	border-width: @bx-border-width-button-large-primary;
-	border-style: solid;
-	border-color: transparent;
+    border-width: @bx-border-width-button-large-primary;
+    border-style: solid;
+    border-color: transparent;
 }
 .bx-btn.bx-btn-large:hover,
 .bx-btn.bx-btn-large:active {
-	border-width: @bx-border-width-button-large;
-	border-style: solid;
-	border-color: @bx-color-border-button-large-hover;
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+}
+.bx-btn.bx-btn-large:hover {
+    border-color: @bx-color-border-button-large-hover;
+
+    .background-color (@bx-color-button-large-hover);
+
+    color: @bx-font-color-button-large-hover;
+}
+.bx-btn.bx-btn-large:active {
+    border-color: @bx-color-border-button-large-click;
 
-	.background-color (@bx-color-button-large-hover);
+    .background-color (@bx-color-button-large-click);
+    box-shadow: @bx-shadow-color-button-click;
 
-	color: @bx-font-color-button-large-hover;
+    color: @bx-font-color-button-large-click;
 }
 .bx-btn.bx-btn-large.bx-btn-primary:hover,
 .bx-btn.bx-btn-large.bx-btn-primary:active {
-	border-width: @bx-border-width-button-large-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-large-primary-hover;
+    border-width: @bx-border-width-button-large-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-large-primary-hover;
 
-	.background-color (@bx-color-button-large-primary-hover);
+    .background-color (@bx-color-button-large-primary-hover);
 
-	color: @bx-font-color-button-large-primary-hover;
+    color: @bx-font-color-button-large-primary-hover;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:active {
+    border-color: @bx-color-border-button-large-primary-click;
+
+    .background-color (@bx-color-button-large-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
+
+    color: @bx-font-color-button-large-primary-click;
 }
 .bx-btn.bx-btn-large .sys-icon {
-	color: @bx-font-color-button-large;
+    color: @bx-font-color-button-large;
 }
 .bx-btn.bx-btn-large.bx-btn-primary .sys-icon {
-	color: @bx-font-color-button-large-primary;
+    color: @bx-font-color-button-large-primary;
+}
+.bx-btn.bx-btn-large:hover .sys-icon {
+    color: @bx-font-color-button-large-hover;
 }
-.bx-btn.bx-btn-large:hover .sys-icon,
 .bx-btn.bx-btn-large:active .sys-icon {
-	color: @bx-font-color-button-large-hover;
+    color: @bx-font-color-button-large-click;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:hover .sys-icon {
+    color: @bx-font-color-button-large-primary-hover;
 }
-.bx-btn.bx-btn-large.bx-btn-primary:hover .sys-icon,
 .bx-btn.bx-btn-large.bx-btn-primary:active .sys-icon {
-	color: @bx-font-color-button-large-primary-hover;
+    color: @bx-font-color-button-large-primary-click;
 }
 
 /* button (small) */
 .bx-btn.bx-btn-small {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button-small;
-	line-height: (@bx-height-button-small - 0.1);
+    height: @bx-height-button-small;
+    line-height: (@bx-height-button-small - 0.1);
 
-	.background-color (@bx-color-button-small);
+    .background-color (@bx-color-button-small);
 
-	border-width: @bx-border-width-button-small;
-	border-style: solid;
-	border-color: @bx-color-border-button-small;
+    border-width: @bx-border-width-button-small;
+    border-style: solid;
+    border-color: @bx-color-border-button-small;
 
-        border-radius: @bx-border-radius-button-small;
-        background-clip: padding-box;
+    border-radius: @bx-border-radius-button-small;
+    background-clip: padding-box;
 
-	-webkit-box-shadow: @bx-shadow-button-small;
-	-moz-box-shadow: @bx-shadow-button-small;
-	box-shadow: @bx-shadow-button-small;
+    -webkit-box-shadow: @bx-shadow-button-small;
+    -moz-box-shadow: @bx-shadow-button-small;
+    box-shadow: @bx-shadow-button-small;
 
-	text-shadow: @bx-shadow-font-button-small;
+    text-shadow: @bx-shadow-font-button-small;
 
-	font-family: @bx-font-family-button-small;
-	font-size: @bx-font-size-button-small;
-	font-weight: @bx-font-weight-button-small;
-	color: @bx-font-color-button-small;
+    font-family: @bx-font-family-button-small;
+    font-size: @bx-font-size-button-small;
+    font-weight: @bx-font-weight-button-small;
+    color: @bx-font-color-button-small;
 }
 .bx-btn.bx-btn-small.bx-btn-primary {
-	.box-sizing(@base-input-box-sizing);
+    .box-sizing(@base-input-box-sizing);
 
-	height: @bx-height-button-small-primary;
-	line-height: (@bx-height-button-small-primary - 0.1);
+    height: @bx-height-button-small-primary;
+    line-height: (@bx-height-button-small-primary - 0.1);
 
-	.background-color (@bx-color-button-small-primary);
+    .background-color (@bx-color-button-small-primary);
 
-	border-width: @bx-border-width-button-small-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-small-primary;
+    border-width: @bx-border-width-button-small-primary;
+    border-style: solid;
+    border-color: @bx-color-border-button-small-primary;
 
-        border-radius: @bx-border-radius-button-small-primary;
-        background-clip: padding-box;
+    border-radius: @bx-border-radius-button-small-primary;
+    background-clip: padding-box;
 
-	-webkit-box-shadow: @bx-shadow-button-small-primary;
-	-moz-box-shadow: @bx-shadow-button-small-primary;
-	box-shadow: @bx-shadow-button-small-primary;
+    -webkit-box-shadow: @bx-shadow-button-small-primary;
+    -moz-box-shadow: @bx-shadow-button-small-primary;
+    box-shadow: @bx-shadow-button-small-primary;
 
-	text-shadow: @bx-shadow-font-button-small-primary;
+    text-shadow: @bx-shadow-font-button-small-primary;
 
-	font-family: @bx-font-family-button-small-primary;
-	font-size: @bx-font-size-button-small-primary;
-	font-weight: @bx-font-weight-button-small-primary;
-	color: @bx-font-color-button-small-primary;
+    font-family: @bx-font-family-button-small-primary;
+    font-size: @bx-font-size-button-small-primary;
+    font-weight: @bx-font-weight-button-small-primary;
+    color: @bx-font-color-button-small-primary;
 }
 .bx-btn-small-height {
-	height: @bx-height-button-small;
-	line-height: @bx-height-button-small;
+    height: @bx-height-button-small;
+    line-height: @bx-height-button-small;
 }
 .bx-btn-small-height.bx-btn-primary {
-	height: @bx-height-button-small-primary;
-	line-height: @bx-height-button-small-primary;
+    height: @bx-height-button-small-primary;
+    line-height: @bx-height-button-small-primary;
 }
 .bx-btn-small-border {
-	border-width: @bx-border-width-button-small;
-	border-style: solid;
-	border-color: transparent;
+    border-width: @bx-border-width-button-small;
+    border-style: solid;
+    border-color: transparent;
 }
 .bx-btn-small-border.bx-btn-primary {
-	border-width: @bx-border-width-button-small-primary;
-	border-style: solid;
-	border-color: transparent;
+    border-width: @bx-border-width-button-small-primary;
+    border-style: solid;
+    border-color: transparent;
 }
 .bx-btn.bx-btn-small:hover,
 .bx-btn.bx-btn-small:active {
-	border-width: @bx-border-width-button-small;
-	border-style: solid;
-	border-color: @bx-color-border-button-small-hover;
+    border-width: @bx-border-width-button-small;
+    border-style: solid;
+}
+.bx-btn.bx-btn-small:hover {
+    border-color: @bx-color-border-button-small-hover;
 
-	.background-color (@bx-color-button-small-hover);
+    .background-color (@bx-color-button-small-hover);
 
-	color: @bx-font-color-button-small-hover;
+    color: @bx-font-color-button-small-hover;
+}
+.bx-btn.bx-btn-small:active {
+    border-color: @bx-color-border-button-small-click;
+
+    .background-color (@bx-color-button-small-click);
+    box-shadow: @bx-shadow-color-button-click;
+
+    color: @bx-font-color-button-small-click;
 }
 .bx-btn.bx-btn-small.bx-btn-primary:hover,
 .bx-btn.bx-btn-small.bx-btn-primary:active {
-	border-width: @bx-border-width-button-small-primary;
-	border-style: solid;
-	border-color: @bx-color-border-button-small-primary-hover;
+    border-width: @bx-border-width-button-small-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-small-primary-hover;
 
-	.background-color (@bx-color-button-small-primary-hover);
+    .background-color (@bx-color-button-small-primary-hover);
 
-	color: @bx-font-color-button-small-primary-hover;
+    color: @bx-font-color-button-small-primary-hover;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:active {
+    border-color: @bx-color-border-button-small-primary-click;
+
+    .background-color (@bx-color-button-small-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
+
+    color: @bx-font-color-button-small-primary-click;
 }
 .bx-btn.bx-btn-small .sys-icon {
 	color: @bx-font-color-button-small;
 }
 .bx-btn.bx-btn-small.bx-btn-primary .sys-icon {
-	color: @bx-font-color-button-small-primary;
+    color: @bx-font-color-button-small-primary;
+}
+.bx-btn.bx-btn-small:hover .sys-icon {
+    color: @bx-font-color-button-small-hover;
 }
-.bx-btn.bx-btn-small:hover .sys-icon,
 .bx-btn.bx-btn-small:active .sys-icon {
-	color: @bx-font-color-button-small-hover;
+    color: @bx-font-color-button-small-click;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:hover .sys-icon {
+    color: @bx-font-color-button-small-primary-hover;
 }
-.bx-btn.bx-btn-small.bx-btn-primary:hover .sys-icon,
 .bx-btn.bx-btn-small.bx-btn-primary:active .sys-icon {
-	color: @bx-font-color-button-small-primary-hover;
+    color: @bx-font-color-button-small-primary-click;
 }
 
 

modules/boonex/lucid/data/template/system/designbox_1.html

@@ -1,6 +1,6 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_11.html

@@ -1,6 +1,6 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_14.html

@@ -1,6 +1,6 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
 <div class="bx-db-container bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_4.html

@@ -1,6 +1,6 @@
 <!-- Design Box 4 [start]: Content + title -->
 <div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_menu_popup.html

@@ -0,0 +1 @@
+<div class="bx-db-menu-popup bx-def-padding">__content__</div>  

modules/boonex/lucid/data/template/system/scripts/BxTemplConfig.php

@@ -77,6 +77,8 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-shadow-button-primary'] = $this->_setShadow($sName . '_button_nlp_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-button-small'] = $this->_setShadow($sName . '_button_sm_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-button-small-primary'] = $this->_setShadow($sName . '_button_smp_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-color-button-click'] = $this->_setShadowCustom(-2, -2, 0, 0, $sName . '_button_nl_font_color_click', 0.08) . ', ' . $this->_setShadowCustom(2, 2, 0, 0, $sName . '_button_nl_font_color_click', 0.08);
+        $this->_aConfig['aLessConfig']['bx-shadow-color-button-primary-click'] = $this->_setShadowCustom(-2, -2, 0, 0, $sName . '_button_nlp_font_color_click', 0.08) . ', ' . $this->_setShadowCustom(2, 2, 0, 0, $sName . '_button_nlp_font_color_click', 0.08);
 
         $this->_aConfig['aLessConfig']['bx-shadow-text-cover'] = $this->_setShadowFont($sName . '_cover_text_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-menu-main'] = $this->_setShadowFont($sName . '_menu_main_font_shadow');
@@ -156,16 +158,22 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-form-input-active'] = $this->_setColorRgba($sName . '_form_input_bg_color_active', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-large'] = $this->_setColorRgba($sName . '_button_lg_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button'] = $this->_setColorRgba($sName . '_button_nl_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-hover'] = $this->_setColorRgba($sName . '_button_nl_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-click'] = $this->_setColorRgba($sName . '_button_nl_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small'] = $this->_setColorRgba($sName . '_button_sm_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_bg_color_click', 'rgba(58, 134, 134, 1)');
 
         $this->_aConfig['aLessConfig']['bx-color-font-cover'] = $this->_setColorRgba($sName . '_cover_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-font-block-title'] = $this->_setColorRgba($sName . '_block_title_font_color', 'rgba(0, 0, 20, 1)');
@@ -189,16 +197,22 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-border-form-input-active'] = $this->_setColorRgba($sName . '_form_input_border_color_active', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-border-button-large'] = $this->_setColorRgba($sName . '_button_lg_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button'] = $this->_setColorRgba($sName . '_button_nl_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-hover'] = $this->_setColorRgba($sName . '_button_nl_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-click'] = $this->_setColorRgba($sName . '_button_nl_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small'] = $this->_setColorRgba($sName . '_button_sm_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_border_color_click', $sDefColBorder);
 
         $this->_aConfig['aLessConfig']['bx-color-icon-header'] = $this->_setColorRgba($sName . '_header_icon_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-icon-header-hover'] = $this->_setColorRgba($sName . '_header_icon_color_hover', 'rgba(255, 255, 255, 1)');
@@ -352,16 +366,22 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-font-color-menu-slide-active'] = $this->_setColorRgba($sName . '_menu_slide_font_color_active', 'rgba(0, 0, 0, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-large'] = $this->_setColorRgba($sName . '_button_lg_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button'] = $this->_setColorRgba($sName . '_button_nl_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-hover'] = $this->_setColorRgba($sName . '_button_nl_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-click'] = $this->_setColorRgba($sName . '_button_nl_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small'] = $this->_setColorRgba($sName . '_button_sm_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-form-input'] = $this->_setColorRgba($sName . '_form_input_font_color', $sColFontDef);
         $this->_aConfig['aLessConfig']['bx-font-color-default-h1'] = $this->_setColorRgba($sName . '_font_color_default_h1', $sColFontDef);
         $this->_aConfig['aLessConfig']['bx-font-color-grayed-h1'] = $this->_setColorRgba($sName . '_font_color_grayed_h1', $sColFontGrd);

modules/boonex/lucid/install/langs/en.xml

@@ -236,8 +236,10 @@
 	<string name="_bx_lucid_stg_cpt_option_button_height"><![CDATA[Height]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_bg_color"><![CDATA[Background color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_bg_color_hover"><![CDATA[On-hover background color]]></string>
+        <string name="_bx_lucid_stg_cpt_option_button_bg_color_click"><![CDATA[On-click background color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_border_color"><![CDATA[Border color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_border_color_hover"><![CDATA[On-hover border color]]></string>
+        <string name="_bx_lucid_stg_cpt_option_button_border_color_click"><![CDATA[On-click border color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_border_size"><![CDATA[Border size]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_border_radius"><![CDATA[Corners radius]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_shadow"><![CDATA[Shadow]]></string>
@@ -245,6 +247,7 @@
 	<string name="_bx_lucid_stg_cpt_option_button_font_size"><![CDATA[Font size]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_font_color"><![CDATA[Font color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_font_color_hover"><![CDATA[On-hover font color]]></string>
+        <string name="_bx_lucid_stg_cpt_option_button_font_color_click"><![CDATA[On-click font color]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_font_shadow"><![CDATA[Font shadow]]></string>
 	<string name="_bx_lucid_stg_cpt_option_button_font_weight"><![CDATA[Font weight]]></string>
 

modules/boonex/lucid/install/sql/install.sql

@@ -130,7 +130,7 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_block_border_radius'), '_bx_lucid_stg_cpt_option_block_border_radius', '3px', 'digit', '', '', '', 8),
 (@iCategoryId, CONCAT(@sName, '_block_shadow'), '_bx_lucid_stg_cpt_option_block_shadow', '0px 1px 2px 0px rgba(0, 0, 0, 0.05)', 'digit', '', '', '', 9),
 (@iCategoryId, CONCAT(@sName, '_block_title_bg_color'), '_bx_lucid_stg_cpt_option_block_title_bg_color', 'rgba(255, 255, 255, 0)', 'rgba', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_lucid_stg_cpt_option_block_title_padding', '0.3rem 1rem 0rem 1rem', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_lucid_stg_cpt_option_block_title_padding', '0.75rem 1.0rem 0.75rem 1.0rem', 'digit', '', '', '', 11),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_color'), '_bx_lucid_stg_cpt_option_block_title_border_color', 'rgba(0, 0, 0, 0)', 'rgba', '', '', '', 12),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_size'), '_bx_lucid_stg_cpt_option_block_title_border_size', '0px', 'digit', '', '', '', 13),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_radius'), '_bx_lucid_stg_cpt_option_block_title_border_radius', '0px', 'digit', '', '', '', 14),
@@ -325,19 +325,22 @@ SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_button_lg_height'), '_bx_lucid_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '3px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_lg_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_lg_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
 
 
 -- SETTINGS: Lucid template Styles Large Primary Buttons
@@ -347,19 +350,22 @@ SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_button_lgp_height'), '_bx_lucid_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '3px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_lgp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
 
 -- SETTINGS: Lucid template Styles Normal Buttons
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -368,19 +374,22 @@ SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_button_nl_height'), '_bx_lucid_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_nl_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_nl_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_nl_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_nl_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '3px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_nl_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_nl_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_nl_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
 
 
 -- SETTINGS: Lucid template Styles Large Primary Buttons
@@ -390,19 +399,22 @@ SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_button_nlp_height'), '_bx_lucid_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '3px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_nlp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
 
 -- SETTINGS: Lucid template Styles Small Buttons
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -410,20 +422,23 @@ INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALU
 SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
-(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_lucid_stg_cpt_option_button_height', '1.5rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '2px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_sm_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '400', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_lucid_stg_cpt_option_button_height', '1.75rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_sm_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '400', 'digit', '', '', '', 17);
 
 -- SETTINGS: Lucid template Styles Small Primary Buttons
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -431,20 +446,23 @@ INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALU
 SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
-(@iCategoryId, CONCAT(@sName, '_button_smp_height'), '_bx_lucid_stg_cpt_option_button_height', '1.5rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_smp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(76, 103, 159, 1.0)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_smp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(76, 103, 159, 0.8)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_smp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_smp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '2px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_smp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_smp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '400', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_smp_height'), '_bx_lucid_stg_cpt_option_button_height', '1.75rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color'), '_bx_lucid_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color_hover'), '_bx_lucid_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color_click'), '_bx_lucid_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color'), '_bx_lucid_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color_hover'), '_bx_lucid_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color_click'), '_bx_lucid_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_size'), '_bx_lucid_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_radius'), '_bx_lucid_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_smp_shadow'), '_bx_lucid_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_family'), '_bx_lucid_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_size'), '_bx_lucid_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color'), '_bx_lucid_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color_hover'), '_bx_lucid_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color_click'), '_bx_lucid_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_shadow'), '_bx_lucid_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_weight'), '_bx_lucid_stg_cpt_option_button_font_weight', '400', 'digit', '', '', '', 17);
 
 -- SETTINGS: Lucid template Styles Font
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -515,37 +533,6 @@ SET @iMixId = LAST_INSERT_ID();
 UPDATE `sys_options` SET `value`=@iMixId WHERE `name`=CONCAT(@sName, '_default_mix');
 
 INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
-('bx_lucid_button_nlp_bg_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_nlp_bg_color', @iMixId, 'rgba(24, 144, 255, 1)'),
-('bx_lucid_button_nlp_height', @iMixId, '2rem'),
-('bx_lucid_button_nl_font_weight', @iMixId, '600'),
-('bx_lucid_button_nl_font_color', @iMixId, 'rgba(89, 89, 89, 1)'),
-('bx_lucid_button_nl_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_nl_font_size', @iMixId, '0.875rem'),
-('bx_lucid_button_nl_font_shadow', @iMixId, 'none'),
-('bx_lucid_button_nl_font_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_nl_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_nl_border_size', @iMixId, '1px'),
-('bx_lucid_button_nl_border_radius', @iMixId, '4px'),
-('bx_lucid_button_nl_border_color', @iMixId, 'rgba(217, 217, 217, 1)'),
-('bx_lucid_button_nl_border_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_lgp_font_shadow', @iMixId, 'none'),
-('bx_lucid_button_nl_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_nl_height', @iMixId, '2rem'),
-('bx_lucid_button_nl_bg_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_lgp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_lgp_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_lgp_font_size', @iMixId, '1.5rem'),
-('bx_lucid_button_lgp_font_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_lgp_font_weight', @iMixId, '600'),
-('bx_lucid_button_lgp_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_lgp_border_color_hover', @iMixId, 'rgba(0, 0, 0, 0.1)'),
-('bx_lucid_button_lgp_height', @iMixId, '3rem'),
-('bx_lucid_button_lgp_border_size', @iMixId, '0px'),
-('bx_lucid_button_lgp_border_radius', @iMixId, '4px'),
-('bx_lucid_button_lgp_bg_color', @iMixId, 'rgba(24, 144, 255, 1)'),
-('bx_lucid_button_lgp_bg_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_lgp_border_color', @iMixId, 'rgba(0, 0, 0, 0.05)'),
 ('bx_lucid_card_bg_image_attachment', @iMixId, 'scroll'),
 ('bx_lucid_card_bg_color_hover', @iMixId, 'rgba(255, 255, 255, 0.5)'),
 ('bx_lucid_font_color_contrasted_h3', @iMixId, 'rgba(255, 255, 255, 1)'),
@@ -568,41 +555,14 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_font_weight_h1', @iMixId, '800'),
 ('bx_lucid_font_size_small', @iMixId, '12px'),
 ('bx_lucid_font_size_h1', @iMixId, '32px'),
-('bx_lucid_button_sm_font_color', @iMixId, 'rgba(20, 80, 100, 1)'),
 ('bx_lucid_font_size_middle', @iMixId, '14px'),
 ('bx_lucid_font_size_large', @iMixId, '20px'),
 ('bx_lucid_font_color_contrasted', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_lucid_font_color_default', @iMixId, 'rgba(89, 89, 89, 1)'),
 ('bx_lucid_font_color_grayed', @iMixId, 'rgba(140, 140, 140, 1)'),
-('bx_lucid_button_sm_font_shadow', @iMixId, 'none'),
 ('bx_lucid_font_size_default', @iMixId, '16px'),
 ('bx_lucid_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_sm_font_weight', @iMixId, '600'),
-('bx_lucid_button_sm_font_size', @iMixId, '0.75rem'),
-('bx_lucid_button_sm_border_radius', @iMixId, '2px'),
-('bx_lucid_button_sm_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_sm_font_color_hover', @iMixId, 'rgba(20, 80, 100, 1)'),
-('bx_lucid_button_sm_border_color', @iMixId, 'rgba(217, 217, 217, 1)'),
-('bx_lucid_button_sm_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_sm_border_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_sm_border_size', @iMixId, '1px'),
-('bx_lucid_button_sm_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_sm_height', @iMixId, '1.5rem'),
-('bx_lucid_button_lg_font_weight', @iMixId, '600'),
-('bx_lucid_button_lg_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_lg_font_size', @iMixId, '1rem'),
-('bx_lucid_button_lg_font_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_sm_bg_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_lg_font_color', @iMixId, 'rgba(89, 89, 89, 1)'),
-('bx_lucid_button_lg_border_size', @iMixId, '1px'),
-('bx_lucid_button_lg_bg_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_lg_border_radius', @iMixId, '4px'),
-('bx_lucid_button_lg_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_lg_border_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_lg_border_color', @iMixId, 'rgba(217, 217, 217, 1)'),
 ('bx_lucid_form_input_font_color', @iMixId, 'rgba(38, 38, 38, 1)'),
-('bx_lucid_button_lg_height', @iMixId, '3rem'),
-('bx_lucid_button_lg_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_lucid_form_input_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
 ('bx_lucid_form_input_border_color_active', @iMixId, 'rgba(24, 144, 255, 1)'),
 ('bx_lucid_form_input_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0)'),
@@ -713,13 +673,13 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_block_title_border_radius', @iMixId, '0px'),
 ('bx_lucid_block_title_border_size', @iMixId, '0px'),
 ('bx_lucid_block_title_font_color', @iMixId, 'rgba(38, 38, 38, 1)'),
-('bx_lucid_block_title_font_weight', @iMixId, '800'),
+('bx_lucid_block_title_font_weight', @iMixId, '700'),
 ('bx_lucid_block_title_bg_color', @iMixId, 'rgba(255, 255, 255, 0)'),
 ('bx_lucid_block_shadow', @iMixId, '0px 2px 6px 0px rgba(0, 0, 0, 0.05)'),
 ('bx_lucid_block_border_size', @iMixId, '1px'),
-('bx_lucid_block_title_padding', @iMixId, '0rem 1rem 0rem 1rem'),
+('bx_lucid_block_title_padding', @iMixId, '0.75rem 1.0rem 0.75rem 1.0rem'),
 ('bx_lucid_block_border_radius', @iMixId, '8px'),
-('bx_lucid_block_title_font_size', @iMixId, '1rem'),
+('bx_lucid_block_title_font_size', @iMixId, '1.25rem'),
 ('bx_lucid_block_title_border_color', @iMixId, 'rgba(0, 0, 0, 0)'),
 ('bx_lucid_block_border_color', @iMixId, 'rgba(20, 80, 100, 0.1)'),
 ('bx_lucid_cover_font_size', @iMixId, '2.0rem'),
@@ -747,7 +707,6 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_cover_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_lucid_body_link_color', @iMixId, 'rgba(24, 144, 255, 1)'),
 ('bx_lucid_font_color_link_h1_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_lg_font_shadow', @iMixId, 'none'),
 ('bx_lucid_page_width', @iMixId, '1200px'),
 ('bx_lucid_body_icon_color', @iMixId, 'rgba(24, 144, 255, 1)'),
 ('bx_lucid_body_bg_image_size', @iMixId, 'cover'),
@@ -757,33 +716,8 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_footer_link_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
 ('bx_lucid_footer_link_color', @iMixId, 'rgba(89, 89, 89, 1)'),
 ('bx_lucid_footer_border_size', @iMixId, '1px'),
-('bx_lucid_button_smp_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_smp_font_size', @iMixId, '0.75rem'),
-('bx_lucid_button_smp_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
-('bx_lucid_button_smp_font_weight', @iMixId, '600'),
-('bx_lucid_button_smp_font_shadow', @iMixId, 'none'),
-('bx_lucid_button_smp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_smp_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_smp_border_radius', @iMixId, '2px'),
-('bx_lucid_button_smp_border_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_smp_border_size', @iMixId, '1px'),
-('bx_lucid_button_smp_border_color', @iMixId, 'rgba(217, 217, 217, 1)'),
-('bx_lucid_button_smp_bg_color_hover', @iMixId, 'rgba(64, 169, 255, 1)'),
-('bx_lucid_button_smp_height', @iMixId, '1.5rem'),
-('bx_lucid_button_smp_bg_color', @iMixId, 'rgba(24, 144, 255, 1)'),
-('bx_lucid_button_nlp_font_weight', @iMixId, '600'),
-('bx_lucid_button_nlp_font_shadow', @iMixId, 'none'),
-('bx_lucid_button_nlp_font_size', @iMixId, '1rem'),
-('bx_lucid_button_nlp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_lucid_button_nlp_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
-('bx_lucid_button_nlp_shadow', @iMixId, '0px 1px 3px 0px rgba(0, 0, 0, 0.05)'),
-('bx_lucid_button_nlp_font_family', @iMixId, '''Source Sans Pro'', -apple-system, BlinkMacSystemFont, ''Segoe UI'', Roboto, Helvetica, Arial, sans-serif'),
-('bx_lucid_button_nlp_border_radius', @iMixId, '4px'),
-('bx_lucid_button_nlp_border_size', @iMixId, '1px'),
-('bx_lucid_button_nlp_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.5)'),
 ('bx_lucid_footer_content_padding', @iMixId, '1rem'),
 ('bx_lucid_footer_border_color', @iMixId, 'rgba(40, 60, 80, 0.1)'),
-('bx_lucid_button_nlp_border_color', @iMixId, 'rgba(255, 255, 255, 0.2)'),
 ('bx_lucid_footer_font_color', @iMixId, 'rgba(89, 89, 89, 1)'),
 ('bx_lucid_footer_icon_color', @iMixId, 'rgba(89, 89, 89, 1)'),
 ('bx_lucid_footer_shadow', @iMixId, 'none'),

modules/boonex/ocean/data/template/system/css/common.css

@@ -12,10 +12,12 @@ a {
 	padding-bottom: 0.625rem;
 }
 .bx-db-title {
-	line-height: normal;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.2;
 }
 .bx-db-menu {
-	line-height: normal;
+    line-height: normal;
 }
 
 /* --------------- popup boxes */

modules/boonex/ocean/data/template/system/designbox_1.html

@@ -1,6 +1,6 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block bx-def-round-corners">
-    <div class="bx-db-header bx-def-padding-top bx-def-padding-leftright"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header bx-def-padding-top bx-def-padding-leftright"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>
 <!-- Design Box 1 [ end ] -->

modules/boonex/ocean/data/template/system/designbox_11.html

@@ -1,6 +1,6 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-color-bg-block bx-def-round-corners">
-    <div class="bx-db-header bx-def-padding-top bx-def-padding-leftright"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header bx-def-padding-top bx-def-padding-leftright"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-content bx-def-padding bx-clearfix">__designbox_content__</div>
 </div>
 <!-- Design Box 11 [ end ] -->

modules/boonex/ocean/data/template/system/designbox_14.html

@@ -1,6 +1,6 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
 <div class="bx-db-container bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-content bx-def-padding-top bx-clearfix">__designbox_content__</div>
 </div>
 <!-- Design Box 14 [ end ] -->

modules/boonex/ocean/data/template/system/designbox_4.html

@@ -1,6 +1,6 @@
 <!-- Design Box 4 [start]: Content + title -->
 <div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title bx-def-font-h2">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>
 <!-- Design Box 4 [ end ] -->

modules/boonex/protean/classes/BxProteanStudioPage.php

@@ -47,7 +47,11 @@ class BxProteanStudioPage extends BxTemplStudioDesign
             $sPrefix . '_styles_menu_slide',
             $sPrefix . '_styles_form',
             $sPrefix . '_styles_large_button',
+            $sPrefix . '_styles_large_button_primary',
+            $sPrefix . '_styles_button',
+            $sPrefix . '_styles_button_primary',
             $sPrefix . '_styles_small_button',
+            $sPrefix . '_styles_small_button_primary',
             $sPrefix . '_styles_font',
             $sPrefix . '_styles_custom',
             $sPrefix . '_viewport_tablet',

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

@@ -435,13 +435,14 @@ a.bx-def-font-h3:hover {
     background-color: @bx-color-block-title;
 }
 .bx-db-header .bx-db-title {
-	font-family: @bx-font-family-block-title;
-        font-size: @bx-font-size-block-title;
-	font-weight: @bx-font-weight-block-title;
-	color: @bx-color-font-block-title;
+    line-height: 1.2;
+    font-family: @bx-font-family-block-title;
+    font-size: @bx-font-size-block-title;
+    font-weight: @bx-font-weight-block-title;
+    color: @bx-color-font-block-title;
 }
 .bx-db-divider {
-	border-top:@bx-height-block-title-div @bx-border-type @bx-color-block-title-div;
+    border-top:@bx-height-block-title-div @bx-border-type @bx-color-block-title-div;
 }
 
 
@@ -759,9 +760,8 @@ a.bx-def-font-h3:hover {
     box-shadow: @bx-shadow-form-input;
 }
 
-/* button large */
-.bx-btn,
-.bx-btn.bx-btn-primary {
+/* button normal */
+.bx-btn {
     .box-sizing(@base-input-box-sizing);
 
     height: @bx-height-button;
@@ -777,12 +777,39 @@ a.bx-def-font-h3:hover {
     background-clip: padding-box;
 
     text-shadow: @bx-shadow-font-button;
+    text-transform: uppercase;
 
     font-family: @bx-font-family-button;
     font-size: @bx-font-size-button;
     font-weight: @bx-font-weight-button;
     color: @bx-font-color-button;
 }
+.bx-btn.bx-btn-primary {
+    .box-sizing(@base-input-box-sizing);
+
+    height: @bx-height-button-primary;
+    line-height: (@bx-height-button-primary - 0.2);
+
+    .background-color (@bx-color-button-primary);
+
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+    border-color: @bx-color-border-button-primary;
+
+    border-radius: @bx-border-radius-button-primary;
+    background-clip: padding-box;
+
+    -webkit-box-shadow: @bx-shadow-button-primary;
+    -moz-box-shadow: @bx-shadow-button-primary;
+    box-shadow: @bx-shadow-button-primary;
+
+    text-shadow: @bx-shadow-font-button-primary;
+
+    font-family: @bx-font-family-button-primary;
+    font-size: @bx-font-size-button-primary;
+    font-weight: @bx-font-weight-button-primary;
+    color: @bx-font-color-button-primary;
+}
 .bx-btn-height {
     height: @bx-height-button;
     line-height: (@bx-height-button - 0.2);
@@ -792,31 +819,218 @@ a.bx-def-font-h3:hover {
     border-style: solid;
     border-color: transparent;
 }
+.bx-btn-height.bx-btn-primary {
+    height: @bx-height-button-primary;
+    line-height: @bx-height-button-primary;
+}
+.bx-btn-border.bx-btn-primary {
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+    border-color: transparent;
+}
 .bx-btn:hover,
-.bx-btn:active,
-.bx-btn.bx-btn-primary:hover,
-.bx-btn.bx-btn-primary:active {
+.bx-btn:active {
     border-width: @bx-border-width-button;
     border-style: solid;
+
+}
+.bx-btn:hover {
     border-color: @bx-color-border-button-hover;
 
     .background-color (@bx-color-button-hover);
 
     color: @bx-font-color-button-hover;
 }
+.bx-btn:active {
+    border-color: @bx-color-border-button-click;
+
+    .background-color (@bx-color-button-click);
+    box-shadow: @bx-shadow-color-button-click; 
+
+    color: @bx-font-color-button-click;
+    
+}
+.bx-btn.bx-btn-primary:hover,
+.bx-btn.bx-btn-primary:active {
+    border-width: @bx-border-width-button-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-primary-hover;
+
+    .background-color (@bx-color-button-primary-hover);
+
+    color: @bx-font-color-button-primary-hover;
+}
+.bx-btn.bx-btn-primary:active {
+    border-color: @bx-color-border-button-primary-click;
+
+    .background-color (@bx-color-button-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
+
+    color: @bx-font-color-button-primary-click;
+}
+
 .bx-btn .sys-icon:not(.sys-colored) {
     color: @bx-font-color-button;
 }
-.bx-btn:hover .sys-icon:not(.sys-colored),
-.bx-btn:active .sys-icon:not(.sys-colored),
-.bx-btn.bx-btn-primary:hover .sys-icon:not(.sys-colored),
-.bx-btn.bx-btn-primary:active .sys-icon:not(.sys-colored) {
+.bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-primary;
+}
+.bx-btn:hover .sys-icon:not(.sys-colored) {
     color: @bx-font-color-button-hover;
 }
-.bx-btn .bx-loading-ajax-btn,
-.bx-btn.bx-btn-primary .bx-loading-ajax-btn {
+.bx-btn:active .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-click;
+}
+.bx-btn.bx-btn-primary:hover .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-primary-hover;
+}
+.bx-btn.bx-btn-primary:active .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button-primary-click;
+}
+.bx-btn .bx-loading-ajax-btn {
     margin-top: -@bx-border-width-button;
 }
+.bx-btn.bx-btn-primary .bx-loading-ajax-btn {
+    margin-top: -@bx-border-width-button-primary;
+}
+
+/* button large */
+.bx-btn.bx-btn-large {
+    .box-sizing(@base-input-box-sizing);
+
+    height: @bx-height-button-large;
+    line-height: (@bx-height-button-large - 0.1);
+
+    .background-color (@bx-color-button-large);
+
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+    border-color: @bx-color-border-button-large;
+
+    border-radius: @bx-border-radius-button-large;
+    background-clip: padding-box;
+
+    -webkit-box-shadow: @bx-shadow-button-large;
+    -moz-box-shadow: @bx-shadow-button-large;
+    box-shadow: @bx-shadow-button-large;
+
+    text-shadow: @bx-shadow-font-button-large;
+
+    font-family: @bx-font-family-button-large;
+    font-size: @bx-font-size-button-large;
+    font-weight: @bx-font-weight-button-large;
+    color: @bx-font-color-button-large;
+}
+.bx-btn.bx-btn-large.bx-btn-primary {
+    .box-sizing(@base-input-box-sizing);
+
+    height: @bx-height-button-large;
+    line-height: (@bx-height-button-large - 0.1);
+
+    .background-color (@bx-color-button-large);
+
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+    border-color: @bx-color-border-button-large;
+
+    border-radius: @bx-border-radius-button-large;
+    background-clip: padding-box;
+
+    -webkit-box-shadow: @bx-shadow-button-large-primary;
+    -moz-box-shadow: @bx-shadow-button-large-primary;
+    box-shadow: @bx-shadow-button-large-primary;
+
+    text-shadow: @bx-shadow-font-button-large;
+
+    font-family: @bx-font-family-button-large;
+    font-size: @bx-font-size-button-large;
+    font-weight: @bx-font-weight-button-large;
+    color: @bx-font-color-button-large;
+}
+.bx-btn-large-height {
+    height: @bx-height-button-large;
+    line-height: (@bx-height-button-large - 0.1);
+}
+.bx-btn-large-height.bx-btn-primary {
+    height: @bx-height-button-large-primary;
+    line-height: @bx-height-button-large-primary;
+}
+.bx-btn-large-border {
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+    border-color: transparent;
+}
+.bx-btn-large-border.bx-btn-primary {
+    border-width: @bx-border-width-button-large-primary;
+    border-style: solid;
+    border-color: transparent;
+}
+.bx-btn.bx-btn-large:hover,
+.bx-btn.bx-btn-large:active {
+    border-width: @bx-border-width-button-large;
+    border-style: solid;
+}
+.bx-btn.bx-btn-large:hover {
+    border-color: @bx-color-border-button-large-hover;
+
+    .background-color (@bx-color-button-large-hover);
+
+    color: @bx-font-color-button-large-hover;
+}
+.bx-btn.bx-btn-large:active {
+    border-color: @bx-color-border-button-large-click;
+
+    .background-color (@bx-color-button-large-click);
+    box-shadow: @bx-shadow-color-button-click;
+
+    color: @bx-font-color-button-large-click;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:hover,
+.bx-btn.bx-btn-large.bx-btn-primary:active {
+    border-width: @bx-border-width-button-large-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-large-primary-hover;
+
+    .background-color (@bx-color-button-large-primary-hover);
+
+    color: @bx-font-color-button-large-primary-hover;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:active {
+    border-color: @bx-color-border-button-large-primary-click;
+
+    .background-color (@bx-color-button-large-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
+
+    color: @bx-font-color-button-large-primary-click;
+}
+.bx-btn.bx-btn-large .sys-icon {
+    color: @bx-font-color-button-large;
+}
+.bx-btn.bx-btn-large.bx-btn-primary .sys-icon {
+    color: @bx-font-color-button-large-primary;
+}
+.bx-btn.bx-btn-large:hover .sys-icon {
+    color: @bx-font-color-button-large-hover;
+}
+.bx-btn.bx-btn-large:active .sys-icon {
+    color: @bx-font-color-button-large-click;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:hover .sys-icon {
+    color: @bx-font-color-button-large-primary-hover;
+}
+.bx-btn.bx-btn-large.bx-btn-primary:active .sys-icon {
+    color: @bx-font-color-button-large-primary-click;
+}
+.bx-btn.bx-btn-large .bx-loading-ajax-btn {
+    margin-top: -@bx-border-width-button-large;
+}
+.bx-btn.bx-btn-large.bx-btn-primary .bx-loading-ajax-btn {
+    margin-top: -@bx-border-width-button-large-primary;
+}
 
 /* button small */
 .bx-btn.bx-btn-small {
@@ -834,6 +1048,36 @@ a.bx-def-font-h3:hover {
     border-radius: @bx-border-radius-button-small;
     background-clip: padding-box;
 
+    -webkit-box-shadow: @bx-shadow-button-small;
+    -moz-box-shadow: @bx-shadow-button-small;
+    box-shadow: @bx-shadow-button-small;
+
+    text-shadow: @bx-shadow-font-button-small;
+
+    font-family: @bx-font-family-button-small;
+    font-size: @bx-font-size-button-small;
+    font-weight: @bx-font-weight-button-small;
+    color: @bx-font-color-button-small;
+}
+.bx-btn.bx-btn-small.bx-btn-primary {
+    .box-sizing(@base-input-box-sizing);
+
+    height: @bx-height-button-small;
+    line-height: (@bx-height-button-small - 0.1);
+
+    .background-color (@bx-color-button-small);
+
+    border-width: @bx-border-width-button-small;
+    border-style: solid;
+    border-color: @bx-color-border-button-small;
+
+    border-radius: @bx-border-radius-button-small;
+    background-clip: padding-box;
+
+    -webkit-box-shadow: @bx-shadow-button-small-primary;
+    -moz-box-shadow: @bx-shadow-button-small-primary;
+    box-shadow: @bx-shadow-button-small-primary;
+
     text-shadow: @bx-shadow-font-button-small;
 
     font-family: @bx-font-family-button-small;
@@ -845,31 +1089,84 @@ a.bx-def-font-h3:hover {
     height: @bx-height-button-small;
     line-height: (@bx-height-button-small - 0.1);
 }
+.bx-btn-small-height.bx-btn-primary {
+    height: @bx-height-button-small-primary;
+    line-height: @bx-height-button-small-primary;
+}
 .bx-btn-small-border {
     border-width: @bx-border-width-button-small;
     border-style: solid;
     border-color: transparent;
 }
+.bx-btn-small-border.bx-btn-primary {
+    border-width: @bx-border-width-button-small-primary;
+    border-style: solid;
+    border-color: transparent;
+}
 .bx-btn.bx-btn-small:hover,
 .bx-btn.bx-btn-small:active {
     border-width: @bx-border-width-button-small;
     border-style: solid;
+}
+.bx-btn.bx-btn-small:hover {
     border-color: @bx-color-border-button-small-hover;
 
     .background-color (@bx-color-button-small-hover);
 
     color: @bx-font-color-button-small-hover;
 }
+.bx-btn.bx-btn-small:active {
+    border-color: @bx-color-border-button-small-click;
+
+    .background-color (@bx-color-button-small-click);
+    box-shadow: @bx-shadow-color-button-click;
+
+    color: @bx-font-color-button-small-click;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:hover,
+.bx-btn.bx-btn-small.bx-btn-primary:active {
+    border-width: @bx-border-width-button-small-primary;
+    border-style: solid;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:hover {
+    border-color: @bx-color-border-button-small-primary-hover;
+
+    .background-color (@bx-color-button-small-primary-hover);
+
+    color: @bx-font-color-button-small-primary-hover;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:active {
+    border-color: @bx-color-border-button-small-primary-click;
+
+    .background-color (@bx-color-button-small-primary-click);
+    box-shadow: @bx-shadow-color-button-primary-click;
+
+    color: @bx-font-color-button-small-primary-click;
+}
 .bx-btn.bx-btn-small .sys-icon {
     color: @bx-font-color-button-small;
 }
-.bx-btn.bx-btn-small:hover .sys-icon,
-.bx-btn.bx-btn-small:active .sys-icon {
+.bx-btn.bx-btn-small.bx-btn-primary .sys-icon {
+    color: @bx-font-color-button-small-primary;
+}
+.bx-btn.bx-btn-small:hover .sys-icon {
     color: @bx-font-color-button-small-hover;
 }
+.bx-btn.bx-btn-small:active .sys-icon {
+    color: @bx-font-color-button-small-click;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:hover .sys-icon {
+    color: @bx-font-color-button-small-primary-hover;
+}
+.bx-btn.bx-btn-small.bx-btn-primary:active .sys-icon {
+    color: @bx-font-color-button-small-primary-click;
+}
 .bx-btn.bx-btn-small .bx-loading-ajax-btn {
     margin-top: -@bx-border-width-button-small;
 }
+.bx-btn.bx-btn-small.bx-btn-primary .bx-loading-ajax-btn {
+    margin-top: -@bx-border-width-button-small-primary;
+}
 
 /* colors */
 .bx-def-color-bg-hl,

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

@@ -40,11 +40,11 @@ ul.bx-menu-ver.bx-menu-profile-stats li.bx-menu-item-profile-stats-profile .bx-m
  * ul.bx-menu-custom.bx-menu-custom-ver - Other custom menus, like in Timeline cards.
  * ul.bx-menu-custom.bx-menu-custom-ver.bx-menu-submenu-more-auto - Custom menus with Auto More functionality, like content view page -> Action buttons and Page Submenu on view profile pages.
  */
-.bx-popup ul.bx-menu-custom.bx-menu-custom-ver.bx-menu-submenu-more-auto {
+.bx-popup .bx-popup-content-indent ul.bx-menu-custom.bx-menu-custom-ver.bx-menu-submenu-more-auto {
     margin: -1.0rem;
 }
-.bx-popup ul.bx-menu-ver,
-.bx-popup ul.bx-menu-custom.bx-menu-custom-ver {
+.bx-popup .bx-popup-content-indent ul.bx-menu-ver,
+.bx-popup .bx-popup-content-indent ul.bx-menu-custom.bx-menu-custom-ver {
     margin: -1.25rem;
 }
 .bx-popup ul.bx-menu-ver li,

modules/boonex/protean/data/template/system/menu_item_more_popup.html

@@ -0,0 +1,3 @@
+<div class="bx-menu-item-more-popup">
+    <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">__content__</ul>
+</div>

modules/boonex/protean/data/template/system/scripts/BxTemplConfig.php

@@ -76,24 +76,38 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-shadow-menu-page'] = $this->_setShadow($sName . '_menu_page_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-menu-slide'] = $this->_setShadow($sName . '_menu_slide_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-form-input'] = $this->_setShadow($sName . '_form_input_shadow');
-        $this->_aConfig['aLessConfig']['bx-shadow-button'] = $this->_setShadow($sName . '_button_lg_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-button-large'] = $this->_setShadow($sName . '_button_lg_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-button-large-primary'] = $this->_setShadow($sName . '_button_lgp_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-button'] = $this->_setShadow($sName . '_button_nl_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-button-primary'] = $this->_setShadow($sName . '_button_nlp_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-button-small'] = $this->_setShadow($sName . '_button_sm_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-button-small-primary'] = $this->_setShadow($sName . '_button_smp_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-color-button-click'] = $this->_setShadowCustom(-2, -2, 0, 0, $sName . '_button_nl_font_color_click', 0.08) . ', ' . $this->_setShadowCustom(2, 2, 0, 0, $sName . '_button_nl_font_color_click', 0.08);
+        $this->_aConfig['aLessConfig']['bx-shadow-color-button-primary-click'] = $this->_setShadowCustom(-2, -2, 0, 0, $sName . '_button_nlp_font_color_click', 0.08) . ', ' . $this->_setShadowCustom(2, 2, 0, 0, $sName . '_button_nlp_font_color_click', 0.08);
 
         $this->_aConfig['aLessConfig']['bx-shadow-text-cover'] = $this->_setShadowFont($sName . '_cover_text_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-menu-main'] = $this->_setShadowFont($sName . '_menu_main_font_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-menu-account'] = $this->_setShadowFont($sName . '_menu_account_font_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-menu-page'] = $this->_setShadowFont($sName . '_menu_page_font_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-menu-slide'] = $this->_setShadowFont($sName . '_menu_slide_font_shadow');
-        $this->_aConfig['aLessConfig']['bx-shadow-font-button'] = $this->_setShadowFont($sName . '_button_lg_font_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-font-button-large'] = $this->_setShadowFont($sName . '_button_lg_font_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-font-button-large-primary'] = $this->_setShadowFont($sName . '_button_lgp_font_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-font-button'] = $this->_setShadowFont($sName . '_button_nl_font_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-font-button-primary'] = $this->_setShadowFont($sName . '_button_nlp_font_shadow');
         $this->_aConfig['aLessConfig']['bx-shadow-font-button-small'] = $this->_setShadowFont($sName . '_button_sm_font_shadow');
+        $this->_aConfig['aLessConfig']['bx-shadow-font-button-small-primary'] = $this->_setShadowFont($sName . '_button_smp_font_shadow');
 
         //--- Height
         $this->_aConfig['aLessConfig']['bx-height-header'] = $this->_setSize($sName . '_header_height', '3rem');
         $this->_aConfig['aLessConfig']['bx-height-cover'] = $this->_setSize($sName . '_cover_height', '40vh');
         $this->_aConfig['aLessConfig']['bx-height-block-title-div'] = $this->_setSize($sName . '_block_title_div_height', '1px');
         $this->_aConfig['aLessConfig']['bx-height-form-input'] = $this->_setSize($sName . '_form_input_height', '2.2rem');
-        $this->_aConfig['aLessConfig']['bx-height-button'] = $this->_setSize($sName . '_button_lg_height', '2.25rem');
+        $this->_aConfig['aLessConfig']['bx-height-button-large'] = $this->_setSize($sName . '_button_lg_height', '2.25rem');
+        $this->_aConfig['aLessConfig']['bx-height-button-large-primary'] = $this->_setSize($sName . '_button_lgp_height', '2.25rem');
+        $this->_aConfig['aLessConfig']['bx-height-button'] = $this->_setSize($sName . '_button_nl_height', '2.25rem');
+        $this->_aConfig['aLessConfig']['bx-height-button-primary'] = $this->_setSize($sName . '_button_nlp_height', '2.25rem');
         $this->_aConfig['aLessConfig']['bx-height-button-small'] = $this->_setSize($sName . '_button_sm_height', '1.5rem');
+        $this->_aConfig['aLessConfig']['bx-height-button-small-primary'] = $this->_setSize($sName . '_button_smp_height', '1.5rem');
 
 
         //--- Title/Content Margins
@@ -144,10 +158,24 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-form-input'] = $this->_setColorRgba($sName . '_form_input_bg_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-form-input-active'] = $this->_setColorRgba($sName . '_form_input_bg_color_active', 'rgba(255, 255, 255, 1)');
-        $this->_aConfig['aLessConfig']['bx-color-button'] = $this->_setColorRgba($sName . '_button_lg_bg_color', 'rgba(108, 170, 138, 1)');
-        $this->_aConfig['aLessConfig']['bx-color-button-hover'] = $this->_setColorRgba($sName . '_button_lg_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large'] = $this->_setColorRgba($sName . '_button_lg_bg_color', 'rgba(108, 170, 138, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_bg_color_click', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_bg_color', 'rgba(108, 170, 138, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_bg_color_click', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button'] = $this->_setColorRgba($sName . '_button_nl_bg_color', 'rgba(108, 170, 138, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-hover'] = $this->_setColorRgba($sName . '_button_nl_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-click'] = $this->_setColorRgba($sName . '_button_nl_bg_color_click', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_bg_color', 'rgba(108, 170, 138, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_bg_color_click', 'rgba(58, 134, 134, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small'] = $this->_setColorRgba($sName . '_button_sm_bg_color', 'rgba(108, 170, 138, 1)');
         $this->_aConfig['aLessConfig']['bx-color-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_bg_color_click', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_bg_color', 'rgba(108, 170, 138, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_bg_color_hover', 'rgba(58, 134, 134, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_bg_color_click', 'rgba(58, 134, 134, 1)');
 
         $this->_aConfig['aLessConfig']['bx-color-font-cover'] = $this->_setColorRgba($sName . '_cover_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-font-block-title'] = $this->_setColorRgba($sName . '_block_title_font_color', 'rgba(0, 0, 20, 1)');
@@ -168,10 +196,24 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-border-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-form-input'] = $this->_setColorRgba($sName . '_form_input_border_color', 'rgba(121, 189, 154, 1)');
         $this->_aConfig['aLessConfig']['bx-color-border-form-input-active'] = $this->_setColorRgba($sName . '_form_input_border_color_active', 'rgba(108, 170, 138, 1)');
-        $this->_aConfig['aLessConfig']['bx-color-border-button'] = $this->_setColorRgba($sName . '_button_lg_border_color', $sDefColBorder);
-        $this->_aConfig['aLessConfig']['bx-color-border-button-hover'] = $this->_setColorRgba($sName . '_button_lg_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large'] = $this->_setColorRgba($sName . '_button_lg_border_color', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_border_color_click', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_border_color', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_border_color_click', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button'] = $this->_setColorRgba($sName . '_button_nl_border_color', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-hover'] = $this->_setColorRgba($sName . '_button_nl_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-click'] = $this->_setColorRgba($sName . '_button_nl_border_color_click', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_border_color', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_border_color_click', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small'] = $this->_setColorRgba($sName . '_button_sm_border_color', $sDefColBorder);
         $this->_aConfig['aLessConfig']['bx-color-border-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_border_color_click', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_border_color', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_border_color_hover', $sDefColBorder);
+        $this->_aConfig['aLessConfig']['bx-color-border-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_border_color_click', $sDefColBorder);
 
         $this->_aConfig['aLessConfig']['bx-color-icon-header'] = $this->_setColorRgba($sName . '_header_icon_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-icon-header-hover'] = $this->_setColorRgba($sName . '_header_icon_color_hover', 'rgba(255, 255, 255, 1)');
@@ -201,8 +243,12 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-border-width-menu-page'] = $this->_setSize($sName . '_menu_page_border_size');
         $this->_aConfig['aLessConfig']['bx-border-width-menu-slide'] = $this->_setSize($sName . '_menu_slide_border_size');
         $this->_aConfig['aLessConfig']['bx-border-width-form-input'] = $this->_setSize($sName . '_form_input_border_size');
-        $this->_aConfig['aLessConfig']['bx-border-width-button'] = $this->_setSize($sName . '_button_lg_border_size');
+        $this->_aConfig['aLessConfig']['bx-border-width-button-large'] = $this->_setSize($sName . '_button_lg_border_size');
+        $this->_aConfig['aLessConfig']['bx-border-width-button-large-primary'] = $this->_setSize($sName . '_button_lgp_border_size');
+        $this->_aConfig['aLessConfig']['bx-border-width-button'] = $this->_setSize($sName . '_button_nl_border_size');
+        $this->_aConfig['aLessConfig']['bx-border-width-button-primary'] = $this->_setSize($sName . '_button_nlp_border_size');
         $this->_aConfig['aLessConfig']['bx-border-width-button-small'] = $this->_setSize($sName . '_button_sm_border_size');
+        $this->_aConfig['aLessConfig']['bx-border-width-button-small-primary'] = $this->_setSize($sName . '_button_smp_border_size');
 
         $this->_aConfig['aLessConfig']['bx-border-radius-block'] = $this->_setSize($sName . '_block_border_radius');
         list(
@@ -240,8 +286,12 @@ class BxTemplConfig extends BxBaseConfig
             $this->_aConfig['aLessConfig']['bx-border-radius-popup-br'],
             $this->_aConfig['aLessConfig']['bx-border-radius-popup-bl']
         ) = $this->_setSizeDivided($this->_aConfig['aLessConfig']['bx-border-radius-popup']);
-        $this->_aConfig['aLessConfig']['bx-border-radius-button'] = $this->_setSize($sName . '_button_lg_border_radius');
+        $this->_aConfig['aLessConfig']['bx-border-radius-button-large'] = $this->_setSize($sName . '_button_lg_border_radius');
+        $this->_aConfig['aLessConfig']['bx-border-radius-button-large-primary'] = $this->_setSize($sName . '_button_lgp_border_radius');
+        $this->_aConfig['aLessConfig']['bx-border-radius-button'] = $this->_setSize($sName . '_button_nl_border_radius');
+        $this->_aConfig['aLessConfig']['bx-border-radius-button-primary'] = $this->_setSize($sName . '_button_nlp_border_radius');
         $this->_aConfig['aLessConfig']['bx-border-radius-button-small'] = $this->_setSize($sName . '_button_sm_border_radius');
+        $this->_aConfig['aLessConfig']['bx-border-radius-button-small-primary'] = $this->_setSize($sName . '_button_smp_border_radius');
 
         //--- Text
         $this->_aConfig['aLessConfig']['bx-text-align-cover'] = $this->_setAlign($sName . '_cover_text_align');
@@ -271,8 +321,12 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-font-family-menu-account'] = $this->_setValue($sName . '_menu_account_font_family');
         $this->_aConfig['aLessConfig']['bx-font-family-menu-page'] = $this->_setValue($sName . '_menu_page_font_family');
         $this->_aConfig['aLessConfig']['bx-font-family-menu-slide'] = $this->_setValue($sName . '_menu_slide_font_family');
-        $this->_aConfig['aLessConfig']['bx-font-family-button'] = $this->_setValue($sName . '_button_lg_font_family');
+        $this->_aConfig['aLessConfig']['bx-font-family-button-large'] = $this->_setValue($sName . '_button_lg_font_family');
+        $this->_aConfig['aLessConfig']['bx-font-family-button-large-primary'] = $this->_setValue($sName . '_button_lgp_font_family');
+        $this->_aConfig['aLessConfig']['bx-font-family-button'] = $this->_setValue($sName . '_button_nl_font_family');
+        $this->_aConfig['aLessConfig']['bx-font-family-button-primary'] = $this->_setValue($sName . '_button_nlp_font_family');
         $this->_aConfig['aLessConfig']['bx-font-family-button-small'] = $this->_setValue($sName . '_button_sm_font_family');
+        $this->_aConfig['aLessConfig']['bx-font-family-button-small-primary'] = $this->_setValue($sName . '_button_smp_font_family');
 
         //--- Font Size
         $this->_aConfig['aLessConfig']['bx-font-size-cover'] = $this->_setSize($sName . '_cover_font_size', '2.0rem');
@@ -283,8 +337,12 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-font-size-menu-account'] = $this->_setSize($sName . '_menu_account_font_size', '1.125rem');
         $this->_aConfig['aLessConfig']['bx-font-size-menu-page'] = $this->_setSize($sName . '_menu_page_font_size', '1.2rem');
         $this->_aConfig['aLessConfig']['bx-font-size-menu-slide'] = $this->_setSize($sName . '_menu_slide_font_size', '1.0rem');
-        $this->_aConfig['aLessConfig']['bx-font-size-button'] = $this->_setSize($sName . '_button_lg_font_size', '1rem');
+        $this->_aConfig['aLessConfig']['bx-font-size-button-large'] = $this->_setSize($sName . '_button_lg_font_size', '1rem');
+        $this->_aConfig['aLessConfig']['bx-font-size-button-large-primary'] = $this->_setSize($sName . '_button_lgp_font_size', '1rem');
+        $this->_aConfig['aLessConfig']['bx-font-size-button'] = $this->_setSize($sName . '_button_nl_font_size', '1rem');
+        $this->_aConfig['aLessConfig']['bx-font-size-button-primary'] = $this->_setSize($sName . '_button_nlp_font_size', '1rem');
         $this->_aConfig['aLessConfig']['bx-font-size-button-small'] = $this->_setSize($sName . '_button_sm_font_size', '0.9rem');
+        $this->_aConfig['aLessConfig']['bx-font-size-button-small-primary'] = $this->_setSize($sName . '_button_smp_font_size', '0.9rem');
 
         //--- Font Color
         $sColFontDef = 'rgba(51, 51, 51, 1.0)';		//--- Default
@@ -305,10 +363,24 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-font-color-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_font_color', 'rgba(62, 134, 133, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-menu-slide-hover'] = $this->_setColorRgba($sName . '_menu_slide_font_color_hover', 'rgba(62, 134, 133, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-menu-slide-active'] = $this->_setColorRgba($sName . '_menu_slide_font_color_active', 'rgba(0, 0, 0, 1)');
-        $this->_aConfig['aLessConfig']['bx-font-color-button'] = $this->_setColorRgba($sName . '_button_lg_font_color', 'rgba(255, 255, 255, 1)');
-        $this->_aConfig['aLessConfig']['bx-font-color-button-hover'] = $this->_setColorRgba($sName . '_button_lg_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large'] = $this->_setColorRgba($sName . '_button_lg_font_color', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-hover'] = $this->_setColorRgba($sName . '_button_lg_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-click'] = $this->_setColorRgba($sName . '_button_lg_font_color_click', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary'] = $this->_setColorRgba($sName . '_button_lgp_font_color', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary-hover'] = $this->_setColorRgba($sName . '_button_lgp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-large-primary-click'] = $this->_setColorRgba($sName . '_button_lgp_font_color_click', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button'] = $this->_setColorRgba($sName . '_button_nl_font_color', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-hover'] = $this->_setColorRgba($sName . '_button_nl_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-click'] = $this->_setColorRgba($sName . '_button_nl_font_color_click', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-primary'] = $this->_setColorRgba($sName . '_button_nlp_font_color', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-primary-hover'] = $this->_setColorRgba($sName . '_button_nlp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-primary-click'] = $this->_setColorRgba($sName . '_button_nlp_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small'] = $this->_setColorRgba($sName . '_button_sm_font_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-button-small-hover'] = $this->_setColorRgba($sName . '_button_sm_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-click'] = $this->_setColorRgba($sName . '_button_sm_font_color_click', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary'] = $this->_setColorRgba($sName . '_button_smp_font_color', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary-hover'] = $this->_setColorRgba($sName . '_button_smp_font_color_hover', 'rgba(255, 255, 255, 1)');
+        $this->_aConfig['aLessConfig']['bx-font-color-button-small-primary-click'] = $this->_setColorRgba($sName . '_button_smp_font_color_click', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-font-color-form-input'] = $this->_setColorRgba($sName . '_form_input_font_color', $sColFontDef);
         $this->_aConfig['aLessConfig']['bx-font-color-default-h1'] = $this->_setColorRgba($sName . '_font_color_default_h1', $sColFontDef);
         $this->_aConfig['aLessConfig']['bx-font-color-grayed-h1'] = $this->_setColorRgba($sName . '_font_color_grayed_h1', $sColFontGrd);
@@ -333,8 +405,12 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-font-weight-menu-account'] = $this->_setValue($sName . '_menu_account_font_weight', '400');
         $this->_aConfig['aLessConfig']['bx-font-weight-menu-page'] = $this->_setValue($sName . '_menu_page_font_weight', '400');
         $this->_aConfig['aLessConfig']['bx-font-weight-menu-slide'] = $this->_setValue($sName . '_menu_slide_font_weight', '400');
-        $this->_aConfig['aLessConfig']['bx-font-weight-button'] = $this->_setValue($sName . '_button_lg_font_weight', '400');
+        $this->_aConfig['aLessConfig']['bx-font-weight-button-large'] = $this->_setValue($sName . '_button_lg_font_weight', '400');
+        $this->_aConfig['aLessConfig']['bx-font-weight-button-large-primary'] = $this->_setValue($sName . '_button_lgp_font_weight', '400');
+        $this->_aConfig['aLessConfig']['bx-font-weight-button'] = $this->_setValue($sName . '_button_nl_font_weight', '400');
+        $this->_aConfig['aLessConfig']['bx-font-weight-button-primary'] = $this->_setValue($sName . '_button_nlp_font_weight', '400');
         $this->_aConfig['aLessConfig']['bx-font-weight-button-small'] = $this->_setValue($sName . '_button_sm_font_weight', '400');
+        $this->_aConfig['aLessConfig']['bx-font-weight-button-small-primary'] = $this->_setValue($sName . '_button_smp_font_weight', '400');
         $this->_aConfig['aLessConfig']['bx-font-weight-h1'] = $this->_setValue($sName . '_font_weight_h1', '700');
         $this->_aConfig['aLessConfig']['bx-font-weight-h2'] = $this->_setValue($sName . '_font_weight_h2', '700');
         $this->_aConfig['aLessConfig']['bx-font-weight-h3'] = $this->_setValue($sName . '_font_weight_h3', '500');

modules/boonex/protean/install/langs/en.xml

@@ -220,11 +220,14 @@
         <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_unavailable"><![CDATA[Skins are unavailable]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_large_button"><![CDATA[Large Buttons]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_large_button_primary"><![CDATA[Large Primary Buttons]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_height"><![CDATA[Height]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_bg_color"><![CDATA[Background color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_bg_color_hover"><![CDATA[On-hover background color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_bg_color_click"><![CDATA[On-click background color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_color"><![CDATA[Border color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_color_hover"><![CDATA[On-hover border color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_border_color_click"><![CDATA[On-click border color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_size"><![CDATA[Border size]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_radius"><![CDATA[Corners radius]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_shadow"><![CDATA[Shadow]]></string>
@@ -232,15 +235,39 @@
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_size"><![CDATA[Font size]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_color"><![CDATA[Font color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_color_hover"><![CDATA[On-hover font color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_font_color_click"><![CDATA[On-click font color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_shadow"><![CDATA[Font shadow]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_weight"><![CDATA[Font weight]]></string>
 
+        <string name="_bx_protean_stg_cpt_category_styles_button"><![CDATA[Normal Buttons]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_button_primary"><![CDATA[Normal Primary Buttons]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_height"><![CDATA[Height]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_bg_color"><![CDATA[Background color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_bg_color_hover"><![CDATA[On-hover background color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_bg_color_click"><![CDATA[On-click background color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_color"><![CDATA[Border color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_color_hover"><![CDATA[On-hover border color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_border_color_click"><![CDATA[On-click border color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_size"><![CDATA[Border size]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_radius"><![CDATA[Corners radius]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_shadow"><![CDATA[Shadow]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_family"><![CDATA[Font stack]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_size"><![CDATA[Font size]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_color"><![CDATA[Font color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_color_hover"><![CDATA[On-hover font color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_font_color_click"><![CDATA[On-click font color]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_shadow"><![CDATA[Font shadow]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_weight"><![CDATA[Font weight]]></string>
+
 	<string name="_bx_protean_stg_cpt_category_styles_small_button"><![CDATA[Small Buttons]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_small_button_primary"><![CDATA[Small Primary Buttons]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_height"><![CDATA[Height]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_bg_color"><![CDATA[Background color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_bg_color_hover"><![CDATA[On-hover background color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_bg_color_click"><![CDATA[On-click background color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_color"><![CDATA[Border color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_color_hover"><![CDATA[On-hover border color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_border_color_click"><![CDATA[On-click border color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_size"><![CDATA[Border size]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_radius"><![CDATA[Corners radius]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_shadow"><![CDATA[Shadow]]></string>
@@ -248,6 +275,7 @@
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_size"><![CDATA[Font size]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_color"><![CDATA[Font color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_color_hover"><![CDATA[On-hover font color]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_font_color_click"><![CDATA[On-click font color]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_shadow"><![CDATA[Font shadow]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_weight"><![CDATA[Font weight]]></string>
 

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

@@ -133,7 +133,7 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_block_border_radius'), '_bx_protean_stg_cpt_option_block_border_radius', '3px', 'digit', '', '', '', 9),
 (@iCategoryId, CONCAT(@sName, '_block_shadow'), '_bx_protean_stg_cpt_option_block_shadow', '0px 1px 2px 0px rgba(0, 0, 0, 0.05)', 'digit', '', '', '', 10),
 (@iCategoryId, CONCAT(@sName, '_block_title_bg_color'), '_bx_protean_stg_cpt_option_block_title_bg_color', 'rgba(255, 255, 255, 0)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_protean_stg_cpt_option_block_title_padding', '0.3rem 1rem 0rem 1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_block_title_padding'), '_bx_protean_stg_cpt_option_block_title_padding', '0.75rem 1.0rem 0.75rem 1.0rem', 'digit', '', '', '', 12),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_color'), '_bx_protean_stg_cpt_option_block_title_border_color', 'rgba(0, 0, 0, 0)', 'rgba', '', '', '', 13),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_size'), '_bx_protean_stg_cpt_option_block_title_border_size', '0px', 'digit', '', '', '', 14),
 (@iCategoryId, CONCAT(@sName, '_block_title_border_radius'), '_bx_protean_stg_cpt_option_block_title_border_radius', '0px', 'digit', '', '', '', 15),
@@ -308,20 +308,95 @@ INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALU
 SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
-(@iCategoryId, CONCAT(@sName, '_button_lg_height'), '_bx_protean_stg_cpt_option_button_lg_height', '2rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color'), '_bx_protean_stg_cpt_option_button_lg_bg_color', 'rgba(30, 150, 250, 0.8)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_hover'), '_bx_protean_stg_cpt_option_button_lg_bg_color_hover', 'rgba(30, 150, 250, 1)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_color'), '_bx_protean_stg_cpt_option_button_lg_border_color', 'rgba(30, 150, 250, 0.8)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_hover'), '_bx_protean_stg_cpt_option_button_lg_border_color_hover', 'rgba(30, 150, 250, 1)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_size'), '_bx_protean_stg_cpt_option_button_lg_border_size', '1px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_lg_border_radius'), '_bx_protean_stg_cpt_option_button_lg_border_radius', '3px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_lg_shadow'), '_bx_protean_stg_cpt_option_button_lg_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_family'), '_bx_protean_stg_cpt_option_button_lg_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_protean_stg_cpt_option_button_lg_font_size', '1rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_color'), '_bx_protean_stg_cpt_option_button_lg_font_color', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_hover'), '_bx_protean_stg_cpt_option_button_lg_font_color_hover', 'rgba(255, 255, 255, 1)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_shadow'), '_bx_protean_stg_cpt_option_button_lg_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_protean_stg_cpt_option_button_lg_font_weight', '700', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_lg_height'), '_bx_protean_stg_cpt_option_button_lg_height', '2.5rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color'), '_bx_protean_stg_cpt_option_button_lg_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_hover'), '_bx_protean_stg_cpt_option_button_lg_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_lg_bg_color_click'), '_bx_protean_stg_cpt_option_button_lg_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color'), '_bx_protean_stg_cpt_option_button_lg_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_hover'), '_bx_protean_stg_cpt_option_button_lg_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_color_click'), '_bx_protean_stg_cpt_option_button_lg_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_size'), '_bx_protean_stg_cpt_option_button_lg_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_lg_border_radius'), '_bx_protean_stg_cpt_option_button_lg_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_lg_shadow'), '_bx_protean_stg_cpt_option_button_lg_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_family'), '_bx_protean_stg_cpt_option_button_lg_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_size'), '_bx_protean_stg_cpt_option_button_lg_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color'), '_bx_protean_stg_cpt_option_button_lg_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_hover'), '_bx_protean_stg_cpt_option_button_lg_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_color_click'), '_bx_protean_stg_cpt_option_button_lg_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_shadow'), '_bx_protean_stg_cpt_option_button_lg_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_lg_font_weight'), '_bx_protean_stg_cpt_option_button_lg_font_weight', '700', 'digit', '', '', '', 17);
+
+-- SETTINGS: Lucid template Styles Large Primary Buttons
+INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
+(@iTypeId, CONCAT(@sName, '_styles_large_button_primary'), '_bx_protean_stg_cpt_category_styles_large_button_primary', 131);
+SET @iCategoryId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+(@iCategoryId, CONCAT(@sName, '_button_lgp_height'), '_bx_protean_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color'), '_bx_protean_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color_hover'), '_bx_protean_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_bg_color_click'), '_bx_protean_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color'), '_bx_protean_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color_hover'), '_bx_protean_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_color_click'), '_bx_protean_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_size'), '_bx_protean_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_border_radius'), '_bx_protean_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_shadow'), '_bx_protean_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_family'), '_bx_protean_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_size'), '_bx_protean_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color'), '_bx_protean_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color_hover'), '_bx_protean_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_color_click'), '_bx_protean_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_shadow'), '_bx_protean_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_lgp_font_weight'), '_bx_protean_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
+
+-- SETTINGS: Protean template Styles Normal Buttons
+INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
+(@iTypeId, CONCAT(@sName, '_styles_button'), '_bx_protean_stg_cpt_category_styles_button', 135);
+SET @iCategoryId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+(@iCategoryId, CONCAT(@sName, '_button_nl_height'), '_bx_protean_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color'), '_bx_protean_stg_cpt_option_button_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color_hover'), '_bx_protean_stg_cpt_option_button_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_nl_bg_color_click'), '_bx_protean_stg_cpt_option_button_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color'), '_bx_protean_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color_hover'), '_bx_protean_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_color_click'), '_bx_protean_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_size'), '_bx_protean_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_nl_border_radius'), '_bx_protean_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_nl_shadow'), '_bx_protean_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_family'), '_bx_protean_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_size'), '_bx_protean_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color'), '_bx_protean_stg_cpt_option_button_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color_hover'), '_bx_protean_stg_cpt_option_button_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_color_click'), '_bx_protean_stg_cpt_option_button_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_shadow'), '_bx_protean_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_nl_font_weight'), '_bx_protean_stg_cpt_option_button_font_weight', '600', 'digit', '', '', '', 17);
+
+-- SETTINGS: Lucid template Styles Large Primary Buttons
+INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
+(@iTypeId, CONCAT(@sName, '_styles_button_primary'), '_bx_protean_stg_cpt_category_styles_button_primary', 136);
+SET @iCategoryId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+(@iCategoryId, CONCAT(@sName, '_button_nlp_height'), '_bx_protean_stg_cpt_option_button_height', '2rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color'), '_bx_protean_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color_hover'), '_bx_protean_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_bg_color_click'), '_bx_protean_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color'), '_bx_protean_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color_hover'), '_bx_protean_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_color_click'), '_bx_protean_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_size'), '_bx_protean_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_border_radius'), '_bx_protean_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_shadow'), '_bx_protean_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0.0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_family'), '_bx_protean_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_size'), '_bx_protean_stg_cpt_option_button_font_size', '1rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color'), '_bx_protean_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color_hover'), '_bx_protean_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_color_click'), '_bx_protean_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_shadow'), '_bx_protean_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_nlp_font_weight'), '_bx_protean_stg_cpt_option_button_font_weight', '700', 'digit', '', '', '', 17);
 
 -- SETTINGS: Protean template Styles Small Buttons
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -329,20 +404,47 @@ INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALU
 SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
-(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_protean_stg_cpt_option_button_sm_height', '1.5rem', 'digit', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color'), '_bx_protean_stg_cpt_option_button_sm_bg_color', 'rgba(40, 180, 140, 0.8)', 'rgba', '', '', '', 2),
-(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_hover'), '_bx_protean_stg_cpt_option_button_sm_bg_color_hover', 'rgba(40, 180, 140, 1)', 'rgba', '', '', '', 3),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_color'), '_bx_protean_stg_cpt_option_button_sm_border_color', 'rgba(40, 180, 140, 0.8)', 'rgba', '', '', '', 4),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_hover'), '_bx_protean_stg_cpt_option_button_sm_border_color_hover', 'rgba(40, 180, 140, 1)', 'rgba', '', '', '', 5),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_size'), '_bx_protean_stg_cpt_option_button_sm_border_size', '1px', 'digit', '', '', '', 6),
-(@iCategoryId, CONCAT(@sName, '_button_sm_border_radius'), '_bx_protean_stg_cpt_option_button_sm_border_radius', '2px', 'digit', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_button_sm_shadow'), '_bx_protean_stg_cpt_option_button_sm_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 8),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_family'), '_bx_protean_stg_cpt_option_button_sm_font_family', 'Arial, sans-serif', 'digit', '', '', '', 9),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_size'), '_bx_protean_stg_cpt_option_button_sm_font_size', '0.75rem', 'digit', '', '', '', 10),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_color'), '_bx_protean_stg_cpt_option_button_sm_font_color', 'rgba(255, 255, 255, 0.9)', 'rgba', '', '', '', 11),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_hover'), '_bx_protean_stg_cpt_option_button_sm_font_color_hover', 'rgba(255, 255, 255, 1)', 'rgba', '', '', '', 12),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_shadow'), '_bx_protean_stg_cpt_option_button_sm_font_shadow', 'none', 'digit', '', '', '', 13),
-(@iCategoryId, CONCAT(@sName, '_button_sm_font_weight'), '_bx_protean_stg_cpt_option_button_sm_font_weight', '400', 'digit', '', '', '', 14);
+(@iCategoryId, CONCAT(@sName, '_button_sm_height'), '_bx_protean_stg_cpt_option_button_sm_height', '1.75rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color'), '_bx_protean_stg_cpt_option_button_sm_bg_color', 'rgba(228, 233, 242, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_hover'), '_bx_protean_stg_cpt_option_button_sm_bg_color_hover', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_sm_bg_color_click'), '_bx_protean_stg_cpt_option_button_sm_bg_color_click', 'rgba(197, 206, 224, 1)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color'), '_bx_protean_stg_cpt_option_button_sm_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_hover'), '_bx_protean_stg_cpt_option_button_sm_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_color_click'), '_bx_protean_stg_cpt_option_button_sm_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_size'), '_bx_protean_stg_cpt_option_button_sm_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_sm_border_radius'), '_bx_protean_stg_cpt_option_button_sm_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_sm_shadow'), '_bx_protean_stg_cpt_option_button_sm_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_family'), '_bx_protean_stg_cpt_option_button_sm_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_size'), '_bx_protean_stg_cpt_option_button_sm_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color'), '_bx_protean_stg_cpt_option_button_sm_font_color', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_hover'), '_bx_protean_stg_cpt_option_button_sm_font_color_hover', 'rgba(46, 56, 86, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_color_click'), '_bx_protean_stg_cpt_option_button_sm_font_color_click', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_shadow'), '_bx_protean_stg_cpt_option_button_sm_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_sm_font_weight'), '_bx_protean_stg_cpt_option_button_sm_font_weight', '400', 'digit', '', '', '', 17);
+
+-- SETTINGS: Lucid template Styles Small Primary Buttons
+INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
+(@iTypeId, CONCAT(@sName, '_styles_small_button_primary'), '_bx_protean_stg_cpt_category_styles_small_button_primary', 141);
+SET @iCategoryId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
+(@iCategoryId, CONCAT(@sName, '_button_smp_height'), '_bx_protean_stg_cpt_option_button_height', '1.75rem', 'digit', '', '', '', 1),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color'), '_bx_protean_stg_cpt_option_button_bg_color', 'rgba(51, 102, 255, 1.0)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color_hover'), '_bx_protean_stg_cpt_option_button_bg_color_hover', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 3),
+(@iCategoryId, CONCAT(@sName, '_button_smp_bg_color_click'), '_bx_protean_stg_cpt_option_button_bg_color_click', 'rgba(0, 87, 194, 1.0)', 'rgba', '', '', '', 4),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color'), '_bx_protean_stg_cpt_option_button_border_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 5),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color_hover'), '_bx_protean_stg_cpt_option_button_border_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 6),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_color_click'), '_bx_protean_stg_cpt_option_button_border_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 7),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_size'), '_bx_protean_stg_cpt_option_button_border_size', '0px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_button_smp_border_radius'), '_bx_protean_stg_cpt_option_button_border_radius', '4px', 'digit', '', '', '', 9),
+(@iCategoryId, CONCAT(@sName, '_button_smp_shadow'), '_bx_protean_stg_cpt_option_button_shadow', '0px 0px 0px 1px rgba(0,0,0,0)', 'digit', '', '', '', 10),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_family'), '_bx_protean_stg_cpt_option_button_font_family', 'Arial, sans-serif', 'digit', '', '', '', 11),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_size'), '_bx_protean_stg_cpt_option_button_font_size', '0.75rem', 'digit', '', '', '', 12),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color'), '_bx_protean_stg_cpt_option_button_font_color', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 13),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color_hover'), '_bx_protean_stg_cpt_option_button_font_color_hover', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 14),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_color_click'), '_bx_protean_stg_cpt_option_button_font_color_click', 'rgba(255, 255, 255, 1.0)', 'rgba', '', '', '', 15),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_shadow'), '_bx_protean_stg_cpt_option_button_font_shadow', 'none', 'digit', '', '', '', 16),
+(@iCategoryId, CONCAT(@sName, '_button_smp_font_weight'), '_bx_protean_stg_cpt_option_button_font_weight', '400', 'digit', '', '', '', 17);
 
 -- SETTINGS: Protean template Styles Font
 INSERT INTO `sys_options_categories`(`type_id`, `name`, `caption`, `order`) VALUES 
@@ -418,13 +520,9 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_menu_slide_content_padding', @iMixId, '1.25rem'),
 ('bx_protean_menu_slide_bg_image', @iMixId, '0'),
 ('bx_protean_menu_slide_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_protean_button_sm_border_size', @iMixId, '1px'),
-('bx_protean_button_sm_border_color_hover', @iMixId, 'rgba(20, 40, 60, 0.9)'),
-('bx_protean_button_sm_border_color', @iMixId, 'rgba(20, 40, 60, 0.8)'),
-('bx_protean_button_lg_border_size', @iMixId, '1px'),
-('bx_protean_button_lg_border_color_hover', @iMixId, 'rgba(20, 40, 60, 0.9)'),
 ('bx_protean_popup_menu_shadow', @iMixId, 'none'),
 ('bx_protean_button_lg_border_color', @iMixId, 'rgba(20, 40, 60, 0.8)'),
+('bx_protean_button_lgp_border_color', @iMixId, 'rgba(20, 40, 60, 0.8)'),
 ('bx_protean_popup_title_font_color', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_protean_popup_title_font_size', @iMixId, '1.5rem'),
 ('bx_protean_popup_title_padding', @iMixId, '1.25rem'),
@@ -476,7 +574,7 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_block_border_size', @iMixId, '1px'),
 ('bx_protean_block_border_radius', @iMixId, '3px'),
 ('bx_protean_block_shadow', @iMixId, 'none'),
-('bx_protean_block_title_padding', @iMixId, '0.2rem 1rem 0.2rem 1rem'),
+('bx_protean_block_title_padding', @iMixId, '0.75rem 1.0rem 0.75rem 1.0rem'),
 ('bx_protean_block_title_border_color', @iMixId, 'rgba(208, 208, 208, 1)'),
 ('bx_protean_block_title_border_size', @iMixId, '0px'),
 ('bx_protean_block_title_border_radius', @iMixId, '0px'),
@@ -494,25 +592,71 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_card_border_radius', @iMixId, '3px'),
 ('bx_protean_card_shadow', @iMixId, 'none'),
 ('bx_protean_button_lg_height', @iMixId, '2.5rem'),
-('bx_protean_button_lg_bg_color', @iMixId, 'rgba(40, 60, 80, 0.8)'),
-('bx_protean_button_lg_bg_color_hover', @iMixId, 'rgba(40, 60, 80, 0.9)'),
-('bx_protean_button_lg_border_radius', @iMixId, '3px'),
+('bx_protean_button_lg_bg_color', @iMixId, 'rgba(228, 233, 242, 1.0)'),
+('bx_protean_button_lg_bg_color_hover', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_lg_bg_color_click', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_lg_border_radius', @iMixId, '4px'),
 ('bx_protean_button_lg_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
 ('bx_protean_button_lg_font_family', @iMixId, 'Arial, sans-serif'),
 ('bx_protean_button_lg_font_size', @iMixId, '1rem'),
 ('bx_protean_button_lg_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
 ('bx_protean_button_lg_font_shadow', @iMixId, 'none'),
 ('bx_protean_button_lg_font_weight', @iMixId, '400'),
-('bx_protean_button_sm_height', @iMixId, '1.5rem'),
-('bx_protean_button_sm_bg_color', @iMixId, 'rgba(40, 60, 80, 0.8)'),
-('bx_protean_button_sm_bg_color_hover', @iMixId, 'rgba(40, 60, 80, 0.9)'),
-('bx_protean_button_sm_border_radius', @iMixId, '3px'),
+('bx_protean_button_lgp_height', @iMixId, '2.5rem'),
+('bx_protean_button_lgp_bg_color', @iMixId, 'rgba(51, 102, 255, 1.0)'),
+('bx_protean_button_lgp_bg_color_hover', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_lgp_bg_color_click', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_lgp_border_radius', @iMixId, '4px'),
+('bx_protean_button_lgp_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
+('bx_protean_button_lgp_font_family', @iMixId, 'Arial, sans-serif'),
+('bx_protean_button_lgp_font_size', @iMixId, '1rem'),
+('bx_protean_button_lgp_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
+('bx_protean_button_lgp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_lgp_font_weight', @iMixId, '400'),
+('bx_protean_button_nl_height', @iMixId, '2.0rem'),
+('bx_protean_button_nl_bg_color', @iMixId, 'rgba(228, 233, 242, 1.0)'),
+('bx_protean_button_nl_bg_color_hover', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_nl_bg_color_click', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_nl_border_radius', @iMixId, '4px'),
+('bx_protean_button_nl_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
+('bx_protean_button_nl_font_family', @iMixId, 'Arial, sans-serif'),
+('bx_protean_button_nl_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_nl_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
+('bx_protean_button_nl_font_shadow', @iMixId, 'none'),
+('bx_protean_button_nl_font_weight', @iMixId, '600'),
+('bx_protean_button_nlp_height', @iMixId, '2.0rem'),
+('bx_protean_button_nlp_bg_color', @iMixId, 'rgba(51, 102, 255, 1.0)'),
+('bx_protean_button_nlp_bg_color_hover', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_nlp_bg_color_click', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_nlp_border_radius', @iMixId, '4px'),
+('bx_protean_button_nlp_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
+('bx_protean_button_nlp_font_family', @iMixId, 'Arial, sans-serif'),
+('bx_protean_button_nlp_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_nlp_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
+('bx_protean_button_nlp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_nlp_font_weight', @iMixId, '600'),
+('bx_protean_button_sm_height', @iMixId, '1.75rem'),
+('bx_protean_button_sm_bg_color', @iMixId, 'rgba(228, 233, 242, 1.0)'),
+('bx_protean_button_sm_bg_color_hover', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_sm_bg_color_click', @iMixId, 'rgba(197, 206, 224, 1)'),
+('bx_protean_button_sm_border_radius', @iMixId, '4px'),
 ('bx_protean_button_sm_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
 ('bx_protean_button_sm_font_family', @iMixId, 'Arial, sans-serif'),
 ('bx_protean_button_sm_font_size', @iMixId, '0.75rem'),
 ('bx_protean_button_sm_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
 ('bx_protean_button_sm_font_shadow', @iMixId, 'none'),
 ('bx_protean_button_sm_font_weight', @iMixId, '400'),
+('bx_protean_button_smp_height', @iMixId, '1.75rem'),
+('bx_protean_button_smp_bg_color', @iMixId, 'rgba(51, 102, 255, 1.0)'),
+('bx_protean_button_smp_bg_color_hover', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_smp_bg_color_click', @iMixId, 'rgba(0, 87, 194, 1.0)'),
+('bx_protean_button_smp_border_radius', @iMixId, '4px'),
+('bx_protean_button_smp_shadow', @iMixId, '0px 0px 0px 1px rgba(0,0,0,0.1);'),
+('bx_protean_button_smp_font_family', @iMixId, 'Arial, sans-serif'),
+('bx_protean_button_smp_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_smp_font_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
+('bx_protean_button_smp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_smp_font_weight', @iMixId, '400'),
 ('bx_protean_font_family', @iMixId, 'Arial, sans-serif'),
 ('bx_protean_font_size_default', @iMixId, '16px'),
 ('bx_protean_font_color_default', @iMixId, 'rgba(40, 60, 80, 0.9)'),
@@ -561,8 +705,19 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_form_input_font_size', @iMixId, '1rem'),
 ('bx_protean_form_input_font_color', @iMixId, 'rgba(40, 60, 80, 0.9)'),
 ('bx_protean_button_lg_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_lg_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_lgp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_lgp_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_nl_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_nl_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_nlp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_nlp_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_protean_button_sm_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_sm_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_smp_font_color_hover', @iMixId, 'rgba(255, 255, 255, 1)'),
+('bx_protean_button_smp_font_color_click', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_protean_general_item_bg_color_hover', @iMixId, 'rgba(210, 230, 250, 0.3)'),
+('bx_protean_general_item_bg_color_click', @iMixId, 'rgba(210, 230, 250, 0.3)'),
 ('bx_protean_general_item_bg_color_active', @iMixId, 'rgba(210, 230, 250, 0.5)'),
 ('bx_protean_menu_main_bg_color', @iMixId, 'rgba(255, 255, 255, 0.9)'),
 ('bx_protean_menu_main_bg_image', @iMixId, '0'),
@@ -617,7 +772,7 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_font_color_link_h3', @iMixId, 'rgba(30, 140, 240, 1)'),
 ('bx_protean_font_color_link_h3_hover', @iMixId, 'rgba(10, 120, 220, 1)'),
 ('bx_protean_block_title_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_protean_block_title_font_weight', @iMixId, '500'),
+('bx_protean_block_title_font_weight', @iMixId, '700'),
 ('bx_protean_popup_title_bg_color', @iMixId, 'rgba(40, 60, 80, 0.9)'),
 ('bx_protean_font_weight_h1', @iMixId, '700'),
 ('bx_protean_font_weight_h2', @iMixId, '700'),
@@ -652,8 +807,8 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_block_title_font_color', @iMixId, 'rgba(40, 60, 80, 0.9)'),
 ('bx_protean_block_title_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
 ('bx_protean_block_title_font_size', @iMixId, '1.25rem'),
-('bx_protean_block_title_font_weight', @iMixId, '500'),
-('bx_protean_block_title_padding', @iMixId, '0.2rem 1rem 0.2rem 1rem'),
+('bx_protean_block_title_font_weight', @iMixId, '700'),
+('bx_protean_block_title_padding', @iMixId, '0.75rem 1.0rem 0.75rem 1.0rem'),
 ('bx_protean_body_bg_color', @iMixId, 'rgb(248, 252, 255)'),
 ('bx_protean_body_bg_image', @iMixId, '0'),
 ('bx_protean_body_bg_image_attachment', @iMixId, 'scroll'),
@@ -663,34 +818,6 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_body_icon_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
 ('bx_protean_body_link_color', @iMixId, 'rgba(68, 136, 255, 1)'),
 ('bx_protean_body_link_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
-('bx_protean_button_lg_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_protean_button_lg_bg_color_hover', @iMixId, 'rgba(243, 244, 245, 0.8)'),
-('bx_protean_button_lg_border_color', @iMixId, 'rgba(68, 136, 255, 1)'),
-('bx_protean_button_lg_border_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
-('bx_protean_button_lg_border_radius', @iMixId, '5px'),
-('bx_protean_button_lg_border_size', @iMixId, '1px'),
-('bx_protean_button_lg_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
-('bx_protean_button_lg_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
-('bx_protean_button_lg_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
-('bx_protean_button_lg_font_shadow', @iMixId, 'none'),
-('bx_protean_button_lg_font_size', @iMixId, '1rem'),
-('bx_protean_button_lg_font_weight', @iMixId, '400'),
-('bx_protean_button_lg_height', @iMixId, '2.5rem'),
-('bx_protean_button_lg_shadow', @iMixId, 'none'),
-('bx_protean_button_sm_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
-('bx_protean_button_sm_bg_color_hover', @iMixId, 'rgba(243, 244, 245, 0.8)'),
-('bx_protean_button_sm_border_color', @iMixId, 'rgba(68, 136, 255, 1)'),
-('bx_protean_button_sm_border_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
-('bx_protean_button_sm_border_radius', @iMixId, '3px'),
-('bx_protean_button_sm_border_size', @iMixId, '1px'),
-('bx_protean_button_sm_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
-('bx_protean_button_sm_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
-('bx_protean_button_sm_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
-('bx_protean_button_sm_font_shadow', @iMixId, 'none'),
-('bx_protean_button_sm_font_size', @iMixId, '0.75rem'),
-('bx_protean_button_sm_font_weight', @iMixId, '400'),
-('bx_protean_button_sm_height', @iMixId, '1.5rem'),
-('bx_protean_button_sm_shadow', @iMixId, 'none'),
 ('bx_protean_card_bg_color', @iMixId, 'rgba(255, 255, 255, 1)'),
 ('bx_protean_card_bg_color_hover', @iMixId, 'rgba(255, 255, 255, 0.8)'),
 ('bx_protean_card_bg_image', @iMixId, '0'),
@@ -907,8 +1034,8 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_block_title_font_color', @iMixId, 'rgba(243, 244, 245, 1)'),
 ('bx_protean_block_title_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
 ('bx_protean_block_title_font_size', @iMixId, '1.25rem'),
-('bx_protean_block_title_font_weight', @iMixId, '500'),
-('bx_protean_block_title_padding', @iMixId, '0.2rem 1rem 0.2rem 1rem'),
+('bx_protean_block_title_font_weight', @iMixId, '700'),
+('bx_protean_block_title_padding', @iMixId, '0.75rem 1.0rem 0.75rem 1.0rem'),
 ('bx_protean_body_bg_color', @iMixId, 'rgb(17, 34, 51)'),
 ('bx_protean_body_bg_image', @iMixId, '0'),
 ('bx_protean_body_bg_image_attachment', @iMixId, 'scroll'),
@@ -920,32 +1047,106 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_protean_body_link_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
 ('bx_protean_button_lg_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
 ('bx_protean_button_lg_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_lg_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
 ('bx_protean_button_lg_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
 ('bx_protean_button_lg_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
-('bx_protean_button_lg_border_radius', @iMixId, '5px'),
-('bx_protean_button_lg_border_size', @iMixId, '1px'),
+('bx_protean_button_lg_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_lg_border_radius', @iMixId, '4px'),
+('bx_protean_button_lg_border_size', @iMixId, '0px'),
 ('bx_protean_button_lg_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
 ('bx_protean_button_lg_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_lg_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
 ('bx_protean_button_lg_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
 ('bx_protean_button_lg_font_shadow', @iMixId, 'none'),
 ('bx_protean_button_lg_font_size', @iMixId, '1rem'),
 ('bx_protean_button_lg_font_weight', @iMixId, '400'),
 ('bx_protean_button_lg_height', @iMixId, '2.5rem'),
 ('bx_protean_button_lg_shadow', @iMixId, 'none'),
+('bx_protean_button_lgp_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
+('bx_protean_button_lgp_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_lgp_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_lgp_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
+('bx_protean_button_lgp_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_lgp_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_lgp_border_radius', @iMixId, '4px'),
+('bx_protean_button_lgp_border_size', @iMixId, '0px'),
+('bx_protean_button_lgp_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
+('bx_protean_button_lgp_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_lgp_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_lgp_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
+('bx_protean_button_lgp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_lgp_font_size', @iMixId, '1rem'),
+('bx_protean_button_lgp_font_weight', @iMixId, '400'),
+('bx_protean_button_lgp_height', @iMixId, '2.5rem'),
+('bx_protean_button_lgp_shadow', @iMixId, 'none'),
+('bx_protean_button_nl_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
+('bx_protean_button_nl_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_nl_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_nl_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
+('bx_protean_button_nl_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_nl_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_nl_border_radius', @iMixId, '4px'),
+('bx_protean_button_nl_border_size', @iMixId, '0px'),
+('bx_protean_button_nl_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
+('bx_protean_button_nl_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_nl_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_nl_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
+('bx_protean_button_nl_font_shadow', @iMixId, 'none'),
+('bx_protean_button_nl_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_nl_font_weight', @iMixId, '600'),
+('bx_protean_button_nl_height', @iMixId, '2.0rem'),
+('bx_protean_button_nl_shadow', @iMixId, 'none'),
+('bx_protean_button_nlp_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
+('bx_protean_button_nlp_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_nlp_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_nlp_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
+('bx_protean_button_nlp_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_nlp_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_nlp_border_radius', @iMixId, '4px'),
+('bx_protean_button_nlp_border_size', @iMixId, '0px'),
+('bx_protean_button_nlp_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
+('bx_protean_button_nlp_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_nlp_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_nlp_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
+('bx_protean_button_nlp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_nlp_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_nlp_font_weight', @iMixId, '600'),
+('bx_protean_button_nlp_height', @iMixId, '2.0rem'),
+('bx_protean_button_nlp_shadow', @iMixId, 'none'),
 ('bx_protean_button_sm_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
 ('bx_protean_button_sm_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_sm_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
 ('bx_protean_button_sm_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
 ('bx_protean_button_sm_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
-('bx_protean_button_sm_border_radius', @iMixId, '2px'),
-('bx_protean_button_sm_border_size', @iMixId, '1px'),
+('bx_protean_button_sm_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_sm_border_radius', @iMixId, '4px'),
+('bx_protean_button_sm_border_size', @iMixId, '0px'),
 ('bx_protean_button_sm_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
 ('bx_protean_button_sm_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_sm_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
 ('bx_protean_button_sm_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
 ('bx_protean_button_sm_font_shadow', @iMixId, 'none'),
 ('bx_protean_button_sm_font_size', @iMixId, '0.75rem'),
 ('bx_protean_button_sm_font_weight', @iMixId, '400'),
-('bx_protean_button_sm_height', @iMixId, '1.5rem'),
+('bx_protean_button_sm_height', @iMixId, '1.75rem'),
 ('bx_protean_button_sm_shadow', @iMixId, 'none'),
+('bx_protean_button_smp_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
+('bx_protean_button_smp_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_smp_bg_color_click', @iMixId, 'rgba(51, 68, 85, 0.8)'),
+('bx_protean_button_smp_border_color', @iMixId, 'rgba(255, 255, 255, 0.1)'),
+('bx_protean_button_smp_border_color_hover', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_smp_border_color_click', @iMixId, 'rgba(255, 255, 255, 0.2)'),
+('bx_protean_button_smp_border_radius', @iMixId, '4px'),
+('bx_protean_button_smp_border_size', @iMixId, '0px'),
+('bx_protean_button_smp_font_color', @iMixId, 'rgba(68, 136, 255, 1)'),
+('bx_protean_button_smp_font_color_hover', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_smp_font_color_click', @iMixId, 'rgba(68, 136, 255, 0.8)'),
+('bx_protean_button_smp_font_family', @iMixId, '\"Helvetica Neue\", sans-serif'),
+('bx_protean_button_smp_font_shadow', @iMixId, 'none'),
+('bx_protean_button_smp_font_size', @iMixId, '0.75rem'),
+('bx_protean_button_smp_font_weight', @iMixId, '400'),
+('bx_protean_button_smp_height', @iMixId, '1.75rem'),
+('bx_protean_button_smp_shadow', @iMixId, 'none'),
 ('bx_protean_card_bg_color', @iMixId, 'rgba(51, 68, 85, 1)'),
 ('bx_protean_card_bg_color_hover', @iMixId, 'rgba(51, 68, 85, 1)'),
 ('bx_protean_card_bg_image', @iMixId, '0'),

modules/boonex/russian/data/langs/bx_lucid/ru.xml

@@ -236,8 +236,10 @@
     <string name="_bx_lucid_stg_cpt_option_button_height"><![CDATA[Высота]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_bg_color"><![CDATA[Цвет фона]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_bg_color_hover"><![CDATA[Цвет фона при наведении курсора]]></string>
+    <string name="_bx_lucid_stg_cpt_option_button_bg_color_click"><![CDATA[Цвет фона при нажатии]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_border_color"><![CDATA[Цвет границы]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_border_color_hover"><![CDATA[Цвет границы при наведении курсора]]></string>
+    <string name="_bx_lucid_stg_cpt_option_button_border_color_click"><![CDATA[Цвет границы при нажатии]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_border_size"><![CDATA[Размер границы]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_border_radius"><![CDATA[Радиус углов]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_shadow"><![CDATA[Тень]]></string>
@@ -245,6 +247,7 @@
     <string name="_bx_lucid_stg_cpt_option_button_font_size"><![CDATA[Размер шрифта]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_font_color"><![CDATA[Цвет шрифта]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_font_color_hover"><![CDATA[Цвет шрифта при наведении курсора]]></string>
+    <string name="_bx_lucid_stg_cpt_option_button_font_color_click"><![CDATA[Цвет шрифта при нажатии]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_font_shadow"><![CDATA[Тень шрифта]]></string>
     <string name="_bx_lucid_stg_cpt_option_button_font_weight"><![CDATA[Плотность шрифта]]></string>
 

modules/boonex/russian/data/langs/bx_protean/ru.xml

@@ -220,11 +220,14 @@
         <string name="_bx_protean_stg_cpt_option_form_input_editor_skin_unavailable"><![CDATA[Темы не доступны]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_large_button"><![CDATA[Большие кнопки]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_large_button_primary"><![CDATA[Большие-главные кнопки]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_height"><![CDATA[Высота]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_bg_color"><![CDATA[Цвет фона]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_bg_color_hover"><![CDATA[Цвет фона при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_bg_color_click"><![CDATA[Цвет фона при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_color"><![CDATA[Цвет границы]]></string>
-	<string name="_bx_protean_stg_cpt_option_button_lg_border_color_hover"><![CDATA[Цвет грфницы при наведении курсора]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_lg_border_color_hover"><![CDATA[Цвет границы при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_border_color_click"><![CDATA[Цвет границы при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_size"><![CDATA[Размер границы]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_border_radius"><![CDATA[Радиус углов]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_shadow"><![CDATA[Тень]]></string>
@@ -232,15 +235,39 @@
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_size"><![CDATA[Размер шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_color"><![CDATA[Цвет шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_color_hover"><![CDATA[Цвет шрифта при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_lg_font_color_click"><![CDATA[Цвет шрифта при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_shadow"><![CDATA[Тень шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_lg_font_weight"><![CDATA[Насыщенность шрифта]]></string>
+        
+        <string name="_bx_protean_stg_cpt_category_styles_button"><![CDATA[Обычные кнопки]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_button_primary"><![CDATA[Обычные-главные кнопки]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_height"><![CDATA[Высота]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_bg_color"><![CDATA[Цвет фона]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_bg_color_hover"><![CDATA[Цвет фона при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_bg_color_click"><![CDATA[Цвет фона при наведении курсора]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_color"><![CDATA[Цвет границы]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_color_hover"><![CDATA[Цвет границы при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_border_color_click"><![CDATA[Цвет границы при нажатии]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_size"><![CDATA[Размер границы]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_border_radius"><![CDATA[Радиус углов]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_shadow"><![CDATA[Тень]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_family"><![CDATA[Набор шрифтов]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_size"><![CDATA[Размер шрифта]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_color"><![CDATA[Цвет шрифта]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_color_hover"><![CDATA[Цвет шрифта при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_font_color_click"><![CDATA[Цвет шрифта при нажатии]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_shadow"><![CDATA[Тень шрифта]]></string>
+	<string name="_bx_protean_stg_cpt_option_button_font_weight"><![CDATA[Насыщенность шрифта]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_small_button"><![CDATA[Маленькие кнопки]]></string>
+        <string name="_bx_protean_stg_cpt_category_styles_small_button_primary"><![CDATA[Маленькие-главные кнопки]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_height"><![CDATA[Высота]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_bg_color"><![CDATA[Цвет фона]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_bg_color_hover"><![CDATA[Цвет фона при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_bg_color_click"><![CDATA[Цвет фона при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_color"><![CDATA[Цвет границы]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_color_hover"><![CDATA[Цвет границы при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_border_color_click"><![CDATA[Цвет границы при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_size"><![CDATA[Размер границы]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_border_radius"><![CDATA[Радиус углов]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_shadow"><![CDATA[Тень]]></string>
@@ -248,6 +275,7 @@
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_size"><![CDATA[Размер шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_color"><![CDATA[Цвет шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_color_hover"><![CDATA[Цвет шрифта при наведении курсора]]></string>
+        <string name="_bx_protean_stg_cpt_option_button_sm_font_color_click"><![CDATA[Цвет шрифта при нажатии]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_shadow"><![CDATA[Тень шрифта]]></string>
 	<string name="_bx_protean_stg_cpt_option_button_sm_font_weight"><![CDATA[Насыщенность шрифта]]></string>
 

template/css/common.css

@@ -140,17 +140,18 @@ div.mce-fullscreen {
     display: -ms-flexbox;
     display: flex;
 
-    -webkit-box-align: stretch;
-    -webkit-align-items: stretch;
-    -ms-flex-align: stretch;
-    align-items: stretch;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
 
     -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     flex-wrap: nowrap;
 }
 .bx-db-container.bx-dbc-nopadding .bx-db-header {
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
 .bx-db-container.bx-dbc-nobg .bx-def-hr {
     display: none;
@@ -160,7 +161,6 @@ div.mce-fullscreen {
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;
 
-    line-height: 40px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -172,8 +172,6 @@ div.mce-fullscreen {
     flex: 0 2 auto;
 
     max-width: 80%;
-    
-    line-height:40px;
 }
 
 .bx-media-phone .bx-db-menu {
@@ -218,20 +216,24 @@ div.mce-fullscreen {
     -ms-flex:  0 1 auto; 
     flex:  0 1 auto;
 
-    height: 2.5rem;
     padding: 0 0.5rem;
 
     border-bottom: 1px solid transparent;
-
-    line-height: 2.5rem;
 }
 .bx-db-menu .bx-menu-custom.bx-menu-custom-hor > li > span {
+    display: block;
+
     margin: 0;
     padding: 0;
 }
+.bx-db-menu ul.bx-menu-hor > li a.bx-btn,
+.bx-db-menu ul.bx-menu-custom.bx-menu-custom-hor > li a.bx-btn {
+    display: inline-block;
+    float: none;
+}
 .bx-db-menu ul.bx-menu-hor > li a > span,
 .bx-db-menu ul.bx-menu-custom.bx-menu-custom-hor > li a > span {
-    vertical-align: baseline;
+    vertical-align: middle;
 }
 .bx-db-menu ul > li:not(.bx-menu-item-more-auto) a .sys-icon {
     display: none;
@@ -240,7 +242,8 @@ div.mce-fullscreen {
     line-height: normal;
 }
 .bx-db-menu ul li:not(.bx-menu-item-more-auto) a span,
-.bx-db-menu .bx-popup ul.bx-menu-custom.bx-menu-submenu-more-auto li:not(.bx-menu-item-more-auto) a span {
+.bx-db-menu .bx-popup ul.bx-menu-custom.bx-menu-submenu-more-auto li:not(.bx-menu-item-more-auto) a span,
+.bx-popup .bx-db-menu-popup ul.bx-menu-ver li a > div > span {
     margin: 0;
 }
 .bx-db-menu ul.bx-menu-hor li.bx-menu-tab-active,
@@ -684,24 +687,23 @@ svg .gray .outer .p2 {
 
 .bx-btn {
     position:relative;
-	display:block;	
+    display:block;	
     float:left;
 
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 
-    height:36px;
-    height:2.2rem;
-    margin:0;
-    padding:0px 12px 0px 12px;
+    height: 2.0rem;
+    margin: 0;
+    padding: 0 1.0rem;
 
     background-color: #6caa8a;
 
     border:none;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;	
+    border-radius:4px;
+    -moz-border-radius:4px;
+    -webkit-border-radius:4px;	
 
     -webkit-transition: background-color 0.2s ease-in-out;
     -moz-transition: background-color 0.2s ease-in-out;

template/css/menu.css

@@ -751,6 +751,9 @@ ul.bx-menu-btns-icon-hor li:last-child .bx-btn {
 .bx-menu-custom.bx-menu-custom-hor.bx-menu-more-auto .bx-menu-item.bx-menu-item-more-auto {
     display: none;
 }
+.bx-menu-custom-ver .bx-menu-item.bx-menu-item-more-auto {
+    display: none !important;
+}
 .bx-menu-main-submenu.bx-menu-more-auto .bx-menu-item.bx-menu-item-more-auto > span,
 .bx-menu-custom.bx-menu-custom-hor.bx-menu-more-auto .bx-menu-item.bx-menu-item-more-auto > span {
     display: block;

template/designbox_menu_button.html

@@ -1,5 +1,5 @@
 <a href="javascript:void(0);" __attrs__>
-    <bx_if:show_icon><i class="sys-icon __icon__ bx-def-font-h2"></i></bx_if:show_icon>
+    <bx_if:show_icon><i class="sys-icon __icon__"></i></bx_if:show_icon>
     <bx_if:show_icon_a><i class="sys-icon-a" data-rotate="down" data-icon="__icon_a__"></i></bx_if:show_icon_a>
     <bx_if:show_title>__title__</bx_if:show_title>
 </a>

template/designbox_menu_popup.html

@@ -0,0 +1 @@
+<div class="bx-db-menu-popup">__content__</div>  

template/menu_item_more_popup.html

@@ -1,3 +1,3 @@
-<div class="bx-def-padding">
+<div class="bx-menu-item-more-popup bx-def-padding">
     <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">__content__</ul>
 </div>

template/scripts/BxBaseConfig.php

@@ -393,6 +393,11 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
 
         return $sValue;
     }
+    
+    protected function _setShadowCustom($iX, $iY, $iBlur, $iSpread, $sKeyColor, $fOpacity, $sDefault = '')
+    {
+        return $iX . 'px ' . $iY . 'px ' . $iBlur . 'px ' . $iSpread . 'px ' . $this->_setColorRgbaCustom($sKeyColor, 0.08, 'rgba(0, 0, 0, 0.25)');
+    }
 
     protected function _setShadowFont($sKey, $sDefault = '')
     {

template/scripts/BxBaseFunctions.php

@@ -28,9 +28,9 @@ class BxBaseFunctions extends BxDolFactory implements iBxDolSingleton
 
         $this->_sDesignBoxMenuTmplDefault = 'menu_block_submenu_ver.html';
 
-        $this->_sDesignBoxMenuIcon = 'chevron';
-        $this->_sDesignBoxMenuIconType = 'icon-a';
-        $this->_sDesignBoxMenuClick = "bx_menu_slide_inline('#{design_box_menu}', this)";
+        $this->_sDesignBoxMenuIcon = 'ellipsis-v';
+        $this->_sDesignBoxMenuIconType = 'icon';
+        $this->_sDesignBoxMenuClick = "bx_menu_popup_inline('#{design_box_menu}', this)";
     }
 
     /**
@@ -309,8 +309,10 @@ class BxBaseFunctions extends BxDolFactory implements iBxDolSingleton
                 $aAttrs = array();
                 if(!empty($aButton['onclick']))
                     $aAttrs['onclick'] = $aButton['onclick'];
+                
+                $aAttrs['class'] = 'bx-btn';
                 if(!empty($aButton['class']))
-                    $aAttrs['class'] = $aButton['class'];
+                    $aAttrs['class'] .= ' ' . trim($aButton['class']);
 
                 $bTmplVarsButtonIcon = !empty($aButton['icon']);
                 $aTmplVarsButtonIcon = !$bTmplVarsButtonIcon ? array() : array(
@@ -328,7 +330,7 @@ class BxBaseFunctions extends BxDolFactory implements iBxDolSingleton
                 );
 
                 $sResult .= $this->_oTemplate->parseHtmlByName('designbox_menu_button.html', array(
-                    'attrs' => bx_convert_array2attrs($aAttrs, 'bx-def-margin-sec-left'),
+                    'attrs' => bx_convert_array2attrs($aAttrs),
                     'bx_if:show_icon' => array(
                         'condition' => $bTmplVarsButtonIcon,
                         'content' => $aTmplVarsButtonIcon
@@ -376,7 +378,11 @@ class BxBaseFunctions extends BxDolFactory implements iBxDolSingleton
             'design_box_menu' => $sId
         ));
 
-        return array($aButton, $this->slideBox($sId, $sMenu, true));
+        $sMenu = $this->_oTemplate->parseHtmlByName('designbox_menu_popup.html', array(
+            'content' => $sMenu
+        ));
+
+        return array($aButton, $this->transBox($sId, $sMenu, true));
     }
 
     /**