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

[Header] Refactoring style for share button

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-04 17:09:03 +03:00
parent 34e0c295e1
commit 86a6b68d61
2 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/main/resources/less/header.less
View file

@ -285,18 +285,18 @@
} }
} }
&:active, &.active {
.inner-box-icon, .caption {
opacity: @header-component-active-icon-opacity;
}
}
&:hover:not(:disabled) { &:hover:not(:disabled) {
.inner-box-icon, .caption { .inner-box-icon, .caption {
opacity: @header-component-hover-icon-opacity; opacity: @header-component-hover-icon-opacity;
} }
} }
&:active:not(:disabled), &.active:not(:disabled) {
.inner-box-icon, .caption {
opacity: @header-component-active-icon-opacity;
}
}
&.disabled { &.disabled {
opacity: @component-disabled-opacity; opacity: @component-disabled-opacity;
pointer-events: none; pointer-events: none;

20
apps/common/main/resources/less/toolbar.less
View file

@ -462,9 +462,19 @@
// TODO: move to appropriate module // TODO: move to appropriate module
.btn-header, .btn-users, .btn-header-share { .btn-header, .btn-users, .btn-header-share {
&:not(:active) .icon--inverse { .icon {
background-position-x: 0; &.icon--inverse {
background-position-x: @button-small-normal-icon-offset-x; background-position-x: 0 !important;
background-position-x: @button-small-normal-icon-offset-x !important;
}
}
&:active, &.active {
&:not(.disabled) .icon.toolbar__icon {
&.icon--inverse {
background-position-x: @button-small-active-icon-offset-x !important;
}
}
} }
svg.icon { svg.icon {
@ -494,10 +504,6 @@
background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed; background-color: @highlight-button-pressed;
.icon--inverse {
background-position-x: @button-small-active-icon-offset-x;
}
svg.icon { svg.icon {
fill: @icon-toolbar-header-ie; fill: @icon-toolbar-header-ie;
fill: @icon-toolbar-header; fill: @icon-toolbar-header;