imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use icon component instead of mask-image for formatting buttons (#9732)

Browse source 
Use icon component instead of mask-image for formatting buttons
This commit is contained in:
Florian Duros 2022-12-09 17:01:03 +01:00 • committed by GitHub
parent 5c99450ff5
commit dec72c7683
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

72
res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
View file

@ -21,80 +21,40 @@ limitations under the License.
.mx_FormattingButtons_Button {
--size: 28px;
position: relative;
cursor: pointer;
height: var(--size);
line-height: var(--size);
width: auto;
padding-left: 22px;
width: var(--size);
background-color: transparent;
border: none;
&::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
height: 16px;
width: 16px;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: var(--size);
height: var(--size);
border-radius: 5px;
}
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.mx_FormattingButtons_Button_hover {
&:hover {
&::after {
background: rgba($secondary-content, 0.1);
}
background: rgba($secondary-content, 0.1);
&::before {
background-color: $secondary-content;
.mx_FormattingButtons_Icon {
color: $secondary-content;
}
}
}
.mx_FormattingButtons_active {
&::after {
background: rgba($accent, 0.1);
}
background: rgba($accent, 0.1);
&::before {
background-color: $accent;
.mx_FormattingButtons_Icon {
color: $accent;
}
}
.mx_FormattingButtons_Button_bold::before {
mask-image: url('$(res)/img/element-icons/room/composer/bold.svg');
}
.mx_FormattingButtons_Button_italic::before {
mask-image: url('$(res)/img/element-icons/room/composer/italic.svg');
}
.mx_FormattingButtons_Button_underline::before {
mask-image: url('$(res)/img/element-icons/room/composer/underline.svg');
}
.mx_FormattingButtons_Button_strikethrough::before {
mask-image: url('$(res)/img/element-icons/room/composer/strikethrough.svg');
}
.mx_FormattingButtons_Button_inline_code::before {
mask-image: url('$(res)/img/element-icons/room/composer/inline_code.svg');
.mx_FormattingButtons_Icon {
--size: 16px;
height: var(--size);
width: var(--size);
color: $tertiary-content;
}
}