Switch from deprecated node-sass
to sass
This commit is contained in:
parent
2055aaf776
commit
ae3b12bea8
10 changed files with 114 additions and 382 deletions
|
@ -1,6 +1,8 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// Copyright 2021-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@use 'sass:math';
|
||||
|
||||
.module-ReactionPickerPicker {
|
||||
$button-size: 40px;
|
||||
$button-content-size: 28px;
|
||||
|
@ -59,7 +61,9 @@
|
|||
}
|
||||
|
||||
.module-emoji {
|
||||
transform: scale($button-content-size / $emoji-size-from-component);
|
||||
transform: scale(
|
||||
math.div($button-content-size, $emoji-size-from-component)
|
||||
);
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: transform 400ms $ease-out-expo;
|
||||
}
|
||||
|
@ -70,7 +74,7 @@
|
|||
// The margin makes the button take up the same space as the other buttons, while
|
||||
// not actually being as large.
|
||||
height: $button-content-size;
|
||||
margin: ($button-size - $button-content-size) / 2;
|
||||
margin: math.div($button-size - $button-content-size, 2);
|
||||
width: $button-content-size;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: background 200ms $ease-out-expo;
|
||||
|
@ -151,7 +155,9 @@
|
|||
&--emoji {
|
||||
@mixin focus-or-hover-styles {
|
||||
.module-emoji {
|
||||
transform: scale($big-emoji-size / $emoji-size-from-component)
|
||||
transform: scale(
|
||||
math.div($big-emoji-size, $emoji-size-from-component)
|
||||
)
|
||||
translateY(-16px);
|
||||
}
|
||||
}
|
||||
|
@ -194,7 +200,9 @@
|
|||
opacity: 1;
|
||||
|
||||
.module-emoji {
|
||||
transform: scale($big-emoji-size / $emoji-size-from-component);
|
||||
transform: scale(
|
||||
math.div($big-emoji-size, $emoji-size-from-component)
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue