mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Visual tweaks for reaction customization

Browse source
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
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 { &--menu-style {
#{$root-selector}__button { #{$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 { @include keyboard-mode {
&:focus { &:focus {
background: $light-focus-or-hover-background; background: $color-black-alpha-20;
} }
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
&:focus { &:focus {
background: $dark-focus-or-hover-background; background: $color-white-alpha-40;
} }
} }
#{$root-selector}--something-selected {
opacity: 0.4;
}
&--selected { &--selected {
opacity: 1; opacity: 1;
@ -213,11 +198,20 @@
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
animation: module-ReactionPickerPicker__button-selected 1s ease-in-out animation: module-ReactionPickerPicker__button-selected 200ms
infinite alternate; 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);
}
}
} }
} }