Ticket #1691 - Colored icons.

install/sql/system.sql

@@ -3426,11 +3426,11 @@ INSERT INTO `sys_form_pre_values`(`Key`, `Value`, `Order`, `LKey`, `LKey2`) VALU
 
 INSERT INTO `sys_form_pre_values`(`Key`, `Value`, `Order`, `LKey`, `LKey2`, `Data`) VALUES
 ('sys_vote_reactions', 'like', 1, '_sys_pre_lists_vote_reactions_like', '', 'a:2:{s:4:"icon";s:9:"thumbs-up";s:6:"weight";s:1:"1";}'),
-('sys_vote_reactions', 'love', 2, '_sys_pre_lists_vote_reactions_love', '', 'a:2:{s:4:"icon";s:5:"heart";s:6:"weight";s:1:"1";}'),
-('sys_vote_reactions', 'joy', 3, '_sys_pre_lists_vote_reactions_joy', '', 'a:2:{s:4:"icon";s:11:"grin-squint";s:6:"weight";s:1:"1";}'),
-('sys_vote_reactions', 'surprise', 4, '_sys_pre_lists_vote_reactions_surprise', '', 'a:2:{s:4:"icon";s:8:"surprise";s:6:"weight";s:1:"1";}'),
-('sys_vote_reactions', 'sadness', 5, '_sys_pre_lists_vote_reactions_sadness', '', 'a:2:{s:4:"icon";s:8:"sad-tear";s:6:"weight";s:1:"1";}'),
-('sys_vote_reactions', 'anger', 6, '_sys_pre_lists_vote_reactions_anger', '', 'a:2:{s:4:"icon";s:5:"angry";s:6:"weight";s:1:"1";}');
+('sys_vote_reactions', 'love', 2, '_sys_pre_lists_vote_reactions_love', '', 'a:2:{s:4:"icon";s:26:"heart sys-colored col-red1";s:6:"weight";s:1:"1";}'),
+('sys_vote_reactions', 'joy', 3, '_sys_pre_lists_vote_reactions_joy', '', 'a:2:{s:4:"icon";s:32:"grin-squint sys-colored col-red3";s:6:"weight";s:1:"1";}'),
+('sys_vote_reactions', 'surprise', 4, '_sys_pre_lists_vote_reactions_surprise', '', 'a:2:{s:4:"icon";s:29:"surprise sys-colored col-red3";s:6:"weight";s:1:"1";}'),
+('sys_vote_reactions', 'sadness', 5, '_sys_pre_lists_vote_reactions_sadness', '', 'a:2:{s:4:"icon";s:29:"sad-tear sys-colored col-red3";s:6:"weight";s:1:"1";}'),
+('sys_vote_reactions', 'anger', 6, '_sys_pre_lists_vote_reactions_anger', '', 'a:2:{s:4:"icon";s:26:"angry sys-colored col-red3";s:6:"weight";s:1:"1";}');
 
 INSERT INTO `sys_form_pre_values`(`Key`, `Value`, `Order`, `LKey`, `LKey2`, `Data`) VALUES
 ('sys_relations', '1', 1, '_sys_pre_lists_relations_husband', '', 'a:1:{i:0;s:1:"2";}'),

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

@@ -135,12 +135,12 @@ a {
 a:hover {
 	color: @bx-color-link-body-hover; 
 }
-.sys-icon,
-.sys-icon-a {
-	color: @bx-color-icon-body; 
+.sys-icon:not(.sys-colored),
+.sys-icon-a:not(.sys-colored) {
+    color: @bx-color-icon-body; 
 }
-a:hover > .sys-icon,
-a:hover > .sys-icon-a {
+a:hover > .sys-icon:not(.sys-colored),
+a:hover > .sys-icon-a:not(.sys-colored) {
 	color: @bx-color-icon-body-hover; 
 }
 .sys-icon-a i {
@@ -821,14 +821,14 @@ a.bx-def-font-h3:hover {
 
 	color: @bx-font-color-button-hover;
 }
-.bx-btn .sys-icon {
-	color: @bx-font-color-button;
+.bx-btn .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button;
 }
-.bx-btn:hover .sys-icon,
-.bx-btn:active .sys-icon,
-.bx-btn.bx-btn-primary:hover .sys-icon,
-.bx-btn.bx-btn-primary:active .sys-icon {
-	color: @bx-font-color-button-hover;
+.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) {
+    color: @bx-font-color-button-hover;
 }
 
 /* button small */

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

@@ -125,26 +125,26 @@ html.bx-media-phone {
 
 /* body */
 a {
-	color: @bx-color-link-body; 
+    color: @bx-color-link-body; 
 }
 a:hover {
-	color: @bx-color-link-body-hover; 
+    color: @bx-color-link-body-hover; 
 }
-.sys-icon,
-.sys-icon-a {
-	color: @bx-color-icon-body; 
+.sys-icon:not(.sys-colored),
+.sys-icon-a:not(.sys-colored) {
+    color: @bx-color-icon-body; 
 }
-a:hover > .sys-icon,
-a:hover > .sys-icon-a {
-	color: @bx-color-icon-body-hover; 
+a:hover > .sys-icon:not(.sys-colored),
+a:hover > .sys-icon-a:not(.sys-colored) {
+    color: @bx-color-icon-body-hover; 
 }
 .sys-icon-a i {
-	.background-color (@bx-color-icon-body) !important;
-	color: @bx-color-icon-body;
+    .background-color (@bx-color-icon-body) !important;
+    color: @bx-color-icon-body;
 }
 a:hover > .sys-icon-a i {
-	.background-color (@bx-color-icon-body-hover) !important;
-	color: @bx-color-icon-body-hover;
+    .background-color (@bx-color-icon-body-hover) !important;
+    color: @bx-color-icon-body-hover;
 }
 
 /* header */
@@ -901,18 +901,18 @@ a.bx-def-font-h3:hover {
 
 	color: @bx-font-color-button-primary-hover;
 }
-.bx-btn .sys-icon {
+.bx-btn .sys-icon:not(.sys-colored) {
 	color: @bx-font-color-button;
 }
-.bx-btn.bx-btn-primary .sys-icon {
+.bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
 	color: @bx-font-color-button-primary;
 }
-.bx-btn:hover .sys-icon,
-.bx-btn:active .sys-icon {
+.bx-btn:hover .sys-icon:not(.sys-colored),
+.bx-btn:active .sys-icon:not(.sys-colored) {
 	color: @bx-font-color-button-hover;
 }
-.bx-btn.bx-btn-primary:hover .sys-icon,
-.bx-btn.bx-btn-primary:active .sys-icon {
+.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;
 }
 

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

@@ -130,26 +130,26 @@ html.bx-media-phone {
 
 /* body */
 a {
-	color: @bx-color-link-body; 
+    color: @bx-color-link-body; 
 }
 a:hover {
-	color: @bx-color-link-body-hover; 
+    color: @bx-color-link-body-hover; 
 }
-.sys-icon,
-.sys-icon-a {
-	color: @bx-color-icon-body; 
+.sys-icon:not(.sys-colored),
+.sys-icon-a:not(.sys-colored) {
+    color: @bx-color-icon-body; 
 }
-a:hover > .sys-icon,
-a:hover > .sys-icon-a {
-	color: @bx-color-icon-body-hover; 
+a:hover > .sys-icon:not(.sys-colored),
+a:hover > .sys-icon-a:not(.sys-colored) {
+    color: @bx-color-icon-body-hover; 
 }
 .sys-icon-a i {
-	.background-color (@bx-color-icon-body) !important;
-	color: @bx-color-icon-body;
+    .background-color (@bx-color-icon-body) !important;
+    color: @bx-color-icon-body;
 }
 a:hover > .sys-icon-a i {
-	.background-color (@bx-color-icon-body-hover) !important;
-	color: @bx-color-icon-body-hover;
+    .background-color (@bx-color-icon-body-hover) !important;
+    color: @bx-color-icon-body-hover;
 }
 
 /* header */
@@ -763,14 +763,14 @@ a.bx-def-font-h3:hover {
 
 	color: @bx-font-color-button-hover;
 }
-.bx-btn .sys-icon {
-	color: @bx-font-color-button;
+.bx-btn .sys-icon:not(.sys-colored) {
+    color: @bx-font-color-button;
 }
-.bx-btn:hover .sys-icon,
-.bx-btn:active .sys-icon,
-.bx-btn.bx-btn-primary:hover .sys-icon,
-.bx-btn.bx-btn-primary:active .sys-icon {
-	color: @bx-font-color-button-hover;
+.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) {
+    color: @bx-font-color-button-hover;
 }
 
 /* button small */