Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[rtl] Fix statusbar in DE, PE, SSE

Browse source
This commit is contained in:
JuliaSvinareva 2022-12-30 00:23:13 +03:00
parent 727b344c89
commit f56ab702c8
10 changed files with 428 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/view/LanguageDialog.js
View file

@ -93,7 +93,7 @@ define([
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">', '<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= item.value %>">', '<a tabindex="-1" type="menuitem" langval="<%= item.value %>">',
'<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>', '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
'<%= scope.getDisplayValue(item) %>', '<%= scope.getDisplayValue(item) %>',
'</a>', '</a>',
@ -137,7 +137,7 @@ define([
onLangSelect: function(cmb, rec, e) { onLangSelect: function(cmb, rec, e) {
cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec && rec.spellcheck); cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec && rec.spellcheck);
cmb._input.css('padding-left', rec && rec.spellcheck ? 25 : 3); cmb._input.css(Common.UI.isRTL() ? 'padding-right' : 'padding-left', rec && rec.spellcheck ? 25 : 3);
}, },
onPrimary: function() { onPrimary: function() {

18
apps/common/main/resources/less/language-dialog.less
View file

@ -8,6 +8,9 @@
li { li {
.icon.spellcheck-lang { .icon.spellcheck-lang {
margin: -3px 4px 0 -24px; margin: -3px 4px 0 -24px;
.rtl & {
margin: -3px -24px 0 4px;
}
} }
&.selected, a.checked { &.selected, a.checked {
@ -39,6 +42,13 @@ li {
li .icon.lang-flag { li .icon.lang-flag {
margin-top: 1px; margin-top: 1px;
} }
li a {
padding-left: 28px !important;
.rtl & {
padding-left: 0 !important;
padding-right: 28px !important;
}
}
} }
.input-icon { .input-icon {
@ -46,10 +56,18 @@ li {
&.spellcheck-lang { // spell check indicator &.spellcheck-lang { // spell check indicator
left: 2px; left: 2px;
top: 1px; top: 1px;
.rtl & {
left: auto;
right: 2px;
}
} }
&.lang-flag { // language flags &.lang-flag { // language flags
left: 5px; left: 5px;
top: 5px; top: 5px;
.rtl & {
left: auto;
right: 5px;
}
} }
} }
} }

6
apps/common/main/resources/less/separator.less
View file

@ -15,6 +15,12 @@
padding: 0; padding: 0;
width: 0; width: 0;
.rtl & {
border-left: none;
border-right: @scaled-one-px-value-ie solid @border-divider-ie;
border-right: @scaled-one-px-value solid @border-divider;
}
&.horizontal { &.horizontal {
height: 0; height: 0;
display: block; display: block;

6
apps/documenteditor/main/app/template/StatusBar.template
View file

@ -1,9 +1,9 @@
<div class="statusbar" style="display:table;"> <div class="statusbar" style="display:table;">
<div class="status-group dropup"> <div class="status-group dropup">
<label id="label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 40px;" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label> <label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
<div id="status-goto-box" class="dropdown-menu"> <div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= textGotoPage %></label> <label><%= textGotoPage %></label>
<div id="status-goto-page" style="display:inline-block;"></div> <div id="status-goto-page" style="display:inline-block;"></div>
</div> </div>
</div> </div>
@ -31,6 +31,6 @@
<label id="label-zoom" class="status-label">Zoom 100%</label> <label id="label-zoom" class="status-label">Zoom 100%</label>
</div> </div>
</div> </div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button> <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
</div> </div>
</div> </div>

63
apps/documenteditor/main/resources/less/statusbar.less
View file

@ -6,6 +6,22 @@
position: relative; position: relative;
} }
#label-pages {
margin-left: 40px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
}
#btn-zoom-up {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
#label-pages, #label-zoom { #label-pages, #label-zoom {
cursor: pointer; cursor: pointer;
} }
@ -26,12 +42,12 @@
text-align: center; text-align: center;
} }
#btn-zoom-topage { #btn-zoom-topage, #btn-zoom-towidth {
margin-right: 8px; margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
} }
#btn-zoom-towidth {
margin-right: 8px;
} }
.status-group { .status-group {
@ -80,6 +96,11 @@
min-width: 80px; min-width: 80px;
margin-left: -4px; margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li { li {
text-align: center; text-align: center;
@ -96,6 +117,9 @@
li { li {
text-align: left; text-align: left;
.rtl & {
text-align: right;
}
} }
} }
@ -105,9 +129,21 @@
margin-bottom: 2px; margin-bottom: 2px;
min-width: 130px; min-width: 130px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
> label { > label {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
float:left;
line-height:22px;
.rtl & {
margin-right: 0;
margin-left: 10px;
float: right;
}
} }
> input[type=text] { > input[type=text] {
@ -124,6 +160,12 @@
width: 285px; width: 285px;
font-size: 12px; font-size: 12px;
.rtl & {
padding: 14px 14px 14px 0;
margin-left: 0;
margin-right: 137px;
}
> label { > label {
white-space: normal; white-space: normal;
} }
@ -144,6 +186,11 @@
margin-right: 15px; margin-right: 15px;
overflow: hidden; overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode { &.offline, &.viewmode {
display: none; display: none;
} }
@ -166,6 +213,10 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
}
} }
} }
} }
@ -176,5 +227,9 @@
#btn-select-tool { #btn-select-tool {
margin-right: 8px; margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
} }
} }

14
apps/presentationeditor/main/app/template/StatusBar.template
View file

@ -1,27 +1,27 @@
<div class="statusbar" style="display:table;"> <div class="statusbar" style="display:table;">
<div class="status-group"> <div class="status-group">
<div id="slot-status-btn-preview" style="display: inline-block;margin-left: 9px;" class="margin-top-small"></div> <div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small"></div>
</div> </div>
<div class="status-group dropup"> <div class="status-group dropup">
<label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 7px; display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label> <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<div id="status-goto-box" class="dropdown-menu"> <div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= scope.goToPageText %></label> <label><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div> <div id="status-goto-page" style="display:inline-block;"></div>
</div> </div>
</div> </div>
<div id="status-users-ct" class="status-group dropup" style="display:none;"> <div id="status-users-ct" class="status-group dropup" style="display:none;">
<div class="separator short" style="margin-right: 12px; margin-left: 40px;"></div> <div class="separator short"></div>
<div id="status-users-block" style="display:inline-block; cursor:pointer;"> <div id="status-users-block" style="display:inline-block; cursor:pointer;">
<span id="status-users-icon" class="img-commonctrl" style="margin-bottom: 2px;"></span> <span id="status-users-icon" class="img-commonctrl" style="margin-bottom: 2px;"></span>
<label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label> <label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label>
</div> </div>
<div id="status-users-menu" class="dropdown-menu"> <div id="status-users-menu" class="dropdown-menu">
<label style="display: block;margin-right: 14px;"><%= scope.tipUsers %></label> <label class="tip-users" style="display: block;"><%= scope.tipUsers %></label>
<div id="status-users-list"></div> <div id="status-users-list"></div>
<label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label> <label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label>
</div> </div>
<div class="separator short" style="margin-left: 10px;"></div> <div class="separator short"></div>
</div> </div>
<div class="status-group" style="width:100%; text-align:center;"> <div class="status-group" style="width:100%; text-align:center;">
<label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label> <label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
@ -40,6 +40,6 @@
<label id="status-label-zoom" class="status-label">Zoom 100%</label> <label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div> </div>
</div> </div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button> <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
</div> </div>
</div> </div>

95
apps/presentationeditor/main/resources/less/statusbar.less
View file

@ -27,12 +27,12 @@
text-align: center; text-align: center;
} }
#btn-zoom-topage { #btn-zoom-topage, #btn-zoom-towidth {
margin-right: 8px; margin-right: 8px;
.rtl & {
margin-right: 0;
margin-left: 8px;
} }
#btn-zoom-towidth {
margin-right: 8px;
} }
.status-group { .status-group {
@ -52,6 +52,30 @@
.margin-top-small > .btn-group { .margin-top-small > .btn-group {
margin-top: 3px; margin-top: 3px;
} }
#slot-status-btn-preview {
margin-left: 9px;
.rtl & {
margin-left: 0;
margin-right: 9px;
}
}
#status-label-pages {
margin-left: 7px;
.rtl & {
margin-left: 0;
margin-right: 7px;
}
}
#btn-zoom-up {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
} }
.separator { .separator {
@ -81,6 +105,11 @@
min-width: 80px; min-width: 80px;
margin-left: -4px; margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li { li {
text-align: center; text-align: center;
@ -98,9 +127,21 @@
margin-bottom: 2px; margin-bottom: 2px;
min-width: 130px; min-width: 130px;
.rtl & {
margin-left: 0;
margin-right: 40px;
}
> label { > label {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
float: left;
line-height: 22px;
.rtl & {
margin-right: 0;
margin-left: 10px;
float: right;
}
} }
> input[type=text] { > input[type=text] {
@ -116,6 +157,12 @@
width: 285px; width: 285px;
font-size: 12px; font-size: 12px;
.rtl & {
padding: 14px 14px 14px 0;
margin-left: 0;
margin-right: 142px;
}
> label { > label {
white-space: normal; white-space: normal;
} }
@ -136,6 +183,11 @@
margin-right: 15px; margin-right: 15px;
overflow: hidden; overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode { &.offline, &.viewmode {
display: none; display: none;
} }
@ -158,7 +210,42 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
} }
} }
} }
.tip-users {
margin-right: 14px;
.rtl & {
margin-right: 0;
margin-left: 14px;
}
}
}
#status-users-ct {
.separator {
&:first-of-type {
margin-right: 12px;
margin-left: 40px;
.rtl & {
margin-right: 40px;
margin-left: 12px;
}
}
&:last-of-type {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
}
}
} }

4
apps/spreadsheeteditor/main/app/template/StatusBar.template
View file

@ -1,6 +1,6 @@
<div class="statusbar"> <div class="statusbar">
<div id="status-tabs-scroll" class="status-group"> <div id="status-tabs-scroll" class="status-group" dir="ltr">
<button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button> <button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
<button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button> <button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
</div> </div>
@ -18,7 +18,7 @@
<label id="status-label-zoom" class="status-label">Zoom 100%</label> <label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div> </div>
</div> </div>
<button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button> <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
</div> </div>
<div id="status-math-box" class="status-group"> <div id="status-math-box" class="status-group">
<div class="separator short"></div> <div class="separator short"></div>

41
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -824,12 +824,20 @@ define([
var visible = false; var visible = false;
var right = parseInt(this.boxZoom.css('width')); var right = parseInt(this.boxZoom.css('width'));
if (this.boxMath.is(':visible')) { if (this.boxMath.is(':visible')) {
if (Common.UI.isRTL()) {
this.boxMath.css({'left': right + 'px'});
} else {
this.boxMath.css({'right': right + 'px'}); this.boxMath.css({'right': right + 'px'});
}
right += parseInt(this.boxMath.css('width')); right += parseInt(this.boxMath.css('width'));
visible = true; visible = true;
} }
if (this.boxFiltered.is(':visible')) { if (this.boxFiltered.is(':visible')) {
if (Common.UI.isRTL()) {
this.boxFiltered.css({'left': right + 'px'});
} else {
this.boxFiltered.css({'right': right + 'px'}); this.boxFiltered.css({'right': right + 'px'});
}
right += parseInt(this.boxFiltered.css('width')); right += parseInt(this.boxFiltered.css('width'));
visible = true; visible = true;
} }
@ -840,11 +848,21 @@ define([
var actionWidth = this.actionWidth || 140; var actionWidth = this.actionWidth || 140;
if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
var left = tabsWidth + 129; var left = tabsWidth + 129;
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-right-color', 'transparent');
} else {
this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'}); this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent'); this.boxAction.find('.separator').css('border-left-color', 'transparent');
}
} else {
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'});
this.boxAction.find('.separator').css('border-right-color', '');
} else { } else {
this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'}); this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
this.boxAction.find('.separator').css('border-left-color', ''); this.boxAction.find('.separator').css('border-left-color', '');
}
visible = true; visible = true;
} }
right += parseInt(this.boxAction.css('width')); right += parseInt(this.boxAction.css('width'));
@ -853,18 +871,32 @@ define([
this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'}); this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'}); this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'});
this.boxZoom.css({'top': '0px', 'bottom': 'auto'}); this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
if (Common.UI.isRTL()) {
this.tabBarBox.css('left', right + 'px');
} else {
this.tabBarBox.css('right', right + 'px'); this.tabBarBox.css('right', right + 'px');
}
} else { } else {
if (this.boxAction.is(':visible')) { if (this.boxAction.is(':visible')) {
if (Common.UI.isRTL()) {
this.boxAction.css({'left': right + 'px', 'right': '135px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-right-color', 'transparent');
} else {
this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'}); this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
this.boxAction.find('.separator').css('border-left-color', 'transparent'); this.boxAction.find('.separator').css('border-left-color', 'transparent');
} }
}
this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'}); this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'});
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'}); this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'});
this.boxZoom.css({'top': 'auto', 'bottom': '0px'}); this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
if (Common.UI.isRTL()) {
this.tabBarBox.css('left', '0px');
this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent');
} else {
this.tabBarBox.css('right', '0px'); this.tabBarBox.css('right', '0px');
}
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent'); this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
}
}
if (this.statusMessage) { if (this.statusMessage) {
var status = this.getStatusMessage(this.statusMessage); var status = this.getStatusMessage(this.statusMessage);
@ -890,11 +922,12 @@ define([
}, },
changeViewMode: function (mode) { changeViewMode: function (mode) {
var edit = mode.isEdit; var edit = mode.isEdit,
styleLeft = Common.UI.isRTL() ? 'right' : 'left';
if (edit) { if (edit) {
this.tabBarBox.css('left', '129px'); this.tabBarBox.css(styleLeft, '129px');
} else { } else {
this.tabBarBox.css('left', ''); this.tabBarBox.css(styleLeft, '');
} }
this.tabbar.options.draggable = edit; this.tabbar.options.draggable = edit;

191
apps/spreadsheeteditor/main/resources/less/statusbar.less
View file

@ -7,6 +7,11 @@
float: left; float: left;
padding: 3px 12px 0 10px; padding: 3px 12px 0 10px;
height: 25px; height: 25px;
.rtl & {
float: right;
padding: 3px 10px 0 12px;
}
} }
#status-zoom-box { #status-zoom-box {
@ -16,12 +21,30 @@
right: 0; right: 0;
height: 25px; height: 25px;
.rtl & {
right: auto;
left: 0;
}
.separator { .separator {
margin-top: -3px; margin-top: -3px;
} }
#status-btn-zoomup {
margin-right: 40px;
.rtl & {
margin-right: 0;
margin-left: 40px;
}
}
#status-btn-zoomdown { #status-btn-zoomdown {
margin-left: 10px; margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
} }
#status-label-zoom { #status-label-zoom {
@ -39,6 +62,10 @@
float: right; float: right;
height: 100%; height: 100%;
.rtl & {
float: left;
}
#status-users-icon,#status-users-count { #status-users-icon,#status-users-count {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -67,6 +94,14 @@
left: auto; left: auto;
right: 0; right: 0;
.rtl & {
padding: 14px 14px 14px 0;
margin-right: 0;
margin-left: 160px;
right: auto;
left: 0;
}
> label { > label {
white-space: normal; white-space: normal;
} }
@ -87,6 +122,11 @@
margin-right: 15px; margin-right: 15px;
overflow: hidden; overflow: hidden;
.rtl & {
margin-right: 0;
margin-left: 15px;
}
&.offline, &.viewmode { &.offline, &.viewmode {
display: none; display: none;
} }
@ -109,6 +149,11 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
.rtl & {
padding-left: 0;
padding-right: 16px;
}
} }
} }
} }
@ -122,6 +167,10 @@
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie; border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value solid @border-toolbar;
height: 25px; height: 25px;
.rtl & {
float: right;
}
} }
#status-math-box, #status-math-box,
@ -136,21 +185,42 @@
position: relative; position: relative;
padding-right: 11px; padding-right: 11px;
margin-top: -6px; margin-top: -6px;
.rtl & {
padding-right: 0;
padding-left: 11px;
}
} }
} }
#status-math-box { #status-math-box {
padding-right: 4px; padding-right: 4px;
.rtl & {
padding-right: 0;
padding-left: 4px;
}
label { label {
padding-right: 10px; padding-right: 10px;
.rtl & {
padding-right: 0;
padding-left: 10px;
}
} }
} }
#status-filtered-box { #status-filtered-box {
padding-right: 14px; padding-right: 14px;
.rtl & {
padding-right: 0;
padding-left: 14px;
}
label { label {
&:not(:last-child) { &:not(:last-child) {
padding-right: 10px; padding-right: 10px;
.rtl & {
padding-right: 0;
padding-left: 10px;
}
} }
} }
} }
@ -162,6 +232,11 @@
left: 66px; left: 66px;
right: 160px; right: 160px;
//margin-right: 3px; //margin-right: 3px;
.rtl & {
left: 160px;
right: 66px;
}
} }
#status-sheets-bar { #status-sheets-bar {
@ -183,12 +258,21 @@
&:first-of-type { &:first-of-type {
span { span {
border-left: none; border-left: none;
.rtl & {
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar;
border-right: none;
}
} }
} }
&:last-of-type { &:last-of-type {
span { span {
margin-right: 0; margin-right: 0;
.rtl & {
margin-left: 0;
}
} }
} }
@ -215,6 +299,11 @@
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie; border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-top: @scaled-one-px-value solid @border-toolbar; border-top: @scaled-one-px-value solid @border-toolbar;
.rtl & {
margin-right: 0;
margin-left: -1px;
}
&:hover { &:hover {
border-top-color: @border-toolbar-ie; border-top-color: @border-toolbar-ie;
border-top-color: @border-toolbar; border-top-color: @border-toolbar;
@ -272,12 +361,25 @@
bottom: 0; bottom: 0;
margin-left: -7px; margin-left: -7px;
left: 100%; left: 100%;
.rtl & {
border-left: none;
border-right: 7px solid transparent;
margin-left: 0;
margin-right: -7px;
left: auto;
right: 100%;
}
} }
} }
&.icon-visible { &.icon-visible {
> span { > span {
padding-left: 25px; padding-left: 25px;
.rtl & {
padding-left: 0;
padding-right: 25px;
}
> .toolbar__icon { > .toolbar__icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -285,6 +387,10 @@
top: 0; top: 0;
left: 0; left: 0;
margin: 3px; margin: 3px;
.rtl & {
left: auto;
right: 0;
}
} }
} }
} }
@ -305,6 +411,10 @@
&:first-child { &:first-child {
> span { > span {
padding-left: 8px; padding-left: 8px;
.rtl & {
padding-left: 0;
padding-right: 8px;
}
} }
} }
@ -312,6 +422,13 @@
border-left: 2px solid @text-normal-ie; border-left: 2px solid @text-normal-ie;
border-left: 2px solid @text-normal; border-left: 2px solid @text-normal;
padding-left: 9px; padding-left: 9px;
.rtl & {
border-left: none;
padding-left: 0;
border-right: 2px solid @text-normal-ie;
border-right: 2px solid @text-normal;
padding-right: 9px;
}
} }
&.right { &.right {
@ -322,15 +439,33 @@
border-right: 2px solid @text-normal; border-right: 2px solid @text-normal;
padding-right: 9px; padding-right: 9px;
padding-left: 10px; padding-left: 10px;
.rtl & {
border-left: none;
border-right: none;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
border-left: 2px solid @text-normal-ie;
border-left: 2px solid @text-normal;
padding-right: 10px;
padding-left: 9px;
}
} }
} }
&.icon-visible { &.icon-visible {
> span { > span {
padding-left: 24px; padding-left: 24px;
.rtl & {
padding-left: 0;
padding-right: 24px;
}
} }
&.right { &.right {
> span { > span {
padding-left: 25px; padding-left: 25px;
.rtl & {
padding-left: 0;
padding-right: 25px;
}
} }
} }
} }
@ -340,6 +475,10 @@
margin-left: 20px; margin-left: 20px;
width: @scaled-one-px-value-ie; width: @scaled-one-px-value-ie;
width: @scaled-one-px-value; width: @scaled-one-px-value;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
> span { > span {
display: none; display: none;
padding: 0; padding: 0;
@ -421,23 +560,43 @@
min-width: 112px; min-width: 112px;
margin-left: -4px; margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li { li {
text-align: left; text-align: left;
.rtl & {
text-align: right;
}
a { a {
position: relative; position: relative;
padding-left: 26px; padding-left: 26px;
.rtl & {
padding-left: 0;
padding-right: 26px;
}
.color { .color {
height: 21px; height: 21px;
width: 4px; width: 4px;
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 0; left: 0;
.rtl & {
left: auto;
right: 0;
}
} }
} }
.hidden-mark { .hidden-mark {
margin-left: 12px; margin-left: 12px;
font-style: italic; font-style: italic;
color: @text-secondary; color: @text-secondary;
.rtl & {
margin-left: 0;
margin-right: 12px;
}
} }
} }
} }
@ -452,6 +611,11 @@
min-width: 80px; min-width: 80px;
margin-left: -4px; margin-left: -4px;
.rtl & {
margin-left: 0;
margin-right: -4px;
}
li { li {
text-align: center; text-align: center;
@ -468,6 +632,9 @@
li { li {
text-align: left; text-align: left;
.rtl & {
text-align: right;
}
} }
} }
@ -482,11 +649,22 @@
.dropdown-menu { .dropdown-menu {
margin-top: 0; margin-top: 0;
margin-left: -7px; margin-left: -7px;
.rtl & {
margin-left: 0;
margin-right: -7px;
}
li { li {
> a { > a {
padding: 5px 12px 5px 26px; padding: 5px 12px 5px 26px;
.rtl & {
padding: 5px 56px 5px 12px;
}
&::before { &::before {
margin-left: -22px; margin-left: -22px;
.rtl & {
margin-left: 0;
margin-right: -22px;
}
} }
.item-caption { .item-caption {
min-width: 98px; min-width: 98px;
@ -500,6 +678,11 @@
padding-left: 5px; padding-left: 5px;
color: silver; color: silver;
cursor: pointer; cursor: pointer;
.rtl & {
text-align: left;
padding-left: 0;
padding-right: 5px;
}
} }
} }
} }
@ -516,8 +699,16 @@
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
z-index: @zindex-modal - 1; z-index: @zindex-modal - 1;
.rtl & {
left: auto;
right: 115px;
}
} }
.over-box { .over-box {
display: none; display: none;
} }
.rtl .nav {
padding-right: 0;
}