Switch from deprecated node-sass to sass

This commit is contained in:
Evan Hahn 2022-02-11 10:59:24 -06:00 committed by GitHub
parent 2055aaf776
commit ae3b12bea8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 114 additions and 382 deletions

View file

@ -1,4 +1,4 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-AddGroupMembersModal {
@ -51,7 +51,7 @@
height: 60vh;
min-height: 400px;
'#{$root-selector}__header' {
#{$root-selector}__header {
padding: $padding;
}
}
@ -59,7 +59,7 @@
&--confirm-adds {
@include modal-reset;
'#{$root-selector}__button-container' {
#{$root-selector}__button-container {
margin-top: 12px;
padding: 0;
}

View file

@ -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) {