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

[Common] debug button's layout

Browse source
This commit is contained in:
Maxim Kadushkin 2017-07-11 11:26:42 +03:00
parent 70a9e6deb5
commit d5bfc3244d
3 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/component/Button.js
View file

@ -134,7 +134,9 @@ define([
'<div class="inner-box-icon">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
'<span class="caption"><%= caption %></span>' + '<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' +
'</div>' +
'</button>'; '</button>';
var templateHugeMenuCaption = var templateHugeMenuCaption =
@ -145,7 +147,7 @@ define([
'</div>' + '</div>' +
'<div class="inner-box-caption">' + '<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= caption %></span>' +
'<span class="caret img-commonctrl"></span>' + '<i class="caret img-commonctrl"></i>' +
'</div>' + '</div>' +
'</button>' + '</button>' +
'</div>'; '</div>';
@ -157,7 +159,7 @@ define([
'</button>' + '</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' + '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= caption %></span>' +
'<span class="caret img-commonctrl"></span>' + '<i class="caret img-commonctrl"></i>' +
'</button>' + '</button>' +
'</div>'; '</div>';
@ -198,7 +200,9 @@ define([
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">', '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'<span class="caret img-commonctrl"></span>', '<span class="inner-box-caret">' +
'<i class="caret img-commonctrl"></i>' +
'</span>',
'</button>', '</button>',
'</div>', '</div>',
'<% } else { %>', '<% } else { %>',
@ -208,7 +212,7 @@ define([
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
'<span class="caret img-commonctrl"></span>', '<i class="caret img-commonctrl"></i>',
'<span class="sr-only"></span>', '<span class="sr-only"></span>',
'</button>', '</button>',
'</div>', '</div>',

17
apps/common/main/resources/less/buttons.less
View file

@ -1,3 +1,5 @@
@x-huge-btn-height: 46px;
.btn { .btn {
border-radius: 1px; border-radius: 1px;
color: @gray-deep; color: @gray-deep;
@ -25,7 +27,7 @@
} }
&.x-huge { &.x-huge {
.btnsize(45px); .btnsize(@x-huge-btn-height);
} }
&[disabled] { &[disabled] {
@ -98,12 +100,11 @@
} }
} }
&.x-huge, &.x-huge {
.x-huge {
@icon-size: 26px; @icon-size: 26px;
min-width: 45px; min-width: 45px;
height: 45px; height: @x-huge-btn-height;
img { img {
height: 27px; height: 27px;
@ -127,8 +128,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 20px; line-height: 20px;
max-height: 26px;
height: 26px;
} }
.inner-box-caption { .inner-box-caption {
@ -290,10 +289,8 @@
} }
> .dropdown-toggle:first-child { > .dropdown-toggle:first-child {
padding: 0 2px 0 0; .inner-box-caret {
padding: 0 2px;
.caption {
padding-right: 4px;
} }
} }

5
apps/common/main/resources/less/toolbar.less
View file

@ -171,6 +171,7 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
padding-left: 12px; padding-left: 12px;
font-size: 0;
&:last-child { &:last-child {
padding-right: 12px; padding-right: 12px;
@ -207,10 +208,6 @@
width: 20px; width: 20px;
height: auto; height: auto;
&:not(:first-child) {
margin-left: 1px;
}
&.split { &.split {
width: 31px; width: 31px;
} }