From e046e3b57ea5fcdb785b30bf2cf255083f892fd0 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 26 Dec 2020 00:49:09 +0300 Subject: [PATCH] [common] changed button icon style according new design --- .../main/resources/img/toolbar/1x/.css.handlebars | 6 ++---- .../resources/img/toolbar/1x/big/.css.handlebars | 6 ++---- apps/common/main/resources/less/asc-mixins.less | 15 ++++----------- apps/common/main/resources/less/buttons.less | 8 ++++---- .../main/resources/less/colors-table-dark.less | 5 +++++ apps/common/main/resources/less/colors-table.less | 10 ++++++++++ 6 files changed, 27 insertions(+), 23 deletions(-) diff --git a/apps/common/main/resources/img/toolbar/1x/.css.handlebars b/apps/common/main/resources/img/toolbar/1x/.css.handlebars index 3d6be8dd7..ababdd30d 100644 --- a/apps/common/main/resources/img/toolbar/1x/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/1x/.css.handlebars @@ -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}} diff --git a/apps/common/main/resources/img/toolbar/1x/big/.css.handlebars b/apps/common/main/resources/img/toolbar/1x/big/.css.handlebars index 0f8eef5fb..1021235ef 100644 --- a/apps/common/main/resources/img/toolbar/1x/big/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/1x/big/.css.handlebars @@ -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}} diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less index ec1db29a7..ffd7cac28 100644 --- a/apps/common/main/resources/less/asc-mixins.less +++ b/apps/common/main/resources/less/asc-mixins.less @@ -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) { diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index a4932e7b5..a0e322bb4 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -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); } } } diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index c34e949a1..ccdd64f4a 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -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; } } diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 420b56ed5..b0e6fcccd 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -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);