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

[common] changed button icon style according new design

Browse source
This commit is contained in:
Maxim Kadushkin 2020-12-26 00:49:09 +03:00
parent 47bc4211dc
commit e046e3b57e
6 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,9 +3,7 @@
&.active, &:active {
&:not(:disabled):not(.disabled) {
.toolbar__icon {
@btn-active-icon-offset: -20px;
background-position-x: @btn-active-icon-offset;
--bgX: @btn-active-icon-offset;
background-position-x: var(--button-small-active-icon-offset-x, 0);
}
}
}
@ -23,6 +21,6 @@
{{/spritesheet}}
{{#sprites}}
{{#parselang name}}.{{name}}{{/parselang}} {
background-position: var(--bgX) {{px.offset_y}};
background-position: var(--button-small-normal-icon-offset-x, 0) {{px.offset_y}};
}
{{/sprites}}

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

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

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

@ -86,13 +86,8 @@
:root {
--bgX: 0px;
@button-big-icon-width: 28px;
@button-big-icon-offset: -@button-big-icon-width;
--button-big-icon-width: @button-big-icon-width;
&.theme-dark {
--bgX: -20px;
--button-big-theme-icon-offset: @button-big-icon-offset;
}
}
@ -119,19 +114,17 @@
}
}
.mx-button-otherstates-icon2(@icon-size) {
.mx-button-otherstates-icon2(@offset) {
&.active, &:active{
&:not(:disabled):not(.disabled) {
.icon {
@btn-active-icon-offset: -1 * @icon-size;
background-position-x: @btn-active-icon-offset;
--bgX: @btn-active-icon-offset;
background-position-x: @offset;
}
}
}
&.active svg.icon,
&:active svg.icon {fill:#fff;}
//&.active svg.icon,
//&:active svg.icon {fill:#fff;}
}
.button-otherstates-icon2(@icon-class, @icon-size) {

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

@ -221,8 +221,8 @@
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi) {
width:calc(~"40px/1.5");
height:calc(~"40px/1.5");
//width:calc(~"40px/1.5");
//height:calc(~"40px/1.5");
}
}
@ -273,11 +273,11 @@
.icon-top {
&.x-huge {
.btn&, .btn-group& .btn-toolbar {
.mx-button-otherstates-icon2(@x-huge-btn-icon-size);
.mx-button-otherstates-icon2(@button-big-active-icon-offset-x);
}
.btn.small {
.mx-button-otherstates-icon2(20px);
.mx-button-otherstates-icon2(@button-small-active-icon-offset-x);
}
}
}

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

@ -61,5 +61,10 @@
--canvas-dark-cell-title-selected: #333;
--canvas-scroll-controls: fade(#000, 20%);
--canvas-scroll-controls-hover: fade(#000, 30%);
--button-small-normal-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -20px;
--button-big-normal-icon-offset-x: -28px;
--button-big-active-icon-offset-x: -28px;
}
}

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

@ -70,6 +70,11 @@
--canvas-dark-cell-title-selected: #111;
--canvas-scroll-controls: #f1f1f1;
--canvas-scroll-controls-hover: #cfcfcf;
//--button-small-normal-icon-offset-x: 0;
//--button-small-active-icon-offset-x: 0;
//--button-big-normal-icon-offset-x: 0;
//--button-big-active-icon-offset-x: 0;
}
// Background
@ -122,3 +127,8 @@
@icon-toolbar-header: var(--icon-toolbar-header);
@icon-contrast-popover: var(--icon-contrast-popover);
@icon-notification-badge: var(--icon-notification-badge);
@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-big-normal-icon-offset-x: var(--button-big-normal-icon-offset-x, 0);
@button-big-active-icon-offset-x: var(--button-big-active-icon-offset-x, 0);