Commit ec64c39a authored by Alexander Yuzhin's avatar Alexander Yuzhin

[SSE mobile] Update icon for cell editor and for wrap text in cell.

parent 7f38473e
......@@ -9,6 +9,6 @@
<textarea id="ce-cell-content" spellcheck="false" rows="1" cols="20"></textarea>
</div>
<div class="ce-group group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret">&#10095;</span></button>
<button id="ce-btn-expand" type="button" class="btn"><span class="caret"></span></button>
</div>
</div>
......@@ -37,7 +37,7 @@
<li>
<a id="fill-color" class="item-link">
<div class="item-content">
<% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
<% if (!android) { %><div class="item-media" style="padding-top: 0;"><i class="icon icon-fill-color"><span class="color-preview"></span></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textFillColor %></div>
<% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
......@@ -285,7 +285,7 @@
<ul>
<li id="edit-cell-wrap-text">
<div class="item-content">
<% if (!android) { %><div class="item-media"><i class="icon icon-search"></i></div><% } %>
<% if (!android) { %><div class="item-media"><i class="icon icon-cell-wrap"></i></div><% } %>
<div class="item-inner">
<div class="item-title"><%= scope.textWrapText %></div>
<div class="item-after">
......
......@@ -93,15 +93,15 @@
.caret {
display: block;
transform: rotate(90deg);
transition: transform 0.1s ease;
font-size: 16px;
width: 16px;
height: 16px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="#000"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
}
&.collapse {
.caret {
transform: rotate(-90deg);
transition: transform 0.1s ease;
transform: rotate(180deg);
}
}
}
......
......@@ -65,6 +65,11 @@ i.icon {
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
}
&.icon-fill-color {
width: 22px;
height: 22px;
//.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 19" fill="@{themeColor}"><g><path d="M11,2.3L3.8,9.5L9,14.7l7.2-7.2L11,2.3z M14.8,7.5L13.3,9H5.7L11,3.7L14.8,7.5z"/><path d="M17,9c0,0-2,2-2,3s1,2,2,2s2-1,2-2S17,9,17,9z"/><path d="M10.8,7.5c-3.2-1.1-4.3-2.8-4.3-4c0-0.3,0.1-0.5,0.4-0.7c0.7-0.5,2.6,0,3.3,0.2L9.8,4c-1-0.3-2-0.5-2.3-0.4c0.1,0.8,1,2.1,3.7,2.9L10.8,7.5z"/><circle class="st0" cx="11" cy="7" r="1"/></g></svg>');
}
&.icon-text-align-center {
width: 22px;
height: 22px;
......@@ -136,6 +141,12 @@ i.icon {
height: 22px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.2;}.cls-3{fill:#fff;}.cls-10,.cls-11,.cls-4,.cls-6,.cls-7,.cls-8,.cls-9{mix-blend-mode:multiply;}.cls-4{fill:url(#grad_8);}.cls-5{fill:url(#grad_10);}.cls-6{fill:url(#grad_12);}.cls-7{fill:url(#grad_14);}.cls-8{fill:url(#grad_79);}.cls-9{fill:url(#grad_77);}.cls-10{fill:url(#grad_75);}.cls-11{fill:url(#grad_81);}</style><linearGradient id="grad_8" x1="11.08" y1="10.26" x2="11.08" y2="1.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3e916"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_10" x1="11.08" y1="20.44" x2="11.08" y2="11.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5eb6e8"/><stop offset="1" stop-color="#958cc3"/></linearGradient><linearGradient id="grad_12" x1="1.46" y1="11.05" x2="10.46" y2="11.05" gradientTransform="translate(17 5.09) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cc8dba"/><stop offset="1" stop-color="#f86867"/></linearGradient><linearGradient id="grad_14" x1="11.73" y1="11.05" x2="20.73" y2="11.05" gradientTransform="translate(27.28 -5.18) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6ac07f"/><stop offset="1" stop-color="#c5da3d"/></linearGradient><linearGradient id="grad_79" x1="11.74" y1="10.42" x2="17.52" y2="4.63" gradientTransform="translate(30.29 2.51) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c5da3d"/><stop offset="1" stop-color="#f3e916"/></linearGradient><linearGradient id="grad_77" x1="4.7" y1="17.49" x2="10.48" y2="11.71" gradientTransform="translate(23.24 19.65) rotate(135)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9595c3"/><stop offset="1" stop-color="#cc8dba"/></linearGradient><linearGradient id="grad_75" x1="4.69" y1="4.64" x2="10.47" y2="10.42" gradientTransform="translate(7.54 -3.15) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f86867"/><stop offset="1" stop-color="#f89d34"/></linearGradient><linearGradient id="grad_81" x1="11.77" y1="11.78" x2="17.55" y2="17.56" gradientTransform="translate(14.63 -6.05) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ec0e8"/><stop offset="1" stop-color="#6ac07f"/></linearGradient></defs><title>icons_for_svg</title><g class="cls-1"><g id="Слой_1" data-name="Слой 1"><rect class="cls-2" x="0.09" y="0.01" width="22" height="22" rx="4" ry="4"/><rect class="cls-3" x="0.57" y="0.49" width="21.04" height="21.04" rx="3.6" ry="3.6"/><rect class="cls-4" x="8.33" y="1.26" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-5" x="8.33" y="11.76" width="5.5" height="9" rx="2.5" ry="2.5"/><rect class="cls-6" x="3.21" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-5.09 17) rotate(-90)"/><rect class="cls-7" x="13.48" y="6.55" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(5.18 27.28) rotate(-90)"/><rect class="cls-8" x="11.87" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(19.64 23.19) rotate(-135)"/><rect class="cls-9" x="4.8" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(2.54 30.33) rotate(-135)"/><rect class="cls-10" x="4.83" y="3.03" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-3.1 7.56) rotate(-45)"/><rect class="cls-11" x="11.87" y="10.14" width="5.5" height="9" rx="2.5" ry="2.5" transform="translate(-6.07 14.63) rotate(-45)"/></g></g></svg>');
}
&.icon-cell-wrap {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path id="XMLID_8_" d="M20,1H0v1v18v1h21v-1V1H20z M20,20H1V2h19V20z"/><rect id="XMLID_12_" x="2" y="4" width="17" height="1"/><rect id="XMLID_13_" x="2" y="12" width="17" height="1"/><rect id="XMLID_14_" x="2" y="8" width="11" height="1"/><rect id="XMLID_15_" x="2" y="16" width="11" height="1"/></g></svg>');
}
&.icon-function {
width: 22px;
......@@ -217,6 +228,16 @@ i.icon {
height: 28px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
}
&.icon-table-borders-dup {
width: 28px;
height: 28px;
//.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M0,0l0,1l0,19l0,1h21v-1V1V0L0,0z M1,1h19v19H1V1z"/><polygon points="21,0 20,0 20,0 20,0 20,0 20,0 0,20 0,21 1,21 21,1 "/></g></svg>');
}
&.icon-table-borders-ddown {
width: 28px;
height: 28px;
//.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M0,0v1v19v1h21v-1V1V0H0z M20,20H1V1h19V20z"/><polygon points="0,0 1,0 1,0 1,0 1,0 1,0 21,20 21,21 20,21 0,1 "/></g></svg>');
}
&.sortdown {
width: 22px;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment