updated toolbar styles according to drafts
This commit is contained in:
parent
6f4e5620fa
commit
079cbe0a60
|
@ -132,6 +132,7 @@
|
||||||
|
|
||||||
.background-ximage(@image, @image2x, @w: auto, @h: auto) {
|
.background-ximage(@image, @image2x, @w: auto, @h: auto) {
|
||||||
background-image: data-uri(%("%s",@image));
|
background-image: data-uri(%("%s",@image));
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
@media
|
@media
|
||||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||||
|
|
|
@ -113,6 +113,14 @@
|
||||||
.inner-box-caption {
|
.inner-box-caption {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
max-width: 107px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
@ -120,6 +128,12 @@
|
||||||
height: @icon-size;
|
height: @icon-size;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.dropdown-toggle {
|
||||||
|
.caption {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-box-icon {
|
.inner-box-icon {
|
||||||
|
@ -202,7 +216,7 @@
|
||||||
|
|
||||||
&.x-huge, .btn-group.x-huge > & {
|
&.x-huge, .btn-group.x-huge > & {
|
||||||
:not(svg).icon {
|
:not(svg).icon {
|
||||||
.background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 96px);
|
.background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 78px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -327,7 +341,7 @@
|
||||||
|
|
||||||
&:not(.split) {
|
&:not(.split) {
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
&.dropdown-toggle {
|
&.dropdown-toggle:not(.x-huge) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 28px;
|
min-width: 28px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,7 +119,7 @@
|
||||||
width: 86px;
|
width: 86px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: block;
|
display: block;
|
||||||
.background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 100px);
|
.background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,16 +127,17 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left{
|
&.left{
|
||||||
box-shadow: 5px 0 20px 5px rgba(255, 255, 255, .8)
|
box-shadow: 5px 0 20px 5px @tabs-bg-color
|
||||||
}
|
}
|
||||||
&.right{
|
&.right{
|
||||||
box-shadow: -5px 0 20px 5px rgba(255, 255, 255, .8)
|
box-shadow: -5px 0 20px 5px @tabs-bg-color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -222,10 +223,6 @@
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.adding {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -282,7 +279,7 @@
|
||||||
.button-normal-icon(review-prev, 17, @toolbar-big-icon-size);
|
.button-normal-icon(review-prev, 17, @toolbar-big-icon-size);
|
||||||
.button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size);
|
.button-normal-icon(btn-dropcap, 18, @toolbar-big-icon-size);
|
||||||
.button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size);
|
.button-normal-icon(~'x-huge .btn-pagebreak', 19, @toolbar-big-icon-size);
|
||||||
|
.button-normal-icon(btn-editheader, 20, @toolbar-big-icon-size);
|
||||||
.button-normal-icon(btn-pageorient, 21, @toolbar-big-icon-size);
|
.button-normal-icon(btn-pageorient, 21, @toolbar-big-icon-size);
|
||||||
.button-normal-icon(btn-pagemargins, 22, @toolbar-big-icon-size);
|
.button-normal-icon(btn-pagemargins, 22, @toolbar-big-icon-size);
|
||||||
.button-normal-icon(btn-pagesize, 23, @toolbar-big-icon-size);
|
.button-normal-icon(btn-pagesize, 23, @toolbar-big-icon-size);
|
||||||
|
|
|
@ -33,11 +33,11 @@
|
||||||
<div class="separator long"></div>
|
<div class="separator long"></div>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="elset">
|
<div class="elset">
|
||||||
<span class="btn-slot adding" id="slot-btn-copy"></span>
|
<span class="btn-slot split" id="slot-btn-copy"></span>
|
||||||
<span class="btn-slot" id="slot-btn-paste"></span>
|
<span class="btn-slot" id="slot-btn-paste"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="elset">
|
<div class="elset">
|
||||||
<span class="btn-slot adding" id="slot-btn-undo"></span>
|
<span class="btn-slot split" id="slot-btn-undo"></span>
|
||||||
<span class="btn-slot" id="slot-btn-redo"></span>
|
<span class="btn-slot" id="slot-btn-redo"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,11 +85,11 @@
|
||||||
<div class="separator long" style="margin-left: 5px;"></div>
|
<div class="separator long" style="margin-left: 5px;"></div>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="elset">
|
<div class="elset">
|
||||||
<span class="btn-slot adding" id="slot-btn-clearstyle"></span>
|
<span class="btn-slot split" id="slot-btn-clearstyle"></span>
|
||||||
<span class="btn-slot split" id="slot-btn-colorschemas"></span>
|
<span class="btn-slot split" id="slot-btn-colorschemas"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="elset">
|
<div class="elset">
|
||||||
<span class="btn-slot adding" id="slot-btn-copystyle"></span>
|
<span class="btn-slot split" id="slot-btn-copystyle"></span>
|
||||||
<span class="btn-slot" id="slot-btn-mailrecepients"></span>
|
<span class="btn-slot" id="slot-btn-mailrecepients"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -106,12 +106,8 @@
|
||||||
</section>
|
</section>
|
||||||
<section class="panel" data-tab="ins">
|
<section class="panel" data-tab="ins">
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="elset">
|
<span class="btn-slot text x-huge btn-pagebreak"></span>
|
||||||
<span class="btn-slot text btn-pagebreak"></span>
|
<span class="btn-slot text x-huge" id="slot-btn-editheader"></span>
|
||||||
</div>
|
|
||||||
<div class="elset">
|
|
||||||
<span class="btn-slot text" id="slot-btn-editheader"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="separator long"></div>
|
<div class="separator long"></div>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
|
|
|
@ -528,7 +528,7 @@ define([
|
||||||
|
|
||||||
this.btnEditHeader = new Common.UI.Button({
|
this.btnEditHeader = new Common.UI.Button({
|
||||||
id: 'id-toolbar-btn-editheader',
|
id: 'id-toolbar-btn-editheader',
|
||||||
cls: 'btn-toolbar',
|
cls: 'btn-toolbar x-huge icon-top',
|
||||||
iconCls: 'btn-editheader',
|
iconCls: 'btn-editheader',
|
||||||
caption: me.capBtnInsHeader,
|
caption: me.capBtnInsHeader,
|
||||||
menu: true
|
menu: true
|
||||||
|
|
|
@ -279,7 +279,7 @@
|
||||||
.button-normal-icon(btn-underline, 35, @toolbar-icon-size);
|
.button-normal-icon(btn-underline, 35, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-undo, 36, @toolbar-icon-size);
|
.button-normal-icon(btn-undo, 36, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-hidenchars, 37, @toolbar-icon-size);
|
.button-normal-icon(btn-hidenchars, 37, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-editheader, 39, @toolbar-icon-size);
|
//.button-normal-icon(btn-editheader, 39, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-mailrecepients, 40, @toolbar-icon-size);
|
.button-normal-icon(btn-mailrecepients, 40, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-synch, 42, @toolbar-icon-size);
|
.button-normal-icon(btn-synch, 42, @toolbar-icon-size);
|
||||||
.button-normal-icon(btn-save-coauth, 41, @toolbar-icon-size);
|
.button-normal-icon(btn-save-coauth, 41, @toolbar-icon-size);
|
||||||
|
|
Loading…
Reference in a new issue