LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix hover style for char count field #7620

Merged
ByronEricPerez merged 6 commits from 7564-comment-box-hides-icon-when-hovering-over-button into master 2022-07-07 22:55:31 +02:00
Conversation 7 Commits 6 Files changed 3 +44 -3
2 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit ba55129c96 - Show all commits

2
ui/component/common/form-components/form-field.jsx
View file

@ -261,7 +261,7 @@ export class FormField extends React.PureComponent<Props> {
{!noEmojis && openEmoteMenu && (
<Button
type="alt"
className="button--file-action"
className="button--comment-icons"
title="Emotes"
onClick={openEmoteMenu}
icon={ICONS.EMOJI}

45
ui/scss/component/_button.scss
View file

@ -350,8 +350,6 @@ a.button--alt {
background-color: transparent;
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
height: initial;
padding: 5px;
&.button--file-action-active {
.icon {
@ -386,6 +384,49 @@ a.button--alt {
}
}
.button--comment-icons {
@extend .button--alt;
color: var(--color-text);
background-color: transparent;
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
height: initial;
padding: 5px;
jessopb commented 2022-07-05 17:28:45 +02:00 (Migrated from github.com)
Review
Copy link

I know it's not super D.R.Y. but I would duplicate the button--file-action class contents here.

Then we can get rid of commented out lines.

I know it's not super D.R.Y. but I would duplicate the button--file-action class contents here. Then we can get rid of commented out lines.
&.button--comment-icons-active {
jessopb commented 2022-07-06 00:01:02 +02:00 (Migrated from github.com)
Review
Copy link

There's a duplicate padding: line here. Also, whenever possible, we're trying to use vars for spacing, as above. Does one of those work?

There's a duplicate padding: line here. Also, whenever possible, we're trying to use vars for spacing, as above. Does one of those work?
.icon {
fill: var(--color-primary-alt);
stroke: var(--color-primary) !important; //fixme
color: var(--color-primary);
}
}
@media (max-width: $breakpoint-small) {
padding: 0 0;
}
.icon {
&:not(.color-override) {
stroke: var(--color-text);
}
}
.button__label {
min-width: 10px;
}
&:last-child {
margin-right: 0;
}
&:hover {
.button__label {
color: var(--color-link);
}
background-color: var(--color-primary);
}
}
[aria-expanded='true'].button--file-action {
background-color: var(--color-header-background);
.icon {