[stylesheets] repired some components according to colors table

apps/common/main/lib/component/ComboBorderSize.js

@@ -82,7 +82,9 @@ define([
                     '<span class="text"></span>',
                 '</div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<span class="caret"></span>',
+                '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
@@ -281,7 +283,9 @@ define([
             '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
                 '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
             '</div>',
-            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                '<span class="caret"></span>',
+            '</button>',
             '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
             '<% _.each(items, function(item) { %>',
                 '<% if (item.value==-1) { %>',

apps/common/main/resources/less/toolbar.less

@@ -1,6 +1,7 @@
 @height-title: 28px;
 @height-tabs: 32px;
 @height-controls: 67px;
+@img-equition-filter: var(--image-border-types-filter);
 
 
 .toolbar {
@@ -500,6 +501,19 @@
     height: 20px;
 }
 
+.item-equation {
+    border: 1px solid @border-regular-control;
+
+    .equation-icon {
+        .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
+
+        .theme-dark & {
+            -webkit-filter: @img-equition-filter;
+            filter: @img-equition-filter;
+        }
+    }
+}
+
 // charts
 .menu-insertchart {
     .group-description {

apps/documenteditor/main/app/controller/Toolbar.js

@@ -2602,9 +2602,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
+                        itemTemplate: _.template(
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div class="item-equation" style="" >' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {

apps/documenteditor/main/resources/less/toolbar.less

@@ -44,6 +44,7 @@
     > li > a.item-contents {
         div {
             .background-ximage-v2('toolbar/contents.png', 246px, @commonimage: false);
+            background-color: #fff;
             width: 246px;
             height: @contents-menu-item-height;
 
@@ -145,11 +146,6 @@
     }
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
-}
-
 .save-style-container {
     cursor: default;
     position: relative;

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -1815,9 +1815,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
+                        itemTemplate: _.template(
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div class="item-equation">' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {

apps/presentationeditor/main/resources/less/toolbar.less

@@ -83,11 +83,6 @@
     text-overflow: ellipsis;
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #plugins-panel {
     .separator:first-child {
         display: inline-block;

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -2825,9 +2825,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
+                        itemTemplate: _.template(
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div class="item-equation">' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -101,11 +101,6 @@
     }
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #special-paste-container,
 #autocorrect-paste-container {
     position: absolute;