From 6e3f7678820d19631a40ca4fbb6a1105a7434fa2 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 10 Jan 2023 16:02:13 +0300
Subject: [PATCH] bug 51943

---
 .../main/lib/component/ComboBorderSize.js     | 104 +++++++++++-------
 .../resources/less/combo-border-size.less     |  61 +++++-----
 .../main/app/view/DropcapSettingsAdvanced.js  |  14 +--
 .../main/app/view/CellSettings.js             |  22 ++--
 .../main/app/view/FormatRulesEditDlg.js       |  24 ++--
 .../main/app/view/Toolbar.js                  |  24 ++--
 .../main/resources/less/toolbar.less          |  25 +----
 7 files changed, 138 insertions(+), 136 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 6401e6867..67b2670f7 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -65,7 +65,7 @@ define([
                 displayValue: null,
                 pxValue: null,
                 id: Common.UI.getId(),
-                offsety: undefined
+                imgId: undefined
             }
         }
     });
@@ -78,7 +78,7 @@ define([
         template: _.template([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
-                    '<i class="image"></i>',
+                    '<i class="img-line"><svg class="img-border-size" style="margin-top: -9.5px"><use xlink:href="#half-pt"></use></svg></i>',
                     '<span class="text"></span>',
                 '</div>',
                 '<div style="display: table-cell;"></div>',
@@ -89,9 +89,11 @@ define([
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                             '<span><%= item.displayValue %></span>',
-                            '<% if (item.offsety!==undefined) { %>',
-                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
-                            '<% } %>',
+                            '<span style="float: right;">',
+                                '<svg class="img-border-size" style="height: <%= Math.ceil(item.pxValue) %>px; margin-top: -<%= Math.ceil(item.pxValue)/2 %>px">',
+                                    '<use xlink:href="#<%= item.imgId %>"></use>',
+                                '</svg>',
+                            '</span>',
                         '</a></li>',
                     '<% }); %>',
                 '</ul>',
@@ -101,13 +103,13 @@ define([
         initialize : function(options) {
             var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
                 data = [
-                    {displayValue: '0.5 ' + txtPt,   value: 0.5, pxValue: 0.5, offsety: 0},
-                    {displayValue: '1 ' + txtPt,     value: 1,   pxValue: 1, offsety: 20},  //pxValue = 1.34px
-                    {displayValue: '1.5 ' + txtPt,   value: 1.5, pxValue: 2, offsety: 40},
-                    {displayValue: '2.25 ' + txtPt,  value: 2.25,pxValue: 3, offsety: 60},
-                    {displayValue: '3 ' + txtPt,     value: 3,   pxValue: 4, offsety: 80},
-                    {displayValue: '4.5 ' + txtPt,   value: 4.5, pxValue: 6, offsety: 100},
-                    {displayValue: '6 ' + txtPt,     value: 6,   pxValue: 8, offsety: 120}
+                    {displayValue: '0.5 ' + txtPt,   value: 0.5, pxValue: 0.5,  imgId: 'half-pt'},
+                    {displayValue: '1 ' + txtPt,     value: 1,   pxValue: 1,    imgId: 'one-pt'},
+                    {displayValue: '1.5 ' + txtPt,   value: 1.5, pxValue: 2,    imgId: 'one-and-half-pt'},
+                    {displayValue: '2.25 ' + txtPt,  value: 2.25,pxValue: 3,    imgId: 'two-and-quarter-pt'},
+                    {displayValue: '3 ' + txtPt,     value: 3,   pxValue: 4,    imgId: 'three-pt'},
+                    {displayValue: '4.5 ' + txtPt,   value: 4.5, pxValue: 6,    imgId: 'four-and-half-pt'},
+                    {displayValue: '6 ' + txtPt,     value: 6,   pxValue: 8,    imgId: 'six-pt'}
                 ];
             if (options.allowNoBorders !== false)
                 data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 });
@@ -144,11 +146,17 @@ define([
 
         updateFormControl: function(record) {
             var formcontrol = $(this.el).find('.form-control');
-            var image = formcontrol.find('> .image');
+            var image = formcontrol.find('> .img-line');
             var text = formcontrol.find('> .text');
 
             if (record.get('value')>0) {
-                image.css('background-position', '10px -' + record.get('offsety') + 'px').show();
+                var elm = formcontrol.find('use');
+                if(elm.length>0) {
+                    elm[0].setAttribute('xlink:href', '#' + record.get('imgId'));
+                    elm.parent().css('margin-top', (- Math.ceil(record.get('pxValue')/2))+'px');
+                    elm.parent().css('height', Math.ceil(record.get('pxValue'))+'px');
+                }
+                image.show();
                 text.hide();
             } else {
                 image.hide();
@@ -190,10 +198,14 @@ define([
                 '<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">',
-                            '<span><%= item.displayValue %></span>',
-                            '<% if (item.offsety!==undefined) { %>',
-                             '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
-                            '<% } %>',
+                            '<span><%= item.displayValue %>' + '</span>',
+                        '<% if (item.imgId!==undefined) { %>',
+                            '<span style="float: right;">',
+                                '<svg class="img-border-size" style="height: <%= Math.ceil(item.pxValue) %>px; margin-top: -<%= (Math.ceil(item.pxValue)/2) %>px">',
+                                    '<use xlink:href="#<%= item.imgId %>"></use>',
+                                '</svg>',
+                            '</span>',
+                        '<% } %>',
                         '</a></li>',
                     '<% }); %>',
                 '</ul>',
@@ -204,13 +216,13 @@ define([
             this.txtNoBorders = options.txtNoBorders || this.txtNoBorders;
             var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
                 data = [
-                    {displayValue: '0.5 ' + txtPt,   value: 0.5, pxValue: 0.5, offsety: 0},
-                    {displayValue: '1 ' + txtPt,     value: 1,   pxValue: 1, offsety: 20},
-                    {displayValue: '1.5 ' + txtPt,   value: 1.5, pxValue: 2, offsety: 40},
-                    {displayValue: '2.25 ' + txtPt,  value: 2.25,pxValue: 3, offsety: 60},
-                    {displayValue: '3 ' + txtPt,     value: 3,   pxValue: 4, offsety: 80},
-                    {displayValue: '4.5 ' + txtPt,   value: 4.5, pxValue: 6, offsety: 100},
-                    {displayValue: '6 ' + txtPt,     value: 6,   pxValue: 8, offsety: 120}
+                    {displayValue: '0.5 ' + txtPt,   value: 0.5, pxValue: 0.5,  imgId: 'half-pt'},
+                    {displayValue: '1 ' + txtPt,     value: 1,   pxValue: 1,    imgId: 'one-pt'},
+                    {displayValue: '1.5 ' + txtPt,   value: 1.5, pxValue: 2,    imgId: 'one-and-half-pt'},
+                    {displayValue: '2.25 ' + txtPt,  value: 2.25,pxValue: 3,    imgId: 'two-and-quarter-pt'},
+                    {displayValue: '3 ' + txtPt,     value: 3,   pxValue: 4,    imgId: 'three-pt'},
+                    {displayValue: '4.5 ' + txtPt,   value: 4.5, pxValue: 6,    imgId: 'four-and-half-pt'},
+                    {displayValue: '6 ' + txtPt,     value: 6,   pxValue: 8,    imgId: 'six-pt'}
                 ];
 
             if (options.allowNoBorders !== false)
@@ -236,7 +248,7 @@ define([
         template: _.template([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
-                    '<i class="image"></i>',
+                    '<i class="img-line"><svg><use xlink:href="#solid"></use></svg></i>',
                 '</div>',
                 '<div style="display: table-cell;"></div>',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
@@ -244,10 +256,11 @@ define([
                 '</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" style="padding: 2px 0 2px 10px;">',
-                            '<span style="margin-top: 0;"></span>',
-                            '<% if (item.offsety!==undefined) { %>',
-                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 1px 10px;">',
+                            '<% if (item.imgId!==undefined) { %>',
+                            '<span>',
+                                '<svg class="img-border-size"><use xlink:href="#<%= item.imgId %>"></use></svg>',
+                            '</span>',
                             '<% } %>',
                         '</a></li>',
                     '<% }); %>',
@@ -259,14 +272,14 @@ define([
             Common.UI.ComboBorderSize.prototype.initialize.call(this, _.extend({
                 store: new Common.UI.BordersStore(),
                 data: [
-                    {value: Asc.c_oDashType.solid, offsety: 140},
-                    {value: Asc.c_oDashType.sysDot, offsety: 160},
-                    {value: Asc.c_oDashType.sysDash, offsety: 180},
-                    {value: Asc.c_oDashType.dash, offsety: 200},
-                    {value: Asc.c_oDashType.dashDot, offsety: 220},
-                    {value: Asc.c_oDashType.lgDash, offsety: 240},
-                    {value: Asc.c_oDashType.lgDashDot, offsety: 260},
-                    {value: Asc.c_oDashType.lgDashDotDot, offsety: 280}
+                    {value: Asc.c_oDashType.solid,        imgId: "solid"},
+                    {value: Asc.c_oDashType.sysDot,       imgId: 'dots'},
+                    {value: Asc.c_oDashType.sysDash,      imgId: 'dashes'},
+                    {value: Asc.c_oDashType.dash,         imgId: 'dashes-spaced'},
+                    {value: Asc.c_oDashType.dashDot,      imgId: 'dash-dot'},
+                    {value: Asc.c_oDashType.lgDash,       imgId: 'dashes-wide'},
+                    {value: Asc.c_oDashType.lgDashDot,    imgId: 'wide-dash-dot'},
+                    {value: Asc.c_oDashType.lgDashDotDot, imgId: 'wide-dash-dot-dot'}
                 ]
             }, options));
         },
@@ -277,11 +290,18 @@ define([
         },
 
         updateFormControl: function(record) {
-            if (record)
-                $(this.el).find('.form-control > .image')
-                    .css('background-position', '10px -' + record.get('offsety') + 'px').show();
+            if (record) {
+               var elm = $(this.el).find('.form-control > .img-line use');
+                if(elm.length) {
+                    var height = Math.ceil(record.get('pxValue'));
+                    height = height ? height : 3;
+                    elm[0].setAttribute('xlink:href', '#' + record.get('imgId'));
+                    elm.parent().css('height', height + 'px');
+                }
+                $(this.el).find('.form-control > .img-line').show();
+            }
             else
-                $(this.el).find('.form-control > .image').hide();
+                $(this.el).find('.form-control > .img-line').hide();
         },
 
         setValue: function(value) {
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 7bb139b2f..9f9ecf33d 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -14,53 +14,48 @@
     li {
         a {
             white-space: normal;
+            padding: 6px 20px;
         }
 
         span {
+            width: auto;
+            height: 18px;
             display: inline-block;
-            margin-top: 3px;
-            .font-size-normal();
-            height: 17px;
-        }
-
-        img {
-            width:60px;
-            height:20px;
             background-color: transparent;
-            image-rendering: pixelated;
+            svg {
+                height: 3px;
+                width: 60px;
+                fill: @text-normal-ie;
+                fill: @text-normal;
+            }
         }
-    }
 
-    .image {
+
+    }
+    .img-border-size {
         position: relative;
-        width: 100%;
+        display: block;
+        top:50%;
+    }
+    .img-line {
+        width: auto;
         height: 100%;
         display: inline-block;
         background-color: transparent;
-        margin: 0 0 0 -3px;
-        image-rendering: pixelated;
-    }
+        margin: 0 0 0 7px;
+        svg {
+            width: 60px;
+            fill: @text-normal-ie;
+            fill: @text-normal;
 
-    img, .image {
-        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
-        background-size: 60px auto;
-
-        .pixel-ratio__1_25 & {
-            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.25x.png)";
-        }
-
-        .pixel-ratio__1_5 & {
-            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.5x.png)";
-        }
-
-        .pixel-ratio__1_75 & {
-            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.75x.png)";
-        }
-
-        .pixel-ratio__2 & {
-            background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
         }
     }
+    .border-type {
+        display: inline-block;
+        margin-bottom: 2px;
+    }
+
+
 }
 
 .combo-color {
diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
index 13864acfb..ee82584e6 100644
--- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
@@ -146,13 +146,13 @@ define([
                 takeFocusOnClose: true,
                 data: [
                     {id: Common.UI.getId(), displayValue: this.txtNoBorders,   value: 0,    borderstyle: ''},
-                    {id: Common.UI.getId(), displayValue: '0.5 ' + txtPt,            value: 0.5,  pxValue: 0.5,   offsety: 0},
-                    {id: Common.UI.getId(), displayValue: '1 ' + txtPt,              value: 1,    pxValue: 1,     offsety: 20},
-                    {id: Common.UI.getId(), displayValue: '1.5 ' + txtPt,            value: 1.5,  pxValue: 2,     offsety: 40},
-                    {id: Common.UI.getId(), displayValue: '2.25 ' + txtPt,           value: 2.25, pxValue: 3,     offsety: 60},
-                    {id: Common.UI.getId(), displayValue: '3 ' + txtPt,              value: 3,    pxValue: 4,     offsety: 80},
-                    {id: Common.UI.getId(), displayValue: '4.5 ' + txtPt,            value: 4.5,  pxValue: 6,     offsety: 100},
-                    {id: Common.UI.getId(), displayValue: '6 ' + txtPt,              value: 6,    pxValue: 8,     offsety: 120}
+                    {id: Common.UI.getId(), displayValue: '0.5 ' + txtPt,            value: 0.5,  pxValue: 0.5,   imgId: 'half-pt'},
+                    {id: Common.UI.getId(), displayValue: '1 ' + txtPt,              value: 1,    pxValue: 1,     imgId: 'one-pt'},
+                    {id: Common.UI.getId(), displayValue: '1.5 ' + txtPt,            value: 1.5,  pxValue: 2,     imgId: 'one-and-half-pt'},
+                    {id: Common.UI.getId(), displayValue: '2.25 ' + txtPt,           value: 2.25, pxValue: 3,     imgId: 'two-and-quarter-pt'},
+                    {id: Common.UI.getId(), displayValue: '3 ' + txtPt,              value: 3,    pxValue: 4,     imgId: 'three-pt'},
+                    {id: Common.UI.getId(), displayValue: '4.5 ' + txtPt,            value: 4.5,  pxValue: 6,     imgId: 'four-and-half-pt'},
+                    {id: Common.UI.getId(), displayValue: '6 ' + txtPt,              value: 6,    pxValue: 8,     imgId: 'six-pt'}
                 ]
             }).on('selected', _.bind(function(combo, record) {
                 this.BorderSize = {ptValue: record.value, pxValue: record.pxValue};
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 690341383..869a146de 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -424,17 +424,17 @@ define([
                 menuStyle: 'min-width: 93px;',
                 disabled: this._locked,
                 data: [
-                    { value: Asc.c_oAscBorderStyles.Thin,   offsety: 0},
-                    { value: Asc.c_oAscBorderStyles.Hair,   offsety: 20},
-                    { value: Asc.c_oAscBorderStyles.Dotted,   offsety: 40},
-                    { value: Asc.c_oAscBorderStyles.Dashed,   offsety: 60},
-                    { value: Asc.c_oAscBorderStyles.DashDot,   offsety: 80},
-                    { value: Asc.c_oAscBorderStyles.DashDotDot,   offsety: 100},
-                    { value: Asc.c_oAscBorderStyles.Medium, offsety: 120},
-                    { value: Asc.c_oAscBorderStyles.MediumDashed,  offsety: 140},
-                    { value: Asc.c_oAscBorderStyles.MediumDashDot,  offsety: 160},
-                    { value: Asc.c_oAscBorderStyles.MediumDashDotDot,  offsety: 180},
-                    { value: Asc.c_oAscBorderStyles.Thick,  offsety: 200}
+                    { value: Asc.c_oAscBorderStyles.Thin,   imgId: "solid-s"},
+                    { value: Asc.c_oAscBorderStyles.Hair,   imgId: "dots-s"},
+                    { value: Asc.c_oAscBorderStyles.Dotted,   imgId: "dashes-s"},
+                    { value: Asc.c_oAscBorderStyles.Dashed,   imgId: "dashes-m"},
+                    { value: Asc.c_oAscBorderStyles.DashDot,   imgId: "dash-dot-s"},
+                    { value: Asc.c_oAscBorderStyles.DashDotDot,   imgId: "dash-dot-dot-s"},
+                    { value: Asc.c_oAscBorderStyles.Medium, imgId: "solid-m"},
+                    { value: Asc.c_oAscBorderStyles.MediumDashed,  imgId: "dashes-l"},
+                    { value: Asc.c_oAscBorderStyles.MediumDashDot,  imgId: "dash-dot-s"},
+                    { value: Asc.c_oAscBorderStyles.MediumDashDotDot,  imgId: "dash-dot-dot-m"},
+                    { value: Asc.c_oAscBorderStyles.Thick,  imgId: "solid-l"}
                 ],
                 dataHint: '1',
                 dataHintDirection: 'bottom',
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index a5f8eaf6e..8544a9040 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -501,22 +501,22 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                             caption     : this.textBordersStyle,
                             iconCls     : 'menu__icon btn-border-style',
                             menu        : (function(){
-                                var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item" style="background-position: 0 -<%= options.offsety %>px;"></div></a>');
+                                var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item"><svg><use xlink:href="#<%= options.imgId %>"></use></svg></div></a>');
                                 me.mnuBorderWidth = new Common.UI.Menu({
                                     style       : 'min-width: 100px;',
                                     menuAlign   : 'tl-tr',
                                     items: [
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin ,   offsety: 0, checked:true},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair,   offsety: 20},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted,   offsety: 40},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed,   offsety: 60},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot,   offsety: 80},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot,   offsety: 100},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, offsety: 120},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed,  offsety: 140},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot,  offsety: 160},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot,  offsety: 180},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick,  offsety: 200}
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin ,             imgId: "solid-s", checked:true},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair,              imgId: "dots-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted,            imgId: "dashes-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed,            imgId: "dashes-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot,           imgId: "dash-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot,        imgId: "dash-dot-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium,            imgId: "solid-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed,      imgId: "dashes-l"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot,     imgId: "dash-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot,  imgId: "dash-dot-dot-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick,             imgId: "solid-l"}
                                     ]
                                 });
 
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 0fad4b513..25089e198 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -2482,24 +2482,24 @@ define([
                             iconCls     : 'menu__icon btn-border-style',
                             // template    : _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 11px; height: 11px; margin: 2px 7px 0 -9px;"></span><%= caption %></a>'),
                             menu        : (function(){
-                                var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item" style="background-position: 0 -<%= options.offsety %>px;"></div></a>');
+                                var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item"><svg><use xlink:href="#<%= options.imgId %>"></use></svg></div></a>');
 
                                 me.mnuBorderWidth = new Common.UI.Menu({
                                     style       : 'min-width: 100px;',
                                     menuAlign   : 'tl-tr',
                                     id          : 'toolbar-menu-borders-width',
                                     items: [
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin ,   offsety: 0, checked:true},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair,   offsety: 20},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted,   offsety: 40},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed,   offsety: 60},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot,   offsety: 80},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot,   offsety: 100},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, offsety: 120},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed,  offsety: 140},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot,  offsety: 160},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot,  offsety: 180},
-                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick,  offsety: 200}
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin ,             imgId: "solid-s", checked:true},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair,              imgId: "dots-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted,            imgId: "dashes-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed,            imgId: "dashes-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot,           imgId: "dash-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot,        imgId: "dash-dot-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium,            imgId: "solid-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed,      imgId: "dashes-l"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot,     imgId: "dash-dot-s"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot,  imgId: "dash-dot-dot-m"},
+                                        { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick,             imgId: "solid-l"}
                                     ]
                                 });
 
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 535224877..3fde17535 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -81,28 +81,15 @@
 #id-toolbar-mnu-item-border-width,
 #format-rules-borders-border-width {
     .border-size-item {
-        background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) no-repeat scroll 0 0";
-        background-size: 60px auto;
         width: 60px;
         height: 20px;
         margin: -3px 10px -2px;
-        filter: @img-border-type-filter;
-
-        .pixel-ratio__1_25 & {
-            background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.25x.png)";
-        }
-
-        .pixel-ratio__1_5 & {
-            background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.5x.png)";
-            //background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.5x.png)";
-        }
-
-        .pixel-ratio__1_75 & {
-            background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.75x.png)";
-        }
-
-        .pixel-ratio__2 & {
-            background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@2x.png)";
+        svg{
+            display: inline-block;
+            height: 3px;
+            width: 100%;
+            fill: @text-normal-ie;
+            fill: @text-normal;
         }
     }
 }