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

[common] changed button's icon stylesheet

Browse source
This commit is contained in:
Maxim Kadushkin 2021-03-19 14:31:05 +03:00
parent 5efce72104
commit 807fa505aa
3 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,6 @@
color: @text-normal; color: @text-normal;
border-width: @scaled-one-px-value-ie; border-width: @scaled-one-px-value-ie;
border-width: @scaled-one-px-value; border-width: @scaled-one-px-value;
opacity: @component-normal-opacity;
.btnsize(@value) { .btnsize(@value) {
min-width: @value; min-width: @value;
@ -53,15 +52,11 @@
&:hover { &:hover {
color: @text-normal-ie; color: @text-normal-ie;
color: @text-normal; color: @text-normal;
opacity: @component-hover-opacity;
} }
&:active, &.active { &:active, &.active {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
opacity: @component-active-opacity;
} }
.caret { .caret {
@ -177,7 +172,13 @@
&:not(:disabled) { &:not(:disabled) {
.icon { .icon {
opacity: @button-icon-opacity; opacity: @component-normal-icon-opacity;
}
}
&:hover:not(.disabled) {
.icon {
opacity: @component-hover-icon-opacity;
} }
} }
@ -189,6 +190,14 @@
border-color: @background-normal; border-color: @background-normal;
} }
} }
.icon {
opacity: @component-active-icon-opacity;
}
&:hover .icon {
opacity: @component-active-hover-icon-opacity;
}
} }
} }

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

@ -110,11 +110,11 @@
--image-border-types-filter-selected: invert(100%) brightness(4); --image-border-types-filter-selected: invert(100%) brightness(4);
--component-normal-icon-filter: invert(100%); --component-normal-icon-filter: invert(100%);
--component-normal-opacity: .8; --component-normal-icon-opacity: .8;
--component-hover-opacity: .8; --component-hover-icon-opacity: .8;
--component-active-opacity: .8; --component-active-icon-opacity: .8;
--component-active-hover-icon-opacity: .8;
--component-disabled-opacity: .3; --component-disabled-opacity: .3;
--button-icon-opacity: .8;
--menu-icon-item-checked-offset-x: -20px; --menu-icon-item-checked-offset-x: -20px;
} }

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

@ -122,9 +122,10 @@
--image-border-types-filter-selected: none; --image-border-types-filter-selected: none;
--component-normal-icon-filter: none; --component-normal-icon-filter: none;
--component-normal-opacity: .8; --component-normal-icon-opacity: .8;
--component-hover-opacity: .8; --component-hover-icon-opacity: .8;
--component-active-opacity: .8; --component-active-icon-opacity: .8;
--component-active-hover-icon-opacity: .8;
--component-disabled-opacity: .4; --component-disabled-opacity: .4;
//--button-icon-opacity: 1; //--button-icon-opacity: 1;
} }
@ -199,11 +200,12 @@
@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);
@component-normal-icon-filter: var(--component-normal-icon-filter); @component-normal-icon-filter: var(--component-normal-icon-filter);
@component-normal-opacity: var(--component-normal-opacity, .8); @component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);
@component-hover-opacity: var(--component-hover-opacity, .8); @component-hover-icon-opacity: var(--component-hover-icon-opacity, .8);
@component-active-opacity: var(--component-active-opacity, .8); @component-active-icon-opacity: var(--component-active-icon-opacity, .8);
@component-active-hover-icon-opacity: var(--component-active-hover-icon-opacity, .8);
@component-disabled-opacity: var(--component-disabled-opacity, .4); @component-disabled-opacity: var(--component-disabled-opacity, .4);
@button-icon-opacity: var(--button-icon-opacity, 1); //@button-icon-opacity: var(--button-icon-opacity, 1);
@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0); @menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);