jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Visual tweaks for reaction customization

This commit is contained in:
Evan Hahn 2021-09-15 13:49:16 -05:00 committed by GitHub
parent 3f7957c20d
commit 4e3b64ef64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
stylesheets/components/ReactionPickerPicker.scss
View File

@ -179,32 +179,17 @@
&--menu-style {
#{$root-selector}__button {
$light-focus-or-hover-background: $color-black-alpha-20;
$dark-focus-or-hover-background: $color-white-alpha-40;
&:hover {
@include light-theme {
background: $light-focus-or-hover-background;
}
@include dark-theme {
background: $dark-focus-or-hover-background;
}
}
@include keyboard-mode {
&:focus {
background: $light-focus-or-hover-background;
background: $color-black-alpha-20;
}
}
@include dark-keyboard-mode {
&:focus {
background: $dark-focus-or-hover-background;
background: $color-white-alpha-40;
}
}
#{$root-selector}--something-selected {
opacity: 0.4;
}
&--selected {
opacity: 1;
@ -213,11 +198,20 @@
}
@media (prefers-reduced-motion: no-preference) {
animation: module-ReactionPickerPicker__button-selected 1s ease-in-out
infinite alternate;
animation: module-ReactionPickerPicker__button-selected 200ms
ease-in-out infinite alternate;
}
}
}
// These selectors are unpleasant, but we want to match "menu style" and "something is
// selected" classes on the same element.
@at-root #{&}#{$root-selector}--something-selected {
#{$root-selector}__button:not(#{$root-selector}__button--selected) {
opacity: 0.4;
transform: scale(0.9);
}
}
}
}