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 { &.active, &:active {
&:not(:disabled):not(.disabled) { &:not(:disabled):not(.disabled) {
.toolbar__icon { .toolbar__icon {
@btn-active-icon-offset: -20px; background-position-x: var(--button-small-active-icon-offset-x, 0);
background-position-x: @btn-active-icon-offset;
--bgX: @btn-active-icon-offset;
} }
} }
} }
@ -23,6 +21,6 @@
{{/spritesheet}} {{/spritesheet}}
{{#sprites}} {{#sprites}}
{{#parselang name}}.{{name}}{{/parselang}} { {{#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}} {{/sprites}}

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

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

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

@ -86,13 +86,8 @@
:root { :root {
--bgX: 0px; --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 { &.theme-dark {
--bgX: -20px; --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{ &.active, &:active{
&:not(:disabled):not(.disabled) { &:not(:disabled):not(.disabled) {
.icon { .icon {
@btn-active-icon-offset: -1 * @icon-size; background-position-x: @offset;
background-position-x: @btn-active-icon-offset;
--bgX: @btn-active-icon-offset;
} }
} }
} }
&.active svg.icon, //&.active svg.icon,
&:active svg.icon {fill:#fff;} //&:active svg.icon {fill:#fff;}
} }
.button-otherstates-icon2(@icon-class, @icon-size) { .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 (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi) { only screen and (min-resolution: 144dpi) {
width:calc(~"40px/1.5"); //width:calc(~"40px/1.5");
height:calc(~"40px/1.5"); //height:calc(~"40px/1.5");
} }
} }
@ -273,11 +273,11 @@
.icon-top { .icon-top {
&.x-huge { &.x-huge {
.btn&, .btn-group& .btn-toolbar { .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 { .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-dark-cell-title-selected: #333;
--canvas-scroll-controls: fade(#000, 20%); --canvas-scroll-controls: fade(#000, 20%);
--canvas-scroll-controls-hover: fade(#000, 30%); --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-dark-cell-title-selected: #111;
--canvas-scroll-controls: #f1f1f1; --canvas-scroll-controls: #f1f1f1;
--canvas-scroll-controls-hover: #cfcfcf; --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 // Background
@ -122,3 +127,8 @@
@icon-toolbar-header: var(--icon-toolbar-header); @icon-toolbar-header: var(--icon-toolbar-header);
@icon-contrast-popover: var(--icon-contrast-popover); @icon-contrast-popover: var(--icon-contrast-popover);
@icon-notification-badge: var(--icon-notification-badge); @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);