diff options
| author | Joas Schilling <coding@schilljs.com> | 2021-06-07 17:36:41 +0300 |
|---|---|---|
| committer | Joas Schilling <coding@schilljs.com> | 2021-06-07 17:36:41 +0300 |
| commit | 4ba816c16ddd0e085eac48b5e031355a8004774d (patch) | |
| tree | 635f8ba6932372d8e6bccc33fad04a8f6dbb1a87 /src/assets | |
| parent | 30c0529b59ddf78372b075a501654067200dbea2 (diff) | |
FIx "Using / for division is deprecated"
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/avatar.scss | 6 | ||||
| -rw-r--r-- | src/assets/variables.scss | 4 |
2 files changed, 7 insertions, 3 deletions
diff --git a/src/assets/avatar.scss b/src/assets/avatar.scss index 723f78d21..26c22d4f9 100644 --- a/src/assets/avatar.scss +++ b/src/assets/avatar.scss @@ -19,6 +19,8 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ +@use 'sass:math'; + @import 'variables.scss'; @@ -29,7 +31,7 @@ width: $size; height: $size; line-height: $size; - font-size: $size / 2; + font-size: math.div($size, 2); border-radius: 50%; &.icon { @@ -48,7 +50,7 @@ &.guest { line-height: $size; - font-size: $size / 2; + font-size: math.div($size, 2); color: $color-guests-avatar; background-color: $color-background-guests-avatar; padding: 0; diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 927449da2..e7f172075 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -20,6 +20,8 @@ * */ +@use 'sass:math'; + // https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556 // recommended is 48px // 44px is what we choose and have very good visual-to-usability ratio @@ -31,7 +33,7 @@ $icon-size: 16px; // icon padding for a $clickable-area width and a $icon-size icon // ( 44px - 16px ) / 2 -$icon-margin: ($clickable-area - $icon-size) / 2; +$icon-margin: math.div($clickable-area - $icon-size, 2); // transparency background for icons $icon-focus-bg: rgba(127, 127, 127, .25); |