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

[stylesheets] changed stylesheet for large button icon

Browse source
This commit is contained in:
Maxim Kadushkin 2020-12-30 19:07:14 +03:00
parent c3744fb173
commit 1c12f4ce06
7 changed files with 61 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/resources/img/toolbar/1x/big/.css.handlebars
View file

@ -4,7 +4,7 @@
&.active, &:active { &.active, &:active {
&:not(:disabled):not(.disabled) { &:not(:disabled):not(.disabled) {
.toolbar__icon { .toolbar__icon {
background-position-x: var(--button-big-active-icon-offset-x,0); background-position-x: var(--button-huge-active-icon-offset-x,0);
} }
} }
} }
@ -16,6 +16,6 @@
{{/spritesheet}} {{/spritesheet}}
{{#sprites}} {{#sprites}}
{{#parselang name}}.x-huge .{{name}}{{/parselang}} { {{#parselang name}}.x-huge .{{name}}{{/parselang}} {
background-position: var(--button-big-normal-icon-offset-x,0) {{px.offset_y}}; background-position: var(--button-huge-normal-icon-offset-x,0) {{px.offset_y}};
} }
{{/sprites}} {{/sprites}}

4
apps/common/main/resources/less/asc-mixins.less
View file

@ -91,10 +91,10 @@
} }
} }
.button-normal-icon(@icon-class, @index, @icon-size) { .button-normal-icon(@icon-class, @index, @icon-size, @normal-h-offset: 0px) {
.@{icon-class} { .@{icon-class} {
background-position: -0*@icon-size -@index*@icon-size; background-position: -0*@icon-size -@index*@icon-size;
background-position: var(--bgX) -@index*@icon-size; background-position: @normal-h-offset -@index*@icon-size;
} }
// .@{icon-class} {background-position-y: -@index*@icon-size;} // .@{icon-class} {background-position-y: -@index*@icon-size;}
} }

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

@ -274,7 +274,7 @@
.icon-top { .icon-top {
&.x-huge { &.x-huge {
.btn&, .btn-group& .btn-toolbar { .btn&, .btn-group& .btn-toolbar {
.mx-button-otherstates-icon2(@button-big-active-icon-offset-x); .mx-button-otherstates-icon2(@button-huge-active-icon-offset-x);
} }
.btn.small { .btn.small {

6
apps/common/main/resources/less/colors-table-dark.less
View file

@ -65,8 +65,10 @@
--button-small-normal-icon-offset-x: -20px; --button-small-normal-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -20px; --button-small-active-icon-offset-x: -20px;
--button-big-normal-icon-offset-x: -28px; --button-large-normal-icon-offset-x: -31px;
--button-big-active-icon-offset-x: -28px; --button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: -28px;
--button-huge-active-icon-offset-x: -28px;
--modal-window-mask-opacity: 0.6; --modal-window-mask-opacity: 0.6;
--image-border-types-filter: invert(100%) brightness(4); --image-border-types-filter: invert(100%) brightness(4);

12
apps/common/main/resources/less/colors-table.less
View file

@ -74,8 +74,10 @@
//--button-small-normal-icon-offset-x: 0; //--button-small-normal-icon-offset-x: 0;
//--button-small-active-icon-offset-x: 0; //--button-small-active-icon-offset-x: 0;
//--button-big-normal-icon-offset-x: 0; //--button-large-normal-icon-offset-x: 0;
//--button-big-active-icon-offset-x: 0; //--button-large-active-icon-offset-x: 0;
//--button-huge-normal-icon-offset-x: 0;
//--button-huge-active-icon-offset-x: 0;
--button-header-normal-icon-offset-x: -20px; --button-header-normal-icon-offset-x: -20px;
--button-header-active-icon-offset-x: -20px; --button-header-active-icon-offset-x: -20px;
@ -138,8 +140,10 @@
@button-small-normal-icon-offset-x: var(--button-small-normal-icon-offset-x,0); @button-small-normal-icon-offset-x: var(--button-small-normal-icon-offset-x,0);
@button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0); @button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0);
@button-big-normal-icon-offset-x: var(--button-big-normal-icon-offset-x, 0); @button-large-normal-icon-offset-x: var(--button-large-normal-icon-offset-x, 0);
@button-big-active-icon-offset-x: var(--button-big-active-icon-offset-x, 0); @button-large-active-icon-offset-x: var(--button-large-active-icon-offset-x, 0);
@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px); @button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px); @button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);

60
apps/documenteditor/main/resources/less/advanced-settings.less
View file

@ -2,44 +2,44 @@
.background-ximage-v2('right-panels/LargeBorders.png', 62px, @commonimage: false); .background-ximage-v2('right-panels/LargeBorders.png', 62px, @commonimage: false);
} }
.button-normal-icon(btn-adv-paragraph-all, 0, 31px); .button-normal-icon(btn-adv-paragraph-all, 0, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-bottom, 1, 31px); .button-normal-icon(btn-adv-paragraph-bottom, 1, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-left, 2, 31px); .button-normal-icon(btn-adv-paragraph-left, 2, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-inner-hor, 3, 31px); .button-normal-icon(btn-adv-paragraph-inner-hor, 3, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-none, 4, 31px); .button-normal-icon(btn-adv-paragraph-none, 4, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-outer, 5, 31px); .button-normal-icon(btn-adv-paragraph-outer, 5, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-right, 6, 31px); .button-normal-icon(btn-adv-paragraph-right, 6, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-paragraph-top, 7, 31px); .button-normal-icon(btn-adv-paragraph-top, 7, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-all-none, 8, 31px); .button-normal-icon(btn-adv-position-all-none, 8, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-all-table, 9, 31px); .button-normal-icon(btn-adv-position-all-table, 9, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-all, 10, 31px); .button-normal-icon(btn-adv-position-all, 10, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-inner-none, 11, 31px); .button-normal-icon(btn-adv-position-inner-none, 11, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-inner-table, 12, 31px); .button-normal-icon(btn-adv-position-inner-table, 12, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-inner, 13, 31px); .button-normal-icon(btn-adv-position-inner, 13, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-none, 14, 31px); .button-normal-icon(btn-adv-position-none, 14, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-none-table, 15, 31px); .button-normal-icon(btn-adv-position-none-table, 15, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-none-none, 16, 31px); .button-normal-icon(btn-adv-position-none-none, 16, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-outer-none, 17, 31px); .button-normal-icon(btn-adv-position-outer-none, 17, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-outer-table, 18, 31px); .button-normal-icon(btn-adv-position-outer-table, 18, 31px, @button-large-normal-icon-offset-x);
.button-normal-icon(btn-adv-position-outer, 19, 31px); .button-normal-icon(btn-adv-position-outer, 19, 31px, @button-large-normal-icon-offset-x);
.button-otherstates-icon(btn-borders-large, 31px); .button-otherstates-icon(btn-borders-large, 31px);
.icon-advanced-wrap { .icon-advanced-wrap {
.background-ximage-v2('right-panels/right_panel_wrap_btns.png', 90px, @commonimage: false); .background-ximage-v2('right-panels/right_panel_wrap_btns.png', 90px, @commonimage: false);
} }
.button-normal-icon(btn-wrap-inline, 0, @x-huge-icon-size); .button-normal-icon(btn-wrap-inline, 0, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-square, 1, @x-huge-icon-size); .button-normal-icon(btn-wrap-square, 1, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-tight, 2, @x-huge-icon-size); .button-normal-icon(btn-wrap-tight, 2, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-through, 3, @x-huge-icon-size); .button-normal-icon(btn-wrap-through, 3, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-topbottom, 4, @x-huge-icon-size); .button-normal-icon(btn-wrap-topbottom, 4, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-infront, 5, @x-huge-icon-size); .button-normal-icon(btn-wrap-infront, 5, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-behind, 6, @x-huge-icon-size); .button-normal-icon(btn-wrap-behind, 6, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-drop-none, 7, @x-huge-icon-size); .button-normal-icon(btn-drop-none, 7, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-drop-text, 8, @x-huge-icon-size); .button-normal-icon(btn-drop-text, 8, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-drop-margin, 9, @x-huge-icon-size); .button-normal-icon(btn-drop-margin, 9, @x-huge-icon-size, @button-huge-normal-icon-offset-x);
.button-otherstates-icon(icon-advanced-wrap, @x-huge-icon-size); .button-otherstates-icon(icon-advanced-wrap, @x-huge-icon-size);
.combo-arrow-style { .combo-arrow-style {

28
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -97,23 +97,23 @@
.background-ximage-v2('right-panels/RightPanelBigBtns.png', 74px, @commonimage: false); .background-ximage-v2('right-panels/RightPanelBigBtns.png', 74px, @commonimage: false);
} }
.button-normal-icon(btn-colontitul-tl, 3, @huge-icon-size); .button-normal-icon(btn-colontitul-tl, 3, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-colontitul-tc, 4, @huge-icon-size); .button-normal-icon(btn-colontitul-tc, 4, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-colontitul-tr, 5, @huge-icon-size); .button-normal-icon(btn-colontitul-tr, 5, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-colontitul-bl, 6, @huge-icon-size); .button-normal-icon(btn-colontitul-bl, 6, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-colontitul-bc, 7, @huge-icon-size); .button-normal-icon(btn-colontitul-bc, 7, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-colontitul-br, 8, @huge-icon-size); .button-normal-icon(btn-colontitul-br, 8, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-none, 9, @huge-icon-size); .button-normal-icon(btn-wrap-none, 9, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-wrap-parallel, 10, @huge-icon-size); .button-normal-icon(btn-wrap-parallel, 10, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-table-align-left, 0, @huge-icon-size); .button-normal-icon(btn-table-align-left, 0, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-table-align-center, 1, @huge-icon-size); .button-normal-icon(btn-table-align-center, 1, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-table-align-right, 2, @huge-icon-size); .button-normal-icon(btn-table-align-right, 2, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-frame-inline, 9, @huge-icon-size); .button-normal-icon(btn-frame-inline, 9, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-frame-flow, 10, @huge-icon-size); .button-normal-icon(btn-frame-flow, 10, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-normal-icon(btn-frame-none, 11, @huge-icon-size); .button-normal-icon(btn-frame-none, 11, @huge-icon-size, @button-huge-normal-icon-offset-x);
.button-otherstates-icon(icon-right-panel, @huge-icon-size); .button-otherstates-icon(icon-right-panel, @huge-icon-size);